/* ═══════════════════════════════════════════════════════════════
   PREMIUM HEADER  (hdr- prefix)
════════════════════════════════════════════════════════════════ */
.hdr {
  position: fixed;
  top: 0;
  z-index: 999;
  width:100%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(26,61,40,0.08);
  box-shadow: 0 2px 20px rgba(26,61,40,0.07);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.hdr.hdr-scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 4px 28px rgba(26,61,40,0.12);
}
.hdr-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.hdr-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.hdr-logo  img{width:80px}
.hdr-logo-icon { flex-shrink: 0; }
.hdr-logo-text { display: flex; flex-direction: column; gap: 1px; }
.hdr-brand {
  font-size: 20px;
  font-weight: 900;
  color: #1a3d28;
  letter-spacing: -0.3px;
  line-height: 1;
}
.hdr-tagline {
  font-size: 10.5px;
  font-weight: 600;
  color: #6b8c7a;
  line-height: 1;
}
.hdr-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.hdr-nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #2a3a30;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.hdr-nav-link:hover, .hdr-nav-active { color: #1a3d28; background: #eaf4ee; }
.hdr-nav-dd { position: relative; }
.hdr-dd-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid #dde8e1;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(26,61,40,0.14);
  min-width: 200px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 100;
}
.hdr-nav-dd:hover .hdr-dd-panel {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.hdr-dd-item {
  display: block;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2a3a30;
  text-decoration: none;
  border-radius: 9px;
  transition: background 0.18s, color 0.18s;
}
.hdr-dd-item:hover { background: #eaf4ee; color: #1a3d28; }
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hdr-call-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  padding: 7px 13px;
  border: 1.5px solid #dde8e1;
  border-radius: 12px;
  transition: border-color 0.2s, background 0.2s;
}
.hdr-call-wrap:hover { border-color: #b5d8c5; background: #f4faf6; }
.hdr-call-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #1a3d28;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hdr-call-text span { display: block; font-size: 10px; font-weight: 600; color: #6b8c7a; line-height: 1; }
.hdr-call-text strong { display: block; font-size: 13.5px; font-weight: 800; color: #1a3d28; line-height: 1.3; }
.hdr-wa-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(37,211,102,0.3);
}
.hdr-wa-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,211,102,0.45); }
.hdr-book-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #1a3d28;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s, transform 0.18s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(26,61,40,0.22);
}
.hdr-book-btn:hover { background: #2a6044; transform: translateY(-1px); }
.hdr-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hdr-burger span {
  display: block;
  width: 24px; height: 2.5px;
  background: #1a3d28;
  border-radius: 2px;
  transition: transform 0.28s, opacity 0.28s;
}
.hdr.hdr-menu-open .hdr-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hdr.hdr-menu-open .hdr-burger span:nth-child(2) { opacity: 0; }
.hdr.hdr-menu-open .hdr-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.hdr-mobile-nav {
  display: none;
  flex-direction: column;
  padding: 16px 20px 20px;
  background: #fff;
  border-top: 1px solid #edf3ef;
  gap: 4px;
}
.hdr.hdr-menu-open .hdr-mobile-nav { display: flex; }
.hdr-m-link {
  font-size: 15px;
  font-weight: 700;
  color: #2a3a30;
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 10px;
  transition: background 0.18s, color 0.18s;
}
.hdr-m-link:hover, .hdr-m-active { background: #eaf4ee; color: #1a3d28; }
.hdr-m-ctas { display: flex; gap: 10px; margin-top: 8px; }
.hdr-m-call {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px;
  border: 1.5px solid #1a3d28;
  border-radius: 11px;
  font-size: 14px; font-weight: 700; color: #1a3d28;
  text-decoration: none;
  transition: background 0.2s;
}
.hdr-m-call:hover { background: #eaf4ee; }
.hdr-m-book {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 11px;
  background: #1a3d28;
  border-radius: 11px;
  font-size: 14px; font-weight: 700; color: #fff;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION  (hero- prefix)
════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  background: linear-gradient(145deg, #faf7f2 0%, #f4f9f5 45%, #fffdf8 100%);
  overflow: hidden;
  padding: 0;
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 70px;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-bg-blob { position: absolute; border-radius: 50%; filter: blur(100px); }
.hero-bb1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(42,96,68,0.14) 0%, transparent 70%); top: -200px; left: -200px; }
.hero-bb2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(201,135,58,0.12) 0%, transparent 70%); bottom: -100px; right: -100px; }
.hero-bb3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(26,61,40,0.07) 0%, transparent 70%); top: 30%; left: 40%; }
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 28px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}
.hero-left { display: flex; flex-direction: column; gap: 24px; }
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid #f5d8a8;
  border-radius: 30px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #8b5e2a;
  box-shadow: 0 2px 12px rgba(201,135,58,0.12);
  width: fit-content;
}
.hero-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 700;
  line-height: 1.15;
  color: #1a2e1e;
  margin: 0;
}
.hero-hl-green { color: #1a5c38; }
.hero-hl-gold  { color: #c9873a; }
.hero-sub {
  font-size: 16px;
  color: #4a5e50;
  line-height: 1.75;
  margin: 0;
  max-width: 500px;
}
.hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a3d28; color: #fff;
  font-size: 14.5px; font-weight: 700;
  padding: 13px 24px; border-radius: 13px; text-decoration: none;
  box-shadow: 0 6px 24px rgba(26,61,40,0.28);
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
}
.hero-btn-primary:hover { background: #2a6044; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(26,61,40,0.38); }
.hero-btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff;
  font-size: 14px; font-weight: 700;
  padding: 13px 22px; border-radius: 13px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(37,211,102,0.28);
  transition: background 0.2s, transform 0.18s;
}
.hero-btn-wa:hover { background: #1da851; transform: translateY(-2px); }
.hero-btn-watch {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none;
  font-size: 13.5px; font-weight: 700; color: #3a5244;
  cursor: pointer; padding: 6px 0; font-family: inherit;
  transition: color 0.2s;
}
.hero-btn-watch:hover { color: #1a3d28; }
.hero-play-circle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #1a3d28; background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #1a3d28; flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.hero-btn-watch:hover .hero-play-circle { background: #1a3d28; color: #fff; }
.hero-trust-strip {
  display: flex; gap: 0;
  background: #fff; border-radius: 16px;
  border: 1.5px solid #dde8e1; overflow: hidden;
  box-shadow: 0 4px 20px rgba(26,61,40,0.07);
}
.hero-ts-item {
  flex: 1; display: flex; align-items: center; gap: 9px;
  padding: 13px 12px; border-right: 1px solid #edf3ef;
  min-width: 0; transition: background 0.2s;
}
.hero-ts-item:last-child { border-right: none; }
.hero-ts-item:hover { background: #f4faf6; }
.hero-ts-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #eaf4ee; color: #1a5c38;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-ts-item strong { display: block; font-size: 11.5px; font-weight: 800; color: #1a2e1e; line-height: 1.2; white-space: nowrap; }
.hero-ts-item span { display: block; font-size: 10.5px; color: #6b8c7a; line-height: 1.3; white-space: nowrap; }
.hero-right { position: relative; }
.hero-img-wrap { position: relative; border-radius: 32px; overflow: visible; }
.hero-img {
  width: 100%; height: 560px; object-fit: cover; object-position: center top;
  border-radius: 32px; display: block;
  box-shadow: 0 20px 60px rgba(26,61,40,0.22);
}
.hero-img-overlay {
  position: absolute; inset: 0; border-radius: 32px;
  background: linear-gradient(to bottom, transparent 50%, rgba(10,26,14,0.35) 100%);
}
.hero-float {
  position: absolute;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(26,61,40,0.16);
  border: 1px solid rgba(255,255,255,0.8);
  animation: heroFloatIn 0.7s ease both;
}
@keyframes heroFloatIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-float-rating { top: 24px; right: -24px; padding: 14px 18px; display: flex; flex-direction: column; gap: 5px; min-width: 150px; animation-delay: 0.2s; }
.hero-fr-stars { color: #f5a623; font-size: 13px; letter-spacing: 1px; }
.hero-fr-num { font-size: 28px; font-weight: 900; color: #1a2e1e; line-height: 1; }
.hero-fr-num span { font-size: 14px; color: #6b8c7a; font-weight: 600; }
.hero-fr-label { font-size: 11px; color: #6b8c7a; font-weight: 600; }
.hero-fr-faces { display: flex; }
.hero-fr-face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; }
.hero-fr-face:first-child { margin-left: 0; }
.hero-fr-tag { font-size: 11px; font-weight: 700; color: #2a6044; }
.hero-float-sat { top: 50%; right: -28px; transform: translateY(-50%); padding: 16px 18px; text-align: center; min-width: 130px; animation-delay: 0.35s; }
.hero-sat-num { font-size: 32px; font-weight: 900; color: #1a2e1e; line-height: 1; }
.hero-sat-icon { margin: 4px 0; }
.hero-sat-label { font-size: 11px; color: #4a5e50; font-weight: 600; line-height: 1.4; }
.hero-float-24 { bottom: 110px; right: -28px; padding: 14px 18px; text-align: center; min-width: 130px; animation-delay: 0.5s; }
.hero-24-num { font-size: 28px; font-weight: 900; color: #1a3d28; line-height: 1; }
.hero-24-icon { margin: 4px 0; }
.hero-24-label { font-size: 11px; color: #4a5e50; font-weight: 600; line-height: 1.4; }
.hero-float-testi { bottom: 28px; left: -24px; padding: 18px 20px; max-width: 260px; animation-delay: 0.45s; }
.hero-testi-quote { font-size: 36px; color: #c9873a; line-height: 1; margin-bottom: 4px; }
.hero-testi-text { font-size: 12.5px; color: #2a3a30; line-height: 1.6; margin: 0 0 8px; }
.hero-testi-author { font-size: 12px; color: #3a5244; font-weight: 700; margin-bottom: 5px; }
.hero-testi-stars { color: #f5a623; font-size: 13px; letter-spacing: 1px; }
.hero-float-gallery { top: 28px; left: -16px; display: flex; gap: 6px; padding: 10px; border-radius: 14px; animation-delay: 0.6s; }
.hero-gal-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; transition: transform 0.22s; }
.hero-gal-thumb:hover { transform: scale(1.07); }
.hero-gal-more {
  width: 56px; height: 56px; border-radius: 10px;
  background: #1a3d28; color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; gap: 1px; transition: background 0.2s;
}
.hero-gal-more span { font-size: 9px; font-weight: 600; opacity: 0.85; }
.hero-gal-more:hover { background: #2a6044; }

/* ── MOBILE HERO: Rich two-zone layout matching reference ────── */

/* ── Mobile: trust strip below hero as icon grid ─────────────── */

/* Hide mobile-only elements on desktop */

/* ═══════════════════════════════════════════════════════════════
   QUICK SERVICE EXPLORER  (qse- prefix)
════════════════════════════════════════════════════════════════ */
.qse-section {
  background: linear-gradient(180deg, #fffdf8 0%, #f5faf7 100%);
  padding: 0 0 56px;
  position: relative;
}
.qse-inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.qse-header {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 44px 0 32px;
}
.qse-deco-line { width: 80px; height: 1.5px; background: linear-gradient(90deg, transparent, #c9873a); opacity: 0.5; }
.qse-deco-line:last-child { background: linear-gradient(270deg, transparent, #c9873a); }
.qse-title-wrap { display: flex; align-items: center; gap: 10px; }
.qse-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #1a2e1e;
  margin: 0;
  white-space: nowrap;
}
.qse-track-wrap { position: relative; display: flex; align-items: center; gap: 10px; }
.qse-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 8px 4px 14px; flex: 1;
}
.qse-track::-webkit-scrollbar { display: none; }
.qse-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1.5px solid #dde8e1; color: #1a3d28;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(26,61,40,0.1);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s; z-index: 5;
}
.qse-arrow:hover { background: #1a3d28; color: #fff; transform: scale(1.07); }
.qse-arrow:disabled { opacity: 0.3; pointer-events: none; }
.qse-card {
  flex: 0 0 200px; scroll-snap-align: start;
  background: #fff; border-radius: 20px; border: 1.5px solid #dde8e1;
  overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 20px rgba(26,61,40,0.07);
  transition: transform 0.28s, box-shadow 0.28s, border-color 0.22s;
  position: relative;
}
.qse-card:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(26,61,40,0.15); border-color: #b5d8c5; }
.qse-card-img { height: 120px; overflow: hidden; position: relative; }
.qse-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.qse-card:hover .qse-card-img img { transform: scale(1.07); }
.qse-card-img-ov { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(10,26,14,0.4) 100%); }
.qse-card-icon {
  position: absolute; top: 92px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(26,61,40,0.18); z-index: 2;
}
.qse-card-body {
  padding: 36px 16px 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; flex: 1;
}
.qse-card-title { font-size: 14px; font-weight: 800; color: #1a2e1e; line-height: 1.25; }
.qse-card-sub { font-size: 11.5px; color: #6b8c7a; line-height: 1.4; }
.qse-explore {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: #1a3d28;
  margin-top: 4px; transition: gap 0.2s;
}
.qse-card:hover .qse-explore { gap: 8px; }
.qse-cta-bar {
  margin-top: 28px; background: #1a3d28; border-radius: 20px;
  padding: 20px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.qse-cta-left {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: rgba(255,255,255,0.8);
}
.qse-cta-left strong { color: #fff; font-size: 17px; }
.qse-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #c9873a; color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 13px 24px; border-radius: 14px; text-decoration: none;
  transition: background 0.2s, transform 0.18s; flex-shrink: 0;
  flex-wrap: wrap;
}
.qse-cta-note { font-size: 11px; font-weight: 500; opacity: 0.8; }
.qse-cta-btn:hover { background: #b37530; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE FLOATING ACTION BAR  (mob-fab- prefix)
════════════════════════════════════════════════════════════════ */
.mob-fab-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1.5px solid #dde8e1;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px;
  box-shadow: 0 -4px 24px rgba(26,61,40,0.12);
}
.mob-fab-call {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 4px; border: 1.5px solid #1a3d28; border-radius: 12px;
  font-size: 12.5px; font-weight: 700; color: #1a3d28; text-decoration: none;
  transition: background 0.2s; white-space: nowrap;
}
.mob-fab-call:active { background: #eaf4ee; }
.mob-fab-wa {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 4px; background: #25D366; border-radius: 12px;
  font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none;
  white-space: nowrap; box-shadow: 0 3px 12px rgba(37,211,102,0.32);
}
.mob-fab-book {
  flex: 1.3; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 4px; background: #1a3d28; border-radius: 12px;
  font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none;
  white-space: nowrap; box-shadow: 0 3px 12px rgba(26,61,40,0.28);
}

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg: linear-gradient(145deg, #e8eaf6 0%, #f3e5f5 35%, #fce4ec 70%, #e0f7fa 100%);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 40px rgba(100, 80, 200, 0.16), 0 2px 8px rgba(0,0,0,0.06);
  --glass-shadow-hover: 0 20px 60px rgba(100, 80, 200, 0.24), 0 4px 16px rgba(0,0,0,0.1);
  --accent: #6c5ce7;
  --accent-2: #a29bfe;
  --accent-teal: #00b894;
  --accent-warm: #fd79a8;
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a6a;
  --text-muted: #8888aa;
  --border-subtle: rgba(108, 92, 231, 0.1);
  --radius-card: 24px;
  --radius-sm: 12px;
  --transition: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  --card-width: 340px;
}

/* ─── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ─── Section ────────────────────────────────────────────────── */
.elder-section {
  padding: 56px 0 140px;
}

.section-head {
  padding: 0 24px 36px;
  max-width: 640px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(108,92,231,0.1);
  border: 1px solid rgba(108,92,231,0.22);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 900;
  background: linear-gradient(135deg, #1a1a2e 0%, #6c5ce7 55%, #fd79a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.15;
  margin-bottom: 12px;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 15px;
}

/* ─── Scroll Hint ────────────────────────────────────────────── */
.scroll-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px 14px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.scroll-hint-arrow {
  display: flex;
  gap: 3px;
}

.scroll-hint-arrow span {
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(-45deg);
  opacity: 0.5;
  animation: hint-bounce 1.4s ease-in-out infinite;
}

.scroll-hint-arrow span:nth-child(2) { animation-delay: 0.15s; opacity: 0.7; }
.scroll-hint-arrow span:nth-child(3) { animation-delay: 0.3s; opacity: 1; }

@keyframes hint-bounce {
  0%, 100% { transform: rotate(-45deg) translateX(0); }
  50%       { transform: rotate(-45deg) translateX(4px); }
}

/* ─── Carousel Track ─────────────────────────────────────────── */
.cards-track-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 12px 24px 20px;
  display: flex;
  gap: 20px;
  cursor: grab;
}

.cards-track-wrap::-webkit-scrollbar { display: none; }
.cards-track-wrap.is-dragging { cursor: grabbing; }

/* ─── Individual Card ────────────────────────────────────────── */
.ec-card {
  flex: 0 0 var(--card-width);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}

.ec-card:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-4px);
}

/* ── Card Image ─────── */
.ec-card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.ec-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.ec-card:hover .ec-card-img img {
  transform: scale(1.04);
}

.ec-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(20,10,50,0.38) 100%);
}

.card-img-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(108,92,231,0.2);
}

/* ── Card Body ──────── */
.ec-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0;
  overflow: hidden;
}

.ec-card-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.ec-card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  margin-bottom: 14px;
}

/* ── Trust Mini Bar ─── */
.trust-mini {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(108,92,231,0.07);
  border: 1px solid rgba(108,92,231,0.15);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}

.trust-chip-icon { font-size: 12px; }

/* ── Amenities Chips ─── */
.amenities-label-sm {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.amenities-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(108,92,231,0.12);
  border-radius: 100px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition), background var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.amenity-chip:hover,
.amenity-chip.is-active {
  border-color: var(--accent);
  background: rgba(108,92,231,0.07);
  color: var(--accent);
}

.chip-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: var(--text-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 20;
  max-width: 180px;
  white-space: normal;
  text-align: center;
}

.chip-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text-primary);
}

.amenity-chip.is-active .chip-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Services Accordion ─ */
.services-label-sm {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-bottom: 8px;
}

.services-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.svc-item {
  border: 1.5px solid rgba(0,184,148,0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255,255,255,0.55);
  transition: border-color var(--transition);
}

.svc-item:hover { border-color: rgba(0,184,148,0.28); }

.svc-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.svc-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(0,184,148,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.svc-item:hover .svc-icon { transform: scale(1.1); }

.svc-name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.svc-chevron {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,184,148,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-teal);
  transition: background var(--transition);
  flex-shrink: 0;
}

.svc-chevron svg { transition: transform var(--transition); }

.svc-item.is-open .svc-chevron svg { transform: rotate(180deg); }
.svc-item.is-open .svc-chevron { background: var(--accent-teal); color: #fff; }

.svc-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-item.is-open .svc-detail { grid-template-rows: 1fr; }

.svc-detail-inner { overflow: hidden; }

.svc-detail-content {
  padding: 0 12px 10px 52px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Card CTA ────────── */
.ec-card-cta {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid rgba(108,92,231,0.08);
  background: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

.cta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.cta-btn:hover { transform: translateY(-2px); }

.cta-call {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 16px rgba(108,92,231,0.35);
}

.cta-call:hover { box-shadow: 0 8px 24px rgba(108,92,231,0.45); }

.cta-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,211,102,0.3);
}

.cta-whatsapp:hover { box-shadow: 0 8px 24px rgba(37,211,102,0.4); }

.cta-details {
  background: transparent;
  border: 1.5px solid var(--border-subtle);
  color: var(--accent);
  font-size: 12px;
}

.cta-details:hover { background: rgba(108,92,231,0.06); border-color: var(--accent); }

/* ─── Dots Indicator ─────────────────────────────────────────── */
.dots-row {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 8px 0 0;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(108,92,231,0.2);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), width var(--transition);
}

.dot.is-active {
  background: var(--accent);
  width: 20px;
  border-radius: 4px;
}

/* ─── Bottom Sheet ───────────────────────────────────────────── */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 50, 0.45);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.sheet-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 680px;
  margin: 0 auto;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(24px);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 60px rgba(108,92,231,0.2);
  z-index: 201;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bottom-sheet.is-open {
  transform: translateY(0);
}

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(108,92,231,0.2);
  margin: 14px auto 0;
  flex-shrink: 0;
}

.sheet-img {
  height: 180px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  margin: 14px 20px 0;
  border-radius: 18px;
}

.sheet-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sheet-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(20,10,50,0.4) 100%);
  border-radius: 18px;
}

.sheet-img-title {
  position: absolute;
  bottom: 14px;
  left: 18px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 100px;
  scrollbar-width: thin;
  scrollbar-color: rgba(108,92,231,0.2) transparent;
}

.sheet-section-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin: 0 0 12px;
}

.sheet-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.sheet-svc {
  background: #f8f9ff;
  border: 1.5px solid rgba(0,184,148,0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition);
}

.sheet-svc:hover { border-color: rgba(0,184,148,0.3); }

.sheet-svc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.sheet-svc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0,184,148,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.sheet-svc-meta { flex: 1; }

.sheet-svc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.sheet-svc-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.sheet-svc-chevron {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,184,148,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-teal);
  transition: background var(--transition);
}

.sheet-svc-chevron svg { transition: transform var(--transition); }
.sheet-svc.is-open .sheet-svc-chevron svg { transform: rotate(180deg); }
.sheet-svc.is-open .sheet-svc-chevron { background: var(--accent-teal); color: #fff; }

.sheet-svc-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sheet-svc.is-open .sheet-svc-detail { grid-template-rows: 1fr; }

.sheet-svc-detail-inner { overflow: hidden; }

.sheet-svc-detail-content {
  padding: 0 14px 12px 62px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.sheet-close-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 20px;
  background: rgba(255,255,255,0.95);
  border-top: 1px solid rgba(108,92,231,0.08);
  display: flex;
  gap: 10px;
}

.sheet-close-btn {
  flex: 1;
  padding: 12px;
  border-radius: 100px;
  border: 1.5px solid rgba(108,92,231,0.2);
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}

.sheet-close-btn:hover { background: rgba(108,92,231,0.06); }

.sheet-cta-call {
  flex: 1;
  padding: 12px;
  border-radius: 100px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(108,92,231,0.35);
  transition: box-shadow var(--transition);
}

.sheet-cta-call:hover { box-shadow: 0 8px 24px rgba(108,92,231,0.45); }

/* ─── Floating FABs ──────────────────────────────────────────── */
.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 150;
}

.fab-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  position: relative;
}

.fab-btn:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}

.fab-call { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; }
.fab-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; }

.fab-label {
  position: absolute;
  right: 62px;
  background: var(--text-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.fab-btn:hover .fab-label { opacity: 1; }

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.65); opacity: 0; }
}

.fab-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: pulse-ring 1.8s ease-out infinite;
  z-index: -1;
}

/* ─── Scroll-reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }

/* ─── Responsive ─────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   NEW SECTION — GREEN / WARM CREAM THEME
   All classes prefixed with "w-" (warm) to avoid any collision
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens (scoped to .w-section) ─────────────────────────── */
.w-section {
  --wg: #2d7a4f;          /* primary green */
  --wg2: #3a9960;         /* lighter green */
  --wg-lt: #e8f5ee;       /* green tint */
  --wg-border: rgba(45,122,79,0.15);
  --wg-shadow: 0 4px 24px rgba(45,122,79,0.12);
  --wg-shadow-hover: 0 12px 44px rgba(45,122,79,0.22);
  --wcream: #faf7f2;
  --wbeige: #f2ede4;
  --wtext: #1c2b1f;
  --wsub: #4a5e50;
  --wmuted: #7a9080;
  --wborder: rgba(45,122,79,0.12);
  --wr: 20px;
  --wt: 0.36s cubic-bezier(.4,0,.2,1);
}

/* ── Section wrapper ────────────────────────────────────────── */
.w-section {
  background: radial-gradient(ellipse at 20% 0%, #f0f9f3 0%, #faf7f2 45%, #f5f0e8 100%);
  padding: 70px 0 0;
  position: relative;
  overflow: hidden;
}

.w-section::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,122,79,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Section head ───────────────────────────────────────────── */
.w-head {
  text-align: center;
  padding: 0 20px 12px;
  max-width: 660px;
  margin: 0 auto;
}

.w-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(45,122,79,0.08);
  border: 1px solid rgba(45,122,79,0.2);
  color: var(--wg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.w-title {
  font-size: clamp(24px, 5.5vw, 38px);
  font-weight: 900;
  color: var(--wtext);
  line-height: 1.2;
  margin-bottom: 12px;
}

.w-title em {
  font-style: normal;
  color: var(--wg);
  position: relative;
}

.w-title em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wg), var(--wg2));
  opacity: 0.35;
}

.w-subtitle {
  color: var(--wsub);
  font-size: 15px;
  margin-bottom: 10px;
}

/* ── Swipe hint ─────────────────────────────────────────────── */
.w-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--wmuted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 20px 28px;
}

.w-swipe-arrows {
  display: flex;
  gap: 2px;
}

.w-swipe-arrows span {
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1.8px solid var(--wg);
  border-bottom: 1.8px solid var(--wg);
  transform: rotate(-45deg);
  opacity: 0.4;
  animation: w-bounce 1.5s ease-in-out infinite;
}

.w-swipe-arrows span:nth-child(2) { animation-delay: 0.15s; opacity: 0.65; }
.w-swipe-arrows span:nth-child(3) { animation-delay: 0.3s; opacity: 0.9; }

@keyframes w-bounce {
  0%, 100% { transform: rotate(-45deg) translateX(0); }
  50%       { transform: rotate(-45deg) translateX(5px); }
}

/* ── Carousel track ─────────────────────────────────────────── */
.w-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 20px 32px;
  cursor: grab;
  align-items: flex-start;
}

.w-track::-webkit-scrollbar { display: none; }
.w-track.is-dragging { cursor: grabbing; }

/* ── Dots ───────────────────────────────────────────────────── */
.w-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 0 0 32px;
}

.w-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(45,122,79,0.2);
  cursor: pointer;
  transition: background var(--wt), width var(--wt);
}

.w-dot.is-active {
  background: var(--wg);
  width: 20px;
  border-radius: 4px;
}

/* ══ CARD ════════════════════════════════════════════════════ */
.w-card {
  flex: 0 0 82vw;
  max-width: 420px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 28px rgba(45,122,79,0.1), 0 1px 6px rgba(0,0,0,0.05);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow var(--wt), transform var(--wt);
}

.w-card:hover {
  box-shadow: var(--wg-shadow-hover);
  transform: translateY(-3px);
}

/* First card is dominant */
.w-card:first-child {
  flex: 0 0 88vw;
  max-width: 460px;
}


/* ── Card image area ────────────────────────────────────────── */
.w-card-img {
  position: relative;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}

.w-card:first-child .w-card-img { height: 250px; }

.w-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.65s ease;
}

.w-card:hover .w-card-img img { transform: scale(1.04); }

/* Very light warm overlay — no dark filter */
.w-card-img-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(255,251,244,0.5) 100%);
}

.w-img-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(8px);
  color: var(--wg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(45,122,79,0.15);
}

/* ── Overlapping white content box ─────────────────────────── */
.w-card-content {
  background: #fff;
  border-radius: 20px 20px 0 0;
  margin-top: -20px;
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.w-card-body {
  padding: 20px 20px 0;
  flex: 1;
  overflow: hidden;
}

.w-card-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--wtext);
  line-height: 1.2;
  margin-bottom: 4px;
}

.w-card-sub {
  font-size: 13px;
  color: var(--wsub);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* ── Trust row ──────────────────────────────────────────────── */
.w-trust-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.w-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--wg-lt);
  border: 1px solid var(--wg-border);
  color: var(--wg);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}

/* ── Section label ──────────────────────────────────────────── */
.w-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.w-label-green { color: var(--wg); }
.w-label-teal  { color: #1a8a72; }

/* ── Amenities grid ─────────────────────────────────────────── */
.w-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}


.w-am-cell {
  background: var(--wg-lt);
  border: 1px solid var(--wg-border);
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: transform var(--wt), box-shadow var(--wt);
  cursor: default;
}

.w-am-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(45,122,79,0.12);
}

.w-am-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(45,122,79,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.w-am-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--wsub);
  line-height: 1.3;
}

/* ── Services accordion ─────────────────────────────────────── */
.w-svc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.w-svc {
  border: 1.5px solid rgba(45,122,79,0.1);
  border-radius: 10px;
  overflow: hidden;
  background: var(--wcream);
  transition: border-color var(--wt);
}

.w-svc:hover { border-color: rgba(45,122,79,0.28); }

.w-svc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.w-svc-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(45,122,79,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform var(--wt);
}

.w-svc:hover .w-svc-icon { transform: scale(1.08); }

.w-svc-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wtext);
}

.w-svc-chev {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(45,122,79,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wg);
  flex-shrink: 0;
  transition: background var(--wt);
}

.w-svc-chev svg { transition: transform var(--wt); }
.w-svc.is-open .w-svc-chev { background: var(--wg); color: #fff; }
.w-svc.is-open .w-svc-chev svg { transform: rotate(180deg); }

.w-svc-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(.4,0,.2,1);
}

.w-svc.is-open .w-svc-detail { grid-template-rows: 1fr; }

.w-svc-inner { overflow: hidden; }

.w-svc-text {
  padding: 0 12px 10px 52px;
  font-size: 12px;
  color: var(--wsub);
  line-height: 1.6;
}

.w-read-more {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--wg);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(45,122,79,0.35);
  transition: color var(--wt);
}

/* ── View Details internal panel ────────────────────────────── */
.w-card-inner-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* top will be set to just below image via JS, but CSS fallback: */
  top: 220px;
  background: #fff;
  z-index: 10;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 30px rgba(45,122,79,0.18);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

.w-card:first-child .w-card-inner-panel { top: 250px; }

.w-card-inner-panel.is-open { transform: translateY(0); }

.w-panel-handle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  flex-shrink: 0;
}

.w-panel-handle {
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: rgba(45,122,79,0.2);
}

.w-panel-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(45,122,79,0.08);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wg);
  font-size: 14px;
  transition: background var(--wt);
}

.w-panel-close:hover { background: rgba(45,122,79,0.16); }

.w-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 90px;
  scrollbar-width: thin;
  scrollbar-color: rgba(45,122,79,0.2) transparent;
}

.w-panel-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wg);
  margin: 12px 0 8px;
}

/* panel amenities */
.w-panel-am-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-bottom: 16px;
}


.w-panel-am-item {
  background: var(--wg-lt);
  border: 1px solid var(--wg-border);
  border-radius: 9px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.w-panel-am-ico { font-size: 18px; }

.w-panel-am-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--wsub);
  line-height: 1.3;
}

/* panel services */
.w-panel-svc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.w-panel-svc {
  border: 1.5px solid rgba(45,122,79,0.1);
  border-radius: 10px;
  overflow: hidden;
  background: var(--wcream);
  transition: border-color var(--wt);
}

.w-panel-svc:hover { border-color: rgba(45,122,79,0.28); }

.w-panel-svc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.w-panel-svc-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(45,122,79,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.w-panel-svc-meta { flex: 1; }

.w-panel-svc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--wtext);
}

.w-panel-svc-hint {
  font-size: 11px;
  color: var(--wmuted);
}

.w-panel-svc-chev {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(45,122,79,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wg);
  transition: background var(--wt);
  flex-shrink: 0;
}

.w-panel-svc-chev svg { transition: transform var(--wt); }
.w-panel-svc.is-open .w-panel-svc-chev { background: var(--wg); color: #fff; }
.w-panel-svc.is-open .w-panel-svc-chev svg { transform: rotate(180deg); }

.w-panel-svc-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(.4,0,.2,1);
}

.w-panel-svc.is-open .w-panel-svc-detail { grid-template-rows: 1fr; }

.w-panel-svc-inner { overflow: hidden; }

.w-panel-svc-text {
  padding: 0 12px 10px 54px;
  font-size: 12px;
  color: var(--wsub);
  line-height: 1.6;
}

/* panel sticky cta */
.w-panel-cta-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: rgba(255,255,255,0.95);
  border-top: 1px solid rgba(45,122,79,0.08);
  display: flex;
  gap: 8px;
}

.w-panel-cta-call {
  flex: 1;
  padding: 11px;
  border-radius: 100px;
  border: none;
  background: linear-gradient(135deg, var(--wg), var(--wg2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(45,122,79,0.3);
  transition: box-shadow var(--wt), transform var(--wt);
}

.w-panel-cta-call:hover { box-shadow: 0 8px 22px rgba(45,122,79,0.4); transform: translateY(-1px); }

.w-panel-cta-wa {
  flex: 1;
  padding: 11px;
  border-radius: 100px;
  border: 2px solid var(--wg);
  background: transparent;
  color: var(--wg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--wt), color var(--wt);
}

.w-panel-cta-wa:hover { background: var(--wg-lt); }

/* ── Card footer CTA ────────────────────────────────────────── */
.w-card-footer {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  background: #fff;
}

.w-cta-row {
  display: flex;
  gap: 8px;
}

.w-btn-call {
  flex: 1;
  padding: 11px 14px;
  border-radius: 100px;
  border: none;
  background: linear-gradient(135deg, var(--wg), var(--wg2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(45,122,79,0.28);
  transition: box-shadow var(--wt), transform var(--wt);
}

.w-btn-call:hover { box-shadow: 0 8px 24px rgba(45,122,79,0.38); transform: translateY(-2px); }

.w-btn-wa {
  flex: 1;
  padding: 11px 14px;
  border-radius: 100px;
  border: 2px solid var(--wg);
  background: transparent;
  color: var(--wg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--wt), color var(--wt);
}

.w-btn-wa:hover { background: var(--wg-lt); }

.w-btn-details {
  width: 100%;
  padding: 10px;
  border-radius: 100px;
  border: 1.5px solid rgba(45,122,79,0.18);
  background: var(--wg-lt);
  color: var(--wg);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background var(--wt), border-color var(--wt);
}

.w-btn-details:hover { background: rgba(45,122,79,0.12); border-color: var(--wg); }

/* ── Sticky bottom bar ──────────────────────────────────────── */
.w-sticky-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(45,122,79,0.12);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.w-sticky-text { flex: 1; min-width: 160px; }

.w-sticky-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--wtext);
}

.w-sticky-text span {
  font-size: 12px;
  color: var(--wsub);
}

.w-sticky-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.w-sticky-call {
  padding: 10px 20px;
  border-radius: 100px;
  border: none;
  background: linear-gradient(135deg, var(--wg), var(--wg2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 12px rgba(45,122,79,0.28);
  transition: box-shadow var(--wt), transform var(--wt);
}

.w-sticky-call:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(45,122,79,0.38); }

.w-sticky-wa {
  padding: 10px 20px;
  border-radius: 100px;
  border: 2px solid var(--wg);
  background: #fff;
  color: var(--wg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background var(--wt);
}

.w-sticky-wa:hover { background: var(--wg-lt); }

/* ── Reveal (reuse same class, no conflict) ─────────────────── */
/* .reveal and .is-visible already defined above — inherited */

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — PREMIUM ELDER CARE FUNCTIONAL
   All classes prefixed p- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */

#premium-elder-care-functional-section {
  --pg: #1a5c3a;
  --pg2: #267a50;
  --pg-lt: #e4f4ec;
  --pg-gold: #c8860a;
  --pg-gold-lt: #fff8e6;
  --pg-cream: #f8f5f0;
  --ptext: #1a2520;
  --psub: #3d5244;
  --pmuted: #6b8070;
  --pt: 0.36s cubic-bezier(.4,0,.2,1);
  --p-card-w: 340px;
  background: linear-gradient(160deg, #f0faf4 0%, #f8f5f0 55%, #eef6f2 100%);
  padding: 64px 0 0;
  overflow: hidden;
  font-family: inherit;
}

/* ── Section header ───────────────────────────────────────── */
.p-section-head {
  padding: 0 24px 36px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.p-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--pg-lt);
  color: var(--pg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.p-section-title {
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 900;
  color: var(--ptext);
  line-height: 1.2;
  margin: 0 0 10px;
}

.p-section-sub {
  font-size: 14px;
  color: var(--pmuted);
  line-height: 1.6;
  margin: 0;
}

/* ── Carousel wrapper ─────────────────────────────────────── */
.p-carousel-wrap {
  position: relative;
}

.p-carousel-track-outer {
  overflow: hidden;
  padding: 12px 0 24px;
}

.p-carousel-track {
  display: flex;
  gap: 20px;
  padding: 8px 24px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.p-carousel-track::-webkit-scrollbar { display: none; }
.p-carousel-track.is-dragging { cursor: grabbing; }

/* ── Arrow nav buttons ────────────────────────────────────── */
.p-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pg-lt);
  color: var(--pg);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(26,92,58,0.14);
  transition: background var(--pt), box-shadow var(--pt), opacity var(--pt);
  line-height: 1;
}

.p-arrow:hover { background: var(--pg-lt); box-shadow: 0 6px 18px rgba(26,92,58,0.22); }
.p-arrow.is-hidden { opacity: 0; pointer-events: none; }
.p-arrow-prev { left: 6px; }
.p-arrow-next { right: 6px; }


/* ── Dots ─────────────────────────────────────────────────── */
.p-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 4px 0 20px;
}

.p-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5d8cc;
  cursor: pointer;
  transition: background var(--pt), width var(--pt);
}

.p-dot.is-active {
  background: var(--pg);
  width: 20px;
  border-radius: 4px;
}

/* ── Card ─────────────────────────────────────────────────── */
.p-card {
  flex: 0 0 var(--p-card-w);
  width: var(--p-card-w);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(26,92,58,0.10), 0 1px 4px rgba(0,0,0,0.06);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--pt);
  display: flex;
  flex-direction: column;
}

.p-card:hover {
  box-shadow: 0 8px 32px rgba(26,92,58,0.16), 0 2px 8px rgba(0,0,0,0.08);
}

/* Dominant card */
.p-card.p-card--dominant {
  --p-card-w: 360px;
  flex: 0 0 360px;
  width: 360px;
}

/* ── Card image area ──────────────────────────────────────── */
.p-card-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}

.p-card--dominant .p-card-img-wrap {
  height: 240px;
}

.p-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.p-card:hover .p-card-img { transform: scale(1.04); }

.p-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(20,40,30,0.55) 100%);
  pointer-events: none;
}

/* ── Image hotspots ───────────────────────────────────────── */
.p-hotspot {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 2.5px solid var(--pg);
  color: var(--pg);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background var(--pt), transform var(--pt);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.p-hotspot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(26,92,58,0.3);
  animation: p-hotspot-pulse 2s ease-in-out infinite;
}

@keyframes p-hotspot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.35); opacity: 0; }
}

.p-hotspot:hover { background: var(--pg); color: #fff; transform: scale(1.1); }
.p-hotspot.is-active { background: var(--pg); color: #fff; }

/* ── Hotspot tooltip ──────────────────────────────────────── */
.p-hotspot-tip {
  position: absolute;
  z-index: 20;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 12px 14px;
  width: 170px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease;
  border-left: 3px solid var(--pg);
}

.p-hotspot-tip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.p-hotspot-tip-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--ptext);
  margin: 0 0 4px;
}

.p-hotspot-tip-desc {
  font-size: 11px;
  color: var(--pmuted);
  line-height: 1.5;
  margin: 0;
}

/* ── Heat zone badge ──────────────────────────────────────── */
.p-heat-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(135deg, #c8860a, #e6a020);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(200,134,10,0.4);
}

/* ── Card body ────────────────────────────────────────────── */
.p-card-body {
  padding: 18px 18px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.p-card-tier {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pg);
  margin-bottom: 4px;
}

.p-card-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--ptext);
  margin: 0 0 4px;
}

.p-card-desc {
  font-size: 12px;
  color: var(--pmuted);
  line-height: 1.55;
  margin: 0 0 14px;
}

/* Price */
.p-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.p-price-amount {
  font-size: 24px;
  font-weight: 900;
  color: var(--ptext);
  line-height: 1;
}

.p-price-unit {
  font-size: 12px;
  color: var(--pmuted);
}

/* Conversion heat zone box */
.p-heat-zone {
  background: var(--pg-gold-lt);
  border: 1.5px solid rgba(200,134,10,0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.p-heat-zone-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

.p-heat-zone-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--pg-gold);
  line-height: 1.4;
}

.p-heat-zone-sub {
  font-size: 11px;
  font-weight: 500;
  color: #a06e08;
  line-height: 1.4;
  display: block;
}

/* ── Accordion ────────────────────────────────────────────── */
.p-accordion {
  margin-bottom: 4px;
}

.p-acc-item {
  border-top: 1px solid #edf2ef;
}

.p-acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}

.p-acc-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.p-acc-icon { font-size: 15px; flex-shrink: 0; }

.p-acc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ptext);
  line-height: 1.3;
}

.p-acc-chevron {
  font-size: 11px;
  color: var(--pmuted);
  transition: transform var(--pt);
  flex-shrink: 0;
}

.p-acc-item.is-open .p-acc-chevron { transform: rotate(180deg); }

.p-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pt);
}

.p-acc-item.is-open .p-acc-body { grid-template-rows: 1fr; }

.p-acc-inner {
  overflow: hidden;
}

.p-acc-content {
  padding: 0 0 12px 28px;
  font-size: 12px;
  color: var(--pmuted);
  line-height: 1.6;
}

/* Read More toggle */
.p-read-more-text {
  display: none;
}

.p-acc-item.is-expanded .p-read-more-text {
  display: inline;
}

.p-read-more-btn {
  background: none;
  border: none;
  color: var(--pg);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── View Details button ──────────────────────────────────── */
.p-card-footer {
  padding: 14px 18px 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.p-btn-details {
  flex: 1;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--pg);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background var(--pt), transform var(--pt), box-shadow var(--pt);
  box-shadow: 0 3px 12px rgba(26,92,58,0.28);
}

.p-btn-details:hover {
  background: var(--pg2);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(26,92,58,0.36);
}

.p-btn-enquire {
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--pg-lt);
  color: var(--pg);
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--pt);
}

.p-btn-enquire:hover { background: #d0eddb; }

/* ── Internal card detail panel ──────────────────────────── */
.p-card-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 220px;
  background: #fff;
  z-index: 30;
  border-radius: 18px 18px 0 0;
  transform: translateY(100%);
  transition: transform var(--pt);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.p-card--dominant .p-card-panel { top: 240px; }

.p-card.details-open .p-card-panel { transform: translateY(0); }

.p-panel-handle-bar {
  width: 36px;
  height: 4px;
  background: #dde8e2;
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.p-panel-header {
  padding: 10px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.p-panel-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--ptext);
}

.p-panel-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0f5f2;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--pmuted);
  flex-shrink: 0;
  transition: background var(--pt);
}

.p-panel-close:hover { background: #ddeae3; }

.p-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: #c5d8cc transparent;
}

.p-panel-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pg);
  margin: 12px 0 8px;
}

.p-panel-section-title:first-child { margin-top: 0; }

.p-panel-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-panel-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--psub);
  line-height: 1.5;
}

.p-panel-feature-list li::before {
  content: "✓";
  color: var(--pg);
  font-weight: 800;
  font-size: 11px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Panel accordion */
.p-panel-acc-item {
  border-top: 1px solid #edf2ef;
}

.p-panel-acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--ptext);
}

.p-panel-acc-chevron {
  font-size: 11px;
  color: var(--pmuted);
  transition: transform var(--pt);
}

.p-panel-acc-item.is-open .p-panel-acc-chevron { transform: rotate(180deg); }

.p-panel-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pt);
}

.p-panel-acc-item.is-open .p-panel-acc-body { grid-template-rows: 1fr; }

.p-panel-acc-inner { overflow: hidden; }

.p-panel-acc-content {
  padding: 0 0 10px;
  font-size: 12px;
  color: var(--pmuted);
  line-height: 1.6;
}

.p-panel-cta {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf2ef;
}

.p-panel-cta-call {
  flex: 1;
  padding: 12px;
  background: var(--pg);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  transition: background var(--pt);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.p-panel-cta-call:hover { background: var(--pg2); }

.p-panel-cta-wa {
  flex: 1;
  padding: 12px;
  background: var(--pg-lt);
  color: var(--pg);
  font-size: 13px;
  font-weight: 800;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  transition: background var(--pt);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.p-panel-cta-wa:hover { background: #d0eddb; }

/* ── Section-local floating FABs ──────────────────────────── */
.p-fabs {
  position: fixed;
  bottom: 28px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease, transform 0.38s ease;
  transform: translateY(12px);
}

.p-fabs.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.p-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.p-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.26); }

.p-fab-call { background: var(--pg); }
.p-fab-wa { background: #25d366; }

.p-fab-label {
  position: absolute;
  right: 60px;
  background: rgba(30,40,35,0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.p-fab:hover .p-fab-label { opacity: 1; }

@keyframes p-fab-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 0 0 rgba(26,92,58,0.4); }
  50% { box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 0 8px rgba(26,92,58,0); }
}

.p-fab-call { animation: p-fab-pulse 2.5s ease-in-out infinite; }

/* ── Sticky CTA bar ───────────────────────────────────────── */
.p-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: rgba(248,245,240,0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(26,92,58,0.12);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.p-sticky-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--ptext);
  line-height: 1.35;
}

.p-sticky-text span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--pmuted);
}

.p-sticky-btns {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.p-sticky-call {
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--pg);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 12px rgba(26,92,58,0.3);
  transition: background var(--pt), transform var(--pt), box-shadow var(--pt);
}

.p-sticky-call:hover { background: var(--pg2); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(26,92,58,0.38); }

.p-sticky-wa {
  padding: 10px 20px;
  border-radius: 100px;
  border: 2px solid var(--pg);
  background: #fff;
  color: var(--pg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background var(--pt);
}

.p-sticky-wa:hover { background: var(--pg-lt); }

/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — ADVANCED ELDER CARE (q- prefix)
   Cream / deep-green / orange-heart theme
   ═══════════════════════════════════════════════════════════════ */

#adv-elder-section {
  --qg:      #1e5e3a;
  --qg2:     #2d7a50;
  --qg3:     #e8f5ee;
  --qcream:  #faf6f0;
  --qcream2: #f3ede4;
  --qorange: #e8622a;
  --qorange-lt: #fff0e8;
  --qtext:   #1a2218;
  --qsub:    #3b5244;
  --qmuted:  #6e8474;
  --qt:      0.38s cubic-bezier(.4,0,.2,1);
  --qcard-w: 348px;
  background: radial-gradient(ellipse at 20% 0%, #eef8f2 0%, #faf6f0 55%, #f5efe6 100%);
  padding: 72px 0 0;
  overflow: hidden;
  font-family: inherit;
  position: relative;
}

/* ── Section header ──────────────────────────────────────── */
.q-head {
  padding: 0 20px 40px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.q-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--qorange-lt);
  color: var(--qorange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
  margin-bottom: 16px;
  border: 1px solid rgba(232,98,42,0.18);
}

.q-title {
  font-size: clamp(22px, 5.5vw, 34px);
  font-weight: 900;
  color: var(--qtext);
  line-height: 1.18;
  margin: 0 0 12px;
}

.q-title span {
  color: var(--qg);
}

.q-sub {
  font-size: 14px;
  color: var(--qmuted);
  line-height: 1.65;
  margin: 0;
}

/* ── Carousel ────────────────────────────────────────────── */
.q-carousel-wrap {
  position: relative;
}

.q-track-outer {
  overflow: hidden;
  padding: 8px 0 20px;
}

.q-track {
  display: flex;
  gap: 18px;
  padding: 10px 20px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.q-track::-webkit-scrollbar { display: none; }
.q-track.is-dragging { cursor: grabbing; }

/* ── Arrows ──────────────────────────────────────────────── */
.q-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--qg3);
  color: var(--qg);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 3px 12px rgba(30,94,58,.14);
  transition: background var(--qt), opacity var(--qt), box-shadow var(--qt);
  line-height: 1;
}

.q-arrow:hover { background: var(--qg3); box-shadow: 0 5px 16px rgba(30,94,58,.22); }
.q-arrow.is-hidden { opacity: 0; pointer-events: none; }
.q-arrow-prev { left: 4px; }
.q-arrow-next { right: 4px; }


/* ── Dots ────────────────────────────────────────────────── */
.q-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 2px 0 18px;
}

.q-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c6d9cc;
  cursor: pointer;
  transition: background var(--qt), width var(--qt);
}

.q-dot.is-active {
  background: var(--qg);
  width: 22px;
  border-radius: 4px;
}

/* ── Card ────────────────────────────────────────────────── */
.q-card {
  flex: 0 0 var(--qcard-w);
  width: var(--qcard-w);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 22px rgba(30,94,58,.09), 0 1px 4px rgba(0,0,0,.05);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--qt), transform var(--qt);
}

.q-card:hover {
  box-shadow: 0 10px 36px rgba(30,94,58,.15), 0 2px 8px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* Preview cards (card 2, 3) */
.q-card.q-preview { opacity: .85; }
.q-card.q-preview:hover { opacity: 1; }

/* ── Card image ──────────────────────────────────────────── */
.q-img-wrap {
  position: relative;
  height: 230px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 22px 22px 0 0;
}

.q-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .55s ease;
}

.q-card:hover .q-img { transform: scale(1.04); }

.q-img-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.02) 40%, rgba(20,42,28,.52) 100%);
  pointer-events: none;
}

/* ── Hotspots ────────────────────────────────────────────── */
.q-hs {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 2.5px solid var(--qg);
  color: var(--qg);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background var(--qt), transform var(--qt);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.q-hs::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(30,94,58,.3);
  animation: qHsPulse 2.2s ease-in-out infinite;
}

@keyframes qHsPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%       { transform: scale(1.4); opacity: 0; }
}

.q-hs:hover, .q-hs.is-active {
  background: var(--qg);
  color: #fff;
  transform: scale(1.12);
}

/* ── Hotspot tooltip ─────────────────────────────────────── */
.q-hs-tip {
  position: absolute;
  z-index: 20;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.17);
  padding: 11px 13px;
  width: 165px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .22s ease, transform .22s ease;
  border-left: 3px solid var(--qg);
}

.q-hs-tip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.q-hs-tip-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--qtext);
  margin: 0 0 3px;
}

.q-hs-tip-desc {
  font-size: 11px;
  color: var(--qmuted);
  line-height: 1.5;
  margin: 0;
}

/* ── Heat badge ──────────────────────────────────────────── */
.q-heat-badge {
  position: absolute;
  top: 13px;
  right: 13px;
  background: linear-gradient(135deg, #e8622a, #f0842e);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(232,98,42,.4);
}

/* ── Card body ───────────────────────────────────────────── */
.q-body {
  padding: 18px 18px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.q-tier {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--qg);
  margin-bottom: 3px;
}

.q-card-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--qtext);
  margin: 0 0 5px;
}

.q-card-desc {
  font-size: 12px;
  color: var(--qmuted);
  line-height: 1.6;
  margin: 0 0 14px;
}

/* ── Trust row ───────────────────────────────────────────── */
.q-trust-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.q-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--qg3);
  color: var(--qg);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ── Amenity chips ───────────────────────────────────────── */
.q-amenities-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--qsub);
  margin: 0 0 8px;
}

/* Mobile: horizontal scrolling chips */
.q-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 14px;
}

.q-chips::-webkit-scrollbar { display: none; }

/* Desktop: wrap into grid */

.q-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--qcream2);
  color: var(--qsub);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--qt), border-color var(--qt), transform var(--qt);
  user-select: none;
}

.q-chip:hover {
  background: var(--qg3);
  border-color: var(--qg);
  transform: translateY(-1px);
}

.q-chip.is-active {
  background: var(--qg3);
  border-color: var(--qg);
  color: var(--qg);
}

/* chip tooltip */
.q-chip-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--qtext);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.q-chip-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--qtext);
}

.q-chip.is-active .q-chip-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Services accordion ──────────────────────────────────── */
.q-acc {
  margin-bottom: 6px;
  border-top: 1px solid #e8eeea;
}

.q-acc-item { border-bottom: 1px solid #e8eeea; }

.q-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
  gap: 8px;
  transition: color var(--qt);
}

.q-acc-hdr:hover .q-acc-name { color: var(--qg); }

.q-acc-left {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
}

.q-acc-icon { font-size: 16px; flex-shrink: 0; }

.q-acc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--qtext);
  transition: color var(--qt);
}

.q-acc-chev {
  font-size: 10px;
  color: var(--qmuted);
  transition: transform var(--qt);
  flex-shrink: 0;
}

.q-acc-item.is-open .q-acc-chev { transform: rotate(180deg); }
.q-acc-item.is-open .q-acc-name { color: var(--qg); }

.q-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--qt);
}

.q-acc-item.is-open .q-acc-body { grid-template-rows: 1fr; }

.q-acc-inner { overflow: hidden; }

.q-acc-content {
  padding: 0 0 14px 34px;
  font-size: 12px;
  color: var(--qmuted);
  line-height: 1.65;
}

.q-read-more { display: none; }
.q-acc-item.is-expanded .q-read-more { display: inline; }

.q-rm-btn {
  background: none;
  border: none;
  color: var(--qg);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-left: 3px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Heat zone ───────────────────────────────────────────── */
.q-heat-zone {
  background: var(--qorange-lt);
  border: 1.5px solid rgba(232,98,42,.22);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 14px;
}

.q-heat-zone-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--qorange);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.q-heat-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
}

.q-heat-point {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--qsub);
  font-weight: 600;
}

.q-heat-point::before {
  content: "✓";
  color: var(--qg);
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ── Card footer buttons ─────────────────────────────────── */
.q-footer {
  padding: 14px 18px 18px;
  display: flex;
  gap: 9px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.q-btn {
  flex: 1;
  min-width: 80px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background var(--qt), transform var(--qt), box-shadow var(--qt);
  white-space: nowrap;
}

.q-btn-call {
  background: var(--qg);
  color: #fff;
  box-shadow: 0 3px 10px rgba(30,94,58,.28);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.q-btn-call:hover { background: var(--qg2); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(30,94,58,.36); }

.q-btn-wa {
  background: #e8f5ee;
  color: var(--qg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.q-btn-wa:hover { background: #d0eddb; }

.q-btn-details {
  background: var(--qtext);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

.q-btn-details:hover { background: #2a3a2e; transform: translateY(-1px); }

.q-btn-enquiry {
  background: var(--qorange-lt);
  color: var(--qorange);
  border: 1.5px solid rgba(232,98,42,.3);
}

.q-btn-enquiry:hover { background: #fde0cc; }

/* ── Internal card panel (View Details & Enquiry Form) ───── */
.q-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 230px;
  background: #fff;
  z-index: 40;
  border-radius: 18px 18px 0 0;
  transform: translateY(100%);
  transition: transform .46s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(30,94,58,.1);
}

.q-panel.is-open { transform: translateY(0); }

.q-panel-drag {
  width: 38px;
  height: 4px;
  background: #dde8e2;
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.q-panel-hdr {
  padding: 10px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid #edf3ef;
  padding-bottom: 10px;
}

.q-panel-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--qtext);
}

.q-panel-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0f5f2;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--qmuted);
  transition: background var(--qt);
}

.q-panel-close:hover { background: #ddeae3; }

.q-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 40px;
  scrollbar-width: thin;
  scrollbar-color: #c5d8cc transparent;
}

/* ── Panel — details content ─────────────────────────────── */
.q-dtl-section {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--qg);
  margin: 12px 0 8px;
}

.q-dtl-section:first-child { margin-top: 0; }

.q-dtl-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.q-dtl-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--qsub);
  line-height: 1.55;
}

.q-dtl-list li::before {
  content: "✓";
  color: var(--qg);
  font-weight: 900;
  font-size: 11px;
  margin-top: 1px;
  flex-shrink: 0;
}

.q-dtl-para {
  font-size: 12px;
  color: var(--qmuted);
  line-height: 1.65;
  margin: 0 0 10px;
}

/* panel CTA row */
.q-panel-cta {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf3ef;
}

.q-panel-cta a {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--qt);
}

.q-pcta-call { background: var(--qg); color: #fff; }
.q-pcta-call:hover { background: var(--qg2); }
.q-pcta-wa { background: var(--qg3); color: var(--qg); }
.q-pcta-wa:hover { background: #d0eddb; }

/* ── Enquiry Form inside panel ───────────────────────────── */
.q-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.q-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.q-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--qsub);
  letter-spacing: .04em;
}

.q-field-input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid #d4e3da;
  border-radius: 10px;
  font-size: 13px;
  color: var(--qtext);
  background: #fff;
  outline: none;
  transition: border-color var(--qt), box-shadow var(--qt);
  box-sizing: border-box;
  font-family: inherit;
}

.q-field-input:focus {
  border-color: var(--qg);
  box-shadow: 0 0 0 3px rgba(30,94,58,.1);
}

/* ── Inline calendar ─────────────────────────────────────── */
.q-cal-trigger {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid #d4e3da;
  border-radius: 10px;
  font-size: 13px;
  color: var(--qtext);
  background: #fff;
  outline: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color var(--qt), box-shadow var(--qt);
  font-family: inherit;
  font-weight: 600;
}

.q-cal-trigger:focus, .q-cal-trigger.is-open {
  border-color: var(--qg);
  box-shadow: 0 0 0 3px rgba(30,94,58,.1);
}

.q-cal-trigger-icon { font-size: 15px; }

.q-cal-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .36s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

.q-cal-wrap.is-open { grid-template-rows: 1fr; }

.q-cal-inner { overflow: hidden; }

.q-cal {
  background: #f8fbf9;
  border: 1.5px solid #dce8e1;
  border-radius: 12px;
  padding: 12px 12px 20px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.q-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.q-cal-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--qg3);
  color: var(--qg);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--qt);
}

.q-cal-nav-btn:hover { background: #cce8d8; }

.q-cal-month {
  font-size: 13px;
  font-weight: 800;
  color: var(--qtext);
}

.q-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.q-cal-day-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--qmuted);
  text-align: center;
  padding: 3px 0;
  text-transform: uppercase;
}

.q-cal-day {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 6px 2px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--qtext);
  transition: background var(--qt), color var(--qt);
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.q-cal-day:hover:not(.q-cal-empty):not(.q-cal-past) {
  background: var(--qg3);
  color: var(--qg);
}

.q-cal-day.is-selected {
  background: var(--qg);
  color: #fff;
  font-weight: 800;
}

.q-cal-day.is-today {
  border: 2px solid var(--qg);
  color: var(--qg);
  font-weight: 800;
}

.q-cal-day.q-cal-past {
  color: #ccc;
  cursor: default;
}

.q-cal-empty { cursor: default; }

/* ── Submit button ───────────────────────────────────────── */
.q-submit-btn {
  width: 100%;
  padding: 14px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--qg), var(--qg2));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 16px rgba(30,94,58,.3);
  transition: transform var(--qt), box-shadow var(--qt), opacity var(--qt);
  letter-spacing: .02em;
  margin-top: 4px;
}

.q-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(30,94,58,.38);
}

.q-submit-btn:active { transform: translateY(0); }

.q-form-notice {
  font-size: 10px;
  color: var(--qmuted);
  text-align: center;
  line-height: 1.5;
  margin-top: 4px;
}

/* ── Section-local FABs ──────────────────────────────────── */
.q-fabs {
  position: fixed;
  bottom: 28px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s ease, transform .38s ease;
  transform: translateY(14px);
}

.q-fabs.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.q-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}

.q-fab:hover { transform: scale(1.09); box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.q-fab-call { background: var(--qg); }
.q-fab-wa   { background: #25d366; }

.q-fab-lbl {
  position: absolute;
  right: 58px;
  background: rgba(26,34,24,.88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.q-fab:hover .q-fab-lbl { opacity: 1; }

@keyframes qFabPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 0 rgba(30,94,58,.4); }
  50%       { box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 9px rgba(30,94,58,0); }
}

.q-fab-call { animation: qFabPulse 2.5s ease-in-out infinite; }

/* ── Sticky CTA bar ──────────────────────────────────────── */
.q-sticky {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: rgba(250,246,240,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(30,94,58,.11);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.q-sticky-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--qtext);
  line-height: 1.35;
}

.q-sticky-text span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--qmuted);
}

.q-sticky-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.q-sticky-call {
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--qg);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 10px rgba(30,94,58,.3);
  transition: background var(--qt), transform var(--qt);
}

.q-sticky-call:hover { background: var(--qg2); transform: translateY(-1px); }

.q-sticky-wa {
  padding: 10px 18px;
  border-radius: 100px;
  border: 2px solid var(--qg);
  background: #fff;
  color: var(--qg);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background var(--qt);
}

.q-sticky-wa:hover { background: var(--qg3); }

/* ── Preview card specific ───────────────────────────────── */
.q-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(250,246,240,.15);
  z-index: 2;
  border-radius: 22px;
  pointer-events: none;
}

.q-preview-coming {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,94,58,.9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 3;
  backdrop-filter: blur(4px);
}

/* ── Fade-in reveal ──────────────────────────────────────── */
.q-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}

.q-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 5 — CAREX PREMIUM ELDER CARE
   Prefix: carex-  |  No purple, no price, no plan badges
   ═══════════════════════════════════════════════════════════════ */

#carex-premium-elder-care-section {
  --cx-green:      #1a5c38;
  --cx-green2:     #257a4e;
  --cx-green-lt:   #e6f4ed;
  --cx-cream:      #faf6f0;
  --cx-cream2:     #f3ece1;
  --cx-orange:     #e06228;
  --cx-orange-lt:  #fff1e8;
  --cx-text:       #18221a;
  --cx-sub:        #3a5244;
  --cx-muted:      #6a8070;
  --cx-radius:     28px;
  --cx-t:          0.4s cubic-bezier(.4,0,.2,1);
  background: radial-gradient(ellipse at 15% 0%, #edf8f3 0%, #faf6f0 50%, #f4ede3 100%);
  padding: 80px 0 0;
  overflow: clip;
  font-family: inherit;
  position: relative;
}

/* ── Services sticky tab bar ─────────────────────────────────── */
.carex-svc-tabs-wrap {
  position: sticky;
  top: 72px;
  z-index: 200;
  display: flex;
  align-items: center;
  background: rgba(250,246,240,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(26,61,40,0.12);
  box-shadow: 0 2px 12px rgba(26,61,40,0.07);
  padding: 0 28px;
}
.carex-svc-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  height: 52px;
      justify-content: center;
}
.carex-svc-tabs::-webkit-scrollbar { display: none; }
.carex-svc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(26,61,40,0.12);
  background: transparent;
  color: #3a5244;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
  flex-shrink: 0;
}
.carex-svc-tab:hover {
  background: rgba(26,61,40,0.07);
  color: #1a5c38;
}
.carex-svc-tab-active {
  background: linear-gradient(135deg, #1a5c38, #257a4e);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(26,61,40,0.25);
}

/* Toggle button */
.carex-svc-toggle-btn {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 7px;
  border-radius: 50px;
  border: 1px solid rgba(26,61,40,0.18);
  background: rgba(26,61,40,0.07);
  color: #1a5c38;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
  margin: 10px 0px;
}
.carex-svc-toggle-btn:hover { background: rgba(26,61,40,0.13); }
.carex-svc-label-show { display: none; }
.carex-svc-label-hide { display: inline; }
.carex-svc-icon-close { display: block; }

/* Collapsed state */
#carexSvcTabsWrap.carex-svc-collapsed .carex-svc-tabs      { display: none; }
#carexSvcTabsWrap.carex-svc-collapsed .carex-svc-icon-close { display: none; }
#carexSvcTabsWrap.carex-svc-collapsed .carex-svc-label-hide { display: none; }
#carexSvcTabsWrap.carex-svc-collapsed .carex-svc-label-show {
  display: flex; align-items: center; gap: 5px;
}
#carexSvcTabsWrap.carex-svc-collapsed {
  justify-content: center;
}
#carexSvcTabsWrap.carex-svc-collapsed .carex-svc-toggle-btn {
  margin-left: 0;
}

/* ── Section head ────────────────────────────────────────── */
.carex-head {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 44px;
  text-align: center;
}

.carex-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cx-orange-lt);
  color: var(--cx-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 6px 14px 6px 8px;
  border-radius: 100px;
  margin-bottom: 18px;
  border: 1px solid rgba(224,98,40,.18);
}

.carex-eyebrow-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(231,76,60,.12);
  border-radius: 50%;
  flex-shrink: 0;
}

.carex-title {
  font-size: clamp(24px, 5.5vw, 36px);
  font-weight: 900;
  color: var(--cx-text);
  line-height: 1.18;
  margin: 0 0 12px;
  letter-spacing: -.02em;
}

.carex-title em {
  font-style: normal;
  color: var(--cx-green);
}

.carex-sub {
  font-size: 14.5px;
  color: var(--cx-muted);
  line-height: 1.7;
  margin: 0;
}

/* ── Carousel shell ──────────────────────────────────────── */
.carex-carousel-wrap {
  position: relative;
}

.carex-track-outer {
  overflow: hidden;
  padding: 4px 0 28px;
}

.carex-track {
  display: flex;
  gap: 20px;
  padding: 12px 24px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  align-items: flex-start;
}

.carex-track::-webkit-scrollbar { display: none; }
.carex-track.cx-dragging { cursor: grabbing; }

/* ── Arrow buttons ───────────────────────────────────────── */
.carex-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cx-green-lt);
  color: var(--cx-green);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(26,92,56,.14);
  transition: background var(--cx-t), box-shadow var(--cx-t), opacity var(--cx-t);
  line-height: 1;
}

.carex-arrow:hover {
  background: var(--cx-green-lt);
  box-shadow: 0 6px 20px rgba(26,92,56,.22);
}

.carex-arrow.cx-hidden { opacity: 0; pointer-events: none; }
.carex-arr-prev { left: 6px; }
.carex-arr-next { right: 6px; }


/* ── Dots ────────────────────────────────────────────────── */
.carex-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 0 0 22px;
}

.carex-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0d8c8;
  cursor: pointer;
  transition: background var(--cx-t), width var(--cx-t);
}

.carex-dot.cx-active {
  background: var(--cx-green);
  width: 24px;
  border-radius: 4px;
}

/* ── Card ────────────────────────────────────────────────── */
.carex-card {
  flex: 0 0 84vw;
  width: 84vw;
  max-width: 400px;
  border-radius: var(--cx-radius);
  background: #fff;
  box-shadow: 0 6px 32px rgba(26,92,56,.11), 0 2px 8px rgba(0,0,0,.06);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--cx-t), transform var(--cx-t);
}

.carex-card:hover {
  box-shadow: 0 12px 44px rgba(26,92,56,.18), 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

/* Desktop dominant first card */


/* ── Card image area ─────────────────────────────────────── */
.carex-img-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--cx-radius) var(--cx-radius) 0 0;
}


.carex-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform .6s ease;
}

.carex-card:hover .carex-img { transform: scale(1.04); }

.carex-img-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.02) 38%, rgba(18,38,24,.5) 100%);
  pointer-events: none;
}

/* image badge */
.carex-img-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,.92);
  color: var(--cx-green);
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 100px;
  letter-spacing: .06em;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border: 1px solid rgba(26,92,56,.12);
}

/* ── Hotspots ────────────────────────────────────────────── */
.carex-hs {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 2.5px solid var(--cx-green);
  color: var(--cx-green);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 8;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  transition: background var(--cx-t), transform var(--cx-t);
}

.carex-hs::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(26,92,56,.28);
  animation: cxHsPulse 2.3s ease-in-out infinite;
}

@keyframes cxHsPulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50%       { transform: scale(1.45); opacity: 0; }
}

.carex-hs:hover, .carex-hs.cx-active {
  background: var(--cx-green);
  color: #fff;
  transform: scale(1.1);
}

/* ── Hotspot tooltip ─────────────────────────────────────── */
.carex-hs-tip {
  position: absolute;
  z-index: 20;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  padding: 11px 14px;
  width: 172px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(.95);
  transition: opacity .22s ease, transform .22s ease;
  border-left: 3px solid var(--cx-green);
}

.carex-hs-tip.cx-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.carex-hs-tip-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--cx-text);
  margin: 0 0 3px;
}

.carex-hs-tip-desc {
  font-size: 11px;
  color: var(--cx-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── Overlapping content panel ───────────────────────────── */
.carex-content {
  position: relative;
  z-index: 5;
  margin-top: -36px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 22px 22px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 20px rgba(26,92,56,.07);
}

.carex-card-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-green);
  margin-bottom: 4px;
}

.carex-card-title {
  font-size: 19px;
  font-weight: 900;
  color: var(--cx-text);
  margin: 0 0 5px;
}

.carex-card-desc {
  font-size: 12.5px;
  color: var(--cx-muted);
  line-height: 1.65;
  margin: 0 0 14px;
}

/* ── Trust pills ─────────────────────────────────────────── */
.carex-trust {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.carex-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--cx-text);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px 6px 7px;
  border-radius: 100px;
  white-space: nowrap;
  border: 1.5px solid #e0ecE5;
  box-shadow: 0 1px 4px rgba(26,92,56,.06);
}

.carex-tp-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Amenity chips ───────────────────────────────────────── */
.carex-amenity-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cx-sub);
  margin: 0 0 10px;
}

.carex-chips {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  /* subtle fade-right to hint more content */
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.carex-chips::-webkit-scrollbar { display: none; }


.carex-chip {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--cx-text);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid #e8eeea;
  transition: background var(--cx-t), border-color var(--cx-t), box-shadow var(--cx-t);
  user-select: none;
  box-shadow: 0 1px 4px rgba(26,92,56,.06);
  flex-shrink: 0; /* prevent squishing in scroll */
  white-space: nowrap;
}


.carex-chip:hover {
  background: var(--cx-green-lt);
  border-color: rgba(26,92,56,.3);
  box-shadow: 0 3px 10px rgba(26,92,56,.12);
}

.carex-chip.cx-active {
  background: var(--cx-green-lt);
  border-color: var(--cx-green);
  color: var(--cx-green);
}

.carex-chip-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}


.carex-chip-label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--cx-text);
  white-space: nowrap;
}


.carex-chip-arrow {
  flex-shrink: 0;
  color: #b0c4b8;
  transition: transform var(--cx-t), color var(--cx-t);
}

.carex-chip:hover .carex-chip-arrow,
.carex-chip.cx-active .carex-chip-arrow {
  color: var(--cx-green);
  transform: translateX(2px);
}

.carex-chip-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(24,34,26,.9);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 9px;
  white-space: nowrap;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.carex-chip-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(24,34,26,.9);
}

.carex-chip.cx-active .carex-chip-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Heat zone ───────────────────────────────────────────── */
.carex-heat {
  background: var(--cx-orange-lt);
  border: 1.5px solid rgba(224,98,40,.2);
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 16px;
}

.carex-heat-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--cx-orange);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 9px;
}

.carex-heat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
}

.carex-heat-pt {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cx-sub);
  display: flex;
  align-items: center;
  gap: 6px;
}

.carex-heat-fire-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Services accordion ──────────────────────────────────── */
.carex-acc {
  border-top: 1px solid #e8eeea;
  margin-bottom: 4px;
}

.carex-acc-item { border-bottom: 1px solid #e8eeea; }

.carex-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
}

.carex-acc-hdr:hover .carex-acc-name { color: var(--cx-green); }

.carex-acc-left {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
}

.carex-acc-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
}

.carex-acc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cx-text);
  transition: color var(--cx-t);
}

.carex-acc-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cx-muted);
  transition: transform var(--cx-t), color var(--cx-t);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.carex-acc-item.cx-open .carex-acc-chev { transform: rotate(180deg); color: var(--cx-green); }
.carex-acc-item.cx-open .carex-acc-name { color: var(--cx-green); }

.carex-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cx-t);
}

.carex-acc-item.cx-open .carex-acc-body { grid-template-rows: 1fr; }

.carex-acc-inner { overflow: hidden; }

.carex-acc-text {
  padding: 0 0 13px 39px;
  font-size: 12px;
  color: var(--cx-muted);
  line-height: 1.68;
}

.carex-rm-text { display: none; }
.carex-acc-item.cx-expanded .carex-rm-text { display: inline; }

.carex-rm-btn {
  background: none;
  border: none;
  color: var(--cx-green);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-left: 3px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Card footer ─────────────────────────────────────────── */
.carex-footer {
  padding: 14px 22px 20px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.carex-btn {
  flex: 1;
  min-width: 76px;
  padding: 12px 10px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background var(--cx-t), transform var(--cx-t), box-shadow var(--cx-t);
  white-space: nowrap;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.carex-btn-call {
  background: var(--cx-green);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 3px 12px rgba(26,92,56,.3);
}

.carex-btn-call:hover {
  background: var(--cx-green2);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(26,92,56,.38);
}

.carex-btn-wa {
  background: #e6f4ed;
  color: var(--cx-green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.carex-btn-wa:hover { background: #d0eddb; }

.carex-btn-details {
  background: var(--cx-text);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;    text-decoration: none;
}

.carex-btn-details:hover { background: #2c3e30; transform: translateY(-1px); }

.carex-btn-enquiry {
  background: var(--cx-orange-lt);
  color: var(--cx-orange);
  border: 1.5px solid rgba(224,98,40,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
      text-decoration: none;
}

.carex-btn-enquiry:hover { background: #fde0cc; }

/* ── Internal sliding panel ──────────────────────────────── */
.carex-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100% - 200px);
  background: #fff;
  z-index: 50;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform .48s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -6px 28px rgba(26,92,56,.12);
}

.carex-panel.cx-panel-open { transform: translateY(0); }

/* Fix white placeholder on textarea inside the panel */
.carex-panel .ctu-field::placeholder { color: var(--cx-muted); }

.carex-panel-handle {
  width: 38px;
  height: 4px;
  background: #dde9e3;
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.carex-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 17px 10px;
  border-bottom: 1px solid #edf3ef;
  flex-shrink: 0;
}

.carex-panel-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--cx-text);
}

.carex-panel-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0f5f2;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--cx-muted);
  transition: background var(--cx-t);
  flex-shrink: 0;
}

.carex-panel-close:hover { background: #ddeae3; }

.carex-panel-body {
  flex: 0 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 17px 16px;
  scrollbar-width: thin;
  scrollbar-color: #c0d8c8 transparent;
  min-height: 0;
}

/* Panel body scrolls if content exceeds available height */

/* Details panel content */
.carex-dtl-sec {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--cx-green);
  margin: 12px 0 8px;
}

.carex-dtl-sec:first-child { margin-top: 0; }

.carex-dtl-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.carex-dtl-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--cx-sub);
  line-height: 1.55;
}

.carex-dtl-list li::before {
  content: "✓";
  color: var(--cx-green);
  font-weight: 900;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}

.carex-dtl-para {
  font-size: 12.5px;
  color: var(--cx-muted);
  line-height: 1.7;
  margin: 0 0 10px;
}

/* ── Details panel: step-by-step accordion sections ────────── */
.carex-dtl-acc {
  border: 1.5px solid #e8f0eb;
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #f8fcf9;
  transition: border-color 0.2s;
}
.carex-dtl-acc:hover { border-color: #c5dece; }
.carex-dtl-acc.cx-dtl-open { border-color: #a8d4bc; background: #fff; }

.carex-dtl-acc-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  cursor: pointer;
  user-select: none;
}
.carex-dtl-acc-ico {
  font-size: 16px;
  flex-shrink: 0;
}
.carex-dtl-acc-lbl {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--cx-text);
}
.carex-dtl-acc-chev {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8f0eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cx-green);
  flex-shrink: 0;
  transition: background 0.2s;
}
.carex-dtl-acc.cx-dtl-open .carex-dtl-acc-chev {
  background: var(--cx-green);
  color: #fff;
}
.carex-dtl-acc-chev svg { transition: transform 0.3s; }
.carex-dtl-acc.cx-dtl-open .carex-dtl-acc-chev svg { transform: rotate(180deg); }

.carex-dtl-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.carex-dtl-acc.cx-dtl-open .carex-dtl-acc-body { grid-template-rows: 1fr; }
.carex-dtl-acc-inner { overflow: hidden; }
.carex-dtl-acc-content {
  padding: 0 13px 12px 13px;
}
.carex-dtl-acc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.carex-dtl-acc-list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--cx-sub);
  line-height: 1.55;
}
.carex-dtl-acc-list li::before {
  content: "✓";
  color: var(--cx-green);
  font-weight: 900;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}
.carex-dtl-acc-para {
  font-size: 12px;
  color: var(--cx-muted);
  line-height: 1.7;
  margin: 0;
}

.carex-panel-cta {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #edf3ef;
}

.carex-panel-cta a {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--cx-t);
}

.carex-pcta-call { background: var(--cx-green); color: #fff; }
.carex-pcta-call:hover { background: var(--cx-green2); }
.carex-pcta-wa   { background: var(--cx-green-lt); color: var(--cx-green); }
.carex-pcta-wa:hover { background: #d0eddb; }

/* ── Enquiry form panel ──────────────────────────────────── */
.carex-form { display: flex; flex-direction: column; gap: 14px; }

.carex-fg { display: flex; flex-direction: column; gap: 5px; position: relative; }

/* ── Phone field with country picker + digit boxes ───────── */

/* Row: cc button + digit boxes side by side */
.carex-phone-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

.carex-cc-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  background: #f5fbf7;
  border: 1.5px solid #cdddd5;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--cx-text);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: background var(--cx-t), border-color var(--cx-t);
}

.carex-cc-btn:hover,
.carex-cc-btn.cx-cc-open { background: #e6f4ed; border-color: var(--cx-green); }

.carex-cc-flag { font-size: 16px; line-height: 1; }
.carex-cc-code { font-size: 12px; font-weight: 700; color: var(--cx-green); }
.carex-cc-arrow { color: var(--cx-muted); flex-shrink: 0; }

/* ── Unified single-box phone display ────────────────────── */

/* The visible single container — looks like a normal input field */
.carex-digits-wrap {
  flex: 1;
  position: relative;
  cursor: text;
  display: flex;
  align-items: center;
  height: 44px;
  border: 1.5px solid #cdddd5;
  border-radius: 11px;
  background: #fff;
  padding: 0 14px;
  transition: border-color var(--cx-t), box-shadow var(--cx-t);
  overflow: hidden;
}

/* Focus ring when typing */
.carex-digits-wrap.cx-focused {
  border-color: var(--cx-green);
  box-shadow: 0 0 0 3px rgba(26,92,56,.1);
}

/* Completion state — all 10 digits filled */
.carex-digits-wrap.cx-complete {
  border-color: var(--cx-green);
  box-shadow: 0 0 0 3px rgba(26,92,56,.15);
  background: #f4fbf7;
}
/* Small checkmark badge that appears at the right edge on completion */
.carex-digits-wrap.cx-complete::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
  flex-shrink: 0;
  z-index: 2;
  animation: cxCheckIn 0.22s ease forwards;
}
@keyframes cxCheckIn {
  from { opacity: 0; transform: translateY(-50%) scale(0.6); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Holds digit chars + separator — rendered inline, no borders */
.carex-digits-group {
  display: contents; /* flatten into wrap flex context */
}

/* Each character slot — no border, no background, just the char */
.carex-digit-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;           /* fixed char width for monospace feel */
  font-size: 15px;
  font-weight: 700;
  color: var(--cx-text);
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
  transition: color var(--cx-t);
}

/* X placeholder character — light color */
.carex-digit-x {
  font-size: 15px;
  font-weight: 600;
  color: #c0d0c8;
  letter-spacing: 0;
  pointer-events: none;
}

/* Filled digit — dark, bold */
.carex-digit-box.cx-filled {
  color: var(--cx-text);
}

/* Active cursor position — vertical blinking | cursor before the slot */
.carex-digit-box.cx-active {
  position: relative;
}
/* Normal cursor: appears to the LEFT of the active (next-to-fill) slot */
.carex-digit-box.cx-active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--cx-green);
  border-radius: 2px;
  animation: cxCursorBlink 1s step-end infinite;
}
/* End cursor: after 10th digit, cursor appears to the RIGHT of box 9 */
.carex-digit-box.cx-active.cx-cursor-end::before {
  display: none; /* suppress left cursor */
}
.carex-digit-box.cx-active.cx-cursor-end::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--cx-green);
  border-radius: 2px;
  animation: cxCursorBlink 1s step-end infinite;
}

@keyframes cxCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Separator dash — inline, same size as chars */
.carex-digits-sep {
  font-size: 15px;
  font-weight: 700;
  color: #9ab4a8;
  flex-shrink: 0;
  margin: 0 2px;
  user-select: none;
}

/* Hidden real input — invisible, captures keystrokes */
.carex-digits-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1px;
  color: transparent;
  caret-color: transparent;
  cursor: text;
  z-index: 1;
}

/* Country code button wrapper — dropdown anchor */
.carex-cc-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Country dropdown — anchored to .carex-cc-wrap */
.carex-cc-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: auto;
  min-width: 260px;
  background: #fff;
  border: 1.5px solid #d4e8db;
  border-radius: 13px;
  box-shadow: 0 10px 32px rgba(26,92,56,.18);
  z-index: 200;
  display: none;
  flex-direction: column;
  overflow: hidden;
  max-height: 280px;
}

.carex-cc-dropdown.cx-cc-open { display: flex; }

.carex-cc-search-wrap {
  padding: 10px 12px 8px;
  border-bottom: 1px solid #e8eeea;
  flex-shrink: 0;
}

.carex-cc-search {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #cdddd5;
  border-radius: 8px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
  transition: border-color var(--cx-t);
  box-sizing: border-box;
}

.carex-cc-search:focus { border-color: var(--cx-green); }

.carex-cc-list {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #c0d8c8 transparent;
}

.carex-cc-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--cx-text);
  transition: background var(--cx-t);
  border-bottom: 1px solid #f0f5f2;
}

.carex-cc-item:last-child { border-bottom: none; }
.carex-cc-item:hover { background: var(--cx-green-lt); }
.carex-cc-item.cx-cc-selected { background: #e6f4ed; font-weight: 700; }

.carex-cc-item-flag { font-size: 18px; line-height: 1; flex-shrink: 0; }

.carex-cc-item-name { flex: 1; font-size: 12.5px; }

.carex-cc-item-dial { font-size: 12px; font-weight: 700; color: var(--cx-green); }

.carex-flabel {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cx-sub);
}

.carex-finput {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid #cdddd5;
  border-radius: 11px;
  font-size: 13px;
  color: var(--cx-text);
  background: #fff;
  outline: none;
  transition: border-color var(--cx-t), box-shadow var(--cx-t);
  box-sizing: border-box;
  font-family: inherit;
}

.carex-finput::placeholder { color: var(--cx-muted); }

.carex-finput:focus {
  border-color: var(--cx-green);
  box-shadow: 0 0 0 3px rgba(26,92,56,.1);
}

/* inline calendar trigger */
.carex-cal-btn {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid #cdddd5;
  border-radius: 11px;
  font-size: 13px;
  color: var(--cx-text);
  background: #fff;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  font-weight: 600;
  transition: border-color var(--cx-t), box-shadow var(--cx-t);
  box-sizing: border-box;
}

.carex-cal-btn:focus, .carex-cal-btn.cx-cal-open {
  border-color: var(--cx-green);
  box-shadow: 0 0 0 3px rgba(26,92,56,.1);
}

.carex-cal-icon { font-size: 15px; flex-shrink: 0; }

/* Calendar: absolute dropdown so it doesn't push submit button */
.carex-cal-fg {
  position: relative;
}

.carex-cal-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 100;
  display: none;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 8px 28px rgba(26,92,56,.18);
  border: 1.5px solid #d4e8db;
  overflow: hidden;
}

.carex-cal-wrap.cx-cal-expand { display: block; }

.carex-cal-inner { overflow: hidden; }

.carex-cal {
  background: #f5fbf7;
  padding: 12px;
}

.carex-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.carex-cal-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--cx-green-lt);
  color: var(--cx-green);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cx-t);
}

.carex-cal-nav-btn:hover { background: #c8e4d0; }

.carex-cal-month-lbl {
  font-size: 13px;
  font-weight: 800;
  color: var(--cx-text);
}

.carex-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.carex-cal-dname {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--cx-muted);
  text-align: center;
  padding: 3px 0 4px;
  text-transform: uppercase;
}

.carex-cal-day {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 7px 2px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--cx-text);
  transition: background var(--cx-t), color var(--cx-t);
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carex-cal-day:hover:not(.cx-cal-empty):not(.cx-cal-past) {
  background: var(--cx-green-lt);
  color: var(--cx-green);
}

.carex-cal-day.cx-cal-selected {
  background: var(--cx-green);
  color: #fff;
  font-weight: 800;
}

.carex-cal-day.cx-cal-today {
  border: 2px solid var(--cx-green);
  color: var(--cx-green);
  font-weight: 800;
}

.carex-cal-day.cx-cal-past { color: #ccc; cursor: default; }
.carex-cal-empty { cursor: default; }

/* Submit */
.carex-submit {
  width: 100%;
  padding: 14px;
  border-radius: 13px;
  background: #1a3d28;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26,92,56,.3);
  transition: transform var(--cx-t), box-shadow var(--cx-t);
  font-family: inherit;
  letter-spacing: .02em;
}

.carex-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26,92,56,.38);
}

/* ── Success state ───────────────────────────────────────── */
.carex-success {
  display: none;
  text-align: center;
  padding: 20px 10px;
}

.carex-success.cx-show { display: block; }

.carex-success-icon {
  display: block;
  margin-bottom: 10px;
  line-height: 0;
}

.carex-success-msg {
  font-size: 14px;
  font-weight: 800;
  color: var(--cx-text);
  margin: 0 0 5px;
}

.carex-success-sub {
  font-size: 12px;
  color: var(--cx-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}

/* sent-list replaces old button list */
.carex-sent-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 14px;
  text-align: left;
}

.carex-sent-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--cx-green-lt);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--cx-sub);
  line-height: 1.5;
}

.carex-sent-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  margin-top: 1px;
}

.carex-sent-row em {
  font-style: normal;
  font-weight: 700;
  color: var(--cx-green);
  word-break: break-all;
}

.carex-success-note {
  font-size: 10.5px;
  color: var(--cx-muted);
  line-height: 1.55;
  text-align: center;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid #e8eeea;
}

.carex-form-notice {
  font-size: 10.5px;
  color: var(--cx-muted);
  text-align: center;
  line-height: 1.55;
}

/* ── Field helper hint tooltips ──────────────────────────── */
/*
 * Hints are positioned absolute within .carex-fg (position:relative).
 * They float to the top-right, overlapping the label row, as a floating
 * pill badge. On focus, they slide in from right.
 */
.carex-hint {
  position: absolute;
  right: 0;
  top: -15px;
  background: #f0faf4;
  border: 1px solid rgba(26,92,56,.18);
  border-radius: 20px;
  padding: 3px 9px 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #2c6e45;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26,92,56,.10);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 20;
  line-height: 1.5;
  transform: translateX(4px);
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Small left arrow pointing left (toward the label) */
.carex-hint::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cx-green);
  flex-shrink: 0;
}
/* Down-arrow pointer below the pill, toward the input */
.carex-hint::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 18px;
  width: 8px;
  height: 8px;
  background: #f0faf4;
  border-right: 1px solid rgba(26,92,56,.18);
  border-bottom: 1px solid rgba(26,92,56,.18);
  transform: rotate(45deg);
}
.carex-hint.cx-hint-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/* Hint text — no extra padding needed, gap handles it */
.carex-hint-text {
  display: inline;
}

/* ── Preview card badge ──────────────────────────────────── */
.carex-preview-badge {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26,92,56,.88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 8;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ── Section-local FABs ──────────────────────────────────── */
.carex-fabs {
  position: fixed;
  bottom: 28px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  transform: translateY(16px);
}

.carex-fabs.cx-fab-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.carex-fab {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
  color: #fff;
}

.carex-fab:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(0,0,0,.27); }
.carex-fab-call { background: #e74c3c; }
.carex-fab-wa   { background: #25d366; }

.carex-fab-lbl {
  position: absolute;
  right: 62px;
  background: rgba(20,30,22,.88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.carex-fab:hover .carex-fab-lbl { opacity: 1; }

@keyframes cxFabPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 0 rgba(26,92,56,.4); }
  50%       { box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 9px rgba(26,92,56,0); }
}

.carex-fab-call { animation: cxFabPulse 2.6s ease-in-out infinite; }

/* ── Sticky CTA bar ──────────────────────────────────────── */
.carex-sticky {
  position: sticky;
  bottom: 0;
  z-index: 60;
  background: rgba(250,246,240,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(26,92,56,.1);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.carex-sticky-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--cx-text);
  line-height: 1.35;
}

.carex-sticky-text span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--cx-muted);
}

.carex-sticky-btns {
  display: flex;
  gap: 9px;
  flex-shrink: 0;
}

.carex-sticky-call {
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--cx-green);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 11px rgba(26,92,56,.3);
  transition: background var(--cx-t), transform var(--cx-t);
}

.carex-sticky-call:hover { background: var(--cx-green2); transform: translateY(-1px); }

.carex-sticky-wa {
  padding: 10px 20px;
  border-radius: 100px;
  border: 2px solid var(--cx-green);
  background: #fff;
  color: var(--cx-green);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background var(--cx-t);
}

.carex-sticky-wa:hover { background: var(--cx-green-lt); }

/* ── Scroll reveal ───────────────────────────────────────── */
.carex-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}

.carex-reveal.cx-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile alignment & layout fixes ────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   SUCCESS STORIES SECTION  (cxss- prefix)
════════════════════════════════════════════════════════════════ */
.cxss-section {
  background: #f7fbf8;
  padding: 72px 0 80px;
  overflow: hidden;
}
.cxss-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.cxss-header {
  text-align: center;
  margin-bottom: 44px;
}
.cxss-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cx-green, #1a5c38);
  background: #e6f4ed;
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.cxss-title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  color: #18221a;
  margin: 0 0 12px;
  line-height: 1.2;
}
.cxss-subtitle {
  font-size: 15.5px;
  color: #4a5c50;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Carousel outer */
.cxss-carousel-outer {
  position: relative;
  margin-bottom: 22px;
}
.cxss-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  cursor: grab;
}
.cxss-track::-webkit-scrollbar { display: none; }
.cxss-track.cxss-dragging { cursor: grabbing; }

/* Card */
.cxss-card {
  flex: 0 0 calc(60% - 11px);
  min-width: 340px;
  max-width: 680px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(26,92,56,.07), 0 1px 4px rgba(0,0,0,.06);
  scroll-snap-align: start;
  transition: box-shadow var(--cx-t, 0.4s cubic-bezier(.4,0,.2,1)), transform var(--cx-t, 0.4s cubic-bezier(.4,0,.2,1));
}
.cxss-card:hover {
  box-shadow: 0 8px 32px rgba(26,92,56,.14), 0 2px 8px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

/* Card image */
.cxss-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.cxss-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.cxss-card:hover .cxss-img { transform: scale(1.04); }
.cxss-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.48) 100%);
  pointer-events: none;
}
.cxss-real-label {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(26,92,56,.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.cxss-chips-wrap {
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.cxss-chip {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  user-select: none;
}
.cxss-chip:hover,
.cxss-chip.cxss-chip-active {
  background: var(--cx-green, #1a5c38);
  border-color: var(--cx-green, #1a5c38);
}

/* Card body */
.cxss-body {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Family row */
.cxss-family-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cxss-family-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cx-green, #1a5c38);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cxss-av-blue { background: #1a4a8a; }
.cxss-av-orange { background: #b55a1a; }
.cxss-family-name {
  font-size: 14px;
  font-weight: 700;
  color: #18221a;
  line-height: 1.3;
}
.cxss-family-loc {
  font-size: 11.5px;
  color: #6b7f70;
}
.cxss-verified-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cx-green, #1a5c38);
  background: #e6f4ed;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* Story title */
.cxss-story-title {
  font-size: 18px;
  font-weight: 800;
  color: #18221a;
  margin: 0;
  line-height: 1.35;
}

/* Timeline */
.cxss-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid #d4eadb;
  padding-left: 14px;
  margin-left: 4px;
}
.cxss-tl-item {
  position: relative;
  font-size: 13px;
  color: #3d5244;
  line-height: 1.6;
  padding: 6px 0;
}
.cxss-tl-item + .cxss-tl-item { border-top: 1px dashed #d4eadb; }
.cxss-tl-dot {
  position: absolute;
  left: -19px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c5dfc9;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #c5dfc9;
}
.cxss-tl-before .cxss-tl-dot { background: #e57373; box-shadow: 0 0 0 2px #e57373; }
.cxss-tl-during .cxss-tl-dot { background: #ffa726; box-shadow: 0 0 0 2px #ffa726; }
.cxss-tl-after .cxss-tl-dot  { background: var(--cx-green, #1a5c38); box-shadow: 0 0 0 2px var(--cx-green, #1a5c38); }
.cxss-tl-item strong { color: #18221a; font-weight: 700; }

/* Expand panel */
.cxss-expand-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
  opacity: 0;
}
.cxss-expand-wrap.cxss-open {
  max-height: 600px;
  opacity: 1;
}
.cxss-expand-body {
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cxss-expand-body p {
  font-size: 13.5px;
  color: #3d5244;
  line-height: 1.7;
  margin: 0;
}
.cxss-quote {
  font-style: italic;
  color: var(--cx-green, #1a5c38) !important;
  background: #e6f4ed;
  border-left: 3px solid var(--cx-green, #1a5c38);
  padding: 8px 12px !important;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px !important;
}

/* Read more button */
.cxss-read-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--cx-green, #1a5c38);
  transition: color 0.18s ease;
}
.cxss-read-btn:hover { color: #257a4e; }
.cxss-read-chevron {
  transition: transform 0.3s ease;
}
.cxss-read-btn[aria-expanded="true"] .cxss-read-chevron {
  transform: rotate(180deg);
}
.cxss-read-btn-text { pointer-events: none; }

/* Card footer */
.cxss-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #e8f2eb;
}
.cxss-verified-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #5a7a62;
  font-weight: 600;
}
.cxss-card-ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cxss-cta-call {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--cx-green, #1a5c38);
  border: 1.5px solid var(--cx-green, #1a5c38);
  border-radius: 8px;
  padding: 6px 13px;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.cxss-cta-call:hover {
  background: var(--cx-green, #1a5c38);
  color: #fff;
}
.cxss-cta-enq {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--cx-green, #1a5c38);
  border: none;
  border-radius: 8px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.cxss-cta-enq:hover { background: #257a4e; }

/* Arrow nav */
.cxss-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #d4eadb;
  box-shadow: 0 2px 12px rgba(26,92,56,.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cx-green, #1a5c38);
  z-index: 10;
  transition: background 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
}
.cxss-arrow:hover {
  background: var(--cx-green, #1a5c38);
  color: #fff;
  box-shadow: 0 4px 16px rgba(26,92,56,.25);
}
.cxss-arrow:disabled { opacity: 0.35; pointer-events: none; }
.cxss-arrow-prev { left: -18px; }
.cxss-arrow-next { right: -18px; }

/* Dots */
.cxss-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 28px;
}
.cxss-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c5dfc9;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, width 0.25s ease, border-radius 0.25s ease;
  padding: 0;
}
.cxss-dot-active {
  width: 24px;
  border-radius: 4px;
  background: var(--cx-green, #1a5c38);
}

/* Filter chips row */
.cxss-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.cxss-filter-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7f70;
  margin-right: 4px;
}
.cxss-filter-chip {
  font-size: 12px;
  font-weight: 600;
  color: #3d5244;
  background: #fff;
  border: 1.5px solid #c5dfc9;
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cxss-filter-chip:hover {
  border-color: var(--cx-green, #1a5c38);
  color: var(--cx-green, #1a5c38);
}
.cxss-filter-active,
.cxss-filter-chip.cxss-filter-active {
  background: var(--cx-green, #1a5c38);
  border-color: var(--cx-green, #1a5c38);
  color: #fff;
}

/* Trust highlight box */
.cxss-trust-box {
  background: #fff;
  border: 1.5px solid #c5dfc9;
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 36px;
  box-shadow: 0 2px 12px rgba(26,92,56,.06);
}
.cxss-trust-title {
  font-size: 16px;
  font-weight: 800;
  color: #18221a;
  margin: 0 0 22px;
  text-align: center;
}
.cxss-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cxss-trust-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cxss-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e6f4ed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cx-green, #1a5c38);
}
.cxss-trust-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cxss-trust-content strong {
  font-size: 14px;
  font-weight: 700;
  color: #18221a;
  display: block;
}
.cxss-trust-content span {
  font-size: 12.5px;
  color: #4a5c50;
  line-height: 1.5;
}

/* Section CTA */
.cxss-section-cta {
  text-align: center;
}
.cxss-cta-copy {
  font-size: 16px;
  color: #3d5244;
  margin: 0 0 18px;
  font-weight: 500;
}
.cxss-cta-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cxss-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--cx-green, #1a5c38);
  border-radius: 10px;
  padding: 12px 24px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.cxss-cta-primary:hover {
  background: #257a4e;
  transform: translateY(-1px);
}
.cxss-cta-secondary {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--cx-green, #1a5c38);
  background: #fff;
  border: 2px solid var(--cx-green, #1a5c38);
  border-radius: 10px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cxss-cta-secondary:hover {
  background: var(--cx-green, #1a5c38);
  color: #fff;
  transform: translateY(-1px);
}

/* Scroll fade-in via carex-reveal */
.cxss-section.carex-reveal { opacity: 0; transform: translateY(24px); }
.cxss-section.cx-visible { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; }

/* Responsive */

/* ═══════════════════════════════════════════════════════════════
   AMENITIES SECTION  (cxam- prefix)
════════════════════════════════════════════════════════════════ */

.cxam-section {
  background: linear-gradient(180deg, #fdf8f0 0%, #fafffe 50%, #f8fbff 100%);
  padding: 72px 0 80px;
  overflow: hidden;
}
.cxam-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
.cxam-header { text-align: center; margin-bottom: 44px; }
.cxam-header-deco { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.cxam-deco-line { width: 48px; height: 1.5px; background: #c9873a; opacity: .5; }
.cxam-title {
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 900;
  color: #1a3326;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 10px;
  font-family: Georgia, 'Times New Roman', serif;
}
.cxam-tagline {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #c9873a;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cxam-subtitle { font-size: 15px; color: #5a6e60; max-width: 520px; margin: 0 auto; line-height: 1.65; }

/* Tab wrap */
.cxam-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e8ede9;
  border-bottom: 2px solid #e8ede9;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 -24px 0;
  padding: 0 24px;
  box-shadow: 0 4px 20px rgba(26,51,38,.06);
}
.cxam-tab-arrow {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  background: #f2f7f3;
  border: 1.5px solid #d4e5d9;
  color: #3a5c42;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s;
  flex-shrink: 0;
}
.cxam-tab-arrow:hover { background: #1a5c38; color: #fff; }
.cxam-tab-arrow:disabled { opacity: .3; pointer-events: none; }

.cxam-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  padding: 8px 4px;
}
.cxam-tabs::-webkit-scrollbar { display: none; }

.cxam-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #5a6e60;
  line-height: 1.3;
  white-space: nowrap;
  transition: background .2s, color .2s, transform .15s;
  scroll-snap-align: start;
  flex-shrink: 0;
  position: relative;
  text-align: center;
}
.cxam-tab:hover { background: #f0f7f2; color: #1a5c38; transform: translateY(-1px); }
.cxam-tab-active {
  background: #1a3326;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(26,51,38,.25);
}
.cxam-tab-active .cxam-tab-icon svg { stroke: #fff; }
.cxam-tab-icon { display: flex; align-items: center; justify-content: center; }
.cxam-tab-icon svg { stroke: #5a6e60; transition: stroke .2s; }
.cxam-tab:hover .cxam-tab-icon svg { stroke: #1a5c38; }

/* Panels */
.cxam-panels { padding: 0; }
.cxam-panel { display: none; }
.cxam-panel-active { display: block; animation: cxamFadeIn .35s ease; }
@keyframes cxamFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Panel hero layout */
.cxam-panel-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  padding: 40px 0 24px;
  align-items: start;
}
.cxam-panel-intro { display: flex; flex-direction: column; gap: 14px; }
.cxam-panel-num {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: #b0bdb3;
  background: #f4f8f5;
  border-radius: 6px;
  padding: 3px 10px;
  display: inline-block;
  width: fit-content;
}
.cxam-panel-tag {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
  color: #1a5c38;
}
.cxam-panel-title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: #1a3326;
  line-height: 1.25;
  margin: 0;
  font-family: Georgia, serif;
}
.cxam-panel-line { width: 36px; height: 2px; background: #1a5c38; border-radius: 2px; }
.cxam-panel-desc { font-size: 13.5px; color: #4a5c50; line-height: 1.7; margin: 0; }
.cxam-panel-promise {
  background: #fff;
  border: 1.5px solid #d4e5d9;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 4px;
}
.cxam-promise-img { width: 100%; height: 120px; object-fit: cover; display: block; }
.cxam-promise-text {
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  font-style: italic;
  color: #3a5244;
  font-weight: 600;
  line-height: 1.5;
}
.cxam-promise-text svg { flex-shrink: 0; margin-top: 1px; }

/* Cards grid */
.cxam-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.cxam-amenity-card {
  background: #fff;
  border: 1.5px solid #e8ede9;
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .28s, transform .28s, border-color .2s;
  cursor: pointer;
}
.cxam-amenity-card:hover {
  box-shadow: 0 8px 32px rgba(26,92,56,.12);
  transform: translateY(-4px);
  border-color: #b0d4b8;
}
.cxam-ac-img-wrap { position: relative; height: 150px; overflow: hidden; }
.cxam-ac-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cxam-amenity-card:hover .cxam-ac-img-wrap img { transform: scale(1.06); }
.cxam-ac-icon-badge {
  position: absolute; bottom: -16px; left: 16px;
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  border: 2.5px solid #fff;
  z-index: 2;
}
.cxam-ac-body { padding: 24px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cxam-ac-body h4 { font-size: 14px; font-weight: 800; color: #1a3326; margin: 0; }
.cxam-ac-body p { font-size: 12px; color: #4a5c50; line-height: 1.55; margin: 0; }

/* Learn More button variants */
.cxam-learn-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  background: none; border: none; padding: 0;
  cursor: pointer; transition: gap .2s, color .18s;
  color: #1a5c38;
}
.cxam-learn-btn:hover { gap: 8px; }
.cxam-btn-red   { color: #c0392b; }
.cxam-btn-blue  { color: #1a5276; }
.cxam-btn-green { color: #1e8449; }
.cxam-btn-amber { color: #b7770d; }
.cxam-btn-purple{ color: #7d3c98; }
.cxam-btn-teal  { color: #0e6655; }
.cxam-btn-gold  { color: #7d6608; }
.cxam-btn-cyan  { color: #1a6b8a; }

/* Card expand */
.cxam-ac-expand {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .28s ease, padding .3s ease;
  font-size: 12px; color: #4a5c50; line-height: 1.65;
  padding: 0 14px;
}
.cxam-ac-expand.cxam-open {
  max-height: 300px; opacity: 1;
  padding: 0 14px 14px;
}
.cxam-ac-expand p { margin: 0; }

/* Trust bar */
.cxam-trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-top: 44px;
  border: 1.5px solid #d4e5d9;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.cxam-tb-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: #3a5244;
  padding: 16px 22px;
  border-right: 1px solid #e8ede9;
  flex: 1; min-width: 160px;
}
.cxam-tb-item:last-child { border-right: none; }
.cxam-tb-item svg { color: #1a5c38; flex-shrink: 0; stroke: #1a5c38; }

/* Responsive */

/* ═══════════════════════════════════════════════════════════════
   AMENITIES TABS SECTION  (cat- prefix)
════════════════════════════════════════════════════════════════ */

/* --- tokens --- */
:root {
  --cat-green:   #1a3d28;
  --cat-green2:  #2a6044;
  --cat-green3:  #3d8a5e;
  --cat-green-lt:#e8f4ee;
  --cat-orange:  #c9873a;
  --cat-cream:   #faf6ef;
  --cat-cream2:  #f3ede2;
  --cat-text:    #1a2e1e;
  --cat-text2:   #4a5e50;
  --cat-border:  #dde8e1;
  --cat-r:       16px;
  --cat-t:       0.32s cubic-bezier(.4,0,.2,1);
}

/* --- section wrapper --- */
.cat-section {
  background: linear-gradient(175deg, var(--cat-cream) 0%, #fff8f0 40%, #f6faf7 100%);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.cat-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,135,58,.08) 0%, transparent 70%);
  pointer-events: none;
}
.cat-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* --- header --- */
.cat-header {
  margin-bottom: 36px;
}
.cat-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cat-orange);
  margin-bottom: 16px;
}
.cat-header-top {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: center;
}
.cat-title {
  font-size: clamp(42px, 7vw, 80px);
  font-weight: 900;
  color: var(--cat-green);
  letter-spacing: -.03em;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  margin: 0 0 12px;
}
.cat-subtitle {
  font-size: 15px;
  color: var(--cat-text2);
  line-height: 1.65;
  max-width: 500px;
  margin: 0;
}
.cat-header-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 160px;
}
.cat-header-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cat-header-img-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(26,61,40,.3) 0%, transparent 60%);
}

/* --- tab bar --- */
.cat-tabbar-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250,246,239,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(26,61,40,.08), 0 1px 4px rgba(0,0,0,.04);
  margin-bottom: 28px;
  overflow: hidden;
}
.cat-tabbar {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 4px;
  padding: 8px;
}
.cat-tabbar::-webkit-scrollbar { display: none; }
.cat-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 16px;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cat-t), color var(--cat-t), border-color var(--cat-t), transform .15s;
  flex-shrink: 0;
  color: var(--cat-text2);
}
.cat-tab:hover {
  background: var(--cat-green-lt);
  color: var(--cat-green);
  transform: translateY(-1px);
}
.cat-tab-active {
  background: var(--cat-green) !important;
  color: #fff !important;
  border-color: var(--cat-green) !important;
  box-shadow: 0 4px 16px rgba(26,61,40,.28);
}
.cat-tab svg { flex-shrink: 0; }
.cat-tab-active svg { stroke: #fff; }
.cat-tab-main {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.cat-tab-sub {
  font-size: 10px;
  font-weight: 500;
  opacity: .75;
  line-height: 1;
}

/* --- body 2-col --- */
.cat-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
  min-height: 520px;
}

/* --- left menu --- */
.cat-menu {
  background: #fff;
  border: 1.5px solid var(--cat-border);
  border-radius: var(--cat-r);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26,61,40,.05);
  position: sticky;
  top: 80px;
}
.cat-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f4f1;
  transition: background var(--cat-t), color var(--cat-t);
  gap: 10px;
}
.cat-menu-item:last-child { border-bottom: none; }
.cat-menu-item:hover { background: var(--cat-green-lt); }
.cat-menu-item.cat-menu-active {
  background: var(--cat-green-lt);
  border-left: 3px solid var(--cat-green);
}
.cat-menu-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.cat-menu-item-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--cat-cream2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cat-green2);
  transition: background var(--cat-t);
}
.cat-menu-item.cat-menu-active .cat-menu-item-icon {
  background: var(--cat-green);
  color: #fff;
}
.cat-menu-item-info { flex: 1; min-width: 0; }
.cat-menu-item-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cat-text);
  display: block;
  line-height: 1.25;
}
.cat-menu-item-sub {
  font-size: 10.5px;
  color: var(--cat-text2);
  display: block;
  margin-top: 1px;
}
.cat-menu-item-arrow {
  color: var(--cat-text2);
  flex-shrink: 0;
  transition: transform var(--cat-t);
}
.cat-menu-item.cat-menu-active .cat-menu-item-arrow {
  color: var(--cat-green);
  transform: translateX(3px);
}

/* --- right content panel --- */
.cat-content {
  background: #fff;
  border: 1.5px solid var(--cat-border);
  border-radius: var(--cat-r);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(26,61,40,.06);
  animation: catContentIn .3s ease;
}
@keyframes catContentIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cat-content-inner { padding: 28px; }
.cat-content-top {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}
.cat-content-left { display: flex; flex-direction: column; gap: 14px; }
.cat-cat-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cat-green2);
  background: var(--cat-green-lt);
  border: 1px solid #b8d9c5;
  border-radius: 20px;
  padding: 3px 12px;
  width: fit-content;
}
.cat-content-title {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  color: var(--cat-text);
  margin: 0;
  line-height: 1.25;
  font-family: Georgia, serif;
}
.cat-content-desc {
  font-size: 13.5px;
  color: var(--cat-text2);
  line-height: 1.65;
  margin: 0;
}
/* chips */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cat-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cat-green2);
  background: var(--cat-green-lt);
  border: 1px solid #c8dfd0;
  border-radius: 20px;
  padding: 4px 11px;
}
.cat-chip svg { flex-shrink: 0; color: var(--cat-green3); }
/* highlight box */
.cat-highlight-box {
  display: flex;
  gap: 12px;
  background: var(--cat-green-lt);
  border: 1.5px solid #b8d9c5;
  border-radius: 12px;
  padding: 14px 16px;
}
.cat-highlight-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--cat-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-highlight-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--cat-text);
  margin-bottom: 3px;
}
.cat-highlight-text p {
  font-size: 12px;
  color: var(--cat-text2);
  line-height: 1.55;
  margin: 0;
}
/* image side */
.cat-content-img-col { position: relative; border-radius: 14px; overflow: hidden; }
.cat-content-img {
  width: 100%; height: 260px;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.cat-content:hover .cat-content-img { transform: scale(1.03); }
.cat-img-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--cat-green);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background var(--cat-t), transform var(--cat-t);
  z-index: 2;
}
.cat-img-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.cat-img-nav-prev { left: 10px; }
.cat-img-nav-next { right: 10px; }
.cat-img-counter {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.cat-img-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 8px 0 0;
}
.cat-img-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c8d8cc;
  border: none;
  cursor: pointer;
  transition: background .2s, width .25s;
  padding: 0;
}
.cat-img-dot.cat-dot-active {
  width: 18px;
  border-radius: 3px;
  background: var(--cat-green);
}

/* option cards */
.cat-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.cat-option-card {
  border: 2px solid var(--cat-border);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  transition: border-color var(--cat-t), background var(--cat-t), transform .15s;
  text-align: center;
}
.cat-option-card:hover { border-color: var(--cat-green3); background: var(--cat-green-lt); transform: translateY(-2px); }
.cat-option-card.cat-opt-active {
  border-color: var(--cat-green);
  background: var(--cat-green-lt);
  box-shadow: 0 3px 12px rgba(26,61,40,.12);
}
.cat-option-card img {
  width: 100%; height: 70px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 7px;
}
.cat-opt-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--cat-text);
  display: block;
  margin-bottom: 2px;
}
.cat-opt-sub {
  font-size: 10.5px;
  color: var(--cat-text2);
  display: block;
}

/* features box */
.cat-features-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cat-border);
  margin-bottom: 20px;
}
.cat-checklist { display: flex; flex-direction: column; gap: 7px; }
.cat-check-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--cat-text2); font-weight: 500;
}
.cat-check-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cat-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.cat-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cat-green);
  background: #fff;
  border: 2px solid var(--cat-green);
  border-radius: 11px;
  padding: 11px 18px;
  cursor: pointer;
  width: 100%;
  transition: background var(--cat-t), color var(--cat-t), transform .15s;
}
.cat-view-btn:hover { background: var(--cat-green); color: #fff; transform: translateY(-1px); }

/* expand panel */
.cat-expand-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .32s ease, padding .32s ease;
  padding: 0 28px;
}
.cat-expand-panel.cat-exp-open {
  max-height: 800px;
  opacity: 1;
  padding: 0 28px 28px;
}
.cat-expand-inner {
  border-top: 1.5px solid var(--cat-border);
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cat-exp-col h5 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cat-green);
  margin: 0 0 10px;
}
.cat-exp-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.cat-exp-col ul li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--cat-text2); line-height: 1.5;
}
.cat-exp-col ul li::before {
  content: '✓';
  color: var(--cat-green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.cat-exp-quote {
  grid-column: 1 / -1;
  background: var(--cat-green-lt);
  border-left: 3px solid var(--cat-green);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-style: italic;
  font-size: 13px;
  color: var(--cat-green2);
  line-height: 1.6;
}
.cat-read-less-btn {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--cat-green);
  padding: 4px 0;
  transition: color var(--cat-t);
}
.cat-read-less-btn:hover { color: var(--cat-green2); }

/* trust strip */
.cat-trust-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: #fff;
  border: 1.5px solid var(--cat-border);
  border-radius: 14px;
  margin-top: 28px;
  overflow: hidden;
}
.cat-trust-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--cat-text);
  padding: 14px 20px;
  border-right: 1px solid var(--cat-border);
  white-space: nowrap;
  letter-spacing: .05em;
}
.cat-trust-items {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}
.cat-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cat-text2);
  border-right: 1px solid var(--cat-border);
  flex: 1;
}
.cat-trust-item:last-child { border-right: none; }
.cat-trust-item svg { stroke: var(--cat-green); flex-shrink: 0; }

/* CTA bar */
.cat-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--cat-green);
  border-radius: 18px;
  padding: 26px 32px;
  margin-top: 24px;
}
.cat-cta-q {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.cat-cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cat-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cat-green);
  background: #fff;
  border-radius: 11px;
  padding: 12px 22px;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.cat-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.cat-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 11px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.cat-cta-secondary:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); }

/* floating buttons */
.cat-floats {
  position: absolute;
  bottom: 28px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 20;
}
.cat-float {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .2s, box-shadow .2s;
}
.cat-float:hover { transform: scale(1.12); box-shadow: 0 6px 24px rgba(0,0,0,.28); }
.cat-float-call { background: var(--cat-green); }
.cat-float-wa   { background: #25d366; }

/* --- responsive --- */

/* ═══════════════════════════════════════════════════════════════
   AMENITIES ADVANCED STICKY SECTION  (caas- prefix)
════════════════════════════════════════════════════════════════ */

:root {
  --caas-green:    #1a3d28;
  --caas-green2:   #2a6044;
  --caas-green3:   #3d8a5e;
  --caas-green-lt: #eaf4ee;
  --caas-orange:   #c9873a;
  --caas-cream:    #faf6ef;
  --caas-text:     #1a2e1e;
  --caas-text2:    #4a5e50;
  --caas-border:   #dde8e1;
  --caas-t:        0.3s ease;
}

/* Section wrapper */
.caas-section {
  background: linear-gradient(170deg, var(--caas-cream) 0%, #fff9f2 45%, #f4faf6 100%);
  padding: 72px 0 80px;
  position: relative;
}

/* ── Section Header ─────────────────────────────────────────── */
.caas-section-header {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 28px;
  text-align: center;
}
.caas-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--caas-green-lt);
  color: var(--caas-green2);
  border: 1px solid #b8d9c5;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.caas-section-title {
  font-family: Georgia, serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--caas-green);
  line-height: 1.1;
  margin: 0 0 10px;
}
.caas-section-sub {
  font-size: 15px;
  color: var(--caas-text2);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── STICKY BOX — single sticky element, NO overflow:hidden, NO translateX ── */
/* Collapse is done via max-height on the rows INSIDE — sticky itself never moves */
.caas-sticky-box {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 20px rgba(26,61,40,.10), 0 1px 3px rgba(0,0,0,.05);
  border-bottom: 1.5px solid var(--caas-border);
  /* No transform, no will-change, no transition on container = zero blink */
}

/* Collapse strip — the thin bar shown when rows are collapsed */
.caas-collapse-strip {
  display: none; /* hidden by default (rows are visible) */
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  cursor: pointer;
  background: var(--caas-green);
  color: rgba(255,255,255,.9);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  user-select: none;
  border: none;
  width: 100%;
  padding: 0 16px;
}
.caas-collapse-strip .caas-strip-chevron {
  transition: transform 0.3s ease;
}
/* When collapsed: show strip, hide rows */
.caas-sticky-box.caas-collapsed .caas-collapse-strip {
  display: flex;
}
.caas-sticky-box.caas-collapsed .caas-close-btn {
  display: none;
}

/* Rows wrap — controls expand/collapse of row1 + row2 together */
/* We use max-height on each row independently */
.caas-sticky-box.caas-collapsed .caas-row1 {
  max-height: 0 !important;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none;
}
.caas-sticky-box.caas-collapsed .caas-row2 {
  max-height: 0 !important;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none;
}

/* Compact mode — only padding/font-size changes on inner elements, NO container animation */
.caas-sticky-box.caas-compact .caas-row1 {
  padding-top: 4px;
  padding-bottom: 2px;
}
.caas-sticky-box.caas-compact .caas-tab {
  padding: 5px 12px;
  font-size: 12px;
}
.caas-sticky-box.caas-compact .caas-row2 {
  padding-top: 3px;
  padding-bottom: 4px;
}
.caas-sticky-box.caas-compact .caas-icon-wrap {
  width: 28px; height: 28px;
}
.caas-sticky-box.caas-compact .caas-icon-btn span {
  font-size: 10px;
}

/* ── ROW 1: Category Tabs ───────────────────────────────────── */
.caas-row1 {
  padding: 10px 52px 6px 16px; /* right padding for close btn */
  background: var(--caas-green);
  max-height: 200px;
  overflow: hidden;
  /* Animate only padding — NOT max-height (avoids layout thrash during scroll) */
  transition: padding 0.28s ease;
}
.caas-tabs-scroll {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* On desktop distribute tabs evenly */
}
.caas-tabs-scroll::-webkit-scrollbar { display: none; }

.caas-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--caas-t), color var(--caas-t), border-color var(--caas-t), padding var(--caas-t), font-size var(--caas-t);
  flex-shrink: 0;
}
.caas-tab:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.caas-tab.caas-tab-active {
  background: #fff;
  color: var(--caas-green);
  border-color: #fff;
}

/* Close X button — inside sticky box, top-right of row1 */
.caas-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 10;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--caas-t), transform .2s;
  flex-shrink: 0;
}
.caas-close-btn:hover { background: rgba(255,255,255,.4); transform: scale(1.1); }

/* ── ROW 2: Explore All Amenities Icons ─────────────────────── */
.caas-row2 {
  padding: 8px 16px 10px;
  border-top: 1px solid #eff4f1;
  background: #fff;
  max-height: 120px;
  overflow: hidden;
  transition: padding 0.28s ease;
}
.caas-row2-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--caas-text2);
  margin-bottom: 6px;
  padding-left: 4px;
}
.caas-icons-scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.caas-icons-scroll::-webkit-scrollbar { display: none; }
/* On desktop — CSS grid guarantees all 8 icons always visible, no scroll */

.caas-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  transition: background var(--caas-t);
  flex-shrink: 0;
}
.caas-icon-btn:hover { background: var(--caas-green-lt); }
.caas-icon-btn.caas-icon-active { background: var(--caas-green-lt); }
.caas-icon-btn.caas-icon-active .caas-icon-wrap {
  background: var(--caas-green);
  color: #fff;
}

.caas-icon-wrap {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #f0f5f2;
  color: var(--caas-green2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--caas-t), color var(--caas-t), width var(--caas-t), height var(--caas-t);
}
.caas-icon-btn span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--caas-text2);
  white-space: nowrap;
  transition: font-size var(--caas-t);
  text-align: center;
}
.caas-icon-btn.caas-icon-active span { color: var(--caas-green); font-weight: 700; }

/* caas-show-btn removed — collapse strip inside sticky box replaces it */

/* ── Content wrap ───────────────────────────────────────────── */
.caas-content-wrap {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 28px;
}

/* ── All-cards vertical stack ───────────────────────────────── */
.caas-all-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Content Card (each of the 8) ───────────────────────────── */
.caas-content-card {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 32px rgba(26,61,40,.08), 0 1px 6px rgba(0,0,0,.04);
  overflow: hidden;
  min-height: 420px;
  /* Scroll offset so sticky nav doesn't cover card when scrolled to */
  scroll-margin-top: 110px;
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Highlight the focused card when navigated to */
.caas-content-card.caas-card-focus {
  border-color: var(--caas-green);
  box-shadow: 0 4px 32px rgba(26,61,40,.15), 0 0 0 3px rgba(26,61,40,.08);
}

/* ── Left Info Panel ────────────────────────────────────────── */
.caas-info-panel {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.caas-content-badge {
  display: inline-block;
  background: #fff3e0;
  color: var(--caas-orange);
  border: 1px solid #f0d0a0;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: fit-content;
}
.caas-content-title {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--caas-green);
  line-height: 1.2;
  margin: 0;
}
.caas-content-desc {
  font-size: 14px;
  color: var(--caas-text2);
  line-height: 1.65;
  margin: 0;
}
.caas-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.caas-fchip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--caas-green2);
  background: var(--caas-green-lt);
  border: 1px solid #c0dac9;
  border-radius: 20px;
  padding: 4px 11px;
}

/* Mobile image (hidden on desktop) */
.caas-mobile-img-wrap { display: none; }
.caas-mobile-img {
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
  max-height: 220px;
  display: block;
}

/* Checklist */
.caas-checklist {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.caas-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--caas-text);
  line-height: 1.45;
}
.caas-checklist li svg {
  color: var(--caas-green);
  flex-shrink: 0;
  margin-top: 2px;
}

/* View Full Details button */
.caas-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--caas-green);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  width: fit-content;
  transition: background var(--caas-t), transform .15s;
}
.caas-view-btn:hover { background: var(--caas-green2); transform: translateY(-1px); }

/* Expand panel */
.caas-expand-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.caas-expand-panel.caas-exp-open {
  max-height: 900px;
  opacity: 1;
}
.caas-expand-inner {
  border-top: 1.5px solid var(--caas-border);
  margin-top: 4px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.caas-exp-col h5 {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--caas-green);
  margin: 0 0 7px;
}
.caas-exp-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.caas-exp-col ul li {
  font-size: 12.5px;
  color: var(--caas-text2);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.caas-exp-col ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--caas-green);
  font-weight: 700;
}
.caas-exp-quote {
  background: var(--caas-green-lt);
  border-left: 3px solid var(--caas-green);
  border-radius: 0 10px 10px 0;
  padding: 11px 15px;
  font-style: italic;
  font-size: 12.5px;
  color: var(--caas-green2);
  line-height: 1.6;
}
.caas-read-less-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f3f7f5;
  color: var(--caas-green);
  border: 1.5px solid var(--caas-border);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  width: fit-content;
  transition: background var(--caas-t);
}
.caas-read-less-btn:hover { background: var(--caas-green-lt); }

/* ── Right Image Panel ──────────────────────────────────────── */
.caas-img-panel {
  display: flex;
  flex-direction: column;
  background: #f5f0e8;
  overflow: hidden;
  position: relative;
}
.caas-img-main-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.caas-img-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .25s ease;
  min-height: 320px;
}

/* Thumbnail strip */
.caas-thumb-strip {
  display: flex;
  gap: 0;
  padding: 7px 8px;
  background: #ede8e0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.caas-thumb-strip::-webkit-scrollbar { display: none; }
.caas-thumb {
  flex-shrink: 0;
  width: 68px; height: 48px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: border-color .2s, transform .15s;
  margin: 0 3px;
}
.caas-thumb:hover { transform: scale(1.06); }
.caas-thumb.caas-thumb-active { border-color: var(--caas-green); }
.caas-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Bottom Trust Bar ───────────────────────────────────────── */
.caas-trust-bar {
  max-width: 1200px;
  margin: 28px auto 0;
  padding: 0 28px;
  display: flex;
  justify-content: stretch;
  gap: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(26,61,40,.07);
  overflow: hidden;
}
.caas-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 22px 16px;
  flex: 1;
  border-right: 1px solid var(--caas-border);
  text-align: center;
}
.caas-trust-item:last-child { border-right: none; }
.caas-trust-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--caas-green-lt);
  color: var(--caas-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.caas-trust-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--caas-text);
  line-height: 1.4;
}

/* ── Fade-in animation on content swap ──────────────────────── */
@keyframes caasFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.caas-anim { animation: caasFadeIn .28s ease both; }

/* ── Responsive ─────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   AMENITIES DUAL STICKY SECTION  (cads- prefix)
   Layout: Top horizontal sticky bar + Left vertical sidebar + Card grid
════════════════════════════════════════════════════════════════ */

:root {
  --cads-green:    #1a3d28;
  --cads-green2:   #2a6044;
  --cads-green3:   #3d8a5e;
  --cads-green-lt: #eaf4ee;
  --cads-orange:   #c9873a;
  --cads-cream:    #faf6ef;
  --cads-cream2:   #f4f0e8;
  --cads-text:     #1a2e1e;
  --cads-text2:    #4a5e50;
  --cads-border:   #dde8e1;
  --cads-t:        0.25s ease;
  --cads-radius:   18px;
}

/* ── Section wrapper ────────────────────────────────────────── */
.cads-section {
  background: linear-gradient(160deg, var(--cads-cream) 0%, #fff9f2 50%, #f4faf6 100%);
  padding: 72px 0 0;
  position: relative;
}

/* ── Section Header ─────────────────────────────────────────── */
.cads-header {
  max-width: 1260px;
  margin: 0 auto 28px;
  padding: 0 28px;
  text-align: center;
}
.cads-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cads-green-lt);
  color: var(--cads-green2);
  border: 1px solid #b8d9c5;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.cads-header-title {
  font-family: Georgia, serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--cads-green);
  line-height: 1.1;
  margin: 0 0 10px;
}
.cads-header-sub {
  font-size: 15px;
  color: var(--cads-text2);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── TOP HORIZONTAL STICKY BAR ──────────────────────────────── */
.cads-top-bar {
  position: sticky;
  top: 72px;
  z-index: 120;
  background: #fff;
  border-bottom: 1.5px solid var(--cads-border);
  box-shadow: 0 2px 16px rgba(26,61,40,.09);
  display: flex;
  align-items: center;
  padding-right: 16px;
}
.cads-top-inner {
  flex: 1;
  min-width: 0;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  height: 52px;
      justify-content: center;
}
.cads-top-inner::-webkit-scrollbar { display: none; }

/* ── Amenities toggle button ─────────────────────────────────── */
.cads-toggle-btn {
  flex-shrink: 0;
  margin: 5px 0 5px auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 11px;
  border-radius: 50px;
  border: 1px solid rgba(26,61,40,0.18);
  background: rgba(26,61,40,0.07);
  color: #1a3d28;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.cads-toggle-btn:hover { background: rgba(26,61,40,0.13); }
.cads-toggle-label-show { display: none; }
.cads-toggle-label-hide { display: inline; }
.cads-toggle-icon-close  { display: block; }

#cadsTopBar.cads-collapsed .cads-top-inner         { /* hidden by JS slideUp */ }
#cadsTopBar.cads-collapsed .cads-toggle-icon-close { display: none; }
#cadsTopBar.cads-collapsed .cads-toggle-label-hide { display: none; }
#cadsTopBar.cads-collapsed .cads-toggle-label-show {
  display: flex;
  align-items: center;
  gap: 5px;
}
#cadsTopBar.cads-collapsed {
  justify-content: center;
}
#cadsTopBar.cads-collapsed .cads-toggle-btn {
  margin-left: 0;
}

.cads-top-tab.cads-tab-out {
  animation: gal2TabOut 0.32s cubic-bezier(0.4,0,1,1) forwards;
  pointer-events: none;
}
.cads-top-tab.cads-tab-in {
  animation: gal2TabIn 0.38s cubic-bezier(0,0,0.2,1) both;
  pointer-events: none;
}
.cads-toggle-btn.cads-btn-pulse {
  animation: gal2BtnPulse 0.35s ease-out forwards;
}

.cads-top-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cads-text2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--cads-t), color var(--cads-t);
}
.cads-top-tab:hover { background: var(--cads-green-lt); color: var(--cads-green); }
.cads-top-tab.cads-top-active {
  background: var(--cads-green);
  color: #fff;
  font-weight: 700;
}

/* ── BODY: sidebar + main ────────────────────────────────────── */
.cads-body {
  max-width: 1260px;
  margin: 0 auto;
  padding: 24px 28px 0;
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── LEFT VERTICAL SIDEBAR ──────────────────────────────────── */
.cads-sidebar {
  position: sticky;
  top: 126px; /* 72px navbar + 52px fixed tab bar + 2px border */
  max-height: calc(100vh - 126px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8ddd0 transparent;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: var(--cads-radius);
  box-shadow: 0 2px 18px rgba(26,61,40,.08);
  padding: 6px 0 10px;
}
.cads-sidebar::-webkit-scrollbar { width: 3px; }
.cads-sidebar::-webkit-scrollbar-thumb { background: #c8ddd0; border-radius: 3px; }

.cads-sidebar-nav {
  display: flex;
  flex-direction: column;
}

/* "All" header link in sidebar */
.cads-sidebar-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cads-green2);
  background: var(--cads-green-lt);
  border: none;
  border-bottom: 1px solid var(--cads-border);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background var(--cads-t);
  border-left: 3px solid var(--cads-green);
  border-radius: 0;
}
.cads-sidebar-all:hover { background: #d8eede; }

.cads-sidebar-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--cads-t), border-color var(--cads-t);
}
.cads-sidebar-item:hover {
  background: var(--cads-green-lt);
  border-left-color: #a8cdb8;
}
.cads-sidebar-item.cads-sidebar-active {
  background: var(--cads-green-lt);
  border-left-color: var(--cads-green);
}
.cads-sidebar-item.cads-sidebar-active .cads-sidebar-icon {
  background: var(--cads-green);
  color: #fff;
}
.cads-sidebar-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #f0f5f2;
  color: var(--cads-green2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--cads-t), color var(--cads-t);
}
.cads-sidebar-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cads-text2);
  line-height: 1.3;
  transition: color var(--cads-t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cads-sidebar-item.cads-sidebar-active .cads-sidebar-label,
.cads-sidebar-item:hover .cads-sidebar-label { color: var(--cads-green); font-weight: 700; }

/* ── MAIN CARD AREA ─────────────────────────────────────────── */
.cads-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding-bottom: 40px;
}

/* ── PREMIUM AMENITY CARD ───────────────────────────────────── */
.cads-card {
  background: #fff;
  border-radius: var(--cads-radius);
  box-shadow: 0 4px 28px rgba(26,61,40,.09), 0 1px 4px rgba(0,0,0,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  scroll-margin-top: 76px;
  border: 2px solid transparent;
}
.cads-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 36px rgba(26,61,40,.14);
}
.cads-card.cads-card-focus {
  border-color: var(--cads-green);
  box-shadow: 0 0 0 3px rgba(26,61,40,.1), 0 8px 32px rgba(26,61,40,.12);
}

/* Card image */
.cads-card-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.cads-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cads-card:hover .cads-card-img { transform: scale(1.04); }

/* Card number badge */
.cads-card-num {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,.92);
  color: var(--cads-green);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}

/* Card category badge */
.cads-card-cat {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--cads-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* Card content */
.cads-card-body {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.cads-card-title {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--cads-green);
  line-height: 1.2;
  margin: 0;
}
.cads-card-desc {
  font-size: 12.5px;
  color: var(--cads-text2);
  line-height: 1.6;
  margin: 0;
}

/* Chips */
.cads-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cads-chip {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cads-green2);
  background: var(--cads-green-lt);
  border: 1px solid #c0dac9;
  border-radius: 20px;
  padding: 3px 10px;
}

/* Checklist */
.cads-card-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cads-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--cads-text);
  line-height: 1.45;
}
.cads-card-list li svg {
  color: var(--cads-green);
  flex-shrink: 0;
  margin-top: 1px;
}

/* View Full Details CTA */
.cads-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--cads-green);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  justify-content: space-between;
  margin-top: auto;
  transition: background var(--cads-t), transform .15s;
}
.cads-card-cta:hover { background: var(--cads-green2); transform: translateY(-1px); }
.cads-card-cta svg { flex-shrink: 0; transition: transform 0.25s ease; }
.cads-card-cta.cads-cta-open svg { transform: rotate(90deg); }

/* ── Expand panel (accordion per card) ─────────────────────── */
.cads-card-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(.4,0,.2,1);
  background: var(--cads-green-lt);
  border-top: 1.5px solid transparent;
}
.cads-card-expand.cads-exp-open {
  max-height: 480px;
  border-top-color: var(--cads-border);
}
.cads-card-expand-inner {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cads-exp-section h5 {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cads-green);
  margin: 0 0 8px;
}
.cads-exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.cads-exp-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--cads-text2);
  line-height: 1.4;
}
.cads-exp-item svg { color: var(--cads-green); flex-shrink: 0; margin-top: 1px; }
.cads-exp-quote {
  background: #fff;
  border-left: 3px solid var(--cads-green);
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
  font-style: italic;
  font-size: 12px;
  color: var(--cads-green2);
  line-height: 1.6;
}
.cads-exp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cads-exp-stat {
  background: #fff;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  border: 1px solid var(--cads-border);
}
.cads-exp-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--cads-green);
  display: block;
  line-height: 1.1;
}
.cads-exp-stat-lbl {
  font-size: 10px;
  color: var(--cads-text2);
  font-weight: 600;
  margin-top: 2px;
  display: block;
}

/* ── Bottom Trust Bar ───────────────────────────────────────── */
.cads-trust-bar {
  max-width: 1260px;
  margin: 32px auto 0;
  padding: 0 28px 60px;
  display: flex;
  gap: 0;
}
.cads-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 22px 12px;
  background: #fff;
  text-align: center;
  border-right: 1px solid var(--cads-border);
}
.cads-trust-item:first-child { border-radius: var(--cads-radius) 0 0 var(--cads-radius); }
.cads-trust-item:last-child { border-right: none; border-radius: 0 var(--cads-radius) var(--cads-radius) 0; }
.cads-trust-bar { box-shadow: 0 2px 16px rgba(26,61,40,.07); border-radius: var(--cads-radius); overflow: hidden; }
.cads-trust-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--cads-green-lt);
  color: var(--cads-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cads-trust-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cads-text);
  line-height: 1.4;
}

/* ── Hidden cards (filter via class) ────────────────────────── */
.cads-card.cads-hidden { display: none; }

/* ── Responsive ─────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   GALLERY SECTION  (gal2- prefix)
   Layout: Header + Counters + Sticky Tabs + Masonry Panels
           + Lightbox modal
════════════════════════════════════════════════════════════════ */

:root {
  --gal2-green:    #1a3d28;
  --gal2-green2:   #2a6044;
  --gal2-green3:   #3d8a5e;
  --gal2-green-lt: #eaf4ee;
  --gal2-orange:   #c9873a;
  --gal2-cream:    #faf6ef;
  --gal2-text:     #1a2e1e;
  --gal2-text2:    #4a5e50;
  --gal2-border:   #dde8e1;
  --gal2-t:        0.3s ease;
  --gal2-r:        16px;
}

/* ── Section wrapper ────────────────────────────────────────── */
.gal2-section {
  background: linear-gradient(168deg, #0b1f14 0%, #132b1c 45%, #0e2318 100%);
  padding: 80px 0 60px;
  position: relative;
  overflow: clip;
}
.gal2-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.gal2-blob1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(61,138,94,0.18) 0%, transparent 70%);
  top: -120px; left: -140px;
}
.gal2-blob2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(201,135,58,0.12) 0%, transparent 70%);
  bottom: 60px; right: -100px;
}
.gal2-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* ── Header ─────────────────────────────────────────────────── */
.gal2-header {
  text-align: center;
  margin-bottom: 56px;
}
.gal2-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(61,138,94,0.18);
  border: 1px solid rgba(61,138,94,0.35);
  color: #7ecfa0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.gal2-badge-dot {
  width: 6px; height: 6px;
  background: #7ecfa0;
  border-radius: 50%;
  animation: gal2-pulse 2s infinite;
}
@keyframes gal2-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.4); }
}
.gal2-title {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
}
.gal2-title span { color: #7ecfa0; }
.gal2-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0;
}
.gal2-divider-line {
  width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(126,207,160,0.5));
}
.gal2-divider-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(126,207,160,0.5));
}
.gal2-divider-heart {
  font-size: 22px;
  color: #c9873a;
}
.gal2-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

/* ── Counters row ────────────────────────────────────────────── */
.gal2-counters {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.gal2-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  padding: 10px 20px;
  backdrop-filter: blur(8px);
}
.gal2-counter-icon {
  font-size: 20px;
}
.gal2-counter .gal2-counter-num{color:rgba(255,255,255,0.55);}
.gal2-counter-val {
  font-size: 20px;
  font-weight: 800;
  color: #7ecfa0;
  line-height: 1;
}
.gal2-counter-lbl {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.3;
  white-space: nowrap;
}

/* ── Sticky tab bar ──────────────────────────────────────────── */
.gal2-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,31,20,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin: 0 -28px 36px;
  padding: 12px 28px;
}
.gal2-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  
}
.gal2-tabs::-webkit-scrollbar { display: none; }
.gal2-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.gal2-tab:hover {
  background: rgba(61,138,94,0.15);
  color: #a5d8b8;
  border-color: rgba(61,138,94,0.3);
}
.gal2-tab-active {
  background: linear-gradient(135deg, #2a6044, #3d8a5e);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(42,96,68,0.4);
}
.gal2-tab-icon { font-size: 16px; }
.gal2-tab-badge {
  background: rgba(255,255,255,0.2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.6;
}
.gal2-tab-active .gal2-tab-badge {
  background: rgba(255,255,255,0.25);
}

/* ── Gallery panels ──────────────────────────────────────────── */
.gal2-panel { display: none; }
.gal2-panel-active { display: block; }

/* ── Masonry grid ─────────────────────────────────────────────── */
.gal2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 10px;
  margin-bottom: 16px;
}
.gal2-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #1a3d28;
}
.gal2-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
.gal2-item:hover img {
  transform: scale(1.07);
}
/* Span classes for masonry sizes */
.gal2-span-v2  { grid-row: span 2; }
.gal2-span-h2  { grid-column: span 2; }
.gal2-span-sq  { grid-row: span 1; grid-column: span 1; }
.gal2-span-big { grid-row: span 2; grid-column: span 2; }

/* ── View All CTA ─────────────────────────────────────────────── */
.gal2-viewall-wrap {
  text-align: center;
  margin-top: 40px;
}
.gal2-viewall-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 36px;
  background: linear-gradient(135deg, #2a6044, #3d8a5e);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 24px rgba(42,96,68,0.4);
  text-decoration: none;
}
.gal2-viewall-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(42,96,68,0.55);
}
.gal2-viewall-btn svg { width: 18px; height: 18px; }

/* ── Lightbox modal ──────────────────────────────────────────── */
/* ── Responsive ──────────────────────────────────────────────── */

/* ── (old cgal- rules removed) ──────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   OUR TEAM SECTION  (otm- prefix)
   Unified Hero + Department Tabs + Premium Team Cards
════════════════════════════════════════════════════════════════ */

:root {
  --otm-green:     #1a3d28;
  --otm-green2:    #2a6044;
  --otm-green3:    #3d8a5e;
  --otm-green-lt:  #eaf4ee;
  --otm-cream:     #faf6ef;
  --otm-orange:    #c9873a;
  --otm-text:      #1a2e1e;
  --otm-text2:     #4a5e50;
  --otm-border:    #e0ebe4;
  --otm-t:         0.3s ease;
  --otm-r:         20px;
}

/* ── Section wrapper ─────────────────────────────────────────── */
.otm-section {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, #faf6ef 0%, #f2f7f4 40%, #faf6ef 100%);
}

/* Ambient blobs */
.otm-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.otm-blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(42,96,68,0.07) 0%, transparent 65%);
  top: -100px; left: -150px;
  filter: blur(60px);
}
.otm-blob-2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(201,135,58,0.08) 0%, transparent 65%);
  top: 300px; right: -120px;
  filter: blur(60px);
}
.otm-blob-3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(42,96,68,0.06) 0%, transparent 65%);
  bottom: 100px; left: 30%;
  filter: blur(50px);
}

/* ═══ HERO BAND ═══════════════════════════════════════════════ */
.otm-hero {
  position: relative;
  z-index: 1;
  padding: 80px 0 0;
}
.otm-hero-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* ── Hero left copy ─────────────────────────────────────────── */
.otm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--otm-orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.otm-hero-title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  color: var(--otm-text);
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.otm-hero-title span {
  color: var(--otm-orange);
}
.otm-hero-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.otm-hero-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,135,58,0.4), transparent);
  max-width: 60px;
}
.otm-hero-divider-line:last-child {
  background: linear-gradient(270deg, rgba(201,135,58,0.4), transparent);
}
.otm-hero-sub {
  font-size: 16px;
  color: var(--otm-text2);
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 460px;
}
.otm-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--otm-green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  transition: all var(--otm-t);
  box-shadow: 0 6px 24px rgba(26,61,40,0.25);
  margin-bottom: 36px;
}
.otm-hero-btn:hover {
  background: var(--otm-green2);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(26,61,40,0.35);
}

/* Trust badges */
.otm-trust-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.otm-trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--otm-border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--otm-text);
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(26,61,40,0.06);
}
.otm-trust-badge svg { color: var(--otm-green2); flex-shrink: 0; }

/* ── Hero right image ───────────────────────────────────────── */
.otm-hero-img-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 24px 80px rgba(26,61,40,0.18);
}
.otm-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.otm-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(26,61,40,0.08) 0%, rgba(26,61,40,0.3) 100%);
}
.otm-hero-stat {
  position: absolute;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  text-align: center;
}
.otm-hero-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--otm-green);
  line-height: 1;
  margin-bottom: 3px;
}
.otm-hero-stat span {
  font-size: 11px;
  color: var(--otm-text2);
  font-weight: 500;
}
.otm-hero-stat-1 { bottom: 22px; left: 22px; }
.otm-hero-stat-2 { top: 22px; right: 22px; }

/* ═══ CARDS SECTION ═══════════════════════════════════════════ */
.otm-cards-wrap {
  position: relative;
  z-index: 1;
  padding: 64px 0 80px;
}
.otm-cards-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Department header */
.otm-dept-header {
  text-align: center;
  margin-bottom: 36px;
}
.otm-dept-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--otm-orange);
  margin-bottom: 10px;
}
.otm-dept-line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--otm-orange);
  opacity: 0.5;
}
.otm-dept-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--otm-text);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.otm-dept-heart {
  font-size: 20px;
  color: var(--otm-orange);
  opacity: 0.6;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.otm-tabs-wrap {
  margin-bottom: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}
.otm-tabs-wrap::-webkit-scrollbar { display: none; }
.otm-tabs {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  min-width: max-content;
}
.otm-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1.5px solid var(--otm-border);
  background: #fff;
  color: var(--otm-text2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--otm-t);
  box-shadow: 0 2px 8px rgba(26,61,40,0.05);
}
.otm-tab svg { opacity: 0.55; transition: opacity var(--otm-t); }
.otm-tab:hover {
  border-color: var(--otm-green2);
  color: var(--otm-green2);
  background: var(--otm-green-lt);
}
.otm-tab:hover svg { opacity: 1; }
.otm-tab-active {
  background: var(--otm-green);
  color: #fff;
  border-color: var(--otm-green);
  box-shadow: 0 6px 20px rgba(26,61,40,0.2);
}
.otm-tab-active svg { opacity: 1; }
.otm-tab-active:hover {
  background: var(--otm-green2);
  border-color: var(--otm-green2);
  color: #fff;
}

/* ── Team cards grid ─────────────────────────────────────────── */
.otm-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

/* ── Individual card ─────────────────────────────────────────── */
.otm-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(26,61,40,0.08);
  transition: transform var(--otm-t), box-shadow var(--otm-t);
  position: relative;
}
.otm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(26,61,40,0.15);
}

/* Photo */
.otm-card-photo {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.otm-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.otm-card:hover .otm-card-photo img {
  transform: scale(1.06);
}

/* Dept tag */
.otm-card-dept-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  backdrop-filter: blur(4px);
}

/* Photo gradient overlay */
.otm-card-photo-grad {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(0deg, rgba(10,25,18,0.55) 0%, transparent 100%);
  pointer-events: none;
}


/* Hover overlay with bio */
.otm-card-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,61,40,0.88);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: center;
}
.otm-card:hover .otm-card-hover-overlay {
  opacity: 1;
  transform: translateY(0);
}
.otm-card-hover-quote {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 12px;
}
.otm-card-hover-exp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
}

/* Card info */
.otm-card-info {
  padding: 16px 16px 18px;
}
.otm-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--otm-text);
  margin-bottom: 3px;
  line-height: 1.3;
}
.otm-card-role {
  font-size: 12px;
  color: var(--otm-text2);
  margin-bottom: 8px;
  line-height: 1.4;
}
.otm-card-exp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--otm-green2);
  font-weight: 600;
}
.otm-card-exp svg { flex-shrink: 0; }

/* Dept tag colours */
.otm-tag-doctor     { background: rgba(42,96,68,0.85); }
.otm-tag-nursing    { background: rgba(100,160,130,0.9); }
.otm-tag-management { background: rgba(201,135,58,0.88); }
.otm-tag-caregiver  { background: rgba(80,130,100,0.88); }
.otm-tag-physio     { background: rgba(56,100,80,0.88); }
.otm-tag-activities { background: rgba(220,160,60,0.88); }
.otm-tag-support    { background: rgba(120,160,140,0.9); }

/* ── Quote strip ─────────────────────────────────────────────── */
.otm-quote-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  background: #fff;
  border: 1px solid var(--otm-border);
  border-radius: 20px;
  padding: 28px 36px;
  box-shadow: 0 4px 24px rgba(26,61,40,0.06);
}
.otm-quote-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.otm-quote-mark {
  font-size: 52px;
  line-height: 1;
  color: var(--otm-orange);
  font-family: Georgia, serif;
  margin-top: -8px;
  flex-shrink: 0;
}
.otm-quote-left p {
  font-size: 16px;
  color: var(--otm-text);
  font-weight: 600;
  line-height: 1.65;
}
.otm-quote-left em {
  color: var(--otm-orange);
  font-style: italic;
}
.otm-quote-center {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.otm-quote-right {
  text-align: right;
}
.otm-quote-right p {
  font-size: 14px;
  color: var(--otm-text2);
  line-height: 1.7;
}
.otm-quote-right-divider {
  width: 48px;
  height: 2px;
  background: var(--otm-orange);
  border-radius: 2px;
  margin: 10px 0 0 auto;
  opacity: 0.5;
}

/* ── Responsive ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   SUCCESS STORIES SECTION — UNIFIED PREMIUM  (css- prefix)
════════════════════════════════════════════════════════════════ */
:root {
  --css-green:     #1a3d28;
  --css-green2:    #2a6044;
  --css-green3:    #3d8a5e;
  --css-green-lt:  #eaf4ee;
  --css-orange:    #c9873a;
  --css-gold:      #d4a54a;
  --css-red:       #d94f4f;
  --css-cream:    #faf6ef;
  --css-text:     #1a2e1e;
  --css-text2:    #4a5e50;
  --css-border:   #e2ebe5;
  --css-t:        0.3s ease;
  --css-r:        20px;
}

/* ── Section wrapper ─────────────────────────────────────────── */
.css-section {
  background: linear-gradient(175deg, #f7faf8 0%, #fffdf9 50%, #f5faf7 100%);
  padding: 84px 0 0;
  position: relative;
}
/* ── Header ──────────────────────────────────────────────────── */
.css-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 0 24px;
}
.css-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--css-green-lt);
  color: var(--css-green2);
  border: 1px solid #b8d9c5;
  border-radius: 24px;
  padding: 6px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.css-header-badge svg { color: var(--css-orange); }
.css-header-title {
  font-family: Georgia, serif;
  font-size: 54px;
  font-weight: 700;
  color: var(--css-text);
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -.02em;
}
.css-header-sub {
  font-size: 15px;
  color: var(--css-text2);
  line-height: 1.7;
  margin: 0 0 24px;
}
.css-header-line {
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--css-green3), var(--css-gold));
  border-radius: 2px;
  margin: 0 auto 28px;
}
.css-header-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.css-hstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 28px;
}
.css-hstat-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--css-green);
  line-height: 1;
}
.css-hstat-lbl {
  font-size: 11px;
  color: var(--css-text2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.css-hstat-div {
  width: 1px; height: 36px;
  background: var(--css-border);
}

/* ── Story Nav Tabs ──────────────────────────────────────────── */
.css-story-nav {
  background: #fff;
  border-top: 1px solid var(--css-border);
  border-bottom: 1.5px solid var(--css-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(26,61,40,.06);
}
.css-story-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  height: 54px;
  align-items: stretch;
}
.css-story-nav-inner::-webkit-scrollbar { display: none; }
.css-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--css-text2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: 2px solid transparent;
  transition: color var(--css-t), border-color var(--css-t);
  position: relative;
}
.css-nav-tab:hover { color: var(--css-green); }
.css-nav-tab.css-nav-active {
  color: var(--css-green);
  border-bottom-color: var(--css-green);
  font-weight: 700;
}
.css-nav-tab-img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.css-nav-tab-info { display: flex; flex-direction: column; gap: 1px; }
.css-nav-tab-name { font-size: 12.5px; font-weight: 700; color: inherit; }
.css-nav-tab-sub { font-size: 10px; color: #8aab96; font-weight: 500; }

/* ── Stories Wrap ────────────────────────────────────────────── */
.css-stories-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Premium Story Card ──────────────────────────────────────── */
.css-story-card {
  background: #fff;
  border-radius: 22px;
  border: 1.5px solid var(--css-border);
  box-shadow: 0 4px 32px rgba(26,61,40,.07);
  overflow: hidden;
  transition: box-shadow var(--css-t);
}
.css-story-card:hover { box-shadow: 0 8px 48px rgba(26,61,40,.12); }
.css-story-card.css-story-active {
  border-color: var(--css-green);
  box-shadow: 0 8px 48px rgba(26,61,40,.14);
}

/* Card top hero row */
.css-story-hero {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 300px;
}
.css-story-img-wrap {
  position: relative;
  overflow: hidden;
  background: #1a2e1e;
}
.css-story-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.css-story-card:hover .css-story-img-wrap img { transform: scale(1.04); }
.css-story-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,26,16,.7) 0%, transparent 55%);
}
.css-story-img-bottom {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.css-story-featured-badge {
  background: var(--css-green);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.css-story-rating-badge {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.2);
}

/* Card right info panel */
.css-story-info {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 1px solid var(--css-border);
}
.css-story-info-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.css-story-name {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--css-text);
  margin: 0 0 4px;
}
.css-story-meta {
  font-size: 13px;
  color: var(--css-text2);
}
.css-story-service-tag {
  background: var(--css-green-lt);
  color: var(--css-green2);
  border: 1px solid #c0dac9;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.css-story-quote {
  font-size: 15px;
  color: var(--css-text2);
  line-height: 1.7;
  font-style: italic;
  border-left: 3px solid var(--css-gold);
  padding-left: 16px;
  margin: 0;
}

/* Transformation strip */
.css-story-transform {
  display: flex;
  gap: 0;
  background: linear-gradient(135deg, #f5faf7 0%, #fffdf8 100%);
  border-radius: 14px;
  border: 1px solid var(--css-border);
  overflow: hidden;
}
.css-tr-block {
  flex: 1;
  padding: 14px 16px;
  text-align: center;
  border-right: 1px solid var(--css-border);
}
.css-tr-block:last-child { border-right: none; }
.css-tr-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8aab96;
  display: block;
  margin-bottom: 4px;
}
.css-tr-val {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: block;
}
.css-tr-val.css-v-red    { color: var(--css-red); }
.css-tr-val.css-v-green  { color: var(--css-green); }
.css-tr-val.css-v-gold   { color: var(--css-gold); }

/* Story footer action row */
.css-story-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.css-story-duration {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--css-text2);
  font-weight: 600;
}
.css-story-duration svg { color: var(--css-green3); }
.css-story-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}
.css-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--css-text2);
  border: 1.5px solid var(--css-border);
  background: none;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: all var(--css-t);
}
.css-btn-outline:hover { background: var(--css-green-lt); border-color: #a8cdb8; color: var(--css-green); }
.css-btn-fill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--css-green);
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background var(--css-t), transform .15s;
}
.css-btn-fill:hover { background: var(--css-green2); transform: translateY(-1px); }
.css-btn-fill.css-btn-open { background: var(--css-orange); }

/* ── DROPDOWN ACCORDION DETAILS ─────────────────────────────── */
.css-story-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(.4,0,.2,1);
  border-top: 0px solid var(--css-border);
}
.css-story-details.css-details-open {
  max-height: 2400px;
  border-top-width: 1px;
}

/* Accordion items row */
.css-acc-bar {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1.5px solid var(--css-border);
  background: #fafcfb;
  overflow-x: auto;
  scrollbar-width: none;
}
.css-acc-bar::-webkit-scrollbar { display: none; }
.css-acc-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--css-text2);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--css-t), border-color var(--css-t), background var(--css-t);
}
.css-acc-tab:hover { color: var(--css-green); background: rgba(26,61,40,.03); }
.css-acc-tab.css-acc-active {
  color: var(--css-green);
  font-weight: 700;
  border-bottom-color: var(--css-green);
  background: #fff;
}

/* Accordion panels */
.css-acc-panels {
  position: relative;
}
.css-acc-panel {
  display: none;
  padding: 28px 32px;
  animation: cssAccFade 0.3s ease;
}
.css-acc-panel.css-panel-active { display: block; }
@keyframes cssAccFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Situation panel */
.css-sit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  align-items: start;
}
.css-sit-text {
  font-size: 14px;
  color: var(--css-text2);
  line-height: 1.8;
}
.css-sit-highlights {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.css-sit-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--css-green-lt);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--css-text);
  font-weight: 500;
  line-height: 1.4;
}
.css-sit-item svg { color: var(--css-green); flex-shrink: 0; margin-top: 1px; }

/* Services panel */
.css-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.css-svc-card {
  background: linear-gradient(145deg, #f7fbf8, #fff);
  border: 1.5px solid var(--css-border);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.css-svc-icon {
  width: 36px; height: 36px;
  background: var(--css-green-lt);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--css-green);
}
.css-svc-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--css-text);
}
.css-svc-desc {
  font-size: 11.5px;
  color: var(--css-text2);
  line-height: 1.5;
}

/* Journey / timeline panel */
.css-timeline {
  position: relative;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.css-timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--css-green3), #c0dac9);
  border-radius: 2px;
}
.css-tl-item {
  position: relative;
  padding: 0 0 24px 20px;
}
.css-tl-item:last-child { padding-bottom: 0; }
.css-tl-dot {
  position: absolute;
  left: -21px; top: 4px;
  width: 14px; height: 14px;
  background: var(--css-green);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--css-green3);
}
.css-tl-month {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--css-green3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.css-tl-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--css-text);
  margin-bottom: 4px;
}
.css-tl-desc {
  font-size: 12.5px;
  color: var(--css-text2);
  line-height: 1.6;
}
.css-tl-badge {
  display: inline-block;
  background: var(--css-green-lt);
  color: var(--css-green2);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  margin-top: 6px;
}

/* Results panel */
.css-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.css-result-block {
  background: linear-gradient(135deg, #f5faf7 0%, #fffdf8 100%);
  border: 1.5px solid var(--css-border);
  border-radius: 16px;
  padding: 20px;
}
.css-result-block-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--css-green);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.css-result-block-title svg { color: var(--css-green3); }
.css-check-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.css-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--css-text2);
  line-height: 1.45;
}
.css-check-list li svg { color: var(--css-green); flex-shrink: 0; margin-top: 2px; }

/* Family panel */
.css-family-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.css-family-quote-card {
  background: linear-gradient(135deg, #f7fbf8 0%, #fffdf8 100%);
  border: 1.5px solid var(--css-border);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.css-fq-stars { color: #f5a623; font-size: 16px; }
.css-fq-text {
  font-size: 13.5px;
  color: var(--css-text2);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}
.css-fq-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.css-fq-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.css-fq-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--css-text);
}
.css-fq-rel {
  font-size: 11px;
  color: var(--css-text2);
}

/* Gallery panel */
.css-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.css-gal-item {
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.css-gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.css-gal-item:hover img { transform: scale(1.08); }
.css-gal-overlay {
  position: absolute; inset: 0;
  background: rgba(10,26,16,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.css-gal-item:hover .css-gal-overlay { opacity: 1; }
.css-gal-overlay svg { color: #fff; }
.css-gal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.css-gal-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--css-green2);
  background: var(--css-green-lt);
  border: 1px solid #c0dac9;
  border-radius: 20px;
  padding: 4px 12px;
}

/* Share row at bottom of expanded */
.css-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: #fafcfb;
  border-top: 1px solid var(--css-border);
  flex-wrap: wrap;
  gap: 12px;
}
.css-share-left {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--css-text2);
}
.css-share-icons {
  display: flex;
  gap: 8px;
}
.css-si {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
  transition: transform 0.2s;
}
.css-si:hover { transform: scale(1.12); }
.css-si-wa  { background: #25D366; color: #fff; }
.css-si-fb  { background: #1877F2; color: #fff; }
.css-si-ig  { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.css-si-lnk { background: #f0f5f2; color: var(--css-green); border: 1.5px solid var(--css-border); }
.css-share-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--css-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 11px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background var(--css-t);
}
.css-share-cta:hover { background: var(--css-green2); }

/* Stars */
.css-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }

/* ── Nav thumb / name (used by JS buildNavTabs) ─────────────── */
.css-nav-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.css-nav-name { font-size: 12.5px; font-weight: 700; color: inherit; }

/* ── Story image column (JS: css-story-img-col / css-story-img) ── */
.css-story-img-col {
  position: relative;
  overflow: hidden;
  background: #1a2e1e;
  flex-shrink: 0;
}
.css-story-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.css-story-card:hover .css-story-img { transform: scale(1.04); }
.css-story-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,26,16,.75) 0%, transparent 52%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px;
  gap: 6px;
}
.css-story-tag {
  display: inline-block;
  background: var(--css-green);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  align-self: flex-start;
}

/* ── Story info panel extras ─────────────────────────────────── */
.css-story-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.css-story-rat-num { font-size: 15px; font-weight: 800; color: var(--css-text); }
.css-story-rat-max { font-size: 11px; color: var(--css-text2); }

/* ── Transformation strip in hero ────────────────────────────── */
.css-story-transform {
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(135deg, #f5faf7 0%, #fffdf8 100%);
  border-radius: 14px;
  border: 1px solid var(--css-border);
  overflow: hidden;
}
.css-st-box {
  flex: 1;
  padding: 13px 16px;
  text-align: center;
  border-right: 1px solid var(--css-border);
}
.css-st-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8aab96;
  margin-bottom: 4px;
}
.css-st-val {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.css-st-before .css-st-val { color: var(--css-red); }
.css-st-after  .css-st-val { color: var(--css-green); }
.css-st-mid-icon {
  padding: 0 6px;
  color: var(--css-green3);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.css-st-change-badge {
  flex-shrink: 0;
  background: var(--css-green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(255,255,255,.15);
}

/* ── View Full Journey button ────────────────────────────────── */
.css-view-journey-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--css-green);
  border: none;
  border-radius: 12px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background var(--css-t), transform .15s;
  align-self: flex-start;
  margin-top: auto;
}
.css-view-journey-btn:hover { background: var(--css-green2); transform: translateY(-1px); }

/* ── Accordion panels wrap / inner ──────────────────────────── */
.css-acc-panels-wrap { position: relative; }
.css-acc-panel-inner { /* transparent wrapper */ }
.css-acc-chev { display: inline-flex; align-items: center; opacity: .5; margin-left: 2px; }

/* ── Situation panel ─────────────────────────────────────────── */
.css-sit-wrap { display: flex; flex-direction: column; gap: 20px; }
.css-sit-hl-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--css-green); margin-bottom: 10px;
}
.css-sit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.css-sit-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--css-green); flex-shrink: 0; margin-top: 3px;
}

/* Before/After strip inside situation */
.css-before-after-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(135deg, #f5faf7, #fffdf8);
  border: 1.5px solid var(--css-border);
  border-radius: 16px;
  overflow: hidden;
}
.css-ba-box {
  flex: 1; padding: 18px 20px; text-align: center;
  border-right: 1px solid var(--css-border);
}
.css-ba-label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: #8aab96; margin-bottom: 6px;
}
.css-ba-val {
  display: block; font-size: 22px; font-weight: 800; line-height: 1;
}
.css-ba-before .css-ba-val { color: var(--css-red); }
.css-ba-after  .css-ba-val { color: var(--css-green); }
.css-ba-arrow  { padding: 0 12px; color: var(--css-green3); flex-shrink: 0; display: flex; align-items: center; }
.css-ba-badge  {
  flex-shrink: 0; padding: 0 22px;
  background: var(--css-green); color: #fff; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; align-self: stretch;
}

/* ── Services panel extras ───────────────────────────────────── */
.css-svc-wrap { display: flex; flex-direction: column; gap: 24px; }
.css-svc-num {
  font-size: 10px; font-weight: 800; color: var(--css-green3);
  text-transform: uppercase; letter-spacing: .07em;
}
.css-wd-col, .css-res-col { display: flex; flex-direction: column; }
.css-results-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--css-green); margin-bottom: 10px;
}
.css-wd-list, .css-res-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.css-wd-item, .css-res-item {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--css-text2); line-height: 1.45;
}
.css-wd-item svg, .css-res-item svg { color: var(--css-green); flex-shrink: 0; margin-top: 2px; }

/* ── Journey panel extras ────────────────────────────────────── */
.css-journey-wrap { display: flex; flex-direction: column; gap: 24px; }
.css-journey-intro { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.css-journey-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--css-green-lt); color: var(--css-green2); border: 1px solid #c0dac9;
  border-radius: 20px; font-size: 12px; font-weight: 700; padding: 6px 14px;
}
.css-journey-rating {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--css-text2);
}
.css-tl-left {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 18px; padding-top: 4px;
}
.css-tl-right { flex: 1; padding-left: 14px; padding-bottom: 24px; }
.css-tl-item { display: flex; gap: 0; }
.css-tl-item:last-child .css-tl-right { padding-bottom: 0; }
.css-tl-line { flex: 1; width: 2px; background: linear-gradient(to bottom, var(--css-green3), #c0dac9); margin-top: 4px; border-radius: 2px; min-height: 20px; }
.css-journey-quote {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--css-green-lt); border-radius: 16px; padding: 20px 22px;
  border-left: 4px solid var(--css-green);
}
.css-journey-quote-text {
  font-size: 15px; color: var(--css-text2); line-height: 1.7; font-style: italic; margin: 0;
}

/* ── Family panel extras ─────────────────────────────────────── */
.css-family-wrap { display: flex; flex-direction: column; gap: 24px; }
.css-family-intro { font-size: 14px; color: var(--css-text2); line-height: 1.7; margin: 0; }
.css-family-card {
  background: linear-gradient(135deg, #f7fbf8 0%, #fffdf8 100%);
  border: 1.5px solid var(--css-border); border-radius: 16px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.css-family-top { display: flex; align-items: center; gap: 12px; }
.css-family-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.css-family-name { font-size: 13.5px; font-weight: 700; color: var(--css-text); }
.css-family-relation { font-size: 11px; color: var(--css-text2); }
.css-family-quote { font-size: 13.5px; color: var(--css-text2); line-height: 1.7; font-style: italic; margin: 0; }
.css-family-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.css-family-share {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 16px 20px; background: #fafcfb; border-radius: 12px; border: 1px solid var(--css-border);
}
.css-share-label { font-size: 12.5px; font-weight: 700; color: var(--css-text2); }
.css-shr-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; border: none; border-radius: 22px;
  padding: 8px 16px; cursor: pointer; transition: transform 0.2s, opacity 0.2s;
}
.css-shr-btn:hover { transform: translateY(-1px); opacity: .88; }
.css-shr-wa  { background: #25D366; color: #fff; }
.css-shr-fb  { background: #1877F2; color: #fff; }
.css-shr-lnk { background: #f0f5f2; color: var(--css-green); border: 1.5px solid var(--css-border); }

/* ── Gallery panel extras ────────────────────────────────────── */
.css-gallery-wrap { display: flex; flex-direction: column; gap: 16px; }
.css-tag-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--css-green2); background: var(--css-green-lt); border: 1px solid #c0dac9;
  border-radius: 20px; padding: 4px 12px;
}

/* ── Bottom CTA Bar ──────────────────────────────────────────── */
.css-bottom-cta {
  background: linear-gradient(135deg, var(--css-green) 0%, var(--css-green2) 100%);
  margin-top: 48px;
  padding: 36px 0;
}
.css-bottom-cta-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.css-bottom-cta-text strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}
.css-bottom-cta-text span {
  font-size: 14px;
  color: rgba(255,255,255,.72);
}
.css-bottom-cta-btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.css-cta-call, .css-cta-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  padding: 13px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, opacity var(--css-t);
}
.css-cta-call { background: #fff; color: var(--css-green); }
.css-cta-wa   { background: #25D366; color: #fff; }
.css-cta-call:hover, .css-cta-wa:hover { transform: translateY(-2px); opacity: .92; }

/* ── Responsive ─────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   REAL FAMILY JOURNEYS SECTION  (rfj- prefix)
════════════════════════════════════════════════════════════════ */

/* Section wrapper */
.rfj-section {
  position: relative;
  background: linear-gradient(168deg, #fdfffe 0%, #f4fbf7 45%, #fef9f3 100%);
  padding: 96px 0 0;
  overflow: hidden;
}
.rfj-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.38;
}
.rfj-blob-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, #c5ead4 0%, transparent 70%);
  top: -160px; left: -140px;
}
.rfj-blob-2 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, #fde4cc 0%, transparent 70%);
  bottom: 0; right: -100px;
}
.rfj-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

/* ── Header ──────────────────────────────────────────────────── */
.rfj-header {
  text-align: center;
  margin-bottom: 52px;
}
.rfj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #e8834a;
  background: #fff4ed;
  border: 1px solid #fad4b8;
  border-radius: 30px;
  padding: 6px 18px;
  margin-bottom: 20px;
}
.rfj-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 46px;
  font-weight: 700;
  color: #1a2e1e;
  line-height: 1.18;
  margin: 0 0 14px;
  letter-spacing: -.02em;
}
.rfj-subtitle {
  font-size: 16px;
  color: #5a7360;
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto 18px;
}
.rfj-org-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2d6a4f;
  background: #e8f5ed;
  border: 1px solid #b7dfc8;
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 28px;
}
.rfj-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.rfj-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
}
.rfj-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #1a3d28;
  line-height: 1;
  margin-bottom: 4px;
}
.rfj-stat-lbl {
  font-size: 12px;
  color: #7a9e88;
  font-weight: 600;
}
.rfj-stat-sep {
  width: 1px;
  height: 36px;
  background: #d0e8da;
}

/* ── Stories container ───────────────────────────────────────── */
.rfj-stories {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 52px;
}

/* ── Individual story card ───────────────────────────────────── */
.rfj-card {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #e2eee8;
  box-shadow: 0 3px 24px rgba(26,61,40,.06);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.rfj-card:hover { box-shadow: 0 6px 40px rgba(26,61,40,.1); }

/* Card hero: image + summary */
.rfj-card-hero {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 280px;
}
.rfj-card-img-col {
  position: relative;
  overflow: hidden;
  background: #1a2e1e;
}
.rfj-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.rfj-card:hover .rfj-card-img { transform: scale(1.04); }
.rfj-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,26,16,.68) 0%, transparent 55%);
}
.rfj-card-img-bottom {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
}
.rfj-card-label {
  display: inline-block;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.2);
}

/* Card info */
.rfj-card-info {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 1.5px solid #e8f0eb;
}
.rfj-card-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.rfj-card-name {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a2e1e;
  margin: 0;
}
.rfj-card-meta {
  font-size: 13px;
  color: #7a9e88;
  font-weight: 500;
}
.rfj-card-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: #7a9e88;
}
.rfj-card-duration-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #edf6f1;
  color: #2d6a4f;
  border: 1px solid #c5dfd1;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  margin-left: 0;
}
.rfj-card-stars {
  color: #f5a623;
  font-size: 13px;
  letter-spacing: 1px;
}
.rfj-card-quote {
  font-size: 14.5px;
  color: #4a6252;
  line-height: 1.75;
  font-style: italic;
  border-left: 3px solid #e8834a;
  padding-left: 14px;
  margin: 0;
}

/* Condition chips */
.rfj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.rfj-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: #edf6f1;
  color: #2d6a4f;
  border: 1px solid #c5dfd1;
}

/* Read Story toggle button */
.rfj-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #2d6a4f;
  background: none;
  border: 1.5px solid #2d6a4f;
  border-radius: 10px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  align-self: flex-start;
  margin-top: auto;
  position: relative;
  top: 0;
  transform: none !important;
  -webkit-transform: none !important;
}
.rfj-read-btn:hover { background: #2d6a4f; color: #fff; }
.rfj-read-btn.rfj-btn-open { background: #2d6a4f; color: #fff; }
.rfj-btn-chev { transition: transform .3s ease; }
.rfj-read-btn.rfj-btn-open .rfj-btn-chev { transform: rotate(180deg); }

/* ── Expandable story details ────────────────────────────────── */
.rfj-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.4,0,.2,1);
  border-top: 0 solid #e2eee8;
}
.rfj-details.rfj-details-open {
  max-height: 3000px;
  border-top-width: 1.5px;
}
.rfj-details-inner {
  padding: 32px 30px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
}

/* Before / After bar */
.rfj-ba-wrap {
  grid-column: 1 / -1;
  display: flex;
  gap: 0;
  background: linear-gradient(135deg, #f5faf7, #fffdf8);
  border: 1.5px solid #e2eee8;
  border-radius: 14px;
  overflow: hidden;
}
.rfj-ba-side {
  flex: 1;
  padding: 16px 22px;
  border-right: 1px solid #e2eee8;
}
.rfj-ba-side:last-child { border-right: none; }
.rfj-ba-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rfj-ba-title.rfj-before { color: #c0392b; }
.rfj-ba-title.rfj-after  { color: #27ae60; }
.rfj-ba-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rfj-ba-list li {
  font-size: 13px;
  color: #4a6252;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.45;
}
.rfj-ba-dot-r { width: 7px; height: 7px; border-radius: 50%; background: #e74c3c; flex-shrink: 0; margin-top: 4px; }
.rfj-ba-dot-g { width: 7px; height: 7px; border-radius: 50%; background: #27ae60; flex-shrink: 0; margin-top: 4px; }

/* Story detail block */
.rfj-detail-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rfj-detail-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #2d6a4f;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.rfj-detail-title svg { color: #7ab89a; flex-shrink: 0; }
.rfj-detail-text {
  font-size: 13.5px;
  color: #4a6252;
  line-height: 1.75;
  margin: 0;
}
.rfj-detail-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rfj-detail-list li {
  font-size: 13px;
  color: #4a6252;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.rfj-check-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2d6a4f; flex-shrink: 0; margin-top: 5px;
}

/* Family quote highlight */
.rfj-family-quote-box {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #edf6f1, #fffdf8);
  border: 1.5px solid #c5dfd1;
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.rfj-fq-img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #b7dfc8;
}
.rfj-fq-content { flex: 1; }
.rfj-fq-text {
  font-size: 14px;
  color: #3a5244;
  line-height: 1.7;
  font-style: italic;
  margin: 0 0 8px;
}
.rfj-fq-author {
  font-size: 12.5px;
  font-weight: 700;
  color: #2d6a4f;
}
.rfj-fq-stars { color: #f5a623; font-size: 12px; margin-top: 2px; }

/* ── Trust strip ─────────────────────────────────────────────── */
.rfj-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 0;
  background: #fff;
  border: 1.5px solid #e2eee8;
  border-radius: 16px;
  padding: 20px 28px;
  margin-bottom: 40px;
}
.rfj-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #3a5244;
  font-weight: 600;
  padding: 0 20px;
}
.rfj-trust-item svg { color: #2d6a4f; flex-shrink: 0; }
.rfj-trust-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #c5dfd1;
  flex-shrink: 0;
}

/* ── Bottom CTA Bar ──────────────────────────────────────────── */
.rfj-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #1a3d28 0%, #2d6a4f 100%);
  border-radius: 20px 20px 0 0;
  padding: 36px 40px;
  margin-top: 8px;
}
.rfj-cta-text {}
.rfj-cta-title {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.rfj-cta-sub {
  font-size: 14px;
  color: rgba(255,255,255,.72);
  margin: 0;
  line-height: 1.6;
}
.rfj-cta-btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.rfj-btn-call, .rfj-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  padding: 13px 24px;
  text-decoration: none;
  transition: transform .15s, opacity .2s;
  border: none;
  cursor: pointer;
}
.rfj-btn-call { background: #fff; color: #1a3d28; }
.rfj-btn-wa   { background: #25D366; color: #fff; }
.rfj-btn-call:hover, .rfj-btn-wa:hover { transform: translateY(-2px); opacity: .92; }

/* ── Responsive ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   FAMILY EXPERIENCES SECTION  (cxfe- prefix)
════════════════════════════════════════════════════════════════ */

/* Section wrapper */
.cxfe-section {
  position: relative;
  background: linear-gradient(160deg, #fdfffe 0%, #f2fbf5 40%, #fef9f2 100%);
  padding: 88px 0 96px;
  overflow: hidden;
}
.cxfe-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

/* Ambient blobs */
.cxfe-bg-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(80px);
  opacity: 0.45;
}
.cxfe-blob-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #c8edd6 0%, transparent 70%);
  top: -140px; left: -120px;
}
.cxfe-blob-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #fce8cc 0%, transparent 70%);
  bottom: -80px; right: -80px;
}

/* Reveal animation */
.cxfe-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cxfe-reveal.cxfe-visible {
  opacity: 1;
  transform: none;
}

/* ── Header ──────────────────────────────────────────────────── */
.cxfe-header {
  text-align: center;
  margin-bottom: 56px;
}
.cxfe-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.cxfe-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cx-green, #1a5c38);
}
.cxfe-eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cx-green, #1a5c38);
  opacity: 0.5;
}
.cxfe-title {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 900;
  color: #18221a;
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: -.02em;
}
.cxfe-title em {
  font-style: normal;
  color: var(--cx-green, #1a5c38);
  position: relative;
}
.cxfe-subtitle {
  font-size: 16px;
  color: #4a5c50;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Statistics Row ──────────────────────────────────────────── */
.cxfe-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #fff;
  border: 1.5px solid #d4ead9;
  border-radius: 20px;
  padding: 32px 24px;
  margin-bottom: 64px;
  box-shadow: 0 4px 24px rgba(26,92,56,.06);
}
.cxfe-stat-card {
  flex: 1;
  text-align: center;
  padding: 0 20px;
}
.cxfe-stat-num {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  color: var(--cx-green, #1a5c38);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.cxfe-stat-num::after {
  content: '+';
  font-size: 0.65em;
  vertical-align: super;
  font-weight: 700;
}
.cxfe-stat-label {
  font-size: 13px;
  font-weight: 700;
  color: #18221a;
  margin-bottom: 4px;
}
.cxfe-stat-sub {
  font-size: 11.5px;
  color: #7a9080;
}
.cxfe-stat-divider {
  width: 1px;
  height: 56px;
  background: #d4ead9;
  flex-shrink: 0;
}

/* ── Featured Story ──────────────────────────────────────────── */
.cxfe-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(26,92,56,.10), 0 2px 12px rgba(0,0,0,.06);
  margin-bottom: 72px;
}
.cxfe-featured-img-col {
  position: relative;
  min-height: 480px;
}
.cxfe-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cxfe-featured-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,30,18,.75) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  gap: 12px;
}
/* Caregiver mini card */
.cxfe-cg-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 10px 14px;
}
.cxfe-cg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cx-green, #1a5c38);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cxfe-cg-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: block;
}
.cxfe-cg-role {
  font-size: 10.5px;
  color: rgba(255,255,255,.7);
  display: block;
}
.cxfe-cg-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #7effa8;
  background: rgba(0,200,80,.18);
  border: 1px solid rgba(0,200,80,.3);
  border-radius: 20px;
  padding: 3px 8px;
  flex-shrink: 0;
}
/* Voice note demo UI */
.cxfe-voice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 40px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}
.cxfe-voice-card:hover { background: rgba(255,255,255,.22); }
.cxfe-voice-play {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cx-green, #1a5c38);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.cxfe-voice-card:hover .cxfe-voice-play { transform: scale(1.08); }
.cxfe-voice-card.cxfe-playing .cxfe-voice-play { background: #d84040; }
.cxfe-voice-waves {
  display: flex;
  align-items: center;
  gap: 3px;
}
.cxfe-voice-waves span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.7);
  animation: cxfeWave 1.2s ease-in-out infinite;
}
.cxfe-voice-waves span:nth-child(1) { height: 8px;  animation-delay: 0s; }
.cxfe-voice-waves span:nth-child(2) { height: 16px; animation-delay: .1s; }
.cxfe-voice-waves span:nth-child(3) { height: 10px; animation-delay: .2s; }
.cxfe-voice-waves span:nth-child(4) { height: 20px; animation-delay: .05s; }
.cxfe-voice-waves span:nth-child(5) { height: 12px; animation-delay: .15s; }
.cxfe-voice-waves span:nth-child(6) { height: 18px; animation-delay: .25s; }
.cxfe-voice-waves span:nth-child(7) { height: 8px;  animation-delay: .1s; }
.cxfe-voice-waves span:nth-child(8) { height: 14px; animation-delay: .2s; }
.cxfe-voice-waves span:nth-child(9) { height: 10px; animation-delay: 0s; }
@keyframes cxfeWave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.4); }
}
.cxfe-voice-card:not(.cxfe-playing) .cxfe-voice-waves span { animation-play-state: paused; }
.cxfe-voice-dur {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
}
.cxfe-voice-label {
  font-size: 10.5px;
  color: rgba(255,255,255,.65);
}
/* Duration pill */
.cxfe-duration-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding: 5px 12px 5px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cx-green, #1a5c38);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Featured content col */
.cxfe-featured-content {
  padding: 40px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cxfe-trust-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cxfe-trust-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  letter-spacing: .04em;
}
.cxfe-pill-green { background: #e6f4ed; color: var(--cx-green, #1a5c38); }
.cxfe-pill-blue  { background: #e3eeff; color: #1a4a8a; }
.cxfe-pill-amber { background: #fff3e0; color: #b55a1a; }
.cxfe-featured-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: #18221a;
  line-height: 1.3;
  margin: 0;
}

/* Family mini profile */
.cxfe-family-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f7fbf8;
  border-radius: 12px;
  border-left: 3px solid var(--cx-green, #1a5c38);
}
.cxfe-fm-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cx-green, #1a5c38);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cxfe-fm-name {
  font-size: 13px;
  font-weight: 700;
  color: #18221a;
  display: block;
}
.cxfe-fm-detail {
  font-size: 11.5px;
  color: #6b7f70;
  display: block;
}

/* Journey steps */
.cxfe-journey {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cxfe-journey-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px dashed #d4ead9;
}
.cxfe-journey-step:last-child { border-bottom: none; }
.cxfe-js-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cxfe-js-fear .cxfe-js-icon  { background: #ffeaea; color: #c0392b; }
.cxfe-js-found .cxfe-js-icon { background: #fff3e0; color: #b55a1a; }
.cxfe-js-relief .cxfe-js-icon{ background: #e6f4ed; color: var(--cx-green, #1a5c38); }
.cxfe-js-body {
  flex: 1;
}
.cxfe-js-body strong {
  font-size: 12px;
  font-weight: 800;
  color: #18221a;
  display: block;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cxfe-js-body p {
  font-size: 13px;
  color: #4a5c50;
  line-height: 1.65;
  margin: 0;
}

/* Expand panel — featured */
.cxfe-expand-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(.4,0,.2,1), opacity 0.35s ease;
}
.cxfe-expand-wrap.cxfe-open {
  max-height: 800px;
  opacity: 1;
}
.cxfe-expand-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 8px;
}
.cxfe-expand-inner p {
  font-size: 13.5px;
  color: #3d5244;
  line-height: 1.75;
  margin: 0;
}
.cxfe-blockquote {
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--cx-green, #1a5c38);
  background: #e6f4ed;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  font-size: 13.5px;
  color: var(--cx-green, #1a5c38);
  line-height: 1.6;
}
.cxfe-blockquote cite {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 6px;
  color: #4a7a5c;
}
/* Read button */
.cxfe-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cx-green, #1a5c38);
  cursor: pointer;
  transition: color 0.18s ease;
}
.cxfe-read-btn:hover { color: #257a4e; }
.cxfe-read-chev { transition: transform 0.3s ease; }
.cxfe-read-btn[aria-expanded="true"] .cxfe-read-chev { transform: rotate(180deg); }

/* ── Horizontal story cards ──────────────────────────────────── */
.cxfe-cards-header {
  text-align: center;
  margin-bottom: 28px;
}
.cxfe-cards-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  color: #18221a;
  margin: 0 0 8px;
}
.cxfe-cards-sub {
  font-size: 14.5px;
  color: #4a5c50;
  margin: 0;
}
.cxfe-track-outer {
  overflow: hidden;
  margin-bottom: 64px;
}
.cxfe-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
  cursor: grab;
}
.cxfe-track::-webkit-scrollbar { display: none; }
.cxfe-track.cxfe-dragging { cursor: grabbing; }
.cxfe-card {
  flex: 0 0 340px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(26,92,56,.07), 0 1px 4px rgba(0,0,0,.05);
  scroll-snap-align: start;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.cxfe-card:hover {
  box-shadow: 0 10px 36px rgba(26,92,56,.14);
  transform: translateY(-4px);
}
.cxfe-card-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.cxfe-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.cxfe-card:hover .cxfe-card-img { transform: scale(1.05); }
.cxfe-card-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.04) 0%, rgba(0,0,0,.55) 100%);
}
.cxfe-card-trust-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(26,92,56,.82);
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.cxfe-card-quote-overlay {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  font-size: 12.5px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  line-height: 1.4;
}
.cxfe-card-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cxfe-card-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cxfe-cp-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cxfe-av-teal   { background: #0f7a6e; }
.cxfe-av-indigo { background: #3730a3; }
.cxfe-av-rose   { background: #be185d; }
.cxfe-cp-name {
  font-size: 13px;
  font-weight: 700;
  color: #18221a;
}
.cxfe-cp-detail {
  font-size: 11px;
  color: #6b7f70;
}
.cxfe-card-tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cxfe-ctag {
  font-size: 10.5px;
  font-weight: 600;
  color: #3d5244;
  background: #f0faf4;
  border: 1px solid #c5dfc9;
  border-radius: 20px;
  padding: 2px 9px;
}
.cxfe-ctag-dur {
  background: #e6f4ed;
  color: var(--cx-green, #1a5c38);
  font-weight: 700;
  border-color: #a8d5b4;
}
.cxfe-card-story {
  font-size: 13px;
  color: #3d5244;
  line-height: 1.65;
  margin: 0;
}
/* Card expand */
.cxfe-card-expand-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
}
.cxfe-card-expand-wrap.cxfe-open {
  max-height: 400px;
  opacity: 1;
}
.cxfe-card-expand-wrap p {
  font-size: 13px;
  color: #4a5c50;
  line-height: 1.7;
  margin: 0 0 8px;
}
.cxfe-card-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cx-green, #1a5c38);
  cursor: pointer;
  transition: color 0.18s ease;
}
.cxfe-card-read-btn:hover { color: #257a4e; }
.cxfe-card-read-btn svg { transition: transform 0.28s ease; }
.cxfe-card-read-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.cxfe-card-footer-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: #7a9080;
  padding-top: 10px;
  border-top: 1px solid #e8f2eb;
}

/* ── Hospital-to-Home Journey Visualiser ────────────────────── */
.cxfe-journey-vis {
  background: #fff;
  border: 1.5px solid #d4ead9;
  border-radius: 22px;
  padding: 40px 40px 36px;
  margin-bottom: 64px;
  box-shadow: 0 4px 24px rgba(26,92,56,.06);
}
.cxfe-jv-header {
  text-align: center;
  margin-bottom: 36px;
}
.cxfe-jv-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: #18221a;
  margin: 8px 0 8px;
}
.cxfe-jv-sub {
  font-size: 13px;
  color: #6b7f70;
  margin: 0;
}
.cxfe-jv-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.cxfe-jv-line {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: linear-gradient(to right, #e57373, #ffa726, #66bb6a, #26a69a, var(--cx-green, #1a5c38));
  z-index: 0;
}
.cxfe-jv-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.cxfe-jv-node {
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0,0,0,.12);
  flex-shrink: 0;
}
.cxfe-jvn-1 { background: #e57373; }
.cxfe-jvn-2 { background: #ffa726; }
.cxfe-jvn-3 { background: #66bb6a; }
.cxfe-jvn-4 { background: #26a69a; }
.cxfe-jvn-5 { background: var(--cx-green, #1a5c38); }
.cxfe-jv-step-body {
  text-align: center;
  padding: 0 6px;
}
.cxfe-jv-step-body strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #18221a;
  margin-bottom: 5px;
}
.cxfe-jv-step-body span {
  font-size: 11.5px;
  color: #4a5c50;
  line-height: 1.55;
}

/* ── Closing Section ─────────────────────────────────────────── */
.cxfe-closing {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(26,92,56,.10);
}
.cxfe-closing-img-col {
  position: relative;
  min-height: 400px;
}
.cxfe-closing-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cxfe-closing-img-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(10,30,18,.85) 0%, transparent 100%);
  padding: 28px 20px 18px;
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,.85);
  text-align: center;
}
.cxfe-closing-content {
  padding: 44px 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cxfe-closing-title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  color: #18221a;
  margin: 0;
  line-height: 1.25;
}
.cxfe-closing-body {
  font-size: 14.5px;
  color: #4a5c50;
  line-height: 1.75;
  margin: 0;
}
.cxfe-closing-body em {
  font-style: italic;
  color: var(--cx-green, #1a5c38);
  font-weight: 600;
}
/* Trust badges */
.cxfe-trust-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cxfe-tb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #3d5244;
}
.cxfe-tb-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #e6f4ed;
  color: var(--cx-green, #1a5c38);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* CTAs */
.cxfe-closing-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cxfe-cta-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--cx-green, #1a5c38);
  border-radius: 11px;
  padding: 13px 24px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.cxfe-cta-main:hover { background: #257a4e; transform: translateY(-2px); }
.cxfe-cta-ghost {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--cx-green, #1a5c38);
  background: #fff;
  border: 2px solid var(--cx-green, #1a5c38);
  border-radius: 11px;
  padding: 13px 24px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cxfe-cta-ghost:hover { background: var(--cx-green, #1a5c38); color: #fff; transform: translateY(-2px); }
.cxfe-closing-note {
  font-size: 12px;
  color: #7a9080;
  margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL POLISH — UI/UX Alignment, Responsiveness & Slider Fix
   Appended last so it safely overrides without touching logic
════════════════════════════════════════════════════════════════ */

/* ── 1. Unified container system ─────────────────────────────── */
:root {
  --site-max: 1260px;
  --site-pad: clamp(16px, 4vw, 48px);
  --section-v: clamp(60px, 8vw, 96px);
  --card-radius: 18px;
  --card-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --card-shadow-hover: 0 12px 40px rgba(0,0,0,0.13);
  --smooth: 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── 2. Prevent horizontal overflow on mobile ─────────────────── */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* ── 3. All carousel/slider tracks: smoother drag feel ────────── */
.cards-track-wrap,
#wCardsTrack,
#pCardsTrack,
[id$="CardsTrack"],
.cxss-track,
.cxfe-track,
.q-track {
  /* Remove mandatory snap during drag — only snap on release */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.cards-track-wrap.is-dragging,
#wCardsTrack.is-dragging,
#pCardsTrack.is-dragging,
[id$="CardsTrack"].is-dragging,
.cxss-track.cxss-dragging,
.cxfe-track.cxfe-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* ── 4. Prevent card clicks during drag ───────────────────────── */
.cards-track-wrap.is-dragging *,
#wCardsTrack.is-dragging *,
#pCardsTrack.is-dragging *,
.cxss-track.cxss-dragging *,
.cxfe-track.cxfe-dragging * {
  pointer-events: none;
}

/* ── 5. Smooth accordion transitions ──────────────────────────── */
.w-svc-body,
.w-panel-svc-body,
.p-acc-body,
.q-acc-body,
.carex-acc-body,
.svc-item-body {
  transition: max-height 0.36s cubic-bezier(0.4,0,0.2,1),
              opacity 0.28s ease,
              padding 0.28s ease;
}

/* ── 6. Sticky tabs: stable positioning ───────────────────────── */
.gal2-tabs-wrap,
.cads-top-tabs-bar,
.otm-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── 7. Section vertical rhythm ───────────────────────────────── */
.w-section,
.elder-section,
.gal2-section,
.rfj-section,
.otm-section,
.css-section,
.cxss-section,
.cxfe-section,
.cxam-section,
.cads-section,
.carex-section {
  scroll-margin-top: 0;
}

/* ── 8. Button consistency ────────────────────────────────────── */
button, [role="button"] {
  touch-action: manipulation;
}

/* ── 9. Image rendering ───────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── 10. Section background continuity ───────────────────────── */
.gal2-section {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.rfj-section {
  padding-top: clamp(56px, 8vw, 96px);
}
.otm-section {
  padding-bottom: clamp(40px, 6vw, 72px);
}
.css-section {
  padding-top: clamp(56px, 8vw, 96px);
}

/* ── 11. Mobile card grids: no overflow ───────────────────────── */

/* ── 12. Slider track scroll padding on mobile ────────────────── */

/* ── 13. Tab bars: smooth horizontal scroll on mobile ─────────── */
.gal2-tabs,
.otm-tabs,
.cads-top-tabs {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── 14. Hover effects: GPU accelerated ───────────────────────── */
.otm-card,
.ec-card,
.w-card,
.p-card,
.rfj-card,
.gal2-item {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── 15. Body overflow fix for modals/lightbox ────────────────── */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ── 16. Responsive heading clamps ───────────────────────────── */

/* ── 17. Widescreen centering ─────────────────────────────────── */

/* ── 18. Touch target sizing (accessibility) ──────────────────── */
.gal2-tab,
.otm-tab,
.cads-top-tab {
  min-height:30px;
}


/* ── 20. Consistent border radius ────────────────────────────── */
.otm-card        { border-radius: var(--card-radius); }
.gal2-item       { border-radius: 14px; }
.rfj-card        { border-radius: 20px; }
.gal2-viewall-btn { border-radius: 50px; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM POLISH v2 — Spacing, Accordions, Mobile, Visual Flow
════════════════════════════════════════════════════════════════ */

/* ── P1. Global typography scale ─────────────────────────────── */
:root {
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   clamp(24px, 3.5vw, 36px);
  --fs-2xl:  clamp(30px, 5vw, 52px);
  --fs-3xl:  clamp(36px, 6vw, 64px);
  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.65;
  --lh-loose: 1.8;
  /* Spacing scale */
  --sp-2:  4px;
  --sp-4:  8px;
  --sp-6:  12px;
  --sp-8:  16px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-16: 32px;
  --sp-20: 40px;
  --sp-24: 48px;
  --sp-32: 64px;
  --sp-40: 80px;
  --sp-48: 96px;
  /* Section padding */
  --sec-pt: clamp(64px, 8vw, 100px);
  --sec-pb: clamp(64px, 8vw, 100px);
}

/* ── P2. Body font smoothing ─────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── P3. Uniform section vertical padding ────────────────────── */
.elder-section    { padding: var(--sec-pt) 0 var(--sec-pb); }
.w-section        { padding: var(--sec-pt) 0 var(--sec-pb); }
.gal2-section     { padding: var(--sec-pt) 0 var(--sec-pb); }
.rfj-section      { padding: var(--sec-pt) 0 var(--sec-pb); }
.otm-section      { padding: var(--sec-pt) 0 var(--sec-pb); }
.css-section      { padding: var(--sec-pt) 0 0; }
.cxss-section     { padding: var(--sec-pt) 0 var(--sec-pb); }
.cxfe-section     { padding: var(--sec-pt) 0 var(--sec-pb); }
.cxam-section     { padding: var(--sec-pt) 0 var(--sec-pb); }
.cads-section     { padding: var(--sec-pt) 0 var(--sec-pb); }

/* ── P4. Accordion: content-driven height (no fixed values) ───── */
/* All accordion bodies should NOT use fixed max-height.
   Instead rely on max-height: 0 → max-height: none with transition.
   The override below ensures smoother transitions for known patterns. */
.w-svc-body,
.w-panel-svc-body,
.p-acc-body,
.q-acc-body,
.carex-acc-body,
.svc-item-body,
.rfj-details,
.css-acc-panel {
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1),
              opacity    0.3s ease,
              padding    0.3s ease;
}

/* Collapsed state: zero height, no opacity flash */
.w-svc-body:not(.is-open),
.w-panel-svc-body:not(.is-open),
.svc-item-body:not(.is-open) {
  max-height: 0 !important;
  opacity: 0;
}

/* Open state: generous max-height for content-driven expansion */
.w-svc.is-open .w-svc-body,
.w-panel-svc.is-open .w-panel-svc-body,
.svc-item.is-open .svc-item-body {
  opacity: 1;
}

/* ── P5. Stable sticky bars (no layout jump) ─────────────────── */
.gal2-tabs-wrap {
  position: sticky;
  top: 73px;
  z-index: 100;
  background: linear-gradient(168deg, #0b1f14 0%, #132b1c 45%, #0e2318 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom:0;
  border-radius: 0px;
}

/* ── P6. Card grid: uniform gap & radius system ──────────────── */
.otm-grid          { gap: clamp(12px, 2vw, 20px); }
.gal2-grid         { gap: clamp(8px, 1.5vw, 12px); }

/* ── P7. Remove unwanted extra whitespace on cards ───────────── */
.ec-card,
.w-card,
.p-card {
  margin-bottom: 0;
}

/* ── P8. Slider tracks: prevent hidden overflow cut-off ──────── */
.cards-track-wrap { overflow-y: visible; padding-bottom: 24px; }
#wCardsTrack       { overflow-y: visible; padding-bottom: 24px; }
#pCardsTrack       { overflow-y: visible; padding-bottom: 24px; }

/* ── P9. Button base: consistent height & padding ────────────── */
.rfj-read-btn,
.rfj-btn-call,
.rfj-btn-wa,
.otm-hero-btn,
.gal2-viewall-btn,
.css-view-journey-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ── P10. Typography hierarchy – headings ────────────────────── */
.rfj-title         { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.otm-hero-title    { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.gal2-title        { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.otm-dept-title    { font-size: var(--fs-xl);  line-height: var(--lh-tight); }

/* ── P11. Card hover: smoother, subtler lift ─────────────────── */
.otm-card:hover     { transform: translateY(-5px) translateZ(0); }
.rfj-card:hover     { box-shadow: 0 16px 48px rgba(26,61,40,0.14); }
.gal2-item:hover img { transform: scale(1.06); }

/* ── P12. Section separators: visual breathing ───────────────── */
.rfj-section,
.otm-section {
  position: relative;
}
.rfj-section::before,
.otm-section::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,135,58,0.2), transparent);
}

/* ── P13. Mobile: reduce vertical weight ────────────────────── */

/* ── P14. Desktop: prevent over-wide content at 1400px+ ─────── */

/* ── P15. Readable line lengths ─────────────────────────────── */
.rfj-subtitle,
.otm-hero-sub,
.gal2-subtitle {
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}
.otm-hero-sub { margin-left: 0; margin-right: 0; }

/* ── P16. Image aspect-ratio consistency in cards ───────────── */
.otm-card-photo { aspect-ratio: 3/4; }
.rfj-card-img-col img { object-fit: cover; width: 100%; height: 100%; }

/* ── P17. Tab scroll: no content shift on activation ────────── */
.otm-tabs-wrap { overflow-x: auto; overflow-y: visible; }
.otm-tabs { padding-bottom: 2px; }

/* ── P18. Form inputs: consistent sizing ─────────────────────── */
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── P19. Smooth focus outlines ──────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(42,96,68,0.5);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── P20. Print: hide decorative elements ────────────────────── */

/* ── P21. Reduce motion: respect user preference ─────────────── */

/* ── P22. Visual consistency: card shadow system ─────────────── */
.otm-card    { box-shadow: 0 2px 16px rgba(26,61,40,0.07); }
.otm-card:hover { box-shadow: 0 12px 40px rgba(26,61,40,0.14); }
.rfj-card    { box-shadow: 0 4px 24px rgba(26,61,40,0.08); }
.gal2-item   { box-shadow: 0 2px 12px rgba(0,0,0,0.12); }

/* ── P23. Section label / eyebrow consistency ────────────────── */
.otm-eyebrow,
.rfj-eyebrow,
.gal2-badge {
  letter-spacing: 1.4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── P24. Smooth image loading ───────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded,
img:not([loading]) {
  opacity: 1;
}

/* ── P25. Hero stat bubbles: consistent look ─────────────────── */
.otm-hero-stat {
  min-width: 90px;
  text-align: center;
}

/* ── P26. Tab active indicator: stronger visual signal ────────── */
.gal2-tab-active {
  box-shadow: 0 4px 18px rgba(42,96,68,0.38);
}
.otm-tab-active {
  box-shadow: 0 4px 16px rgba(26,61,40,0.22);
}

/* ── P27. Prevent FOUC on staggered card animations ─────────── */
.otm-grid .otm-card {
  will-change: opacity, transform;
}

/* ── P28. Horizontal track: visible start padding ───────────── */
.cards-track-wrap { scroll-padding-left: 24px; }
#wCardsTrack       { scroll-padding-left: 24px; }
#pCardsTrack       { scroll-padding-left: 24px; }

/* ── P29. Z-index hierarchy (no overlaps) ────────────────────── */
:root {
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  80;
  --z-nav:     100;
  --z-modal:   9000;
  --z-tooltip: 9500;
}
.gal2-tabs-wrap { z-index: var(--z-sticky); }
.otm-tabs-wrap  { z-index: var(--z-sticky); }
.carex-fabs     { z-index: var(--z-nav); }

/* ── P30. Final: hide empty section gaps ─────────────────────── */
section:empty { display: none; }

/* ── P31. Section entry animation (added by JS IntersectionObserver) */
.rfj-section,
.otm-section,
.gal2-section,
.css-section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.rfj-section.sec-in-view,
.otm-section.sec-in-view,
.gal2-section.sec-in-view,
.css-section.sec-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Respect reduced motion */

/* ── P32. Gal2 sticky tabs: mobile full-bleed fix ────────────── */

/* ── P33. OTM hero: tighter mobile grid ─────────────────────── */

/* ── P34. RFJ cards: consistent image height on all screens ──── */
.rfj-card-img-col {
  min-height: 280px;
}

/* ── P35. Carousel track: first-card left alignment ─────────── */
.cards-track-wrap > *:first-child,
#wCardsTrack > *:first-child,
#pCardsTrack > *:first-child { margin-left: 0; }

/* ── P36. Gallery tabs: authoritative sticky rule (ID beats all class cascade) */
#gal2TabsWrap {
      position: sticky;
    top: 72px;
    z-index: 200;
    transform: none;
    will-change: auto;
    display: flex;
    align-items: center;
        justify-content: center;
}

/* ── Gallery tabs toggle button ─────────────────────────────── */
.gal2-toggle-btn {
  flex-shrink: 0;
  margin-left: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 11px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  letter-spacing: 0.02em;
}
.gal2-toggle-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Default: show close icon, hide "Show Gallery" label */
.gal2-toggle-label-show { display: none; }
.gal2-toggle-label-hide { display: inline; }
.gal2-toggle-icon-close { display: block; }

/* Collapsed: hide tabs + close icon, show "Show Gallery" label */
#gal2TabsWrap.gal2-collapsed .gal2-tabs              { /* hidden by JS slideUp */ }
#gal2TabsWrap.gal2-collapsed .gal2-toggle-icon-close { display: none; }
#gal2TabsWrap.gal2-collapsed .gal2-toggle-label-hide { display: none; }
#gal2TabsWrap.gal2-collapsed .gal2-toggle-label-show {
  display: flex;
  align-items: center;
  gap: 5px;
}
#gal2TabsWrap.gal2-collapsed {
  justify-content: center;
}
#gal2TabsWrap.gal2-collapsed .gal2-toggle-btn {
  margin-left: 0;
}

/* ── Dissolve / expand animations ───────────────────────────── */
@keyframes gal2TabOut {
  0%   { opacity: 1;   transform: scale(1)   translateX(0);    filter: blur(0); }
  60%  { opacity: 0.4; transform: scale(0.6) translateX(30px); filter: blur(3px); }
  100% { opacity: 0;   transform: scale(0.1) translateX(60px); filter: blur(6px); }
}
@keyframes gal2TabIn {
  0%   { opacity: 0;   transform: scale(0.1) translateX(60px); filter: blur(6px); }
  50%  { opacity: 0.5; transform: scale(0.7) translateX(20px); filter: blur(2px); }
  100% { opacity: 1;   transform: scale(1)   translateX(0);    filter: blur(0); }
}
@keyframes gal2BtnPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(255,255,255,0.5); }
  50%  { transform: scale(1.2);  box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(255,255,255,0); }
}
.gal2-tab.gal2-tab-out {
  animation: gal2TabOut 0.32s cubic-bezier(0.4,0,1,1) forwards;
  pointer-events: none;
}
.gal2-tab.gal2-tab-in {
  animation: gal2TabIn 0.38s cubic-bezier(0,0,0.2,1) both;
  pointer-events: none;
}
.gal2-toggle-btn.gal2-btn-pulse {
  animation: gal2BtnPulse 0.35s ease-out forwards;
}

/* ── Show button chevron ─────────────────────────────────────── */
.toggle-chevron {
  flex-shrink: 0;
}

/* ── OTM (Our Team) tabs: sticky + toggle ────────────────────── */
#otmTabsWrap {
  position: sticky;
  top: 72px;
  z-index: 200;
  transform: none;
  will-change: auto;
  display: flex;
  align-items: center;
  overflow: visible;
  background: rgba(250,246,239,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(26,61,40,0.1);
  padding: 10px 10px 10px 10px;
  margin: 0 ;
}
/* Tabs scroll freely; min-width:0 lets flex child shrink so button stays visible */
#otmTabsWrap .otm-tabs {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: center;
}
#otmTabsWrap .otm-tabs::-webkit-scrollbar { display: none; }
/* Toggle button always pinned to the right — never scrolled away */
#otmTabsWrap .otm-toggle-btn {
  flex-shrink: 0;
  margin-left: 0;
     margin-right: 20px;
  position: relative;
  z-index: 1;
}

.otm-toggle-btn {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 7px;
  border-radius: 50px;
  border: 1px solid rgba(26,61,40,0.18);
  background: rgba(26,61,40,0.07);
  color: #1a3d28;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  letter-spacing: 0.02em;
}
.otm-toggle-btn:hover {
  background: rgba(26,61,40,0.14);
}
.otm-toggle-label-show { display: none; }
.otm-toggle-label-hide { display: inline; }
.otm-toggle-icon-close  { display: block; }

#otmTabsWrap.otm-collapsed .otm-tabs               { /* hidden by JS slideUp */ }
#otmTabsWrap.otm-collapsed .otm-toggle-icon-close  { display: none; }
#otmTabsWrap.otm-collapsed .otm-toggle-label-hide  { display: none; }
#otmTabsWrap.otm-collapsed .otm-toggle-label-show  {
  display: flex;
  align-items: center;
  gap: 5px;
}
#otmTabsWrap.otm-collapsed {
  justify-content: center;
}
#otmTabsWrap.otm-collapsed .otm-toggle-btn {
  margin-left: 0;
}

.otm-tab.otm-tab-out {
  animation: gal2TabOut 0.32s cubic-bezier(0.4,0,1,1) forwards;
  pointer-events: none;
}
.otm-tab.otm-tab-in {
  animation: gal2TabIn 0.38s cubic-bezier(0,0,0.2,1) both;
  pointer-events: none;
}
.otm-toggle-btn.otm-btn-pulse {
  animation: gal2BtnPulse 0.35s ease-out forwards;
}

/* ── P37. Text overflow safety ───────────────────────────────── */
.otm-card-name,
.otm-card-role,
.rfj-card-info * {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── P40. Global link reset ──────────────────────────────────── */
a { color: inherit; }
a:not([class]) { color: inherit; text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   OTM CARD EXPANSION — click hint, in-card profile, accordion
   ═══════════════════════════════════════════════════════════════ */

/* Disable hover lift when card profile is expanded */
.otm-card.otm-card-open,
.otm-card.otm-card-open:hover {
  transform: none;
  box-shadow: 0 8px 32px rgba(26,61,40,0.14);
  cursor: default;
}

/* ── Click hint strip ──────────────────────────────────────── */
.otm-card-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--otm-green2, #3d7a5a);
  background: rgba(62,122,90,0.08);
  border: 1px solid rgba(62,122,90,0.18);
  border-radius: 20px;
  padding: 4px 10px;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
  cursor: pointer;
}
.otm-card:hover .otm-card-hint {
  background: rgba(62,122,90,0.15);
  border-color: rgba(62,122,90,0.35);
}
.otm-card-hint svg { flex-shrink: 0; }

@keyframes otm-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,122,90,0.22); }
  50%       { box-shadow: 0 0 0 6px rgba(62,122,90,0); }
}
.otm-card-hint {
  animation: otm-hint-pulse 2.4s ease-in-out infinite;
}
.otm-card.otm-card-open .otm-card-hint {
  animation: none;
}

/* ── Expand panel ─────────────────────────────────────────── */
.otm-card-expand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 28px rgba(45,100,70,0.18);
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-height: 85%;
  overflow: hidden;
}
.otm-card.otm-card-open .otm-card-expand {
  transform: translateY(0);
}

/* ── Expand header ─────────────────────────────────────────── */
.otm-card-expand-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(45,100,70,0.08);
  flex-shrink: 0;
}
.otm-card-expand-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.otm-card-expand-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(45,100,70,0.18);
  flex-shrink: 0;
}
.otm-card-expand-name {
  font-size: 13px;
  font-weight: 700;
  color: #1a3a2a;
  line-height: 1.3;
}
.otm-card-expand-role {
  font-size: 11px;
  color: #6b8c7a;
  line-height: 1.3;
}
.otm-card-expand-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(45,100,70,0.08);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #3d7a5a;
  flex-shrink: 0;
  transition: background 0.2s;
}
.otm-card-expand-close:hover { background: rgba(45,100,70,0.18); }

/* ── Profile accordion list ─────────────────────────────────── */
.otm-prof-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 10px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(45,100,70,0.15) transparent;
}

/* ── Single profile accordion item ─────────────────────────── */
.otm-prof-acc {
  border: 1.5px solid rgba(45,100,70,0.1);
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
  background: #f8fdf9;
  transition: border-color 0.2s;
}
.otm-prof-acc:hover { border-color: rgba(45,100,70,0.25); }
.otm-prof-acc.otm-prof-open { border-color: rgba(45,100,70,0.35); background: #fff; }

.otm-prof-acc-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}
.otm-prof-acc-ico { font-size: 15px; flex-shrink: 0; }
.otm-prof-acc-lbl {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: #1a3a2a;
}
.otm-prof-acc-chev {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(45,100,70,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3d7a5a;
  flex-shrink: 0;
  transition: background 0.2s;
}
.otm-prof-acc.otm-prof-open .otm-prof-acc-chev {
  background: #3d7a5a;
  color: #fff;
}
.otm-prof-acc-chev svg { transition: transform 0.3s; }
.otm-prof-acc.otm-prof-open .otm-prof-acc-chev svg { transform: rotate(180deg); }

.otm-prof-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.otm-prof-acc.otm-prof-open .otm-prof-acc-body { grid-template-rows: 1fr; }
.otm-prof-acc-inner { overflow: hidden; }
.otm-prof-acc-text {
  padding: 0 12px 10px 36px;
  font-size: 12px;
  color: #4a6a58;
  line-height: 1.7;
  margin: 0;
}

/* ── Services panel: reduce padding to remove black gap ─────── */
.w-panel-body {
  padding-bottom: 72px;
}

/* ── Responsive ─────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   CONTACT US SECTION  (ctu- prefix)
════════════════════════════════════════════════════════════════ */

:root {
  --ctu-green:    #1a3d28;
  --ctu-green2:   #2a6044;
  --ctu-green3:   #3d8a5e;
  --ctu-green-lt: #eaf4ee;
  --ctu-orange:   #c9873a;
  --ctu-cream:    #faf6ef;
  --ctu-text:     #1a2e1e;
  --ctu-text2:    #4a5e50;
  --ctu-border:   #dde8e1;
  --ctu-t:        0.3s ease;
}

/* Section wrapper */
.ctu-section {
  background: linear-gradient(160deg, #faf7f2 0%, #f4f9f6 50%, #fffdf9 100%);
  padding: 80px 0 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Ambient blobs */
.ctu-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
}
.ctu-blob-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(42,96,68,0.13) 0%, transparent 70%);
  top: -120px; left: -160px;
}
.ctu-blob-2 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(201,135,58,0.11) 0%, transparent 70%);
  bottom: 80px; right: -120px;
}

.ctu-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* ── Hero strip: left text + center photo + right form ──────── */
.ctu-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 500px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 56px rgba(26,61,40,0.13);
  background: #fff;
}

/* Left: content pane */
.ctu-left {
  background: #fff;
  padding: 52px 44px 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.ctu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ctu-orange);
  background: #fff4e6;
  border: 1px solid #f5d8b0;
  border-radius: 30px;
  padding: 5px 16px;
  width: fit-content;
}
.ctu-eyebrow svg { flex-shrink: 0; }
.ctu-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--ctu-text);
  line-height: 1.2;
  margin: 0;
}
.ctu-headline em {
  font-style: normal;
  color: var(--ctu-orange);
}
.ctu-headline-deco {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -10px 0;
}
.ctu-deco-line {
  width: 40px;
  height: 1.5px;
  background: var(--ctu-orange);
  opacity: 0.45;
}
.ctu-sub {
  font-size: 14.5px;
  color: var(--ctu-text2);
  line-height: 1.75;
  margin: 0;
}

/* Contact method grid */
.ctu-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ctu-method {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #f7fbf9;
  border: 1px solid var(--ctu-border);
  border-radius: 14px;
  padding: 15px 15px;
  text-decoration: none;
  transition: box-shadow var(--ctu-t), border-color var(--ctu-t), transform var(--ctu-t);
}
.ctu-method:hover {
  border-color: #b5d8c5;
  box-shadow: 0 4px 20px rgba(26,61,40,0.1);
  transform: translateY(-2px);
}
.ctu-method-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ctu-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ctu-method-body {}
.ctu-method-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ctu-text);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ctu-method-val {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ctu-green);
  margin-bottom: 2px;
}
.ctu-method-note {
  display: block;
  font-size: 11px;
  color: var(--ctu-text2);
  line-height: 1.5;
}

/* Center: hero photo */
.ctu-photo {
  position: relative;
  overflow: hidden;
}
.ctu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ctu-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.08) 0%, transparent 40%),
              linear-gradient(to left,  rgba(26,40,30,0.22) 0%, transparent 50%);
}

/* Right: form pane */
.ctu-form-pane {
  background: var(--ctu-green);
  padding: 44px 36px 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: visible;
}
.ctu-form-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.ctu-form-deco {
  width: 40px;
  height: 3px;
  background: var(--ctu-orange);
  border-radius: 2px;
  margin-top: -10px;
}
.ctu-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ctu-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ctu-field {
  background: rgba(255,255,255,0.09);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  color: #fff;
  font-family: inherit;
  outline: none;
  transition: border-color var(--ctu-t), background var(--ctu-t);
  width: 100%;
}
.ctu-field::placeholder { color: rgba(255,255,255,0.5); }
.ctu-field:focus {
  border-color: var(--ctu-orange);
  background: rgba(255,255,255,0.14);
}
.ctu-field-full { grid-column: 1 / -1; }

/* ── CTU phone: country picker + formatted input ──────────── */
.ctu-phone-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.ctu-cc-wrap { position: relative; flex-shrink: 0; }
.ctu-cc-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 9px;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  font-family: inherit;
  transition: background var(--ctu-t), border-color var(--ctu-t);
}
.ctu-cc-btn:hover,
.ctu-cc-btn.ctu-cc-open { background: rgba(255,255,255,0.18); border-color: var(--ctu-orange); }
.ctu-cc-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: #1a3d28;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.4);
  z-index: 300;
  display: none;
  flex-direction: column;
  overflow: hidden;
  max-height: 260px;
}
.ctu-cc-dropdown.ctu-cc-open { display: flex; }
.ctu-cc-search-wrap {
  padding: 9px 10px 7px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.ctu-cc-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 7px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
  background: rgba(255,255,255,0.08);
  color: #fff;
  box-sizing: border-box;
  transition: border-color var(--ctu-t);
}
.ctu-cc-search::placeholder { color: rgba(255,255,255,0.4); }
.ctu-cc-search:focus { border-color: var(--ctu-orange); }
.ctu-cc-list {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.ctu-cc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--ctu-t);
}
.ctu-cc-item:last-child { border-bottom: none; }
.ctu-cc-item:hover { background: rgba(255,255,255,0.1); }
.ctu-cc-item.ctu-cc-selected { background: rgba(255,255,255,0.14); font-weight: 700; }
.ctu-cc-item-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.ctu-cc-item-name { flex: 1; font-size: 12px; }
.ctu-cc-item-dial { font-size: 12px; font-weight: 700; color: var(--ctu-orange); }
.ctu-phone-field { flex: 1; min-width: 0; }

/* ── CTU phone: carex-cc overrides for dark theme ─────────── */
.ctu-phone-wrap .carex-cc-btn {
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.22);
  color: #fff;
}
.ctu-phone-wrap .carex-cc-btn:hover,
.ctu-phone-wrap .carex-cc-btn.cx-cc-open { background: rgba(255,255,255,0.18); border-color: var(--ctu-orange); }
.ctu-phone-wrap .carex-cc-dropdown {
  background: #1a3d28;
  border: 1.5px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 32px rgba(0,0,0,0.4);
}
.ctu-phone-wrap .carex-cc-search {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}
.ctu-phone-wrap .carex-cc-search::placeholder { color: rgba(255,255,255,0.4); }
.ctu-phone-wrap .carex-cc-search:focus { border-color: var(--ctu-orange); }
.ctu-phone-wrap .carex-cc-item {
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ctu-phone-wrap .carex-cc-item:hover { background: rgba(255,255,255,0.1); }
.ctu-phone-wrap .carex-cc-item.cx-cc-selected { background: rgba(255,255,255,0.14); font-weight: 700; }
.ctu-phone-wrap .carex-cc-item-dial { color: var(--ctu-orange); }
.ctu-phone-wrap .carex-digits-wrap {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}
.ctu-phone-wrap .carex-digits-wrap.cx-focused {
  border-color: var(--ctu-orange);
  box-shadow: 0 0 0 3px rgba(201,135,58,.15);
}
.ctu-phone-wrap .carex-digits-wrap.cx-complete {
  background: rgba(255,255,255,0.14);
  border-color: rgba(80,220,130,0.6);
  box-shadow: none;
}
.ctu-phone-wrap .carex-digit-box {
  background: transparent;
  border-color: transparent;
  color: #fff;
}
.ctu-phone-wrap .carex-digit-x { color: rgba(255,255,255,0.35); }
.ctu-phone-wrap .carex-digit-box.cx-filled { border-color: rgba(255,255,255,0.45); color: #fff; }
.ctu-phone-wrap .carex-digit-box.cx-active { border-color: var(--ctu-orange); }
.ctu-phone-wrap .carex-digit-box.cx-active::before,
.ctu-phone-wrap .carex-digit-box.cx-active.cx-cursor-end::after { background: #fff; }
.ctu-phone-wrap .carex-digits-wrap.cx-focused .carex-digit-box { border-color: rgba(255,255,255,0.35); }
.ctu-phone-wrap .carex-digits-wrap.cx-complete .carex-digit-box { border-color: rgba(80,220,130,0.6); }
.ctu-phone-wrap .carex-digits-sep { color: rgba(255,255,255,0.45); }

/* ── CTU flat date picker ──────────────────────────────────── */
.ctu-date-fg { position: relative; }
.ctu-date-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.09);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-family: inherit;
  text-align: left;
  transition: border-color var(--ctu-t), background var(--ctu-t), color var(--ctu-t);
}
.ctu-date-btn:hover,
.ctu-date-btn.ctu-cal-open { border-color: var(--ctu-orange); background: rgba(255,255,255,0.14); color: #fff; }
.ctu-date-btn #ctuCalTxt { flex: 1; }
.ctu-date-arrow { color: rgba(255,255,255,0.4); flex-shrink: 0; }
.ctu-date-btn.ctu-cal-open .ctu-date-arrow { transform: rotate(180deg); }
.ctu-cal-wrap {
  position: fixed;
  z-index: 9999;
  display: none;
  background: #1c4230;
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 13px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  overflow: hidden;
}
.ctu-cal-wrap.ctu-cal-open { display: block; }
.ctu-cal { padding: 14px; }
.ctu-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ctu-cal-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ctu-t);
}
.ctu-cal-nav-btn:hover { background: rgba(255,255,255,0.2); }
#ctuCalMonthLbl { font-size: 13px; font-weight: 800; color: #fff; }
.ctu-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ctu-cal-dname {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-align: center;
  padding: 3px 0 5px;
  text-transform: uppercase;
}
.ctu-cal-day {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 7px 2px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ctu-t), color var(--ctu-t);
}
.ctu-cal-day:hover:not(.ctu-cal-empty):not(.ctu-cal-past) { background: rgba(201,135,58,0.22); color: var(--ctu-orange); }
.ctu-cal-day.ctu-cal-selected { background: var(--ctu-orange); color: #fff; font-weight: 800; }
.ctu-cal-day.ctu-cal-today { border: 2px solid var(--ctu-orange); color: var(--ctu-orange); font-weight: 800; }
.ctu-cal-day.ctu-cal-past { color: rgba(255,255,255,0.22); cursor: default; }
.ctu-cal-empty { cursor: default; }

textarea.ctu-field {
  resize: none;
  min-height: 88px;
  line-height: 1.6;
}
.ctu-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ctu-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 13px 24px;
  cursor: pointer;
  transition: background var(--ctu-t), transform .15s;
  font-family: inherit;
}
.ctu-submit:hover { background: #b37530; transform: translateY(-1px); }

/* ── Quick action icons row (above methods — desktop header) ─── */
.ctu-icon-row {
  display: flex;
  gap: 20px;
  align-items: center;
}
.ctu-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--ctu-text);
  transition: color var(--ctu-t);
}
.ctu-icon-btn:hover { color: var(--ctu-green); }
.ctu-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ctu-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(26,61,40,0.22);
  transition: transform var(--ctu-t), box-shadow var(--ctu-t);
}
.ctu-icon-btn:hover .ctu-icon-circle {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26,61,40,0.32);
}
.ctu-icon-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--ctu-text2);
}

/* ── Locations section ───────────────────────────────────────── */
.ctu-locations {
  padding: 68px 0 72px;
}
.ctu-loc-header {
  text-align: center;
  margin-bottom: 44px;
}
.ctu-loc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ctu-orange);
  margin-bottom: 14px;
}
.ctu-loc-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  color: var(--ctu-text);
  margin: 0 0 10px;
  line-height: 1.15;
}
.ctu-loc-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0;
}
.ctu-loc-div-line {
  width: 50px;
  height: 1.5px;
  background: var(--ctu-orange);
  opacity: 0.4;
}
.ctu-loc-sub {
  font-size: 14.5px;
  color: var(--ctu-text2);
  margin: 12px 0 0;
}

/* Location cards grid */
.ctu-loc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ctu-loc-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--ctu-border);
  box-shadow: 0 4px 24px rgba(26,61,40,0.07);
  transition: transform var(--ctu-t), box-shadow var(--ctu-t);
}
.ctu-loc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 44px rgba(26,61,40,0.14);
}
.ctu-loc-img-wrap {
  position: relative;
  height: 150px;
  overflow: hidden;
}
.ctu-loc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ctu-loc-card:hover .ctu-loc-img { transform: scale(1.06); }

/* City badge overlay */
.ctu-loc-city-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(26,61,40,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ctu-green);
}

.ctu-loc-body {
  padding: 18px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ctu-loc-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--ctu-text);
  margin: 0;
}
.ctu-loc-type {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ctu-orange);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ctu-loc-detail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  font-size: 12px;
  color: var(--ctu-text2);
  line-height: 1.45;
  text-align: left;
}
.ctu-loc-detail svg { flex-shrink: 0; color: var(--ctu-green3); }
.ctu-loc-meta {
  font-size: 11.5px;
  color: #6b8c7a;
  border-top: 1px solid #edf3ef;
  padding-top: 10px;
      text-align: left;
}
.ctu-loc-contact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  font-size: 11.5px;
  color: var(--ctu-text2);
  font-weight: 600;
}
.ctu-loc-contact svg { color: var(--ctu-green3); }
.ctu-loc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ctu-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 14px;
  text-decoration: none;
  transition: background var(--ctu-t), transform .15s;
}
.ctu-loc-btn:hover { background: var(--ctu-green2); transform: translateY(-1px); }

/* ── Bottom trust bar ────────────────────────────────────────── */
.ctu-trust-bar {
  background: var(--ctu-cream);
  border-top: 1.5px solid #e5dfd6;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ctu-trust-left {
  flex: 1;
  min-width: 200px;
}
.ctu-trust-copy {
  font-size: 16px;
  font-weight: 700;
  color: var(--ctu-text);
  line-height: 1.4;
  margin: 0;
}
.ctu-trust-copy em {
  font-style: normal;
  color: var(--ctu-orange);
}
.ctu-trust-icons {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.ctu-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ctu-text2);
}
.ctu-trust-item svg { color: var(--ctu-green3); flex-shrink: 0; }

.mobile-her-block{display:none;}
.mobilemenushow{display:none}
#carex-amenities-dual-sticky .cardsopen .cads-sidebar{display: none;}
#carex-amenities-dual-sticky .cardsopen{grid-template-columns: 1fr;}
#carex-amenities-dual-sticky .cardsopen .amenities-box{grid-template-columns: 1fr 1fr 1fr;}

.labelform{color: #ffffff; font-size: 13px;font-weight: 600;}
.select2-results__option,.select2-container--default .select2-selection--single .select2-selection__rendered{font-size: 11px;}
.showoption{display: inline-block; margin-bottom: 5px;}
.showoption img{width: 20px;}
.note-section.bgblck .labelform{color: #000;}
.note-section.bgblck .showtextarea textarea{border: 1px solid #cdddd5;    color: #3a3a3a;}

/* ══════════════════════════════════════════════════════════════
   EXIT INTENT POPUP
   ══════════════════════════════════════════════════════════════ */
.exit-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(10,26,18,0.72);
  z-index: 12000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(3px);
}
.exit-popup-overlay.active { opacity: 1; pointer-events: all; touch-action: none; overscroll-behavior: none; }

.exit-popup {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%) translateY(100%);
  z-index: 12001;
  width: min(440px, 100vw);
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
  box-shadow: 0 -12px 48px rgba(10,26,18,0.28);
  transition: transform 0.46s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.exit-popup.active { transform: translateX(-50%) translateY(0); }

.exit-popup-drag {
  width: 44px; height: 5px; border-radius: 3px;
  background: #c8d8cc; margin: 14px auto 0; display: block;
  cursor: grab;
}

.ep-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  background: rgba(26,61,40,0.1); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #1a3d28; font-size: 1.15rem;
  transition: background 0.18s, color 0.18s;
  line-height: 1;
}
.ep-close:hover { background: rgba(26,61,40,0.2); color: #0f2418; }

.exit-popup-body { padding: 18px 24px 20px; }

.exit-popup-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eaf4ee; color: #1a5c38;
  border: 1.5px solid rgba(26,92,56,0.25);
  border-radius: 30px; padding: 5px 14px;
  font-family: Nunito, sans-serif; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 12px;
}
.exit-popup-badge .ep-dot { width: 7px; height: 7px; border-radius: 50%; background: #1a5c38; animation: blink-dot 1.1s infinite; }

.exit-popup-title {
  font-family: Nunito, sans-serif;
  font-size: 1.35rem; font-weight: 900;
  color: #1a3d28; line-height: 1.25;
  margin-bottom: 8px;
}
.exit-popup-title span { color: #c9873a; }

.exit-popup-desc {
  font-size: 0.88rem; color: #4a5e50;
  line-height: 1.65; margin-bottom: 18px;
}

.exit-popup-offer {
  background: linear-gradient(135deg, #1a3d28 0%, #2a6044 100%);
  border-radius: 16px; padding: 14px 16px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px;
}
.epo-icon { font-size: 2rem; flex-shrink: 0; }
.epo-text strong {
  display: block;
  font-family: Nunito, sans-serif; font-size: 0.92rem; font-weight: 800;
  color: #f0c060; margin-bottom: 3px;
}
.epo-text span { font-size: 0.78rem; color: rgba(255,255,255,0.72); }

.exit-popup-actions { display: flex; flex-direction: column; gap: 9px; }
.ep-call-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; background: #1a3d28; color: #fff;
  border-radius: 14px; text-decoration: none;
  font-family: Nunito, sans-serif; font-size: 0.95rem; font-weight: 800;
  box-shadow: 0 6px 22px rgba(26,61,40,0.32);
  transition: background 0.2s, transform 0.2s;
}
.ep-call-btn:hover, .ep-call-btn:active { background: #0f2418; transform: translateY(-1px); }
.ep-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px; background: #25D366; color: #fff;
  border-radius: 14px; text-decoration: none;
  font-family: Nunito, sans-serif; font-size: 0.88rem; font-weight: 800;
  box-shadow: 0 4px 16px rgba(37,211,102,0.28);
  transition: background 0.2s;
}
.ep-wa-btn:hover, .ep-wa-btn:active { background: #1ebe5d; }
.ep-dismiss {
  background: none; border: none; cursor: pointer;
  font-family: Nunito, sans-serif; font-size: 0.8rem;
  color: #8aaa94; text-align: center; padding: 8px;
  transition: color 0.2s;
}
.ep-dismiss:hover, .ep-dismiss:active { color: #1a3d28; }









/* ── BOTTOM NAV ── */
.fixed-chrome {
  background: #fff;
  border-top: 1px solid #ebebeb;
  padding: 7px 8px 8px 8px;
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  display:none;
  z-index: 999;
}

.bottom-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-call-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fdf9f2;
  border: 1px solid #f0e3cc;
  border-radius: 26px;
  padding: 11px 8px;
  cursor: pointer;
      text-decoration: none;
}

.btn-call-nav-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.btn-call-nav-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #545665;
}

.btn-whatsapp-nav {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #25d366;
  border-radius: 10px;
  padding: 11px 8px;
  cursor: pointer;
      text-decoration: none;
}

.btn-whatsapp-nav-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.btn-whatsapp-nav-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.btn-book-nav {
  flex: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #c98522;
  border-radius: 10px;
  padding: 11px 8px;
  cursor: pointer;
  text-decoration: none;
}

.btn-book-nav-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.btn-book-nav-text {
  font-size: 11.5px;
  font-weight: 700;
  color: #f5e0c0;
}


/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hdr-call-wrap { display: none; }
  .hdr-nav { gap: 0; }
  .hdr-nav-link { font-size: 13px; padding: 7px 9px; }
}

@media (max-width: 860px) {
  .hdr-nav { display: none; }
  .hdr-book-btn { display: none; }
  .hdr-call-wrap { display: none; }
  .hdr-burger { display: flex; }
  .hdr-inner { padding: 0 16px; height: 60px; justify-content: space-between;}
  /* Show icon-only call + WA buttons in mobile header */
  .hdr-mob-call {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid #dde8e1;
    background: #fff;
    color: #1a3d28;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
  }
  .hdr-mob-call:hover { background: #eaf4ee; border-color: #b5d8c5; }
}

@media (min-width: 861px) {
  .hdr-mob-call { display: none; }
}

@media (max-width: 640px) {
  .hdr-inner { height: 56px; padding: 0 6px; gap: 8px; justify-content: space-between;}
  .hdr-logo img {width: 63px;}
  .hdr-brand { font-size: 17px; }
  .hdr-tagline { font-size: 9.5px; }
  .hdr-logo-icon svg { width: 26px; height: 26px; }
  .hdr-logo { gap: 8px; }
  .hdr-wa-btn { width: 36px; height: 36px; }
  .hdr-wa-btn svg { width: 18px; height: 18px; }
  .hdr-mob-call { width: 36px; height: 36px; }
  .hdr-mob-call svg { width: 15px; height: 15px; }
  .hdr-burger { padding: 4px; }
  .hdr-burger span { width: 20px; }
  .carex-hs-tip.cx-show{    transform: translateY(-40px) scale(1);}
  .carex-svc-tabs,.cads-top-inner,#gal2TabsWrap,#otmTabsWrap .otm-tabs{justify-content: inherit;}
  .gal2-toggle-btn{margin-left: 5px;margin-right: 5px;}
  #otmTabsWrap .otm-toggle-btn{margin-right: 0px;}

}

@media (max-width: 1180px) {
  .hero-float-rating { right: -10px; }
  .hero-float-sat { right: -10px; }
  .hero-float-24 { right: -10px; }
}

@media (max-width: 960px) and (min-width: 641px) {
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 20px 36px; min-height: auto; }
  .hero-img { height: 420px; }
  .hero-float-rating { right: 8px; top: 16px; }
  .hero-float-sat { right: 8px; }
  .hero-float-24 { right: 8px; }
  .hero-float-gallery { left: 8px; }
  .hero-float-testi { left: 8px; max-width: 200px; }
}

@media (max-width: 640px) {
  /* Section — must be overflow:visible so float cards aren't clipped */
  .hero-section {
    min-height: auto;
    padding: 0;
    background: #faf8f4;
    overflow: visible;
  }

  /* Top zone: left text column + right image column side-by-side */
  .hero-inner {
    display: grid;
    grid-template-columns: 46% 54%;
    gap: 0;
    padding: 12px 12px 12px;
    align-items: start;
    min-height: auto;
  }

  /* LEFT text column */
  .hero-left {
    gap: 10px;
    padding-right: 10px;
    padding-top: 4px;
  }

  .hero-trust-badge {
    font-size: 9.5px;
    padding: 4px 9px;
    border-radius: 20px;
    gap: 4px;
  }
  .hero-trust-badge svg { width: 10px; height: 10px; }

  .hero-headline {
    font-size: 20px;
    line-height: 1.2;
  }

  .hero-sub {
    font-size: 11px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* CTAs: stacked full-width */
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }
  .hero-btn-primary {
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    justify-content: center;
    gap: 5px;
  }
  .hero-btn-primary svg { width: 13px; height: 13px; }
  .hero-btn-wa {
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    justify-content: center;
    gap: 5px;
  }
  .hero-btn-wa svg { width: 13px; height: 13px; }
  .hero-btn-watch {
    font-size: 11px;
    gap: 6px;
    align-items: center;
  }
  .hero-play-circle { width: 28px; height: 28px; }
  .hero-play-circle svg { width: 9px; height: 9px; }

  /* Hide the bottom trust strip in the left col — shown below instead */
  .hero-trust-strip { display: none; }

  /* RIGHT image column — overflow visible so float cards show outside img */
  .hero-right { position: relative; overflow: visible; }

  .hero-img-wrap {
    border-radius: 20px;
    overflow: visible; /* must be visible so absolute float cards aren't clipped */
    position: relative;
  }

  .hero-img {
    width: 100%;
    height: 340px;
    border-radius: 20px;
    object-position: center top;
    box-shadow: 0 10px 32px rgba(26,61,40,0.18);
    display: block;
  }

  .hero-img-overlay {
    border-radius: 20px;
  }

  /* Floating rating card — top-left corner of image */
  .hero-float-rating {
    top: 8px;
    left: 6px;
    right: auto;
    min-width: 100px;
    padding: 8px 10px;
    gap: 3px;
    border-radius: 12px;
    animation-delay: 0.2s;
  }
  .hero-fr-num { font-size: 18px; }
  .hero-fr-stars { font-size: 10px; }
  .hero-fr-label { font-size: 9px; }
  .hero-fr-face { width: 20px; height: 20px; }
  .hero-fr-tag { font-size: 9px; }

  /* Satisfaction card — right side of image, inside */
  .hero-float-sat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    top: 50%;
    right: 6px;
    left: auto;
    bottom: auto;
    transform: translateY(-60%);
    min-width: 72px;
    padding: 8px 8px;
    border-radius: 12px;
    text-align: center;
    animation-delay: 0.35s;
  }
  .hero-sat-num { font-size: 20px; }
  .hero-sat-label { font-size: 9px; line-height: 1.3; }
  .hero-sat-icon { margin: 2px 0; }
  .hero-sat-icon svg { width: 14px; height: 14px; }

  /* 24x7 card — bottom-right inside image */
  .hero-float-24 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    bottom: 48px;
    right: 6px;
    left: auto;
    top: auto;
    min-width: 72px;
    padding: 8px 8px;
    border-radius: 12px;
    text-align: center;
    animation-delay: 0.5s;
  }
  .hero-24-num { font-size: 18px; }
  .hero-24-label { font-size: 9px; line-height: 1.3; }
  .hero-24-icon { margin: 2px 0; }
  .hero-24-icon svg { width: 13px; height: 13px; }

  /* Testimonial — hidden on mobile */
  .hero-float-testi { display: none; }

  /* Gallery strip — bottom of image */
  .hero-float-gallery {
    top: auto;
    left: 6px;
    right: 6px;
    bottom: 6px;
    display: flex;
    gap: 4px;
    padding: 5px 6px;
    border-radius: 10px;
    justify-content: flex-start;
    animation-delay: 0.6s;
  }
  .hero-gal-thumb { width: 36px; height: 36px; border-radius: 6px; }
  .hero-gal-more { width: 36px; height: 36px; border-radius: 6px; font-size: 10px; }
  .hero-gal-more span { font-size: 7px; }
  .carex-svc-tabs-wrap{padding: 0 10px;}
}

@media (max-width: 640px) {
  /* 5-col icon trust bar below two-zone */
  .hero-trust-strip-mob {
    display: flex;
    background: #fff;
    border-top: 1.5px solid #edf3ef;
    border-bottom: 1.5px solid #edf3ef;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hero-trust-strip-mob::-webkit-scrollbar { display: none; }
  .hero-ts-mob {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px 12px;
    border-right: 1px solid #edf3ef;
    text-align: center;
    min-width: 64px;
  }
  .hero-ts-mob:last-child { border-right: none; }
  .hero-ts-mob-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #eaf4ee;
    color: #1a5c38;
    display: flex; align-items: center; justify-content: center;
  }
  .hero-ts-mob strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #1a2e1e;
    line-height: 1.2;
  }
  .hero-ts-mob span {
    display: block;
    font-size: 9.5px;
    color: #6b8c7a;
    line-height: 1.3;
  }

  /* Social proof dark-green bar */
  .hero-proof-bar {
    margin: 12px 14px 0;
    background: #1a3d28;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .hero-proof-badge {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(201,135,58,0.6);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .hero-proof-center {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .hero-proof-label { font-size: 10.5px; color: rgba(255,255,255,0.7); font-weight: 600; }
  .hero-proof-num { font-size: 28px; font-weight: 900; color: #c9873a; line-height: 1; }
  .hero-proof-sub { font-size: 10.5px; color: rgba(255,255,255,0.7); font-weight: 600; }
  .hero-proof-faces {
    display: flex;
    margin-left: auto;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .hero-proof-face-row { display: flex; }
  .hero-proof-face {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.5);
    margin-left: -8px;
  }
  .hero-proof-face:first-child { margin-left: 0; }
  .hero-proof-faces-text {
    font-size: 10px;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    text-align: center;
  }
}

@media (min-width: 641px) {
  .hero-trust-strip-mob,
  .hero-proof-bar { display: none; }
}

@media (max-width: 860px) {
  .qse-arrow { display: none; }
}

@media (max-width: 640px) {
  .qse-inner { padding: 0 12px; }
  .qse-section { padding-bottom: 80px; }
  .qse-card { flex: 0 0 165px; }
  .qse-cta-bar { flex-direction: column; text-align: center; padding: 18px 20px; }
  .qse-cta-btn { width: 100%; justify-content: center; }
}

@media (max-width: 860px) {
  .mob-fab-bar { display: flex; }
  body { padding-bottom: 60px; }
}

@media (min-width: 720px) {
  :root { --card-width: 380px; }
  .section-head { padding: 0 40px 36px; }
  .scroll-hint { padding: 0 40px 14px; }
  .cards-track-wrap { padding: 12px 40px 20px; }
}

@media (max-width: 400px) {
  :root { --card-width: 300px; }
}

@media (min-width: 720px) {
  .w-card { flex: 0 0 360px; }
  .w-card:first-child { flex: 0 0 440px; }
  .w-track { padding: 8px 40px 32px; }
}

@media (min-width: 420px) {
  .w-amenities-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 380px) {
  .w-panel-am-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .p-arrow { display: none; }
}

@media (max-width: 600px) { .q-arrow { display: none; } }

@media (min-width: 520px) {
  .q-chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

@media (max-width: 640px) { .carex-arrow { display: none; } }

@media (max-width: 640px) {
  /* Hide dots on mobile — cards are stacked, no nav needed */
  .carex-dots { display: none; }

  /* Remove horizontal scroll container behaviour */
  .carex-track-outer {
    overflow: visible;
    padding: 4px 0 0;
  }

  /* Stack cards vertically */
  .carex-track {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    cursor: default;
    padding: 12px 16px 24px;
    gap: 24px;
  }

  /* Let each card fill full width */
  .carex-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 860px) {
  .carex-card.cx-main {
    flex: 0 0 680px;
    width: 680px;
    max-width: 680px;
  }

  .carex-card.cx-preview {
    flex: 0 0 310px;
    width: 310px;
    max-width: 310px;
  }
}

@media (min-width: 641px) and (max-width: 859px) {
  .carex-card {
    flex: 0 0 480px;
    width: 480px;
    max-width: 480px;
  }
}

@media (min-width: 860px) {
  .carex-card.cx-main .carex-img-wrap { height: 280px; }
}

@media (min-width: 520px) {
  .carex-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (min-width: 520px) {
  .carex-chip {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    text-align: center;
    font-size: 11.5px;
    min-width: 72px;
  }
  .carex-chip-arrow { display: none; }
}

@media (min-width: 520px) {
  .carex-chip-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}

@media (min-width: 520px) {
  .carex-chip-label {
    flex: unset;
    font-size: 11px;
  }
}

@media (max-width: 520px) {

  /* Section head */
  .carex-head { padding: 0 16px 32px; }
  .carex-title { font-size: clamp(20px, 6vw, 28px); }

  /* Card content area */
  .carex-content { padding: 18px 16px 0; margin-top: -28px; }
  .carex-card-title { font-size: 17px; }
  .carex-card-desc { font-size: 12px; }

  /* Trust pills — smaller, tighter */
  .carex-trust { gap: 6px; margin-bottom: 12px; }
  .carex-trust-pill { font-size: 11px; padding: 5px 10px 5px 6px; gap: 5px; }
  .carex-tp-ico { width: 18px; height: 18px; }

  /* Amenity label */
  .carex-amenity-label { font-size: 10px; margin-bottom: 8px; }

  /* Chip arrow always visible on mobile horizontal layout */
  .carex-chip-arrow { display: flex; }

  /* Heat zone */
  .carex-heat { padding: 10px 12px; margin-bottom: 12px; }
  .carex-heat-title { font-size: 11.5px; }
  .carex-heat-pt { font-size: 11px; }

  /* Accordion */
  .carex-acc-name { font-size: 12px; }
  .carex-acc-ico { width: 26px; height: 26px; }
  .carex-acc-text { padding: 0 0 10px 35px; font-size: 11.5px; }

  /* Footer buttons */
  .carex-footer { padding: 12px 16px 16px; gap: 7px; }
  .carex-btn { font-size: 12px; padding: 11px 8px; border-radius: 11px; }

  /* Panel */
  .carex-panel-hdr { padding: 10px 14px; }
  .carex-panel-title { font-size: 13px; }
  .carex-panel-body { padding: 12px 14px 14px; }

  /* Form */
  .carex-form { gap: 12px; }
  .carex-fg { gap: 4px; }
  .carex-flabel { font-size: 11px; }
  .carex-finput { padding: 10px 12px; font-size: 13px; }

  /* Country code dropdown — fit within card */
  .carex-cc-dropdown { min-width: unset; max-height: 220px; }

  /* Digit wrap — slightly shorter on small screens */
  .carex-digits-wrap { height: 40px; padding: 0 10px; }
  .carex-digit-box { width: 11px; font-size: 13px; }
  .carex-digits-sep { font-size: 13px; }

  /* Sticky bar */
  .carex-sticky { padding: 10px 16px; gap: 10px; }
  .carex-sticky-text { font-size: 12px; }
  .carex-sticky-call, .carex-sticky-wa { padding: 9px 14px; font-size: 12px; }

  /* Carousel */
  .carex-carousel-wrap { padding: 0 0 0 0; }
}

@media (max-width: 900px) {
  .cxss-trust-grid { grid-template-columns: 1fr; gap: 16px; }
  .cxss-trust-box { padding: 22px 20px; }
  .cxss-arrow { display: none; }
}

@media (max-width: 640px) {
  .cxss-section { padding: 48px 0 56px; }
  .cxss-card {
    flex: 0 0 calc(88vw);
    min-width: 0;
  }
  .cxss-story-title { font-size: 16px; }
  .cxss-filter-row { gap: 6px; }
  .cxss-filter-label { width: 100%; margin-bottom: 2px; }
}

@media (max-width: 900px) {
  .cxam-panel-hero { grid-template-columns: 1fr; gap: 24px; }
  .cxam-panel-promise { display: none; }
  .cxam-cards-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
}

@media (max-width: 640px) {
  .cxam-section { padding: 48px 0 56px; }
  .cxam-inner { padding: 0 16px; }
  .cxam-tabs-wrap { margin: 0 -16px; padding: 0 12px; }
  .cxam-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cxam-ac-img-wrap { height: 120px; }
  .cxam-trust-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .cxam-tb-item { border-right: 1px solid #e8ede9; border-bottom: 1px solid #e8ede9; }
  .cxam-title { font-size: 38px; }
}

@media (max-width: 960px) {
  .cat-body { grid-template-columns: 1fr; }
  .cat-menu {
    position: static;
    display: flex;
    overflow-x: auto;
    border-radius: 12px;
    flex-direction: row;
    scrollbar-width: none;
  }
  .cat-menu::-webkit-scrollbar { display: none; }
  .cat-menu-item {
    border-bottom: none;
    border-right: 1px solid #f0f4f1;
    flex-shrink: 0;
    padding: 10px 14px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
  .cat-menu-item-left { flex-direction: column; align-items: center; gap: 4px; }
  .cat-menu-item-arrow { display: none; }
  .cat-menu-item-sub { display: none; }
  .cat-menu-item-name { font-size: 11px; }
  .cat-menu-item.cat-menu-active {
    border-left: none;
    border-bottom: 3px solid var(--cat-green);
  }
  .cat-content-top { grid-template-columns: 1fr; }
  .cat-content-img { height: 200px; }
  .cat-options { grid-template-columns: repeat(2, 1fr); }
  .cat-expand-inner { grid-template-columns: 1fr; }
  .cat-header-top { grid-template-columns: 1fr; }
  .cat-header-img-wrap { display: none; }
  .cat-features-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .cat-section { padding: 44px 0 48px; }
  .cat-wrap { padding: 0 14px; }
  .cat-title { font-size: 40px; }
  .cat-tab { padding: 8px 10px; }
  .cat-tab-main { font-size: 11px; }
  .cat-tab svg { width: 15px; height: 15px; }
  .cat-content-inner { padding: 18px; }
  .cat-options { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cat-cta-bar { flex-direction: column; align-items: flex-start; padding: 20px 18px; }
  .cat-trust-strip { flex-direction: column; }
  .cat-trust-label { border-right: none; border-bottom: 1px solid var(--cat-border); }
  .cat-trust-item { border-right: none; border-bottom: 1px solid var(--cat-border); }
}

@media (min-width: 768px) {
  .caas-tabs-scroll { justify-content: flex-start; gap: 6px; }
}

@media (min-width: 768px) {
  .caas-icons-scroll {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    overflow-x: visible;
    gap: 0;
  }
  .caas-icon-btn { flex-shrink: unset; }
}

@media (max-width: 960px) {
  .caas-section-title { font-size: 40px; }
  .caas-content-card { grid-template-columns: 1fr; min-height: auto; scroll-margin-top: 90px; }
  .caas-img-panel { display: none; }
  .caas-mobile-img-wrap { display: block; }
  .caas-trust-bar { flex-wrap: wrap; }
  .caas-trust-item { flex: 1 1 calc(50% - 1px); border-bottom: 1px solid var(--caas-border); }
  .caas-trust-item:nth-child(even) { border-right: none; }
  .caas-icon-btn { flex: 0 0 auto; }
  .caas-icons-scroll { justify-content: flex-start; }
  .caas-all-cards { gap: 16px; }
}

@media (max-width: 600px) {
  .caas-section { padding: 44px 0 52px; }
  .caas-content-wrap { padding: 0 14px; }
  .caas-section-header { padding: 0 14px; }
  .caas-section-title { font-size: 30px; }
  .caas-info-panel { padding: 20px 16px 20px; }
  .caas-content-title { font-size: 22px; }
  .caas-trust-bar { padding: 0; margin: 20px 14px 0; }
  .caas-trust-item { flex: 1 1 33%; padding: 14px 8px; }
  .caas-trust-name { font-size: 10px; }
  .caas-tab { padding: 6px 11px; font-size: 11.5px; }
  .caas-view-btn { width: 100%; justify-content: center; }
  .caas-section-badge { font-size: 11px; }
  .caas-content-card { scroll-margin-top: 80px; }
  .caas-all-cards { gap: 14px; }
}

@media (max-width: 1060px) {
  .cads-body { grid-template-columns: 150px 1fr; gap: 16px; }
  .cads-main { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cads-header-title { font-size: 40px; }
}

@media (max-width: 820px) {
  .cads-top-bar { top: 60px; }
  .cads-sidebar { top: 108px; max-height: calc(100vh - 108px); }
  .cads-body { grid-template-columns: 130px 1fr; gap: 12px; padding: 16px 16px 0; }
  .cads-main { grid-template-columns: 1fr; gap: 14px; }
  .cads-sidebar-item { padding: 10px 12px; }
  .cads-sidebar-label { font-size: 11px; }
  .cads-header { padding: 0 16px; }
  .cads-header-title { font-size: 30px; }
  .cads-header-sub { font-size: 13.5px; }
  .cads-top-inner { padding: 0 12px; height: 46px; }
  .cads-card-img-wrap { height: 180px; }
  .cads-card-body { padding: 16px 16px 14px; }
  .cads-card-title { font-size: 16px; }
  .cads-trust-bar { padding: 0 16px 40px; flex-wrap: wrap; }
  .cads-trust-item { flex: 1 1 calc(50% - 1px); border-bottom: 1px solid var(--cads-border); }
  .cads-trust-item:nth-child(even) { border-right: none; }
  .cads-trust-item:first-child, .cads-trust-item:last-child { border-radius: 0; }
  .cads-exp-grid { grid-template-columns: 1fr; }
  .cads-exp-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .cads-top-bar { top: 56px; }
  .cads-sidebar { top: 104px; max-height: calc(100vh - 194px); }
  .cads-section { padding-top: 44px; }
  .cads-body { grid-template-columns: 72px 1fr; gap: 8px; padding: 12px 10px 0; }
  .cads-sidebar-item { padding: 10px 8px; gap: 6px; flex-direction: column; text-align: center; }
  .cads-sidebar-icon { width: 26px; height: 26px; border-radius: 7px; }
  .cads-sidebar-label { font-size: 9px; white-space: normal; text-align: center; }
  .cads-sidebar-all { padding: 8px 8px; font-size: 10px; flex-direction: column; gap: 4px; }
  .cads-card-img-wrap { height: 160px; }
  .cads-top-tab { padding: 6px 10px; font-size: 12px; gap: 5px; }
  .cads-exp-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  .gal2-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .gal2-section { padding: 60px 0 40px; }
  .gal2-inner { padding: 0 16px; }
  .gal2-tabs-wrap { margin: 0 -16px 24px; padding: 0 16px; }
  .gal2-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 8px; }
  .gal2-span-big { grid-row: span 2; grid-column: span 1; }
  .gal2-counters { gap: 8px; }
  .gal2-counter { padding: 8px 14px; }
  .gal2-counter-val { font-size: 17px; }
}

@media (max-width: 480px) {
  .gal2-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gal2-tab { padding: 7px 12px; font-size: 12px; }
}

@media (max-width: 1100px) {
  .otm-grid { grid-template-columns: repeat(4, 1fr); }
  .otm-hero-inner { gap: 40px; }
}

@media (max-width: 900px) {
  .otm-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .otm-hero { padding: 60px 0 0; }
  .otm-hero-img-wrap { max-width: 540px; }
  .otm-grid { grid-template-columns: repeat(3, 1fr); }
  .otm-trust-row { gap: 8px; }
  .otm-quote-strip { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .otm-quote-right { text-align: center; }
  .otm-quote-right-divider { margin: 10px auto 0; }
  .otm-quote-left { justify-content: center; }
}

@media (max-width: 640px) {
  .otm-hero-inner { padding: 0 20px; }
  .otm-cards-inner { padding: 0 20px; }
  .otm-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .otm-hero-title { font-size: 28px; }
  .otm-trust-badge { font-size: 11px; padding: 8px 10px; }
  .otm-quote-strip { padding: 20px; }
  .otm-quote-mark { font-size: 36px; }
  .otm-quote-left p { font-size: 14px; }
}

@media (min-width: 1100px) {
  .otm-card-expand { max-height: 90%; }
}

@media (max-width: 640px) {
  .otm-card-hint { font-size: 10px; padding: 3px 8px; }
  .otm-card-expand { max-height: 80%; border-radius: 12px 12px 0 0; }
  .otm-prof-acc-text { padding-left: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .otm-card-hint { animation: none; }
  .otm-card-expand,
  .otm-prof-acc-body { transition: none; }
}

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

@media (max-width: 1060px) {
  .css-svc-grid { grid-template-columns: 1fr 1fr; }
  .css-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .css-section { padding: 56px 0 0; }
  .css-header-title { font-size: 36px; }
  .css-header { margin-bottom: 28px; }
  .css-stories-wrap { padding: 24px 16px 0; }
  .css-story-hero { grid-template-columns: 1fr; }
  .css-story-img-wrap { min-height: 240px; }
  .css-story-img-col { min-height: 240px; }
  .css-story-info { border-left: none; border-top: 1px solid var(--css-border); padding: 20px; }
  .css-story-name { font-size: 22px; }
  .css-sit-grid { grid-template-columns: 1fr; }
  .css-before-after-strip { flex-wrap: wrap; }
  .css-ba-box { flex: 1 1 calc(50% - 1px); }
  .css-family-share { flex-direction: column; align-items: flex-start; }
  .css-svc-grid { grid-template-columns: 1fr 1fr; }
  .css-results-grid { grid-template-columns: 1fr; }
  .css-family-grid { grid-template-columns: 1fr; }
  .css-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .css-acc-panel { padding: 20px; }
  .css-share-row { padding: 14px 20px; }
  .css-bottom-cta-inner { flex-direction: column; text-align: center; }
  .css-bottom-cta-btns { justify-content: center; }
  .css-hstat-div { display: none; }
  .css-header-stats { gap: 16px; }
}

@media (max-width: 560px) {
  .css-header-title { font-size: 28px; }
  .css-hstat-num { font-size: 22px; }
  .css-story-btns { gap: 6px; }
  .css-btn-outline, .css-btn-fill { padding: 8px 12px; font-size: 12px; }
  .css-svc-grid { grid-template-columns: 1fr; }
  .css-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .css-story-transform { flex-wrap: wrap; }
  .css-tr-block { flex: 1 1 calc(50% - 1px); }
}

@media (max-width: 1024px) {
  .rfj-card-hero { grid-template-columns: 280px 1fr; }
}

@media (max-width: 820px) {
  .rfj-title { font-size: 32px; }
  .rfj-section { padding: 64px 0 0; }
  .rfj-card-hero { grid-template-columns: 1fr; }
  .rfj-card-img-col { min-height: 220px; }
  .rfj-card-info { border-left: none; border-top: 1.5px solid #e8f0eb; padding: 20px; }
  .rfj-details-inner { grid-template-columns: 1fr; gap: 20px; }
  .rfj-ba-wrap { flex-direction: column; }
  .rfj-ba-side { border-right: none; border-bottom: 1px solid #e2eee8; }
  .rfj-ba-side:last-child { border-bottom: none; }
  .rfj-family-quote-box { grid-column: 1; flex-direction: column; }
  .rfj-cta-bar { flex-direction: column; text-align: center; padding: 28px 24px; border-radius: 16px 16px 0 0; }
  .rfj-cta-btns { justify-content: center; }
  .rfj-trust-strip { gap: 10px; }
  .rfj-trust-dot { display: none; }
  .rfj-trust-item { padding: 4px 12px; }
}

@media (max-width: 560px) {
  .rfj-title { font-size: 26px; }
  .rfj-stat-num { font-size: 22px; }
  .rfj-stat { padding: 0 14px; }
  .rfj-card-name { font-size: 19px; }
  .rfj-details-inner { padding: 20px 16px; }
}

@media (max-width: 960px) {
  .cxfe-featured { grid-template-columns: 1fr; }
  .cxfe-featured-img-col { min-height: 300px; }
  .cxfe-featured-content { padding: 28px 28px 24px; }
  .cxfe-closing { grid-template-columns: 1fr; }
  .cxfe-closing-img-col { min-height: 240px; }
  .cxfe-closing-content { padding: 28px 28px 28px; }
  .cxfe-jv-track { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cxfe-jv-line { display: none; }
  .cxfe-jv-step { flex-direction: row; align-items: flex-start; text-align: left; width: 100%; }
  .cxfe-jv-step-body { text-align: left; }
  .cxfe-stats-row { flex-direction: column; gap: 24px; }
  .cxfe-stat-divider { width: 60px; height: 1px; }
  .cxfe-trust-badges { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cxfe-section { padding: 56px 0 64px; }
  .cxfe-inner { padding: 0 18px; }
  .cxfe-title { letter-spacing: -.01em; }
  .cxfe-card { flex: 0 0 88vw; }
  .cxfe-journey-vis { padding: 24px 18px 20px; }
  .cxfe-featured-content { padding: 22px 18px 20px; }
  .cxfe-closing-content { padding: 22px 18px 22px; }
}

@media (max-width: 600px) {
  .otm-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .gal2-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: 8px;
  }
  .rfj-card {
    flex-direction: column;
  }
  .rfj-card-img-col {
    width: 100%;
    min-height: 220px;
  }
  .otm-trust-row {
    gap: 6px;
  }
  .otm-trust-badge {
    font-size: 11px;
    padding: 7px 10px;
  }
  .gal2-counters {
    gap: 6px;
  }
  .gal2-counter {
    padding: 7px 12px;
  }
}

@media (max-width: 768px) {
  .cards-track-wrap,
  #wCardsTrack,
  #pCardsTrack {
    padding-left: clamp(12px, 4vw, 24px);
    padding-right: clamp(12px, 4vw, 24px);
    scroll-padding-left: clamp(12px, 4vw, 24px);
  }
}

@media (max-width: 480px) {
  .otm-hero-title   { font-size: clamp(24px, 7vw, 32px); }
  .rfj-title        { font-size: clamp(24px, 7vw, 34px); }
  .gal2-title       { font-size: clamp(26px, 8vw, 36px); }
  .css-hero-title,
  .css-header h2    { font-size: clamp(22px, 6vw, 32px); }
}

@media (min-width: 1400px) {
  .otm-hero-inner,
  .otm-cards-inner {
    max-width: var(--site-max);
  }
}

@media (max-width: 640px) {
  :root {
    --sec-pt: clamp(48px, 10vw, 72px);
    --sec-pb: clamp(48px, 10vw, 72px);
  }
  .otm-hero { padding-top: 48px; }
  .otm-cards-wrap { padding: 40px 0 56px; }
  .otm-cards-inner,
  .otm-hero-inner { padding: 0 18px; }
  .rfj-inner { padding: 0 18px; }
  .gal2-inner { padding: 0 16px; }
  .gal2-tabs-wrap {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .gal2-header { margin-bottom: 32px; }
  .otm-dept-header { margin-bottom: 24px; }
  .otm-tabs-wrap { margin-bottom: 24px; }
  .otm-quote-strip { display: none; } /* Too heavy on small screens */
  .rfj-header { padding: 0 0 32px; }
}

@media (min-width: 1400px) {
  .gal2-inner,
  .rfj-inner,
  .otm-hero-inner,
  .otm-cards-inner {
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media print {
  .otm-blob, .rfj-blob, .gal2-blob,
  .carex-fabs { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rfj-section,
  .otm-section,
  .gal2-section,
  .css-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .gal2-tabs-wrap {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top:6px;
    padding-bottom:6px;
  }
  #gal2TabsWrap.gal2-collapsed .gal2-toggle-label-show{font-size: 11px; padding: 0px 10px;}
  .gal2-counter {padding: 4px 8px;}
  .gal2-counter .gal2-counter-num{font-size:12px;}
}

@media (max-width: 480px) {
  .otm-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .otm-card-info { padding: 12px 12px 14px; }
  .otm-card-name { font-size: 13px; }
  .otm-card-role { font-size: 11px; }
  .otm-card-exp  { font-size: 10px; }
}

@media (min-width: 820px) {
  .rfj-card-img-col {
    min-height: 340px;
    width: 360px;
    flex-shrink: 0;
  }
}


@media (max-width: 1100px) {
  .ctu-hero { grid-template-columns: 1fr 380px 320px; }
  .ctu-loc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .ctu-hero { grid-template-columns: 1fr; min-height: auto; }
  .ctu-photo { height: 280px; }
  .ctu-left { padding: 36px 28px; }
  .ctu-form-pane { padding: 32px 28px; }
}

@media (max-width: 640px) {
  .ctu-section { padding: 56px 0 0; }
  .ctu-inner { padding: 0 16px; }
  .ctu-headline { font-size: 26px; }
  .ctu-methods { grid-template-columns: 1fr; }
  .ctu-form-row { grid-template-columns: 1fr; }
  .ctu-loc-grid { grid-template-columns: 1fr; }
  .ctu-trust-bar { padding: 20px 16px; gap: 12px; }
  .ctu-trust-icons { gap: 14px; }
  .amenities-box{height: 600px;overflow-y: scroll;display: block;}
  .hdr-nav{display: flex; overflow-x: scroll;width: 100%;scrollbar-width: none;}
  .desktopmenushow{display: none;}
  .mobilemenushow{display: flex;}
  #gal2TabsWrap,#otmTabsWrap{top: 57px;}
  .gal2-tab {padding: 4px 12px; font-size: 12px; min-height: 20px;}
  .gal2-toggle-btn{padding: 4px 4px;}
  .otm-tab{min-height: 30px;padding: 6px 12px;}
  .cads-toggle-btn{padding: 6px 6px;}
  .carex-svc-tabs-wrap{top: 57px;}
  .fixed-chrome{display:block}
  .hdr-actions .hdr-mob-call,.hdr-actions .hdr-wa-btn{display:none}

}

@media (max-width: 480px) {
  .ctu-loc-grid { grid-template-columns:1fr; }
  .ctu-loc-body { padding: 34px 12px 16px; }
  .ctu-loc-name { font-size: 14px; }
  .mobile-her-block{display:block;        padding-top: 56px;}
  .hero-section,.hero-trust-strip-mob,#qseSection,.hero-proof-bar{display:none;}
  .mobile-her-block iframe{width:100%; height:1109px; overflow: hidden; scrollbar-width: none;}

}

/* ═══════════════════════════════════════════════════════════════
   FOOTER  (ftr- prefix)
════════════════════════════════════════════════════════════════ */
.ftr {
  background: #0e2318;
  color: #c8ddd1;
  font-family: 'Nunito', sans-serif;
}
.ftr-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 28px 56px;
}
.ftr-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
}

/* Brand column */
.ftr-logo { display: inline-block; margin-bottom: 18px; }
.ftr-logo img { width: 90px; filter: brightness(0) invert(1); opacity: 0.92; }
.ftr-about {
  font-size: 14px;
  line-height: 1.75;
  color: #8db09e;
  margin-bottom: 24px;
  max-width: 300px;
}
.ftr-social { display: flex; gap: 10px; }
.ftr-social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ftr-social-wa { background: #25D366; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,0.28); }
.ftr-social-wa:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(37,211,102,0.45); }
.ftr-social-mail { background: rgba(255,255,255,0.08); color: #c8ddd1; border: 1px solid rgba(255,255,255,0.12); }
.ftr-social-mail:hover { background: rgba(255,255,255,0.15); transform: scale(1.08); }
.ftr-social-phone { background: rgba(255,255,255,0.08); color: #c8ddd1; border: 1px solid rgba(255,255,255,0.12); }
.ftr-social-phone:hover { background: rgba(255,255,255,0.15); transform: scale(1.08); }

/* Column titles */
.ftr-col-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Nav links */
.ftr-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ftr-links li a {
  font-size: 14px;
  font-weight: 600;
  color: #8db09e;
  text-decoration: none;
  display: flex; align-items: center; gap: 7px;
  transition: color 0.2s, gap 0.2s;
}
.ftr-links li a::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #3a7a56;
  flex-shrink: 0;
  transition: background 0.2s;
}
.ftr-links li a:hover { color: #eaf4ee; }
.ftr-links li a:hover::before { background: #6fcf97; }

/* Contact list */
.ftr-contact-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ftr-contact-item { display: flex; gap: 12px; align-items: flex-start; }
.ftr-contact-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #6fcf97;
  margin-top: 2px;
}
.ftr-contact-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #5a8c70;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 3px;
}
.ftr-contact-val {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #c8ddd1;
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.5;
}
a.ftr-contact-val:hover { color: #eaf4ee; }

/* Book button */
.ftr-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a3d28;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(111,207,151,0.25);
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(26,61,40,0.4);
}
.ftr-book-btn:hover { background: #2a6044; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,61,40,0.5); }

/* Bottom bar */
.ftr-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.2);
}
.ftr-bottom-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ftr-copy {
  font-size: 13px;
  color: #5a8c70;
  font-weight: 600;
  margin: 0;
}
.ftr-bottom-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ftr-bottom-links a {
  font-size: 13px;
  font-weight: 600;
  color: #5a8c70;
  text-decoration: none;
  transition: color 0.2s;
}
.ftr-bottom-links a:hover { color: #eaf4ee; }
.ftr-dot { color: #3a5e4a; font-size: 11px; }

/* Responsive */
@media (max-width: 1024px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .ftr-inner { padding: 52px 16px 40px; }
  .ftr-grid { grid-template-columns: 1fr; gap: 32px; }
  .ftr-about { max-width: 100%; }
  .ftr-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ═══════════════════════════════════════════════════════════════
   Enquiry Modal Popup  (.cmf-*)
   ═══════════════════════════════════════════════════════════════ */

/* Overlay backdrop */
.cmf-overlay {
  --cx-green:    #1a5c38;
  --cx-green2:   #257a4e;
  --cx-green-lt: #e6f4ed;
  --cx-text:     #1a2e24;
  --cx-muted:    #7a9e8c;
  --cx-t:        0.18s ease;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 30, 18, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cmf-overlay.cmf-open {
  opacity: 1;
  visibility: visible;
}

/* Modal sheet — slides up from bottom on mobile, centred card on desktop */
.cmf-modal {
  background: #fff;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(26, 92, 56, 0.18);
  transform: translateY(60px);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.cmf-overlay.cmf-open .cmf-modal {
  transform: translateY(0);
}

/* Fix white placeholder on textarea inside the modal */
.cmf-modal .ctu-field::placeholder { color: var(--cx-muted); }

/* Header */
.cmf-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #edf3ef;
  flex-shrink: 0;
}

/* Drag handle */
.cmf-hdr::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  background: #dde9e3;
  border-radius: 2px;
}

.cmf-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--cx-text);
}

.cmf-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0f5f2;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--cx-muted);
  transition: background var(--cx-t);
  flex-shrink: 0;
}

.cmf-close:hover { background: #ddeae3; }

/* Scrollable body */
.cmf-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: #c0d8c8 transparent;
}

/* On larger screens — centred card instead of bottom sheet */
@media (min-width: 520px) {
  .cmf-overlay {
    align-items: center;
    padding: 20px;
  }
  .cmf-modal {
    border-radius: 22px;
    max-height: 88vh;
    transform: translateY(20px) scale(0.97);
  }
  .cmf-overlay.cmf-open .cmf-modal {
    transform: translateY(0) scale(1);
  }
  .cmf-hdr::before { display: none; }
}

/* Modal digit-wrap tick (real DOM element, avoids ::after z-index issues) */
.cmf-tick {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:#1a3d28;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 3;
  pointer-events: none;
}
.carex-digits-wrap.cx-complete .cmf-tick {
  display: flex;
  animation: cxCheckIn 0.22s ease forwards;
}