/* ==========================================================================
   Distroo Master Design System & Responsive Framework
   Brand: Distroo IMF Pvt. Ltd. | Insurance Distribution. Engineered for Trust.
   Pixel-Perfect Multi-Device Scaling (320px to 2560px+)
   Strict Rules: Zero Inline CSS, Zero Internal Styles, Zero Box Shadows,
                 Zero Unnatural Gradients, Zero Clichés.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Root Variables & Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand Palette */
  --color-navy: #0B1D3A;
  --color-navy-dark: #071326;
  --color-navy-light: #162B4D;
  --color-saffron: #FF8A00;
  --color-saffron-hover: #E67A00;
  --color-teal: #00A88E;
  --color-teal-hover: #008F79;
  --color-white: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.88);
  --color-text-dark-muted: #4B5563;

  /* Frosted Glass Layers (No Box Shadows) */
  --glass-bg: rgba(255, 255, 255, 0.16);
  --glass-bg-hover: rgba(255, 255, 255, 0.24);
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-border-hover: rgba(255, 255, 255, 0.50);
  --overlay-bg: rgba(0, 0, 0, 0.58);

  /* Fluid Spacing & Sizing Tokens */
  --container-max: 1360px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & Universal Box Model
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 105px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-family);
  background-color: #050B15;
  color: var(--color-white);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* --------------------------------------------------------------------------
   3. Full-Width Hero Container
   -------------------------------------------------------------------------- */
.hero-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: clamp(560px, 90vh, 760px);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(96px, 12vh, 128px) clamp(16px, 3.5vw, 48px) clamp(44px, 6vh, 68px);
  gap: 0;
  background-color: var(--color-navy);
  box-sizing: border-box;
}

/* Authentic Photography Background & Responsive Picture Wrapper */
.hero-bg-picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Black Overlay for Clean Photographic Contrast */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Dark behind the text (left), fully clear on the image (right) */
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.68) 35%,
      rgba(0, 0, 0, 0.35) 55%,
      rgba(0, 0, 0, 0) 72%);
  z-index: 2;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Global Sticky Site Header & Floating Pill Navigation Bar
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  padding: clamp(12px, 1.6vh, 18px) clamp(16px, 3.5vw, 48px);
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
  transition: padding var(--transition-base);
}

.site-header.is-scrolled {
  padding: clamp(8px, 1.1vh, 12px) clamp(16px, 3.5vw, 48px);
  background: transparent;
}

.site-header-container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.site-header .navbar,
.site-header .mobile-drawer {
  pointer-events: auto;
}

/* Increased Height, User-Friendly Floating Pill Navbar */
.navbar {
  position: relative;
  z-index: 30;
  background: var(--color-white);
  border-radius: 999px;
  padding: clamp(8px, 1vh, 12px) clamp(10px, 1.2vw, 14px) clamp(8px, 1vh, 12px) clamp(22px, 2vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  min-height: clamp(66px, 7.5vh, 74px);
  border: 1px solid rgba(11, 29, 58, 0.1);
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.site-header.is-scrolled .navbar {
  border-color: #E2E8F0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-navy);
  flex-shrink: 0;
}

.brand-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-icon svg {
  width: 30px;
  height: 30px;
}

.brand-title {
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 800;
  color: var(--color-navy);
  white-space: nowrap;
}

/* Navigation Links */
.nav-menu {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: clamp(18px, 2.2vw, 32px);
  margin: 0;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  font-size: clamp(14px, 1.05vw, 15px);
  font-weight: 600;
  color: var(--color-text-dark-muted);
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 4px;
}

.nav-link:hover {
  color: var(--color-navy);
}

.nav-link.active {
  color: var(--color-navy);
  font-weight: 700;
}

/* Navigation Dropdown: Resources (Blog, Media) */
.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-toggle {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: clamp(14px, 1.05vw, 15px);
  font-weight: 600;
  color: var(--color-text-dark-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  transition: color var(--transition-fast);
  outline: none;
  box-shadow: none !important;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-item-dropdown:hover .nav-dropdown-toggle,
.nav-item-dropdown.is-open .nav-dropdown-toggle {
  color: var(--color-navy);
}

.nav-dropdown-toggle.active {
  color: var(--color-navy);
  font-weight: 700;
}

.dropdown-chevron {
  transition: transform var(--transition-fast);
  stroke: currentColor;
  flex-shrink: 0;
}

.nav-item-dropdown:hover .dropdown-chevron,
.nav-item-dropdown.is-open .dropdown-chevron {
  transform: rotate(180deg);
}

/* Desktop Floating Menu */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 6px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 100;
  box-shadow: none !important;
}

/* Invisible hover bridge */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible {
  background-color: rgba(0, 168, 142, 0.08);
  color: var(--color-teal);
}

.nav-dropdown-link.active {
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.08);
  font-weight: 700;
}

/* ==========================================================================
   Desktop Services Mega Menu Panel
   ========================================================================== */
.nav-item-megamenu {
  /* Static so the panel is positioned/centered against the navbar */
  position: static;
}

.nav-megamenu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(1120px, 100%);
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 16px 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 200;
  box-shadow: 0 22px 50px -12px rgba(11, 29, 58, 0.16), 0 0 1px rgba(11, 29, 58, 0.08);
}

/* Invisible hover bridge */
.nav-megamenu-panel::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.nav-item-megamenu:hover .nav-megamenu-panel,
.nav-item-megamenu:focus-within .nav-megamenu-panel,
.nav-item-megamenu.is-open .nav-megamenu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Unified 2-Column Mega Menu Layout */
.megamenu-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 20px;
  align-items: stretch;
}

/* Services Column (No Category Division) */
.megamenu-services-col {
  display: flex;
  flex-direction: column;
}

.megamenu-services-header {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #F1F5F9;
}

.megamenu-services-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  margin-bottom: 2px;
}

.megamenu-services-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.megamenu-services-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy);
}

.megamenu-services-page-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.megamenu-services-page-link:hover {
  color: #008f79;
  transform: translateX(2px);
}

.megamenu-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 8px;
}

.megamenu-service-item {
  display: flex;
  align-items: flex-start;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.megamenu-service-item:hover,
.megamenu-service-item:focus-visible {
  background-color: #F8FAFC;
  border-color: #E2E8F0;
  transform: translateY(-1px);
}

.megamenu-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.megamenu-icon-teal {
  background: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
}

.megamenu-icon-navy {
  background: rgba(11, 29, 58, 0.08);
  color: var(--color-navy);
}

.megamenu-icon-saffron {
  background: rgba(255, 138, 0, 0.14);
  color: #D97300;
}

.megamenu-service-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.megamenu-service-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
}

.megamenu-service-desc {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.megamenu-services-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.megamenu-footnote {
  font-size: 11.5px;
  color: #94A3B8;
  font-weight: 500;
}

.megamenu-view-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-teal);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.megamenu-view-link:hover {
  color: #008f79;
  text-decoration: underline;
}

/* User-Friendly Contact & CTA Card Column */
.megamenu-contact-card {
  background: linear-gradient(145deg, #0B1D3A 0%, #17325D 100%);
  border-radius: 14px;
  padding: 14px 16px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px -6px rgba(11, 29, 58, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.megamenu-contact-card::before {
  content: "";
  position: absolute;
  top: -35px;
  right: -35px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 168, 142, 0.35) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.megamenu-contact-top {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.megamenu-contact-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0, 168, 142, 0.22);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.megamenu-contact-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
}

.megamenu-contact-desc {
  margin: 0 0 8px 0;
  font-size: 11.5px;
  color: #CBD5E1;
  line-height: 1.42;
}

.megamenu-contact-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 7px 10px;
  margin-bottom: 10px;
}

.megamenu-contact-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #F1F5F9;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.megamenu-contact-item:hover {
  color: #34D399;
}

.contact-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(0, 168, 142, 0.2);
  color: #34D399;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.megamenu-contact-bottom {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 1;
}

.btn-megamenu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-teal);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 9px;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-megamenu-cta:hover {
  background: #008f79;
  transform: translateY(-1px);
}

.megamenu-trust-note {
  font-size: 10.5px;
  color: #94A3B8;
  text-align: center;
}

/* Mobile Drawer adjustments */
.mobile-dropdown-all {
  font-weight: 700;
  color: var(--color-teal);
  margin-top: 4px;
}

/* Nav Actions & Buttons */
.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-appointment {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  font-weight: 600;
  padding: 6px 6px 6px 22px;
  border-radius: 9999px;
  transition: background-color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-appointment:hover {
  background-color: var(--color-navy-dark);
  transform: translateY(-1px);
}

.btn-appointment .arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.btn-appointment:hover .arrow-circle {
  transform: translateX(2px);
}

/* Mobile Hamburger Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 29, 58, 0.06);
  gap: 5.5px;
  padding: 0;
  transition: background var(--transition-fast);
}

.nav-toggle:hover {
  background: rgba(11, 29, 58, 0.12);
}

.hamburger-bar {
  width: 22px;
  height: 2.5px;
  background-color: var(--color-navy);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Hamburger Active / Open State */
.nav-toggle.is-active .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-active .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active .hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. Mobile Navigation Drawer (Full-Height Right-to-Left Off-Canvas Sidebar)
   -------------------------------------------------------------------------- */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 15, 30, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.mobile-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(340px, 86vw);
  height: 100vh;
  height: 100dvh;
  background: #0B1D3A;
  background: linear-gradient(180deg, #09172E 0%, #0B1D3A 100%);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 20px 18px 22px;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 1;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
  pointer-events: none;
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* Sidebar Top Header: Logo + Close Button */
.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.mobile-drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.mobile-drawer-brand .brand-title {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
}

.mobile-drawer-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
  padding: 0;
}

.mobile-drawer-close:hover,
.mobile-drawer-close:active {
  background: rgba(0, 168, 142, 0.22);
  border-color: var(--color-teal);
  color: #00D6B5;
  transform: scale(1.06);
}

/* Sidebar Menu (Middle scrollable area) */
.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.mobile-nav-item {
  list-style: none;
  width: 100%;
}

.mobile-nav-link {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  padding: 10px 14px;
  border-radius: 10px;
  display: block;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* Mobile Drawer Dropdown */
.mobile-nav-dropdown {
  display: flex;
  flex-direction: column;
}

.mobile-dropdown-toggle {
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  outline: none;
  box-shadow: none !important;
}

.mobile-dropdown-toggle:hover,
.mobile-dropdown-toggle.active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.mobile-dropdown-chevron {
  transition: transform var(--transition-fast);
  stroke: currentColor;
  flex-shrink: 0;
}

.mobile-nav-dropdown.is-open .mobile-dropdown-chevron {
  transform: rotate(180deg);
}

.mobile-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 4px 0 4px 12px;
  display: none;
  flex-direction: column;
  gap: 3px;
}

.mobile-nav-dropdown.is-open .mobile-dropdown-menu {
  display: flex;
}

.mobile-dropdown-link {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.76);
  padding: 7px 12px;
  border-radius: 8px;
  display: block;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-dropdown-link:hover,
.mobile-dropdown-link.active {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.mobile-dropdown-link.mobile-dropdown-primary {
  color: var(--color-teal);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}

.mobile-dropdown-link.mobile-dropdown-primary:hover {
  color: #00D6B5;
  background: rgba(0, 168, 142, 0.12);
}

/* Sidebar Bottom Actions: Reduced Size, Two in One Row */
.mobile-drawer-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.btn-mobile-cta,
.btn-mobile-secondary {
  min-height: 40px;
  padding: 7px 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1.25;
  box-sizing: border-box;
  transition: all var(--transition-fast);
  word-break: normal;
}

.btn-mobile-cta {
  background: var(--color-teal);
  color: #FFFFFF;
  border: 1px solid var(--color-teal);
}

.btn-mobile-cta:hover,
.btn-mobile-cta:active {
  background: #00D6B5;
  color: var(--color-navy);
}

.btn-mobile-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.btn-mobile-secondary:hover,
.btn-mobile-secondary:active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Hide on Desktop */
@media (min-width: 992px) {

  .mobile-drawer,
  .mobile-drawer-backdrop {
    display: none !important;
  }
}

/* Prevent background scroll when sidebar is open */
body.nav-drawer-open {
  overflow: hidden !important;
}

/* Let the nav list take the remaining drawer height and scroll internally,
   so an expanded accordion never pushes the CTA buttons off-screen */
.mobile-drawer-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mobile-drawer-nav .mobile-nav-links {
  min-height: 0;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.mobile-drawer-cta {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* --------------------------------------------------------------------------
   6. Main Hero Body (Headline & CTAs)
   -------------------------------------------------------------------------- */
.hero-content {
  position: relative;
  z-index: 5;
  padding: 0;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.hero-title {
  font-size: clamp(26px, 3.8vw + 8px, 45px);
  font-weight: 600;
  line-height: 1.14;
  color: var(--color-white);
  margin-bottom: clamp(10px, 1.4vh, 16px);
  max-width: 800px;
  word-break: break-word;
}

.hero-subtitle {
  font-size: clamp(13.5px, 0.9vw + 7px, 15.5px);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 650px;
  margin-bottom: clamp(16px, 2.2vh, 24px);
  font-weight: 400;
  word-break: break-word;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 18px);
  flex-wrap: wrap;
}

/* Primary Hero Pill CTA */
.btn-assessment {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background-color: var(--color-white);
  color: var(--color-navy);
  text-decoration: none;
  font-size: clamp(14px, 0.95vw, 15px);
  font-weight: 600;
  padding: 5px 6px 5px clamp(18px, 2vw, 26px);
  border-radius: 9999px;
  transition: background-color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-assessment:hover {
  background-color: #F8FAFC;
  transform: translateY(-1px);
}

.btn-assessment .cta-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.btn-assessment:hover .cta-arrow {
  transform: translateX(2px);
}

/* Secondary Hero Frosted Pill CTA */
.btn-advisor {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(14px, 0.95vw, 15px);
  font-weight: 600;
  padding: 5px 6px 5px clamp(16px, 1.8vw, 22px);
  border-radius: 9999px;
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-advisor:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
}

.btn-advisor .cta-arrow-secondary {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.btn-advisor:hover .cta-arrow-secondary {
  transform: translateX(2px);
}

/* Bottom Right Tags & Ecosystem Copy */
.therapy-info {
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tags-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
}

.tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill-tag {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 9999px;
  padding: 6px clamp(12px, 1.4vw, 18px);
  color: var(--color-white);
  font-size: clamp(12px, 0.9vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.01em;
  user-select: none;
  transition: background-color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}

.pill-tag:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.pill-tag.accent-teal {
  background: rgba(0, 168, 142, 0.26);
  border-color: rgba(0, 168, 142, 0.52);
}

.pill-tag.accent-teal:hover {
  background: rgba(0, 168, 142, 0.40);
  border-color: rgba(0, 168, 142, 0.70);
}

.therapy-title {
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}

.therapy-desc {
  font-size: clamp(12px, 0.9vw, 13px);
  line-height: 1.55;
  color: var(--color-text-muted);
  font-weight: 400;
  max-width: 410px;
}

/* --------------------------------------------------------------------------
   8. Multi-Device & Pixel-Perfect Responsive Rules
   -------------------------------------------------------------------------- */

/* Large Desktop & 4K Displays (> 1600px) */
@media (min-width: 1600px) {
  :root {
    --container-max: 1480px;
  }

  .hero-container {
    min-height: clamp(600px, 80vh, 800px);
    padding: clamp(100px, 12vh, 136px) 64px clamp(48px, 6vh, 72px);
  }

  .hero-title {
    font-size: 50px;
    max-width: 720px;
  }

  .hero-subtitle {
    font-size: 16.5px;
    max-width: 560px;
  }
}

/* Small Laptops & Tablets Landscape (992px – 1199px) */
@media (max-width: 1199px) {
  .nav-links {
    gap: 16px;
  }

  .hero-title {
    max-width: 600px;
  }
}

/* Tablet Portrait & Small Screens (768px – 991px) */
@media (max-width: 991px) {

  .nav-menu,
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-actions .btn-appointment {
    display: none !important;
  }

  .site-header {
    padding: 12px clamp(12px, 3vw, 24px);
  }

  .site-header.is-scrolled {
    padding: 8px clamp(12px, 3vw, 24px);
  }

  .navbar {
    padding: 8px 10px 8px 18px;
    min-height: 62px;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .therapy-info {
    max-width: 100%;
  }

  .therapy-desc {
    max-width: 520px;
  }
}

/* Phablet & Large Mobile (576px – 767px) */
@media (max-width: 767px) {
  .hero-container {
    min-height: 100svh;
    padding: clamp(80px, 11vh, 96px) 20px clamp(36px, 5vh, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .hero-bg {
    object-position: center bottom;
  }

  .hero-overlay {
    /* Dark behind the text (top), fully clear on the image (bottom) */
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.72) 45%,
        rgba(0, 0, 0, 0.35) 62%,
        rgba(0, 0, 0, 0) 78%);
  }

  .navbar {
    padding: 6px 8px 6px 16px;
  }

  .hero-content {
    padding: 0;
    text-align: left;
  }

  .stats-card {
    width: 100%;
    max-width: 380px;
  }

  .btn-appointment {
    font-size: 13px;
    padding: 5px 5px 5px 14px;
  }

  .btn-appointment .arrow-circle {
    width: 28px;
    height: 28px;
  }
}

/* Standard Mobile (376px – 575px) */
@media (max-width: 575px) {
  .hero-container {
    min-height: 80svh;
    padding: clamp(74px, 10vh, 90px) 16px clamp(32px, 4.5vh, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .hero-bg {
    object-position: center bottom;
  }

  .navbar {
    padding: 5px 6px 5px 14px;
    border-radius: 10px;
  }

  .brand-title {
    font-size: 18px;
  }

  .brand-icon {
    width: 24px;
    height: 24px;
  }

  .nav-actions .btn-appointment {
    display: none !important;
  }

  .hero-content {
    padding: 0;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 12px;
  }

  .btn-assessment,
  .btn-advisor {
    width: auto;
    width: fit-content;
    max-width: fit-content;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 3.5px 4px 3.5px 14px;
    font-size: 11.5px;
    min-height: 34px;
  }

  .btn-assessment .arrow-circle,
  .btn-advisor .arrow-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .btn-assessment .arrow-circle svg,
  .btn-advisor .arrow-circle svg {
    width: 11px;
    height: 11px;
  }

  .stats-card {
    width: 100%;
    padding: 16px;
    border-radius: 10px;
  }

  .stats-number {
    font-size: 30px;
  }

  .avatar-stack img {
    width: 30px;
    height: 30px;
    margin-left: -6px;
  }

  .tags-row {
    gap: 6px;
  }

  .pill-tag {
    padding: 5px 12px;
    font-size: 12px;
  }
}

/* Ultra-Compact Mobile (320px – 375px) */
@media (max-width: 375px) {
  .hero-container {
    padding: clamp(68px, 9vh, 80px) 12px clamp(28px, 4vh, 36px);
    justify-content: center;
    align-items: flex-start;
  }

  .navbar {
    padding: 4px 6px 4px 12px;
  }

  .brand-title {
    font-size: 17px;
  }

  .hero-title {
    font-size: 25px;
    line-height: 1.18;
  }

  .hero-subtitle {
    font-size: 13px;
    line-height: 1.5;
  }

  .stats-card {
    padding: 12px;
  }

  .avatar-stack img {
    width: 26px;
    height: 26px;
    margin-left: -5px;
  }

  .pill-tag {
    padding: 4px 10px;
    font-size: 11px;
  }

  .btn-assessment,
  .btn-advisor {
    font-size: 10.5px;
    padding: 2.5px 3px 2.5px 11px;
    gap: 6px;
    min-height: 30px;
  }

  .btn-assessment .arrow-circle,
  .btn-advisor .arrow-circle {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .btn-assessment .arrow-circle svg,
  .btn-advisor .arrow-circle svg {
    width: 10px;
    height: 10px;
  }
}

/* --------------------------------------------------------------------------
   9. Counter Section (Next to Hero)
   Unified Dark Executive UI: Deep Navy Palette, Luminous Typography,
   Teal Accented Metrics, Translucent Vertical Dividers & Micro-Interactions
   -------------------------------------------------------------------------- */
.counter-section {
  position: relative;
  width: 100%;
  background: #071326;
  background: linear-gradient(90deg, #061122 0%, #0B1D3A 50%, #08162A 100%);
  padding: 0;
  margin: 0;
  z-index: 5;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

.counter-container {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: auto;
}

/* Left Side: Dark Lead Anchor with Teal Accent Border & Crisp White Heading */
.counter-lead-col {
  flex: 0 0 30%;
  background: rgba(4, 12, 24, 0.55);
  color: var(--color-white);
  padding: clamp(18px, 2.2vh, 26px) clamp(22px, 2.5vw, 42px);
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.counter-heading {
  font-size: clamp(15px, 1.28vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
  margin: 0;
  border-left: 3px solid var(--color-teal);
  padding-left: 14px;
}

/* Right Side: Seamless Dark Metrics Bar */
.counter-metrics-col {
  flex: 1;
  background: transparent;
  color: var(--color-white);
  padding: clamp(18px, 2.2vh, 26px) clamp(24px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 1.8vw, 28px);
}

.counter-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  background: transparent;
  transition: transform 0.25s ease;
  cursor: default;
}

.counter-metric-item:hover {
  transform: translateY(-2px);
}

.metric-number {
  font-size: clamp(23px, 2.3vw, 29px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  text-align: center;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.counter-metric-item:hover .metric-number {
  color: #F8FAFC;
  text-shadow: 0 0 16px rgba(0, 168, 142, 0.35);
}

.metric-symbol {
  color: var(--color-teal);
  font-weight: 800;
  margin-left: 1px;
  font-size: 0.9em;
  transition: color 0.25s ease;
}

.counter-metric-item:hover .metric-symbol {
  color: #2DD4BF;
}

.metric-label {
  font-size: clamp(11.5px, 0.82vw, 12px);
  font-weight: 500;
  color: rgba(226, 232, 240, 0.76);
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: color 0.25s ease;
}

.counter-metric-item:hover .metric-label {
  color: #FFFFFF;
}

/* Translucent Vertical Dividers */
.counter-divider {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.02) 100%);
  flex-shrink: 0;
}

/* Row wrapper: Invisible on desktop via display: contents */
.counter-metrics-row {
  display: contents;
}

/* Responsive Scaling for Counter Section */
@media (max-width: 1024px) {
  .counter-lead-col {
    flex: 0 0 34%;
    padding: 18px 24px;
  }

  .counter-metrics-col {
    padding: 18px 24px;
    gap: 16px;
  }
}

@media (max-width: 991px) {
  .counter-container {
    flex-direction: column;
    min-height: auto;
    height: auto;
  }

  .counter-lead-col {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 20px;
    justify-content: center;
    text-align: center;
  }

  .counter-heading {
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    border-left: none;
    padding-left: 0;
    max-width: 520px;
    margin: 0 auto;
  }

  /* Two Clean, Compact Rows on Tablet & Mobile with Full Dividers */
  .counter-metrics-col {
    flex: 0 0 auto;
    width: 100%;
    padding: 14px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: auto;
    height: auto;
  }

  /* Hide rogue desktop center divider and row divider on tablet and mobile */
  .counter-divider-center,
  .counter-row-divider {
    display: none !important;
  }

  .counter-metrics-row {
    display: grid;
    align-items: center;
    width: 100%;
  }

  /* Row 1: 3 Counters separated by 2 vertical dividers */
  .counter-metrics-row-1 {
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    gap: 0;
    max-width: 520px;
    margin: 0 auto;
  }

  /* Row 2: 2 Counters separated by 1 vertical divider, centered */
  .counter-metrics-row-2 {
    grid-template-columns: 1fr 1px 1fr;
    width: 100%;
    max-width: clamp(210px, 62%, 290px);
    margin: 0 auto;
    gap: 0;
  }

  .counter-metrics-row .counter-metric-item {
    padding: 2px clamp(3px, 1vw, 8px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
  }

  /* Vertical Dividers inside both rows */
  .counter-metrics-row .counter-divider {
    display: block !important;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.20) 50%, rgba(255, 255, 255, 0.02) 100%);
    justify-self: center;
    flex-shrink: 0;
  }

  .metric-number {
    font-size: clamp(18px, 4.4vw, 22px);
    line-height: 1.1;
  }

  .metric-label {
    font-size: clamp(9.5px, 2.4vw, 11px);
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    color: rgba(226, 232, 240, 0.85);
  }
}

@media (max-width: 575px) {
  .counter-section {
    padding: 0;
  }

  .counter-lead-col {
    padding: 10px 14px;
  }

  .counter-heading {
    font-size: 13.5px;
    line-height: 1.35;
  }

  .counter-metrics-col {
    padding: 10px 8px 12px;
    gap: 8px;
  }

  .counter-metrics-row-2 {
    max-width: clamp(190px, 64%, 250px);
  }

  .counter-metrics-row .counter-metric-item {
    padding: 1px 3px;
    gap: 1px;
  }

  .counter-metrics-row .counter-divider {
    height: 24px;
  }

  .metric-number {
    font-size: clamp(16px, 4.2vw, 20px);
  }

  .metric-label {
    font-size: clamp(9px, 2.3vw, 10px);
    line-height: 1.2;
  }
}

/* --------------------------------------------------------------------------
   9B. About Us Section (Compact, Cohesive UI)
   Single Photographic Composition, Global Brand Font (Plus Jakarta Sans),
   Capsule Subheading, 2-Column Checklist, and Navy Pill CTA Button.
   Strict Rules: Zero Inline CSS, Zero Internal Styles.
   -------------------------------------------------------------------------- */
.about-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(64px, 6.5vw, 92px) 0 clamp(44px, 4.5vw, 68px) 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
}

.about-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* Left Column: Single Photographic Composition */
.about-visual-col {
  position: relative;
  width: 100%;
}

.about-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Single Featured Image Card: Experienced Advisors */
.about-img-card {
  position: relative;
  width: 100%;
  height: clamp(320px, 32vw, 420px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(11, 29, 58, 0.08);
  background-color: #F1F5F9;
  box-sizing: border-box;
}

.about-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right Column: Global Font Typography & Content */
.about-content-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Capsule Subheading — Matches Website Sections UI (Fits Text Length) */
.about-subheading,
.about-tagline {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: max-content;
  white-space: nowrap;
  gap: 6px;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 14px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  margin-bottom: 8px;
  line-height: 1.2;
}

/* Section Heading — Matches Website Sections UI */
.about-heading {
  font-family: var(--font-family);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 10px;
}

.about-heading em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-navy);
}

.about-description {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.62;
  color: #5A6A80;
  margin: 0 0 16px;
}

.about-features-group {
  margin-bottom: 20px;
}

.about-features-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 8px;
}

.about-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 18px;
}

.about-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-check-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background-color: #0A6D5C;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-check-icon svg {
  width: 10px;
  height: 10px;
  display: block;
}

.about-feature-text {
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 500;
  color: #475569;
  line-height: 1.3;
}

/* Button UI: Exactly Matching Website Buttons */
.about-action {
  display: flex;
  align-items: center;
}

.btn-quote {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  padding: 5px 5px 5px 20px;
  border-radius: 9999px;
  transition: background-color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
  box-shadow: none;
  border: none;
}

.btn-quote:hover {
  background-color: var(--color-navy-dark);
  transform: translateY(-1px);
}

.btn-quote .cta-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.btn-quote:hover .cta-arrow {
  transform: translateX(2px);
}

/* Responsive Scaling Across Breakpoints */
@media (max-width: 991px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-visual-col {
    max-width: 480px;
    margin: 0 auto;
  }

  .about-img-card {
    height: 340px;
  }

  .about-content-col {
    max-width: 540px;
    margin: 0 auto;
    text-align: left;
  }

  .about-description {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .about-section {
    padding: 38px 0 24px;
  }

  .about-img-card {
    height: 270px;
  }

  .about-features-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 440px) {
  .about-img-card {
    height: 230px;
    border-radius: 14px;
  }

  .about-heading {
    font-size: 25px;
  }

  .btn-quote {
    width: auto;
    width: fit-content;
    max-width: fit-content;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 7px;
    padding: 3.5px 4px 3.5px 12px;
    font-size: 11.5px;
    min-height: 32px;
  }

  .btn-quote .arrow-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .btn-quote .arrow-circle svg {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 360px) {
  .about-img-card {
    height: 200px;
    border-radius: 12px;
  }

  .about-heading {
    font-size: 25px;
  }

  .btn-quote {
    font-size: 10.5px;
    padding: 2.5px 3px 2.5px 10px;
    gap: 5px;
    min-height: 28px;
  }

  .btn-quote .arrow-circle {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  .btn-quote .arrow-circle svg {
    width: 9px;
    height: 9px;
  }
}

/* --------------------------------------------------------------------------
   10. Services / Insurance Categories Section
   Design-matched UI: Photographic cards with soft pastel floating badges,
   top-right arrow links, clean header with navigation, and bottom CTA.
   Zero Inline CSS, Zero Internal Styles, Zero Box Shadows.
   -------------------------------------------------------------------------- */
.services-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(32px, 3.8vw, 48px) 0 clamp(28px, 3.2vw, 40px);
  margin: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.services-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* Header Row: Subheading + Heading on Left, Prev/Next on Right */
.services-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.services-header-content {
  flex: 1;
  max-width: 660px;
}

/* Capsule Subheading */
.services-subheading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  margin-bottom: 8px;
  line-height: 1.2;
}

/* 30px Section Heading */
.services-heading {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
  margin: 0;
}

/* Prev / Next Circular Navigation Buttons */
.services-nav-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.services-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background-color: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
  box-shadow: none;
  padding: 0;
  outline: none;
}

.services-nav-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  transition: transform var(--transition-fast);
}

.services-nav-btn:hover:not(:disabled) {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-1px);
}

.services-nav-btn:hover:not(:disabled).btn-prev svg {
  transform: translateX(-2px);
}

.services-nav-btn:hover:not(:disabled).btn-next svg {
  transform: translateX(2px);
}

.services-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #E2E8F0;
}

/* Carousel Track & Card Layout */
.services-carousel-wrapper {
  position: relative;
  width: 100%;
}

.services-carousel-track {
  --services-gap: clamp(14px, 1.6vw, 20px);
  display: flex;
  align-items: stretch;
  gap: var(--services-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 8px;
}

.services-carousel-track::-webkit-scrollbar {
  display: none;
}

/* Compact, User-Friendly Service Card - Exactly 4 in One Row on Desktop */
.service-card {
  position: relative;
  flex: 0 0 calc((100% - (var(--services-gap) * 3)) / 4);
  width: calc((100% - (var(--services-gap) * 3)) / 4);
  max-width: calc((100% - (var(--services-gap) * 3)) / 4);
  min-width: 0;
  height: clamp(260px, 25vw, 310px);
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
  box-shadow: none;
  border: none;
  background-color: #F1F5F9;
}

.service-card-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

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

/* Floating Bottom White (#ffffff) Badge */
.service-card-badge {
  position: absolute;
  bottom: clamp(10px, 1.2vw, 14px);
  left: clamp(10px, 1.2vw, 14px);
  right: clamp(10px, 1.2vw, 14px);
  padding: clamp(10px, 1.1vw, 13px) clamp(12px, 1.3vw, 16px);
  border-radius: 12px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  z-index: 2;
}

.service-card:hover .service-card-badge {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
}

.service-card-badge .service-card-title,
.service-card-title {
  font-size: clamp(13px, 0.95vw, 14.5px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-navy);
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Arrow: Dark Circular Background with Circular Border */
.service-card-arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: var(--color-navy);
  color: #ffffff;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 29, 58, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.service-card-arrow svg {
  width: 14px;
  height: 14px;
  stroke: #ffffff;
  stroke-width: 2.5;
  fill: none;
  transition: transform var(--transition-fast);
}

.service-card:hover .service-card-arrow {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  transform: scale(1.06);
}

.service-card:hover .service-card-arrow svg {
  transform: translate(1px, -1px);
}

/* Fallback badge overrides to keep #ffffff */
.badge-green,
.badge-blue,
.badge-yellow,
.badge-peach,
.badge-mint,
.badge-sky {
  background-color: #ffffff;
}

/* Bottom CTA Row: "View All Services" */
.services-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(20px, 2.5vw, 30px);
}

/* Bottom CTA: Follows Exact Hero Button Pattern */
.btn-view-services {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background-color: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(14px, 0.95vw, 15px);
  font-weight: 600;
  padding: 5px 6px 5px clamp(18px, 2vw, 26px);
  border-radius: 9999px;
  transition: background-color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
  box-shadow: none;
  border: none;
}

.btn-view-services:hover {
  background-color: var(--color-navy-dark);
  transform: translateY(-1px);
}

.btn-view-services .cta-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.btn-view-services:hover .cta-arrow {
  transform: translateX(2px);
}

/* Responsive Scaling: Tablets & Mobiles */
@media (max-width: 1100px) and (min-width: 801px) {
  .service-card {
    flex: 0 0 calc((100% - (var(--services-gap) * 2)) / 3);
    width: calc((100% - (var(--services-gap) * 2)) / 3);
    max-width: calc((100% - (var(--services-gap) * 2)) / 3);
    height: clamp(260px, 28vw, 300px);
  }
}

@media (max-width: 800px) and (min-width: 601px) {
  .service-card {
    flex: 0 0 calc((100% - var(--services-gap)) / 2);
    width: calc((100% - var(--services-gap)) / 2);
    max-width: calc((100% - var(--services-gap)) / 2);
    height: clamp(260px, 30vw, 290px);
  }
}

@media (max-width: 600px) {
  .services-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .services-header-content {
    max-width: 100%;
  }

  .services-nav-controls {
    align-self: flex-end;
  }

  .service-card {
    flex: 0 0 78%;
    max-width: 280px;
    height: 285px;
  }
}

@media (max-width: 480px) {
  .services-section {
    padding: 24px 0 20px;
  }

  .services-heading {
    font-size: 25px;
  }

  .service-card {
    flex: 0 0 82%;
    max-width: 260px;
    height: 275px;
    border-radius: 10px;
  }

  .service-card-badge {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background-color: #ffffff;
  }

  .service-card-badge .service-card-title,
  .service-card-title {
    font-size: 12.5px;
    font-weight: 600;
  }

  .service-card-arrow {
    width: 28px;
    height: 28px;
  }

  .service-card-arrow svg {
    width: 12px;
    height: 12px;
  }

  .btn-view-services {
    width: auto;
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    gap: 7px;
    padding: 3.5px 4px 3.5px 12px;
    font-size: 11.5px;
    min-height: 32px;
  }

  .btn-view-services .cta-arrow {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .btn-view-services .cta-arrow svg {
    width: 11px;
    height: 11px;
  }
}

/* ==========================================================================
   11. Featured Colorful Insurance Plans Section (Exact UI Match to Screenshot)
   6 Vibrant Gradient Cards, Frosted Category Pills, White Pill Buttons,
   Smooth Continuous Slider, and Dynamic Pill Pagination Indicator.
   Strict Rules: Zero Inline CSS, Zero Internal Styles.
   ========================================================================== */
.featured-plans-section {
  position: relative;
  width: 100%;
  background-color: #F8FAFC;
  padding: clamp(40px, 4.8vw, 64px) 0 clamp(36px, 4.2vw, 56px);
  margin: 0;
  border-top: 1px solid #F1F5F9;
  overflow: hidden;
  box-sizing: border-box;
}

.featured-plans-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

.featured-plans-header {
  margin-bottom: clamp(20px, 2.5vw, 32px);
  text-align: left;
}

.featured-plans-subheading {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 5px 14px;
  margin-bottom: 10px;
}

.featured-plans-heading {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
  line-height: 1.22;
}

/* Slider Track & Container */
.featured-plans-carousel-wrap {
  position: relative;
  width: 100%;
}

.featured-plans-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 14px;
  margin: -6px -4px -14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.featured-plans-track::-webkit-scrollbar {
  display: none;
}

/* Plan Card Geometry */
.featured-plan-card {
  flex: 0 0 calc((100% - 44px) / 3);
  width: calc((100% - 44px) / 3);
  min-width: calc((100% - 44px) / 3);
  min-height: 250px;
  border-radius: 10px;
  box-shadow: none;
  padding: clamp(22px, 2.4vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  transition: transform var(--transition-fast);
}

.featured-plan-card:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

.plan-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.plan-card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 5px 13px;
  margin-bottom: 14px;
  line-height: 1.2;
}

.plan-card-title {
  font-size: clamp(19px, 1.35vw, 22px);
  font-weight: 700;
  line-height: 1.24;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.plan-card-desc {
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-weight: 400;
}

.plan-card-bottom {
  margin-top: 20px;
}

.btn-plan-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #FFFFFF;
  color: var(--color-navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow: none;
  padding: 5px 6px 5px 20px;
  transition: background-color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-plan-action:hover {
  background-color: #F8FAFC;
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-plan-action .cta-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.btn-plan-action:hover .cta-arrow {
  transform: translateX(2px);
}

/* 6 Vibrant Color Schemes (Exact Match & Harmony) */
/* Card 1: Emerald / Jade Green */
.card-emerald {
  background: radial-gradient(circle at 85% 20%, rgba(110, 231, 183, 0.45) 0%, transparent 55%), linear-gradient(135deg, #059669 0%, #10B981 50%, #047857 100%);
}

/* Card 2: Electric Sky Blue */
.card-electric-blue {
  background: radial-gradient(circle at 85% 20%, rgba(147, 197, 253, 0.48) 0%, transparent 55%), linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
}

/* Card 3: Violet / Magenta Pink */
.card-magenta {
  background: radial-gradient(circle at 85% 20%, rgba(244, 114, 182, 0.48) 0%, transparent 55%), linear-gradient(135deg, #7C3AED 0%, #9333EA 50%, #DB2777 100%);
}

/* Card 4: Sunset Amber / Coral Orange */
.card-sunset-orange {
  background: radial-gradient(circle at 85% 20%, rgba(253, 186, 116, 0.48) 0%, transparent 55%), linear-gradient(135deg, #C2410C 0%, #EA580C 50%, #D97706 100%);
}

/* Card 5: Ocean Cyan / Deep Teal */
.card-ocean-teal {
  background: radial-gradient(circle at 85% 20%, rgba(56, 189, 248, 0.48) 0%, transparent 55%), linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #0284C7 100%);
}

/* Card 6: Royal Indigo / Violet */
.card-royal-indigo {
  background: radial-gradient(circle at 85% 20%, rgba(196, 181, 253, 0.48) 0%, transparent 55%), linear-gradient(135deg, #4338CA 0%, #4F46E5 50%, #7C3AED 100%);
}

/* Pagination Indicators (Exact Match to Screenshot) */
.featured-plans-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: clamp(24px, 3vw, 36px);
}

.plan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #475569;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.plan-dot:hover:not(.is-active) {
  background-color: var(--color-navy);
}

.plan-dot.is-active {
  width: 28px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--color-navy);
}

/* Responsive Rules for Featured Plans */
@media (max-width: 991px) {
  .featured-plan-card {
    flex: 0 0 calc((100% - 20px) / 2);
    width: calc((100% - 20px) / 2);
    min-width: calc((100% - 20px) / 2);
    padding: 22px 20px;
  }
}

@media (max-width: 640px) {
  .featured-plans-section {
    padding: clamp(28px, 4.5vw, 42px) 0 clamp(22px, 3.8vw, 34px);
  }

  .featured-plans-header {
    margin-bottom: 14px;
  }

  .featured-plans-heading {
    font-size: clamp(20px, 5.2vw, 24px);
    line-height: 1.24;
  }

  /* Compact Card Geometry for Mobile */
  .featured-plan-card {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    min-height: auto;
    padding: 16px 16px 14px;
    border-radius: 12px;
  }

  .featured-plans-track {
    gap: 12px;
    padding: 4px 2px 10px;
    margin: -4px -2px -10px;
  }

  .plan-card-tag {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
  }

  .plan-card-title {
    font-size: clamp(16px, 4.4vw, 18px);
    line-height: 1.22;
    margin: 0 0 5px;
  }

  .plan-card-desc {
    font-size: 12px;
    line-height: 1.4;
  }

  .plan-card-bottom {
    margin-top: 14px;
  }

  /* Compact Mobile Button */
  .btn-plan-action {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 4px 3px 14px;
    gap: 8px;
    width: auto;
    width: fit-content;
  }

  .btn-plan-action .cta-arrow {
    width: 24px;
    height: 24px;
  }

  .btn-plan-action .cta-arrow svg {
    width: 11px;
    height: 11px;
  }

  .featured-plans-pagination {
    margin-top: 16px;
  }
}

@media (max-width: 375px) {
  .featured-plan-card {
    padding: 14px 13px 12px;
  }

  .plan-card-title {
    font-size: 15px;
  }

  .plan-card-desc {
    font-size: 11.5px;
  }

  .plan-card-bottom {
    margin-top: 12px;
  }

  .btn-plan-action {
    font-size: 11.5px;
    padding: 2.5px 3.5px 2.5px 12px;
    gap: 6px;
  }

  .btn-plan-action .cta-arrow {
    width: 22px;
    height: 22px;
  }

  .btn-plan-action .cta-arrow svg {
    width: 10px;
    height: 10px;
  }
}

/* ==========================================================================
   12. How It Works — Circular Scroll-Driven Sliding Stage
   Exact design matching reference: Sticky left circular hub with concentric
   orbit rings & revolving dots, plus a large circular arc where step points
   slide smoothly along the curve as user scrolls.
   Strict Rules: Zero Inline CSS, Zero Internal Styles.
   ========================================================================== */

/* Outer scroll-driver: compact height to eliminate extra white spacing */
.how-it-works-section {
  position: relative;
  width: 100%;
  background-color: #F8FAFC;
  border-top: 1px solid #EEF2F7;
  height: 180vh;
}

/* Sticky viewport — remains fixed in viewport while scrolling */
.hiw-sticky-viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 520px;
  max-height: 880px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px 0 20px;
}

/* Master container inside viewport */
.hiw-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: relative;
}

/* Top bar: Meta info + Navigation Controls */
.hiw-top-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(10px, 1.5vw, 18px);
  width: 100%;
  z-index: 10;
}

.hiw-meta-block {
  text-align: left;
}

.hiw-subheading {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 5px 14px;
  margin-bottom: 8px;
}

.hiw-heading {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0;
}

/* Controls: Step Counter & Arrow buttons */
.hiw-status-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hiw-counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 6px 14px;
  border-radius: 9999px;
  font-weight: 500;
  user-select: none;
}

.hiw-counter-value {
  color: #64748B;
}

.hiw-counter-value strong {
  color: var(--color-navy);
  font-weight: 800;
  font-size: 13.5px;
}

.hiw-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hiw-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.hiw-nav-btn:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
}

.hiw-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.hiw-nav-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Stage Area: Houses the central hub & the circular track */
.hiw-stage {
  position: relative;
  width: 100%;
  height: clamp(520px, 66vh, 640px);
  overflow: visible;
  display: flex;
  align-items: center;
}

/* Center Hub (Distroo Process Emblem) */
.hiw-center-hub {
  position: absolute;
  left: clamp(10px, 4vw, 60px);
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 5;
  pointer-events: none;
}

.hiw-hub-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hiw-hub-ring-outer {
  fill: none;
  stroke: rgba(11, 29, 58, 0.16);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.hiw-hub-ring-mid {
  fill: none;
  stroke: rgba(11, 29, 58, 0.12);
  stroke-width: 1.5;
}

.hiw-hub-ring-inner {
  fill: none;
  stroke: rgba(11, 29, 58, 0.08);
  stroke-width: 1.2;
}

/* Hub orbit rotator */
.hiw-hub-rotator {
  transform-origin: 160px 160px;
  transition: transform 0.1s linear;
}

.hiw-orbit-dot {
  transition: transform 0.3s ease;
}

.hiw-orbit-teal {
  fill: #00A88E;
}

.hiw-orbit-orange {
  fill: #FF8A00;
}

.hiw-orbit-blue {
  fill: #2563EB;
}

.hiw-orbit-pink {
  fill: #EC4899;
}

.hiw-orbit-purple {
  fill: #7C3AED;
}

.hiw-orbit-navy {
  fill: #0B1D3A;
}

/* Solid Core Disc inside the hub */
.hiw-core-disc {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: var(--color-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  z-index: 6;
  pointer-events: auto;
  user-select: none;
  border: 4px solid #FFFFFF;
}

.hiw-core-brand {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

.hiw-core-title {
  font-size: 21px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
}

.hiw-core-pill {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-teal);
  background: rgba(0, 168, 142, 0.18);
  border-radius: 9999px;
  padding: 2px 8px;
  margin-top: 4px;
  transition: all 0.25s ease;
}

/* Big Circular Arc SVG Line - Placed strictly behind the icons */
.hiw-arc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.hiw-arc-line {
  fill: none;
  stroke: var(--hiw-active-color, #00A88E);
  stroke-width: 2.5;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
  transition: stroke 0.35s ease;
}

/* Circular Track Container */
.hiw-circular-track {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  z-index: 3;
}

/* Individual Step Item (Slides along the circular arc) */
.hiw-step-item {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  will-change: transform, opacity;
  cursor: pointer;
  padding: 0;
  background: transparent;
  user-select: none;
  z-index: 4;
}

/* Step Label (Left of node) */
.hiw-step-tag {
  width: 60px;
  text-align: right;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  flex-shrink: 0;
  transition: color 0.25s ease, font-weight 0.25s ease;
}

/* Circular Node Icon (Sitting right on top of the arc, outside the card) */
.hiw-step-node {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 168, 142, 0.08);
  border: 1.5px solid rgba(0, 168, 142, 0.28);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 5;
}

.hiw-step-node svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.hiw-step-item:hover .hiw-step-node {
  border-color: rgba(0, 168, 142, 0.5);
  background: rgba(0, 168, 142, 0.12);
}

/* Single Faded Teal Color for All Step Icon Nodes */
.hiw-node-emerald,
.hiw-node-blue,
.hiw-node-violet,
.hiw-node-amber,
.hiw-node-pink,
.hiw-node-teal {
  color: var(--color-teal);
  border-color: rgba(0, 168, 142, 0.28);
  background: rgba(0, 168, 142, 0.08);
}

/* Step Content Card (Info wrapped in a card, icon outside, NO box shadow) */
.hiw-step-body {
  width: clamp(340px, 40vw, 540px);
  max-width: clamp(340px, 40vw, 540px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 15px 22px;
  box-shadow: none !important;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.hiw-step-item:hover .hiw-step-body {
  border-color: #CBD5E1;
}

.hiw-step-title {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0;
  transition: color 0.25s ease;
}

.hiw-step-desc {
  font-size: clamp(12px, 0.85vw, 13.5px);
  line-height: 1.5;
  color: #64748B;
  margin: 0;
  transition: color 0.25s ease;
}

/* Active Highlight State */
.hiw-step-item.is-active .hiw-step-node {
  transform: scale(1.15);
  border-width: 2px;
  border-color: var(--color-teal);
  background: rgba(0, 168, 142, 0.16);
  color: var(--color-teal);
  box-shadow: 0 0 0 4px rgba(0, 168, 142, 0.12);
}

.hiw-step-item.is-active .hiw-step-tag {
  color: var(--color-navy);
  font-weight: 800;
}

.hiw-step-item.is-active .hiw-step-body {
  border-color: #94A3B8;
  background: #FFFFFF;
  box-shadow: none !important;
}

.hiw-step-item.is-active .hiw-step-title {
  color: var(--color-navy);
}

.hiw-step-item.is-active .hiw-step-desc {
  color: #334155;
}

/* Responsive Fallback: Gracefully stack vertically on mobile */
@media (max-width: 860px) {
  .how-it-works-section {
    height: auto !important;
    padding: clamp(40px, 6vw, 64px) 0;
  }

  .hiw-sticky-viewport {
    position: relative;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  .hiw-top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  .hiw-status-controls {
    width: 100%;
    justify-content: space-between;
  }

  .hiw-nav-actions {
    display: none;
  }

  .hiw-stage {
    flex-direction: column;
    height: auto;
    gap: 28px;
  }

  .hiw-center-hub {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto 12px;
    width: 220px;
    height: 220px;
  }

  .hiw-core-disc {
    width: 110px;
    height: 110px;
  }

  .hiw-core-title {
    font-size: 17px;
  }

  .hiw-arc-svg {
    display: none;
  }

  .hiw-circular-track {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: none !important;
  }

  .hiw-step-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .hiw-step-tag {
    display: inline-block;
    width: auto;
    min-width: fit-content;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-teal);
    background: rgba(0, 168, 142, 0.08);
    border: 1px solid rgba(0, 168, 142, 0.2);
    border-radius: 4px;
    padding: 2px 7px;
    align-self: flex-start;
    flex-shrink: 0;
  }

  .hiw-step-node {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }

  .hiw-step-node svg {
    width: 14px;
    height: 14px;
  }

  .hiw-step-body {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 4px;
  }

  .hiw-step-title {
    font-size: 15px;
    line-height: 1.3;
  }

  .hiw-step-desc {
    font-size: 12px;
    line-height: 1.45;
  }
}

@media (max-width: 480px) {
  .hiw-center-hub {
    width: 180px;
    height: 180px;
    margin: 0 auto 10px;
  }

  .hiw-core-disc {
    width: 96px;
    height: 96px;
  }

  .hiw-core-title {
    font-size: 15px;
  }

  .hiw-core-brand {
    font-size: 9px;
  }

  .hiw-step-item {
    padding: 12px 10px;
    gap: 10px;
  }

  .hiw-step-node {
    width: 26px;
    height: 26px;
  }

  .hiw-step-node svg {
    width: 12px;
    height: 12px;
  }
}

/* ==========================================================================
   Customer Journey Section (Simple Process / Next to Distroo Engine)
   Exact same-to-same UI matching reference screenshot:
   "FOR INDIVIDUALS & BUSINESSES"
   Heading: Customer Journey - Simple. Guided. Protected for Life.
   5 Horizontal Steps with Connective Arrows: Understand, Choose, Protect, Claim, Renew.
   Zero Inline CSS, Zero Internal Styles.
   Pixel & Multi-Device Responsive (320px to 2560px+)
   Typography: Global Font Style (Plus Jakarta Sans)
   ========================================================================== */
.customer-journey-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(52px, 5.8vw, 84px) 0;
  box-sizing: border-box;
  overflow: hidden;
  border-top: 1px solid rgba(11, 29, 58, 0.06);
  border-bottom: 1px solid rgba(11, 29, 58, 0.06);
}

.customer-journey-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* Header: Left Kicker & Headings, Right Intro Paragraph */
.customer-journey-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 3.5vw, 56px);
  margin-bottom: clamp(36px, 4.2vw, 54px);
}

.customer-journey-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.customer-journey-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 14px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 10px;
  line-height: 1.2;
}

.customer-journey-title {
  font-family: var(--font-family);
  font-size: clamp(28px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
  margin: 0 0 6px;
}

.customer-journey-subtitle {
  font-family: var(--font-family);
  font-size: clamp(15px, 1.25vw, 16px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-dark-muted);
  margin: 0;
}

.customer-journey-intro {
  font-family: var(--font-family);
  font-size: clamp(13.5px, 0.95vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-dark-muted);
  max-width: 440px;
  margin: 0;
  align-self: flex-end;
}

/* 5-Step Horizontal Flow Grid */
.customer-journey-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  width: 100%;
  align-items: flex-start;
}

.customer-journey-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  transition: transform var(--transition-base);
}

.customer-journey-card:hover {
  transform: translateY(-3px);
}

/* Card Thumbnail */
.customer-journey-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(0, 168, 142, 0.04);
  margin-bottom: clamp(14px, 1.5vw, 20px);
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}

.customer-journey-card:hover .customer-journey-thumb {
  border-color: rgba(0, 168, 142, 0.35);
}

.customer-journey-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.customer-journey-card:hover .customer-journey-thumb img {
  transform: scale(1.05);
}

/* Step Meta: Number & Connecting Arrow */
.customer-journey-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
}

.customer-journey-num {
  font-family: var(--font-family);
  font-size: clamp(20px, 2.6vw, 20px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-teal);
  transition: color var(--transition-base);
}

.customer-journey-card:hover .customer-journey-num {
  color: var(--color-teal-hover);
}

.customer-journey-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  opacity: 0.85;
  flex-shrink: 0;
  transition: transform var(--transition-base), color var(--transition-base), opacity var(--transition-base);
}

.customer-journey-card:hover .customer-journey-arrow {
  transform: translateX(4px);
  color: var(--color-saffron);
  opacity: 1;
}

/* Title & Description */
.customer-journey-name {
  font-family: var(--font-family);
  font-size: clamp(16.5px, 1.2vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
  margin: 0 0 6px;
  transition: color var(--transition-base);
}

.customer-journey-card:hover .customer-journey-name {
  color: var(--color-teal);
}

.customer-journey-desc {
  font-family: var(--font-family);
  font-size: clamp(12.5px, 0.88vw, 13.5px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-dark-muted);
  margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .customer-journey-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 20px;
  }

  .customer-journey-card:nth-child(3) .customer-journey-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .customer-journey-section {
    padding: clamp(36px, 5vw, 52px) 0;
  }

  .customer-journey-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }

  .customer-journey-title {
    font-size: clamp(24px, 5.5vw, 28px);
  }

  .customer-journey-subtitle {
    font-size: 14px;
  }

  .customer-journey-intro {
    align-self: flex-start;
    max-width: 100%;
    font-size: 13.5px;
  }

  .customer-journey-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }

  .customer-journey-card:nth-child(even) .customer-journey-arrow,
  .customer-journey-card:last-child .customer-journey-arrow {
    display: none !important;
  }

  /* Extra Card (Card 5 is odd & last) spans full width */
  .customer-journey-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .customer-journey-card:nth-child(odd):last-child .customer-journey-thumb {
    aspect-ratio: 3 / 2;
    max-height: none;
  }

  .customer-journey-num {
    font-size: 24px;
  }

  .customer-journey-name {
    font-size: 15px;
    margin-bottom: 3px;
  }

  .customer-journey-desc {
    font-size: 11.5px;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .customer-journey-section {
    padding: 32px 0;
  }

  .customer-journey-header {
    margin-bottom: 20px;
    gap: 10px;
  }

  .customer-journey-title {
    font-size: 25px;
  }

  .customer-journey-subtitle {
    font-size: 13px;
  }

  .customer-journey-intro {
    font-size: 12.5px;
    line-height: 1.45;
  }

  /* 2 Cards in One Row / Line on Mobile View */
  .customer-journey-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
  }

  .customer-journey-card {
    background: #FFFFFF;
    border: 1px solid rgba(11, 29, 58, 0.08);
    border-radius: 12px;
    padding: 8px 8px 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* Extra card is full width */
  .customer-journey-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .customer-journey-card:nth-child(odd):last-child .customer-journey-thumb {
    aspect-ratio: 3 / 2;
    max-height: none;
  }

  .customer-journey-thumb {
    margin-bottom: 8px;
    border-radius: 8px;
  }

  .customer-journey-meta {
    margin-bottom: 2px;
  }

  .customer-journey-num {
    font-size: 20px;
    line-height: 1;
  }

  .customer-journey-card:nth-child(even) .customer-journey-arrow,
  .customer-journey-card:last-child .customer-journey-arrow {
    display: none !important;
  }

  .customer-journey-name {
    font-size: 14px;
    margin-bottom: 2px;
    line-height: 1.25;
  }

  .customer-journey-desc {
    font-size: 11px;
    line-height: 1.35;
  }
}

@media (max-width: 360px) {
  .customer-journey-grid {
    gap: 12px 8px;
  }

  .customer-journey-card {
    padding: 6px 6px 8px;
  }

  .customer-journey-num {
    font-size: 18px;
  }

  .customer-journey-name {
    font-size: 13px;
  }

  .customer-journey-desc {
    font-size: 10px;
  }
}

/* ==========================================================================
   The Distroo Engine Section
   Exact same-to-same UI matching signature brand diagram & reference visual.
   Zero Inline CSS, Zero Internal Styles.
   Device & Pixel Responsive (320px to 2560px+)
   ========================================================================== */
.distroo-engine-section {
  position: relative;
  width: 100%;
  max-width: 100vw;
  background: #F4FAF8;
  background: linear-gradient(180deg, #F8FCFB 0%, #EFF8F6 50%, #E6F4F1 100%);
  border-top: 1px solid rgba(0, 168, 142, 0.14);
  border-bottom: 1px solid rgba(0, 168, 142, 0.14);
  padding: clamp(28px, 3.2vw, 48px) 0 clamp(20px, 2.2vw, 32px);
  box-sizing: border-box;
  overflow: hidden;
}

.engine-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.engine-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 56px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Left Content Block */
.engine-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 460px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.engine-kicker {
  display: inline-block;
  font-family: var(--font-family);
  font-size: clamp(11px, 0.8vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: clamp(6px, 0.8vw, 10px);
  line-height: 1.3;
}

.engine-heading {
  font-size: clamp(26px, 3.8vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0A1628;
  margin-bottom: clamp(10px, 1.2vw, 14px);
  word-break: break-word;
  max-width: 100%;
}

.engine-desc {
  font-family: var(--font-family);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  color: #4B5563;
  margin-bottom: clamp(16px, 1.8vw, 22px);
  max-width: 100%;
}

/* Interactive Pill Card */
.engine-pill-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 12px;
  padding: 13px 18px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 168, 142, 0.06);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.engine-pill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.engine-pill-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.2);
  border-radius: 999px;
  padding: 2px 9px;
}

.engine-pill-name {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  color: #0B1D3A;
}

.engine-pill-desc {
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.48;
  color: #4B5563;
  margin: 0;
}

/* Right Visual Wrap */
.engine-visual-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.engine-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.engine-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 440px;
  display: block;
  user-select: none;
  touch-action: manipulation;
}

/* Hub Center Brand Elements */
.engine-hub-brand-name {
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 700;
  fill: #0B1D3A;
}

.engine-hub-brand-sub {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  fill: #4B5563;
}

.engine-hub-mark circle,
.engine-hub-mark path {
  transition: fill var(--transition-base), stroke var(--transition-base);
}

/* Concentric Arcs */
.engine-dashed-arc {
  stroke: #B5DDD5;
  stroke-linecap: round;
  stroke-dasharray: 4, 6;
  animation: engineDashesRotate 40s linear infinite;
}

@keyframes engineDashesRotate {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -100;
  }
}

/* Node styling - Larger, Bolder Points */
.engine-node {
  cursor: pointer;
  outline: none;
  transition: transform var(--transition-base);
}

.engine-connector-line {
  stroke: #B8DDD5;
  stroke-width: 1.8;
  transition: stroke var(--transition-base), stroke-width var(--transition-base);
}

.engine-connector-dot {
  fill: #0B1D3A;
  transition: fill var(--transition-base), r var(--transition-base);
}

.engine-node-icon path,
.engine-node-icon rect,
.engine-node-icon circle,
.engine-node-icon polyline,
.engine-node-icon line {
  transition: stroke var(--transition-base), fill var(--transition-base), stroke-width var(--transition-base);
}

.engine-node-label {
  font-family: var(--font-family);
  font-size: 16.5px;
  font-weight: 700;
  fill: #0B1D3A;
  transition: fill var(--transition-base), font-weight var(--transition-base);
}

/* Hover & Active States */
.engine-node:hover .engine-connector-dot,
.engine-node.is-active .engine-connector-dot {
  fill: var(--color-teal);
  r: 7;
}

.engine-node:hover .engine-connector-line,
.engine-node.is-active .engine-connector-line {
  stroke: var(--color-teal);
  stroke-width: 2.6;
}

.engine-node:hover .engine-node-label,
.engine-node.is-active .engine-node-label {
  fill: #0B1D3A;
  font-weight: 800;
}

.engine-node:hover .engine-node-icon path[stroke],
.engine-node:hover .engine-node-icon rect[stroke],
.engine-node:hover .engine-node-icon circle[stroke],
.engine-node:hover .engine-node-icon polyline[stroke],
.engine-node:hover .engine-node-icon line[stroke],
.engine-node.is-active .engine-node-icon path[stroke],
.engine-node.is-active .engine-node-icon rect[stroke],
.engine-node.is-active .engine-node-icon circle[stroke],
.engine-node.is-active .engine-node-icon polyline[stroke],
.engine-node.is-active .engine-node-icon line[stroke] {
  stroke: var(--color-teal);
  stroke-width: 2.8;
}

.engine-node:hover .engine-node-icon circle[fill="#0B1D3A"],
.engine-node:hover .engine-node-icon rect[fill="#0B1D3A"],
.engine-node.is-active .engine-node-icon circle[fill="#0B1D3A"],
.engine-node.is-active .engine-node-icon rect[fill="#0B1D3A"] {
  fill: var(--color-teal);
}

.engine-node:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Mobile Pill Switcher - Compact, refined 2-row chip pills */
.engine-mobile-nav {
  display: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 6px 6px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px 4px 4px;
  box-sizing: border-box;
}

.engine-mobile-nav::-webkit-scrollbar {
  display: none;
}

.engine-m-pill {
  flex: 0 0 auto;
  font-family: var(--font-family);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  padding: 4.5px 11px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #4B5563;
  border: 1px solid rgba(0, 168, 142, 0.22);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(11, 29, 58, 0.04);
  -webkit-tap-highlight-color: transparent;
}

.engine-m-pill:hover {
  background: #E8F5F2;
  color: #0B1D3A;
  border-color: var(--color-teal);
}

.engine-m-pill.is-active {
  background: var(--color-teal);
  color: #FFFFFF;
  border-color: var(--color-teal);
  box-shadow: 0 2px 8px rgba(0, 168, 142, 0.24);
}

/* Media Queries */
@media (max-width: 1024px) {
  .distroo-engine-section {
    padding: clamp(28px, 4vw, 42px) 0 clamp(20px, 3vw, 32px);
  }

  .engine-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 3.5vw, 32px);
    width: 100%;
    min-width: 0;
  }

  .engine-content {
    max-width: 640px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }

  .engine-pill-card {
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
  }

  .engine-visual-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .engine-stage {
    width: 100%;
    max-width: 720px;
    min-width: 0;
  }

  .engine-mobile-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 6px;
    padding: 10px 4px 4px;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@media (max-width: 768px) {
  .engine-container {
    padding: 0 clamp(14px, 4vw, 24px);
  }

  .engine-kicker {
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 800;
  }

  .engine-heading {
    font-size: clamp(24px, 6vw, 30px);
    margin-bottom: 10px;
  }

  .engine-desc {
    font-size: clamp(13.5px, 3.8vw, 15px);
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .engine-pill-card {
    padding: 12px 16px;
    border-radius: 12px;
  }

  .engine-pill-name {
    font-size: 13.5px;
  }

  .engine-pill-desc {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .engine-stage {
    max-width: 100%;
  }

  .engine-svg {
    max-width: 100%;
    min-width: 0;
  }

  .engine-node-label {
    font-size: 20px;
    font-weight: 800;
  }

  .engine-hub-brand-name {
    font-size: 30px;
  }

  .engine-hub-brand-sub {
    font-size: 16px;
  }

  .engine-connector-line {
    stroke-width: 2.4;
  }

  .engine-connector-dot {
    r: 6;
  }

  .engine-mobile-nav {
    gap: 6px 6px;
    padding: 10px 2px 4px;
  }

  .engine-m-pill {
    font-size: 11.5px;
    padding: 4.5px 10px;
  }
}

@media (max-width: 480px) {
  .distroo-engine-section {
    padding: 24px 0 18px;
  }

  .engine-container {
    padding: 0 12px;
  }

  .engine-heading {
    font-size: 25px;
  }

  .engine-desc {
    font-size: 13px;
    line-height: 1.48;
    margin-bottom: 14px;
  }

  .engine-pill-card {
    padding: 11px 14px;
  }

  .engine-pill-tag {
    font-size: 9.5px;
    padding: 2px 8px;
  }

  .engine-mobile-nav {
    gap: 5px 5px;
    padding: 8px 0 2px;
  }

  .engine-m-pill {
    font-size: 11px;
    padding: 4px 9px;
    min-height: auto;
  }

  .engine-node-label {
    font-size: 22px;
    font-weight: 800;
  }

  .engine-hub-brand-name {
    font-size: 32px;
  }

  .engine-hub-brand-sub {
    font-size: 17px;
  }
}

@media (max-width: 360px) {
  .engine-mobile-nav {
    gap: 4px 4px;
  }

  .engine-m-pill {
    font-size: 10px;
    padding: 3.5px 7.5px;
  }
}

/* ==========================================================================
   Advisor Journey Section (Next to Distroo Capabilities)
   Exact same-to-same UI matching reference screenshot:
   "FOR ADVISORS & PARTNERS"
   Heading: Advisor Journey - From Onboarding to Long-Term Success.
   6 Horizontal Steps with Connective Arrows: Recruit, Train, Enable, Sell, Service, Grow.
   Zero Inline CSS, Zero Internal Styles.
   Pixel & Multi-Device Responsive (320px to 2560px+)
   Typography: Global Font Style (Plus Jakarta Sans)
   ========================================================================== */
.advisor-journey-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(52px, 5.8vw, 84px) 0;
  box-sizing: border-box;
  overflow: hidden;
  border-top: 1px solid rgba(11, 29, 58, 0.06);
}

.advisor-journey-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* Header: Left Kicker & Headings, Right Intro Paragraph */
.advisor-journey-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 3.5vw, 56px);
  margin-bottom: clamp(36px, 4.2vw, 54px);
}

.advisor-journey-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.advisor-journey-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 14px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 10px;
  line-height: 1.2;
}

.advisor-journey-title {
  font-family: var(--font-family);
  font-size: clamp(28px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
  margin: 0 0 6px;
}

.advisor-journey-subtitle {
  font-family: var(--font-family);
  font-size: clamp(15px, 1.25vw, 16px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-dark-muted);
  margin: 0;
}

.advisor-journey-intro {
  font-family: var(--font-family);
  font-size: clamp(13.5px, 0.95vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-dark-muted);
  max-width: 440px;
  margin: 0;
  align-self: flex-end;
}

/* 6-Step Horizontal Flow Grid */
.advisor-journey-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  width: 100%;
  align-items: flex-start;
}

.advisor-journey-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  transition: transform var(--transition-base);
}

.advisor-journey-card:hover {
  transform: translateY(-3px);
}

/* Card Thumbnail */
.advisor-journey-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(0, 168, 142, 0.04);
  margin-bottom: clamp(14px, 1.5vw, 20px);
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}

.advisor-journey-card:hover .advisor-journey-thumb {
  border-color: rgba(0, 168, 142, 0.35);
}

.advisor-journey-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.advisor-journey-card:hover .advisor-journey-thumb img {
  transform: scale(1.05);
}

.advisor-journey-grow-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 168, 142, 0.04);
}

.advisor-journey-grow-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.advisor-journey-card:hover .advisor-journey-grow-thumb svg {
  transform: scale(1.03);
}

/* Step Meta: Number & Connecting Arrow */
.advisor-journey-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
}

.advisor-journey-num {
  font-family: var(--font-family);
  font-size: clamp(20px, 2.6vw, 20px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-teal);
  transition: color var(--transition-base);
}

.advisor-journey-card:hover .advisor-journey-num {
  color: var(--color-teal-hover);
}

.advisor-journey-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  opacity: 0.85;
  flex-shrink: 0;
  transition: transform var(--transition-base), color var(--transition-base), opacity var(--transition-base);
}

.advisor-journey-card:hover .advisor-journey-arrow {
  transform: translateX(4px);
  color: var(--color-saffron);
  opacity: 1;
}

/* Title & Description */
.advisor-journey-name {
  font-family: var(--font-family);
  font-size: clamp(16.5px, 1.2vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
  margin: 0 0 6px;
  transition: color var(--transition-base);
}

.advisor-journey-card:hover .advisor-journey-name {
  color: var(--color-teal);
}

.advisor-journey-desc {
  font-family: var(--font-family);
  font-size: clamp(12.5px, 0.88vw, 13.5px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-dark-muted);
  margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1120px) {
  .advisor-journey-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 20px;
  }

  .advisor-journey-card:nth-child(3) .advisor-journey-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .advisor-journey-section {
    padding: clamp(40px, 5vw, 56px) 0;
  }

  .advisor-journey-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  .advisor-journey-intro {
    align-self: flex-start;
    max-width: 100%;
  }

  .advisor-journey-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }

  .advisor-journey-card:nth-child(even) .advisor-journey-arrow,
  .advisor-journey-card:last-child .advisor-journey-arrow {
    display: none !important;
  }

  /* Extra Card (e.g. odd last child) spans full width */
  .advisor-journey-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .advisor-journey-card:nth-child(odd):last-child .advisor-journey-thumb {
    aspect-ratio: 3 / 2;
    max-height: none;
  }

  .advisor-journey-thumb {
    margin-bottom: 8px;
    border-radius: 10px;
  }

  .advisor-journey-num {
    font-size: 24px;
    line-height: 1;
  }

  .advisor-journey-name {
    font-size: 15px;
    margin-bottom: 2px;
  }

  .advisor-journey-desc {
    font-size: 11.5px;
    line-height: 1.4;
  }
}

@media (max-width: 440px) {
  .advisor-journey-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
  }

  .advisor-journey-card:nth-child(even) .advisor-journey-arrow,
  .advisor-journey-card:last-child .advisor-journey-arrow {
    display: none !important;
  }

  .advisor-journey-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .advisor-journey-card:nth-child(odd):last-child .advisor-journey-thumb {
    aspect-ratio: 3 / 2;
    max-height: none;
  }

  .advisor-journey-num {
    font-size: 20px;
  }

  .advisor-journey-name {
    font-size: 14px;
  }

  .advisor-journey-desc {
    font-size: 11px;
    line-height: 1.35;
  }
}

@media (max-width: 360px) {
  .advisor-journey-grid {
    gap: 12px 8px;
  }

  .advisor-journey-num {
    font-size: 18px;
  }

  .advisor-journey-name {
    font-size: 13px;
  }

  .advisor-journey-desc {
    font-size: 10px;
  }
}

/* ==========================================================================
   Our Impact Section (Next to Distroo Capabilities)
   Exact same-to-same UI matching reference screenshot:
   Dark Corporate Ambience, Playfair Serif Headline, 4 Metrics with Dividers.
   Zero Inline CSS, Zero Internal Styles.
   Pixel & Multi-Device Responsive (320px to 2560px+)
   ========================================================================== */
.impact-strip-section {
  position: relative;
  width: 100%;
  background-color: #071326;
  background-image:
    linear-gradient(135deg, rgba(7, 19, 38, 0.90) 0%, rgba(5, 11, 21, 0.94) 100%),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: clamp(20px, 2.2vw, 32px) 0;
  box-sizing: border-box;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.impact-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.impact-layout {
  display: grid;
  grid-template-columns: minmax(280px, 390px) 1fr;
  align-items: center;
  gap: clamp(32px, 4.5vw, 64px);
  width: 100%;
}

/* Left Content Column */
.impact-lead-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.impact-kicker {
  display: inline-block;
  font-family: var(--font-family);
  font-size: clamp(10.5px, 0.75vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: clamp(6px, 0.8vw, 10px);
  line-height: 1.25;
}

.impact-heading {
  font-family: var(--font-family);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0;
}

/* Right Stats Row with Vertical Dividers */
.impact-metrics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: clamp(8px, 1.5vw, 24px);
}

.impact-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 2px;
  box-sizing: border-box;
  transition: transform var(--transition-base);
}

.impact-stat-item:hover {
  transform: translateY(-2px);
}

.impact-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  margin-bottom: 6px;
  transition: transform var(--transition-base), color var(--transition-base);
}

.impact-stat-item:hover .impact-stat-icon {
  color: var(--color-teal);
  transform: scale(1.08);
}

.impact-stat-number {
  font-family: var(--font-family);
  font-size: clamp(22px, 2.0vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 3px;
  white-space: nowrap;
}

.impact-stat-label {
  font-family: var(--font-family);
  font-size: clamp(12px, 0.85vw, 13.5px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
  white-space: normal;
  text-align: center;
}

/* Thin Vertical Divider */
.impact-divider {
  width: 1px;
  height: clamp(38px, 3.8vw, 48px);
  background-color: rgba(255, 255, 255, 0.20);
  flex-shrink: 0;
}

/* Responsive Scaling */
@media (max-width: 1024px) {
  .impact-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .impact-lead-col {
    align-items: center;
    text-align: center;
  }

  .impact-metrics-row {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .impact-strip-section {
    padding: clamp(20px, 3.5vw, 26px) 0;
  }

  .impact-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
  }

  .impact-divider {
    display: none;
  }

  .impact-stat-item {
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-sizing: border-box;
  }

  .impact-stat-icon {
    margin-bottom: 4px;
  }

  .impact-stat-icon svg {
    width: 22px;
    height: 22px;
  }

  .impact-stat-number {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .impact-stat-label {
    font-size: 11.5px;
    line-height: 1.25;
  }
}

@media (max-width: 480px) {
  .impact-strip-section {
    padding: 18px 0;
  }

  .impact-metrics-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 8px;
  }

  .impact-stat-item {
    padding: 7px 5px;
    border-radius: 8px;
  }

  .impact-stat-icon {
    margin-bottom: 3px;
  }

  .impact-stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .impact-stat-number {
    font-size: 18px;
    margin-bottom: 1px;
  }

  .impact-stat-label {
    font-size: 11px;
    line-height: 1.25;
  }
}

@media (max-width: 360px) {
  .impact-metrics-row {
    gap: 6px 6px;
  }

  .impact-stat-item {
    padding: 6px 4px;
  }

  .impact-stat-icon svg {
    width: 18px;
    height: 18px;
  }

  .impact-stat-number {
    font-size: 17px;
  }

  .impact-stat-label {
    font-size: 10px;
  }
}

/* ==========================================================================
   Partner & Client Network Section
   Exact same-to-same 7x3 geometric brand logo grid with fine divider borders,
   10px outer border radius, centered responsive scaling.
   Zero Inline CSS, Zero Internal Styles.
   ========================================================================== */
.partners-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(28px, 3.2vw, 44px) 0 clamp(32px, 3.6vw, 48px);
  margin: 0;
  border: none;
  box-shadow: none;
}

.partners-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

.partners-header {
  margin-bottom: clamp(18px, 2vw, 24px);
}

.partners-subheading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  margin-bottom: 8px;
  line-height: 1.2;
}

.partners-heading {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
  margin: 0;
}

/* 7x3 Grid with 1px divider lines and 10px rounded border */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #EAEAEA;
  gap: 1px;
  border: 1px solid #EAEAEA;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.partner-cell {
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 24px);
  min-height: clamp(84px, 8.5vw, 108px);
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.partner-cell:hover {
  background-color: #F8FAFC;
}

.partner-logo {
  max-width: 88%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-fast);
}

.partner-cell:hover .partner-logo {
  transform: scale(1.06);
}

/* Responsive Scaling for Partner Grid */
@media (max-width: 1024px) {
  .partners-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .partner-logo {
    max-height: 52px;
  }
}

@media (max-width: 768px) {
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .partners-heading {
    font-size: 25px;
  }

  .partner-cell {
    min-height: 72px;
    padding: 10px 12px;
  }

  .partner-logo {
    max-height: 42px;
    max-width: 85%;
  }
}

@media (max-width: 480px) {
  .partners-section {
    padding: 24px 0 28px;
  }

  .partners-heading {
    font-size: 25px;
  }

  /* 3 Logos in One Row / Line on Mobile View */
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .partner-cell {
    min-height: 60px;
    padding: 8px 10px;
  }

  .partner-logo {
    max-height: 34px;
    max-width: 82%;
  }
}

@media (max-width: 360px) {
  .partner-cell {
    min-height: 52px;
    padding: 6px 8px;
  }

  .partner-logo {
    max-height: 28px;
    max-width: 80%;
  }
}

/* ==========================================================================
   Testimonials Section ("What Our Clients Say")
   Reference UI: 3 Cards in View, Soft Quote Marks, 5-Star Ratings,
   Client Avatars & Roles, Prev/Next Carousel Nav, Dynamic Dots,
   10px Card Border Radius, Cohesive Distroo Brand Colors.
   Strict Rules: Zero Inline CSS, Zero Internal Styles.
   ========================================================================== */
.testimonials-section {
  position: relative;
  width: 100%;
  background: radial-gradient(120% 120% at 50% 0%, #F5F7FB 0%, #EDF2F7 100%);
  padding: clamp(38px, 4.5vw, 58px) 0 clamp(34px, 4vw, 52px);
  margin: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 18% 20%, rgba(0, 168, 142, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 82% 35%, rgba(11, 29, 58, 0.035) 0%, transparent 55%);
  pointer-events: none;
}

.testimonials-container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
  z-index: 1;
}

/* Header: Left Heading & Subtitle, Right Carousel Buttons */
.testimonials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(24px, 2.8vw, 36px);
}

.testimonials-header-content {
  flex: 1;
  max-width: 680px;
}

.testimonials-subheading {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 12px;
  margin-bottom: 8px;
  line-height: 1.2;
}

.testimonials-heading {
  font-size: clamp(26px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 6px;
}

.testimonials-heading-accent {
  color: var(--color-teal);
  display: inline-block;
}

.testimonials-subtitle {
  font-size: clamp(13px, 1vw, 15px);
  color: #64748B;
  margin: 0;
  font-weight: 500;
}

/* Prev / Next Carousel Controls */
.testimonials-nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.testimonials-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
  padding: 0;
  outline: none;
  box-sizing: border-box;
}

.btn-testimonials-prev {
  background-color: var(--color-white);
  border: 1px solid #E2E8F0;
  color: var(--color-navy);
  box-shadow: none;
}

.btn-testimonials-prev:hover {
  background-color: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateX(-2px);
  box-shadow: none;
}

.btn-testimonials-next {
  background-color: var(--color-teal);
  border: 1px solid var(--color-teal);
  color: var(--color-white);
  box-shadow: none;
}

.btn-testimonials-next:hover {
  background-color: var(--color-teal-hover);
  border-color: var(--color-teal-hover);
  transform: translateX(2px);
  box-shadow: none;
}

/* Testimonials Carousel Track (Exact 3 Cards in View on Desktop) */
:root {
  --testimonials-gap: clamp(16px, 1.8vw, 24px);
}

.testimonials-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  gap: var(--testimonials-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 14px;
}

.testimonials-track::-webkit-scrollbar {
  display: none;
}

/* Individual Testimonial Card: Pure White, 10px Border Radius */
.testimonial-card {
  flex: 0 0 calc((100% - var(--testimonials-gap) * 2) / 3);
  width: calc((100% - var(--testimonials-gap) * 2) / 3);
  max-width: calc((100% - var(--testimonials-gap) * 2) / 3);
  background-color: var(--color-white);
  border: 1px solid #E6EDF5;
  border-radius: 10px;
  padding: clamp(22px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px -2px rgba(11, 29, 58, 0.05);
  scroll-snap-align: start;
  box-sizing: border-box;
  transition: transform var(--transition-fast), box-shadow var(--transition-base), border-color var(--transition-base);
}

.testimonial-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 168, 142, 0.35);
  box-shadow: 0 10px 28px -4px rgba(11, 29, 58, 0.09);
}

/* Card Top: Official Google Icon on Left, 5 Stars on Right */
.testimonial-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.testimonial-google-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.testimonial-rating {
  color: #F59E0B;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
  user-select: none;
}

/* Card Body: Quote text */
.testimonial-quote {
  font-size: 13.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 22px;
  flex-grow: 1;
}

/* Card Bottom: Author Avatar, Name & Role */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
}

/* User Colorful Icons */
.testimonial-user-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.testimonial-card:hover .testimonial-user-icon {
  transform: scale(1.06);
}

.user-icon-blue {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  color: #4338CA;
  border: 1px solid #C7D2FE;
}

.user-icon-teal {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: #047857;
  border: 1px solid #A7F3D0;
}

.user-icon-orange {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  color: #C2410C;
  border: 1px solid #FED7AA;
}

.user-icon-purple {
  background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
  color: #7E22CE;
  border: 1px solid #E9D5FF;
}

.user-icon-rose {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
  color: #BE123C;
  border: 1px solid #FECDD3;
}

.user-icon-cyan {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  color: #0369A1;
  border: 1px solid #BAE6FD;
}

.testimonial-author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.testimonial-author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-author-role {
  font-size: 12px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dynamic Pagination Indicator Dots */
.testimonials-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(18px, 2.2vw, 28px);
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #475569;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  outline: none;
}

.testimonial-dot:hover:not(.active) {
  background-color: var(--color-navy);
}

.testimonial-dot.active {
  width: 26px;
  background-color: var(--color-navy);
}

/* Responsive Scaling for Testimonials */
@media (max-width: 991px) {
  .testimonial-card {
    flex: 0 0 calc((100% - var(--testimonials-gap)) / 2);
    width: calc((100% - var(--testimonials-gap)) / 2);
    max-width: calc((100% - var(--testimonials-gap)) / 2);
  }
}

@media (max-width: 640px) {
  .testimonials-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .testimonials-nav-controls {
    align-self: flex-end;
  }

  .testimonial-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .testimonials-heading {
    font-size: 25px;
  }
}

/* ==========================================================================
   Home Blog Section ("Stay Ahead with Insurance Knowledge")
   Positioned next to Testimonials ("What Our Clients Say")
   Desktop: 4 Cards in one row / line.
   Tablet: 2 Cards in view.
   Mobile: Smooth sliding carousel track with swipe gestures, snap, and dots.
   UI Consistency: Navy typography, Teal accents, Crisp borders, No Box Shadow.
   Strict Rules: Zero Inline CSS, Zero Internal Styles.
   ========================================================================== */
:root {
  --home-blog-gap: clamp(16px, 1.8vw, 24px);
}

.home-blog-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #EEF2F7;
  padding: clamp(40px, 4.8vw, 64px) 0 clamp(36px, 4.2vw, 56px);
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.home-blog-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0, 168, 142, 0.035) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(11, 29, 58, 0.03) 0%, transparent 45%);
  pointer-events: none;
}

.home-blog-container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* Header Row: Subheading, Heading, Controls */
.home-blog-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(24px, 2.8vw, 36px);
}

.home-blog-header-content {
  flex: 1;
  max-width: 720px;
}

.home-blog-subheading {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 12px;
  margin-bottom: 8px;
  line-height: 1.2;
}

.home-blog-heading {
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 6px;
}

.home-blog-heading-accent {
  color: var(--color-teal);
  display: inline-block;
}

.home-blog-subtitle {
  font-size: clamp(13px, 0.95vw, 14.5px);
  color: #64748B;
  margin: 0;
  line-height: 1.5;
  font-weight: 500;
}

/* Nav Controls */
.home-blog-nav-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.home-blog-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  text-decoration: none;
  transition: all var(--transition-base);
  margin-right: 4px;
}

.home-blog-view-all-link svg {
  transition: transform var(--transition-fast);
}

.home-blog-view-all-link:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.home-blog-view-all-link:hover svg {
  transform: translateX(3px);
}

.home-blog-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
  padding: 0;
  outline: none;
  box-sizing: border-box;
}

.btn-home-blog-prev {
  background-color: var(--color-white);
  border: 1px solid #E2E8F0;
  color: var(--color-navy);
}

.btn-home-blog-prev:hover {
  background-color: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateX(-2px);
}

.btn-home-blog-next {
  background-color: var(--color-teal);
  border: 1px solid var(--color-teal);
  color: var(--color-white);
}

.btn-home-blog-next:hover {
  background-color: var(--color-teal-hover);
  border-color: var(--color-teal-hover);
  transform: translateX(2px);
}

/* Track Wrapper & Sliding Track */
.home-blog-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.home-blog-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--home-blog-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 2px 14px;
  margin: 0;
}

.home-blog-track::-webkit-scrollbar {
  display: none;
}

/* DESKTOP: Exactly 4 Cards in One Row / Line */
.home-blog-card {
  flex: 0 0 calc((100% - (var(--home-blog-gap) * 3)) / 4);
  width: calc((100% - (var(--home-blog-gap) * 3)) / 4);
  max-width: calc((100% - (var(--home-blog-gap) * 3)) / 4);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  box-shadow: none !important;
  box-sizing: border-box;
}

.home-blog-card:hover {
  transform: translateY(-5px);
  border-color: #CBD5E1;
}

/* Card Media */
.home-blog-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #F1F5F9;
  text-decoration: none;
}

.home-blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.home-blog-card:hover .home-blog-card-img {
  transform: scale(1.06);
}

.home-blog-badge-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  background-color: rgba(11, 29, 58, 0.85);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
  pointer-events: none;
}

/* Card Content */
.home-blog-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 16px 16px 16px;
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.home-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748B;
  font-weight: 550;
  margin-bottom: 8px;
}

.home-blog-meta-dot {
  color: #94A3B8;
}

.home-blog-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.38;
  color: var(--color-navy);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.76em;
}

.home-blog-card-title a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.home-blog-card-title a:hover {
  color: var(--color-teal);
}

.home-blog-card-excerpt {
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748B;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.home-blog-view-more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-teal);
  text-decoration: none;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  margin-top: auto;
  transition: color var(--transition-fast);
}

.home-blog-view-more:hover {
  color: var(--color-navy);
}

.home-blog-view-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(0, 168, 142, 0.1);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.home-blog-card:hover .home-blog-view-arrow,
.home-blog-view-more:hover .home-blog-view-arrow {
  background-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateX(3px);
}

/* Dynamic Pagination Dots */
.home-blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(20px, 2.5vw, 30px);
}

.home-blog-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background-color: #475569;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width var(--transition-base), background-color var(--transition-base);
  outline: none;
}

.home-blog-dot.active {
  width: 26px;
  background-color: var(--color-navy);
}

.home-blog-dot:hover:not(.active) {
  background-color: var(--color-navy);
}

/* RESPONSIVE SCALING */
/* Tablet (1024px down): 2 Cards in view */
@media (max-width: 1024px) {
  .home-blog-card {
    flex: 0 0 calc((100% - var(--home-blog-gap)) / 2);
    width: calc((100% - var(--home-blog-gap)) / 2);
    max-width: calc((100% - var(--home-blog-gap)) / 2);
  }

  .home-blog-header {
    flex-wrap: wrap;
    align-items: flex-end;
  }
}

/* Mobile Devices (768px down): Smooth Carousel / Sliding with Touch Gestures */
@media (max-width: 768px) {
  .home-blog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }

  .home-blog-nav-controls {
    width: 100%;
    justify-content: space-between;
  }

  .home-blog-view-all-link {
    margin-right: auto;
  }

  .home-blog-track {
    gap: 14px;
    padding-bottom: 10px;
  }

  .home-blog-card {
    /* 82vw width enables card peek indicating horizontal scrollability */
    flex: 0 0 clamp(260px, 82vw, 320px);
    width: clamp(260px, 82vw, 320px);
    max-width: clamp(260px, 82vw, 320px);
  }

  .home-blog-card-title {
    font-size: 14px;
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .home-blog-card {
    flex: 0 0 84vw;
    width: 84vw;
    max-width: 84vw;
  }

  .home-blog-heading {
    font-size: 25px;
  }
}

/* ==========================================================================
   Corporate Wellbeing Banner Section ("Wellbeing for your people")
   Reference UI: Deep Navy Banner, Meditating Visual, 33% Productivity Metric,
   Pill Category Tags, Compact & User-Friendly Geometry
   Strict Rules: Zero Inline CSS, Zero Internal CSS, No Unnatural Gradients
   ========================================================================== */
.wellness-section {
  position: relative;
  width: 100%;
  background-color: var(--color-navy);
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.wellness-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wellness-banner {
  position: relative;
  width: 100%;
  background-color: var(--color-navy);
  padding: clamp(20px, 2.6vw, 36px) max(clamp(16px, 3.5vw, 40px), calc((100% - var(--container-max)) / 2 + clamp(16px, 3.5vw, 40px)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3.5vw, 48px);
  overflow: hidden;
  box-shadow: none;
  border: none;
  box-sizing: border-box;
}

/* Background Image from /assets */
.wellness-banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 1;
  pointer-events: none;
}

/* Text Protection Overlay */
.wellness-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(11, 29, 58, 0.95) 0%, rgba(11, 29, 58, 0.85) 45%, rgba(11, 29, 58, 0.2) 75%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Left Content Column */
.wellness-col.wellness-left {
  position: relative;
  z-index: 3;
  flex: 1 1 50%;
  max-width: 520px;
}

/* Right Content Column: Contact Form */
/* Right Content Column: Contact Form */
.wellness-col.wellness-right {
  position: relative;
  z-index: 3;
  flex: 0 0 340px;
  max-width: 340px;
  width: 100%;
}

.wellness-form-card {
  background: rgba(7, 21, 43, 0.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: none !important;
  box-sizing: border-box;
}

.wellness-form-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wellness-input-wrap {
  width: 100%;
}

/* Form fields: Sleek 32px height, high specificity to override general rules */
#wellness-lead-form .lead-form-input,
#wellness-lead-form .lead-form-select,
.wellness-lead-form .lead-form-input,
.wellness-lead-form .lead-form-select {
  width: 100%;
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 10px !important;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-family: var(--font-family);
  font-size: 12.5px !important;
  line-height: normal;
  color: #0F172A;
  background-color: #FFFFFF;
  outline: none;
  box-shadow: none !important;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
  margin: 0;
}

#wellness-lead-form .lead-form-input::placeholder {
  color: #94A3B8;
  font-size: 12.5px;
}

#wellness-lead-form .lead-form-input:hover,
#wellness-lead-form .lead-form-select:hover {
  border-color: #94A3B8;
}

#wellness-lead-form .lead-form-input:focus,
#wellness-lead-form .lead-form-select:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 2px rgba(0, 168, 142, 0.18) !important;
  background-color: #FFFFFF;
}

/* Phone input wrap: perfectly aligned prefix and input */
#wellness-lead-form .lead-phone-input-wrap {
  display: flex !important;
  align-items: stretch !important;
  width: 100%;
  height: 32px !important;
  margin: 0;
}

#wellness-lead-form .lead-phone-prefix,
.wellness-lead-form .lead-phone-prefix {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 700;
  color: #475569;
  background-color: #F1F5F9;
  border: 1px solid #CBD5E1;
  border-right: none;
  border-radius: 6px 0 0 6px;
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0;
}

#wellness-lead-form .lead-phone-input-wrap .lead-form-input {
  border-radius: 0 6px 6px 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* Dropdown/Select matching website UI */
#wellness-lead-form .lead-form-select,
.wellness-lead-form .lead-form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px 12px;
  padding-right: 28px !important;
  cursor: pointer;
  color: var(--color-navy);
  font-weight: 500;
}

#wellness-lead-form .lead-form-select option {
  background-color: #FFFFFF;
  color: #0B1D3A;
  font-size: 12.5px;
  padding: 5px 8px;
}

#wellness-lead-form .lead-form-select option[disabled] {
  color: #94A3B8;
}

/* Reduced Button Size & Zero box-shadow */
#wellness-lead-form .btn-wellness-submit,
.wellness-lead-form .btn-wellness-submit,
.wellness-lead-form .btn-wellness-submit:hover,
.wellness-lead-form .btn-wellness-submit:focus,
.wellness-lead-form .btn-wellness-submit:active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 160px;
  max-width: 100%;
  height: 32px !important;
  min-height: 32px !important;
  padding: 2px 4px 2px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  margin: 2px auto 0 !important;
  background-color: var(--color-teal);
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  box-shadow: none !important;
  gap: 7px;
  cursor: pointer;
  transition: all var(--transition-base);
  box-sizing: border-box;
}

#wellness-lead-form .btn-wellness-submit:hover,
.wellness-lead-form .btn-wellness-submit:hover {
  background-color: #008772;
  transform: translateY(-1px);
}

#wellness-lead-form .btn-wellness-submit .arrow-circle,
.wellness-lead-form .btn-wellness-submit .arrow-circle {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: var(--color-teal);
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

#wellness-lead-form .btn-wellness-submit .arrow-circle svg,
.wellness-lead-form .btn-wellness-submit .arrow-circle svg {
  width: 12px;
  height: 12px;
}

#wellness-lead-form .btn-wellness-submit:hover .arrow-circle,
.wellness-lead-form .btn-wellness-submit:hover .arrow-circle {
  background-color: #07152B;
  color: #FFFFFF;
  transform: translateX(2px);
}

#wellness-lead-form .lead-form-trust-strip,
.wellness-lead-form .lead-form-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

#wellness-lead-form .lead-form-success-alert,
.wellness-lead-form .lead-form-success-alert {
  background: rgba(0, 168, 142, 0.16);
  border: 1px solid var(--color-teal);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 6px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  box-shadow: none !important;
}

#wellness-lead-form .lead-alert-icon,
.wellness-lead-form .lead-alert-icon {
  color: #00D6B5;
  flex-shrink: 0;
}

.wellness-title {
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0 0 6px;
}

.wellness-desc {
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 12px;
  max-width: 480px;
}

.wellness-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.btn-wellness-call,
.btn-wellness-call:hover,
.btn-wellness-call:focus,
.btn-wellness-call:active {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #BEE7F5;
  color: #0E2E5D;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 5px 4px 18px;
  border-radius: 9999px;
  box-shadow: none !important;
  border: none;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.btn-wellness-call:hover {
  background-color: #A9DDF0;
  transform: translateY(-1px);
}

.wellness-arrow-badge {
  width: 28px;
  height: 28px;
  box-shadow: none !important;
  border-radius: 50%;
  background-color: rgba(14, 46, 93, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0E2E5D;
  transition: transform var(--transition-fast);
}

.btn-wellness-call:hover .wellness-arrow-badge {
  transform: translate(2px, -2px);
}

/* Micro Stat Chip with Avatars */
.wellness-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  padding: 4px 14px 4px 6px;
  color: var(--color-white);
}

.wellness-stat-avatars {
  display: flex;
  align-items: center;
}

.wellness-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-white);
  margin-left: -7px;
  display: block;
}

.wellness-avatar:first-child {
  margin-left: 0;
}

.wellness-stat-chip-text {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
}

.stat-highlight {
  font-weight: 800;
  color: #BEE7F5;
}

/* Category Pills */
.wellness-tags-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.wellness-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wellness-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}

.wellness-pill-tag svg {
  stroke: currentColor;
  transition: transform var(--transition-fast);
}

.wellness-pill-tag:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}

.wellness-pill-tag:hover svg {
  transform: translate(1px, -1px);
}

/* Responsive Scaling */
@media (max-width: 980px) {
  .wellness-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 18px;
    gap: 20px;
    min-height: auto;
  }

  .wellness-banner-overlay {
    background: linear-gradient(180deg, rgba(11, 29, 58, 0.95) 0%, rgba(11, 29, 58, 0.9) 50%, rgba(11, 29, 58, 0.75) 100%);
  }

  .wellness-col.wellness-left {
    max-width: 100%;
  }

  .wellness-col.wellness-right {
    max-width: 100%;
    flex: 1 1 auto;
  }
}

@media (max-width: 600px) {
  .wellness-banner {
    padding: 18px 14px;
    gap: 16px;
    min-height: auto;
    border-radius: 0;
  }

  .wellness-form-card {
    padding: 14px 12px;
    border-radius: 12px;
  }

  .wellness-form-fields {
    gap: 7px;
  }

  #wellness-lead-form .lead-form-input,
  #wellness-lead-form .lead-form-select,
  #wellness-lead-form .lead-phone-prefix,
  .wellness-lead-form .lead-form-input,
  .wellness-lead-form .lead-form-select,
  .wellness-lead-form .lead-phone-prefix {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 12.5px !important;
  }

  #wellness-lead-form .btn-wellness-submit,
  .wellness-lead-form .btn-wellness-submit {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 12.5px !important;
  }

  .wellness-title {
    font-size: 20px;
    margin: 0 0 4px;
    line-height: 1.25;
  }

  .wellness-desc {
    font-size: 12.5px;
    line-height: 1.45;
    margin: 0 0 10px;
    max-width: 100%;
  }

  .wellness-cta-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
  }

  .btn-wellness-call {
    width: auto;
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    gap: 9px;
    padding: 4px 5px 4px 16px;
    font-size: 12.5px;
    min-height: 34px;
  }

  .wellness-arrow-badge {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .wellness-arrow-badge svg {
    width: 12px;
    height: 12px;
  }
}

/* ==========================================================================
   Master Footer: 4-Column Layout, Dark Navy Background with Box Line Grid
   Strict Rules: Zero Inline CSS, Zero Internal CSS, 10px Container Radius
   ========================================================================== */
.site-footer {
  position: relative;
  width: 100%;
  background-color: #060D1A;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  padding: clamp(48px, 5.5vw, 68px) 0 28px;
  overflow: hidden;
  box-shadow: none;
}

/* Ambient Radial Grid Glow */
.footer-grid-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1360px;
  height: 380px;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0, 168, 142, 0.09) 0%, rgba(11, 29, 58, 0.35) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.footer-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* 5-Column Main Grid for Comprehensive Link Organization */
.footer-main-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.15fr 1fr 1.2fr;
  gap: clamp(20px, 2.5vw, 40px);
  margin-bottom: clamp(36px, 4vw, 48px);
}

/* Column 1: Brand & Narrative */
.footer-col-brand {
  display: flex;
  flex-direction: column;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-white);
  margin-bottom: 12px;
}

.footer-brand-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-brand-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-white);
}

.footer-tagline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  line-height: 1.3;
}

.footer-bio {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 20px;
  max-width: 320px;
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.footer-social-btn:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Columns 2 & 3: Link Sections */
.footer-col-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-white);
  margin: 0 0 16px;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.footer-link {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.footer-link:hover {
  color: var(--color-white);
  transform: translateX(3px);
}

.footer-accent-link {
  color: var(--color-teal);
  font-weight: 600;
}

.footer-accent-link:hover {
  color: #14D0B4;
}

/* Column 4: Contact Info */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.contact-icon {
  color: var(--color-teal);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-text {
  color: rgba(255, 255, 255, 0.72);
}

.contact-link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-link:hover {
  color: var(--color-white);
}

/* Compliance Disclaimer Strip */
.footer-compliance-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
  margin-bottom: 16px;
}

.footer-disclaimer-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.footer-disclaimer-text strong {
  color: rgba(255, 255, 255, 0.75);
}

/* Bottom Sub-Footer Bar */
.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-legal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-legal-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal-link:hover {
  color: var(--color-white);
}

.legal-divider {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
}

.btn-back-to-top {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.btn-back-to-top:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Footer Responsive Breakpoints */
@media (max-width: 1200px) {
  .footer-main-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .footer-col-brand {
    grid-column: span 3;
  }
}

@media (max-width: 900px) {
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer-col-brand {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 36px 0 20px;
    background-size: 32px 32px;
  }

  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer-col-brand,
  .footer-col,
  .footer-col-contact {
    grid-column: span 1;
    width: 100%;
  }

  .footer-bio {
    max-width: 100%;
  }

  .footer-col-title {
    font-size: 13.5px;
    margin-bottom: 10px;
  }

  .footer-links-list li {
    margin-bottom: 6px;
  }

  .footer-link {
    font-size: 12px;
  }

  .footer-tagline {
    font-size: 12.5px;
  }

  .footer-bio {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .footer-contact-item {
    font-size: 12px;
  }

  .footer-disclaimer-text {
    font-size: 10.5px;
    line-height: 1.45;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-copyright,
  .footer-legal-link {
    font-size: 11px;
  }

  .btn-back-to-top {
    align-self: flex-end;
    margin-top: -36px;
  }
}

/* ==========================================================================
   Contact Us Page Styles
   Clean, flat, non-boxy UI: subtle 1px borders, zero box shadows, zero unnatural gradients,
   10px container border-radius, elegant split layout, custom select dropdown, full-width Google Map.
   Strict Rules: Zero Inline CSS, Zero Internal Styles.
   ========================================================================== */
.contact-page-body {
  background-color: #F8FAFC;
  color: var(--color-navy);
}

/* ==========================================================================
   Inner Hero Section (Contact & Subpages)
   Clean photo background with dark overlay behind navbar and inner hero content.
   Left-aligned Page Title, Breadcrumb navigation, responsive spacing.
   Strict Rules: Zero Inline CSS, Zero Internal Styles.
   ========================================================================== */
.inner-hero {
  position: relative;
  width: 100%;
  min-height: clamp(340px, 42vh, 460px);
  background-color: var(--color-navy);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(120px, 16vh, 150px) clamp(16px, 3.5vw, 48px) clamp(44px, 5.5vh, 64px);
  box-sizing: border-box;
}

.inner-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.inner-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 19, 38, 0.82);
  z-index: 2;
  pointer-events: none;
}

/* Inner Hero with Pure Black Overlay (Strictly No Navy) */
.inner-hero.inner-hero-black {
  background-color: #000000;
}

.inner-hero.inner-hero-black .inner-hero-overlay,
.inner-hero-overlay.overlay-black {
  background: rgba(0, 0, 0, 0.55);
}

.inner-hero-content .ins-hub-nav-pills {
  justify-content: flex-start;
  margin-top: 24px;
  margin-bottom: 0;
}

.inner-hero-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.inner-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 720px;
}

/* Page Title (Primary in Inner Hero) */
.inner-hero-title {
  font-size: clamp(32px, 4.2vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
  margin: 0 0 12px;
}

.inner-hero-desc {
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
  max-width: 680px;
}

/* Breadcrumb Navigation (Below Page Title) */
.inner-hero-breadcrumb {
  margin: 0;
}

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

.breadcrumb-item {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--color-teal);
}

.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  user-select: none;
}

.breadcrumb-item.active {
  color: var(--color-teal);
  font-weight: 600;
}

/* Contact Main Section */
.contact-body-section {
  padding: clamp(36px, 4.5vw, 56px) 0 clamp(20px, 2.5vw, 32px);
  background-color: #F8FAFC;
}

.contact-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* 2-Column Split: Left Contact Info, Right Form */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  margin-bottom: clamp(40px, 4.8vw, 64px);
}

/* Left Column: Contact Details Card */
.contact-details-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: clamp(24px, 2.8vw, 36px);
  box-sizing: border-box;
}

.contact-card-title {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 8px;
}

.contact-card-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #F1F5F9;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-info-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
}

.contact-info-val {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a.contact-info-val:hover {
  color: var(--color-teal);
}

/* Response Commitment Box */
.contact-commitment-box {
  margin-top: 24px;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-commitment-icon {
  color: var(--color-teal);
  flex-shrink: 0;
}

.contact-commitment-text {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.45;
}

/* Right Column: Contact Form Card */
.contact-form-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: clamp(24px, 3vw, 40px);
  box-sizing: border-box;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  gap: 4px;
}

.contact-label .req {
  color: #DC2626;
  font-size: 14px;
}

.contact-input,
.contact-textarea,
.contact-select {
  width: 100%;
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--color-navy);
  background-color: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 11px 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--transition-fast);
}

.contact-input::placeholder,
.contact-textarea::placeholder {
  color: #94A3B8;
}

.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus {
  border-color: var(--color-teal);
}

.contact-textarea {
  resize: vertical;
  min-height: 110px;
}

/* Custom Styled Select Dropdown (Matching Distroo Website UI) */
.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}

.custom-select-trigger {
  width: 100%;
  height: 46px;
  padding: 10px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  background-color: #FFFFFF;
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  text-align: left;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.custom-select-trigger:hover {
  border-color: #94A3B8;
}

.custom-select-trigger:focus,
.custom-select.is-open .custom-select-trigger {
  border-color: var(--color-teal);
}

.custom-select-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--color-navy);
}

.custom-select-value.is-placeholder {
  color: #94A3B8;
  font-weight: 400;
}

.custom-select-arrow {
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 10px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.custom-select.is-open .custom-select-arrow {
  transform: rotate(180deg);
  color: var(--color-teal);
}

/* Custom Floating Dropdown Menu (Distroo UI) */
.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 6px;
  margin: 0;
  list-style: none;
  max-height: 270px;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.custom-select-menu::-webkit-scrollbar {
  width: 5px;
}

.custom-select-menu::-webkit-scrollbar-thumb {
  background-color: #CBD5E1;
  border-radius: 999px;
}

.custom-select.is-open .custom-select-menu {
  display: flex;
  animation: selectMenuFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes selectMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-navy);
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.custom-select-option:hover,
.custom-select-option:focus {
  background-color: rgba(0, 168, 142, 0.08);
  color: var(--color-teal);
}

.custom-select-option.is-selected {
  background-color: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
  font-weight: 600;
}

.custom-select-option .option-check {
  display: none;
  color: var(--color-teal);
  flex-shrink: 0;
}

.custom-select-option.is-selected .option-check {
  display: block;
}

/* Submit Button (Matching Distroo Website Signature Pill Button UI) */
.btn-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-color: var(--color-navy);
  color: var(--color-white);
  border: 1px solid var(--color-navy);
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: clamp(14px, 0.95vw, 15px);
  font-weight: 600;
  padding: 6px 6px 6px clamp(20px, 2vw, 26px);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  align-self: flex-start;
  box-sizing: border-box;
  white-space: nowrap;
}

.btn-contact-submit:hover {
  background-color: var(--color-navy-dark);
  border-color: var(--color-navy-dark);
  transform: translateY(-1px);
}

.btn-contact-submit .arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}

.btn-contact-submit:hover .arrow-circle {
  transform: translateX(2px);
}

.btn-contact-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.form-status-msg {
  display: none;
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 4px;
}

.form-status-msg.success {
  display: block;
  background-color: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.form-status-msg.error {
  display: block;
  background-color: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

/* Full Width Google Map Section */
.contact-map-section {
  padding-bottom: clamp(48px, 6vw, 72px);
  background-color: #F8FAFC;
}

.contact-map-header {
  margin-bottom: 16px;
}

.contact-map-title {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 6px;
}

.contact-map-desc {
  font-size: 13.5px;
  color: #64748B;
  margin: 0;
}

.contact-map-wrapper {
  width: 100%;
  height: clamp(320px, 32vw, 420px);
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  overflow: hidden;
  background-color: #E2E8F0;
  box-sizing: border-box;
}

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

/* Responsive Scaling for Contact Page */
@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .form-group-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .btn-contact-submit {
    width: auto;
    width: fit-content;
    max-width: fit-content;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 5px 6px 5px 18px;
  }

  .contact-details-card,
  .contact-form-card {
    padding: 20px 16px;
  }

  .contact-title {
    font-size: 26px;
  }

  .contact-map-wrapper {
    height: 280px;
  }
}

/* ==========================================================================
   14. Universal Button Arrow Cross Rotation (-45deg / ↗) on Hover & Click
   When hovering or clicking on any button across the website, the arrow
   smoothly rotates -45 degrees into a diagonal cross arrow (↗) with
   subtle tactile click feedback.
   Strict Rules: Zero Inline CSS, Zero Internal Styles.
   ========================================================================== */
.btn-appointment .arrow-circle svg,
.btn-assessment .cta-arrow svg,
.btn-advisor .cta-arrow-secondary svg,
.btn-view-services .cta-arrow svg,
.btn-plan-action .cta-arrow svg,
.btn-wellness-call .wellness-arrow-badge svg,
.btn-contact-submit .arrow-circle svg,
.btn-quote .cta-arrow svg {
  display: block;
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Hover, Focus, and Active (Click) Arrow Rotation to Right Top Side (↗) */
.btn-appointment:hover .arrow-circle svg,
.btn-appointment:focus-visible .arrow-circle svg,
.btn-appointment:active .arrow-circle svg,
.btn-assessment:hover .cta-arrow svg,
.btn-assessment:focus-visible .cta-arrow svg,
.btn-assessment:active .cta-arrow svg,
.btn-advisor:hover .cta-arrow-secondary svg,
.btn-advisor:focus-visible .cta-arrow-secondary svg,
.btn-advisor:active .cta-arrow-secondary svg,
.btn-view-services:hover .cta-arrow svg,
.btn-view-services:focus-visible .cta-arrow svg,
.btn-view-services:active .cta-arrow svg,
.btn-plan-action:hover .cta-arrow svg,
.btn-plan-action:focus-visible .cta-arrow svg,
.btn-plan-action:active .cta-arrow svg,
.btn-wellness-call:hover .wellness-arrow-badge svg,
.btn-wellness-call:focus-visible .wellness-arrow-badge svg,
.btn-wellness-call:active .wellness-arrow-badge svg,
.btn-contact-submit:hover .arrow-circle svg,
.btn-contact-submit:focus-visible .arrow-circle svg,
.btn-contact-submit:active .arrow-circle svg,
.btn-quote:hover .cta-arrow svg,
.btn-quote:focus-visible .cta-arrow svg,
.btn-quote:active .cta-arrow svg {
  transform: rotate(-45deg);
}

/* Tactile micro-press feedback on button click */
.btn-appointment:active,
.btn-assessment:active,
.btn-advisor:active,
.btn-view-services:active,
.btn-plan-action:active,
.btn-wellness-call:active,
.btn-contact-submit:active {
  transform: scale(0.98);
}

/* ==========================================================================
   15. FAQ & Inquiries Section — Compact Split Contact Form & Accordion
   Brand-Consistent UI: Left side Contact Form card, Right side Accordion.
   Strict Rules: Zero Inline CSS, Zero Internal Styles, Zero Box Shadows,
                 Solid brand colors (Navy, Teal, Saffron).
   ========================================================================== */

.faq-section {
  width: 100%;
  background-color: #F8FAFC;
  border-top: 1px solid #EEF2F7;
  padding: clamp(38px, 4.8vw, 62px) 0;
  box-sizing: border-box;
  position: relative;
}

.faq-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* Header */
.faq-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto clamp(20px, 2.5vw, 34px);
}

.faq-subheading {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 12px;
  margin-bottom: 8px;
}

.faq-heading {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 8px;
}

.faq-subheading-text {
  font-size: clamp(13px, 0.9vw, 14px);
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* 2-Column Grid: Left Contact Form (40%), Right Accordion (60%) */
.faq-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}

/* Left Column: Form Card */
.faq-form-column {
  width: 100%;
}

.faq-form-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: clamp(18px, 2vw, 24px);
  box-sizing: border-box;
  box-shadow: none !important;
}

.faq-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-contact-form .form-group {
  gap: 4px;
}

.faq-contact-form .form-group-row {
  gap: 12px;
}

.faq-contact-form .contact-label {
  font-size: 12px;
}

.faq-contact-form .contact-input {
  padding: 8px 12px;
  font-size: 13.5px;
  border-radius: 8px;
}

.faq-contact-form .custom-select-trigger {
  height: 39px;
  padding: 8px 12px;
  font-size: 13.5px;
  border-radius: 8px;
}

.faq-contact-form .contact-textarea {
  min-height: 72px;
  padding: 8px 12px;
  font-size: 13.5px;
  border-radius: 8px;
}

.btn-faq-submit {
  padding: 4px 4px 4px 18px;
  font-size: 13.5px;
  margin-top: 2px;
}

.btn-faq-submit .arrow-circle {
  width: 30px;
  height: 30px;
}

/* Right Column: Accordion */
.faq-accordion-column {
  width: 100%;
}

.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.faq-accordion-item {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  box-shadow: none !important;
}

.faq-accordion-item:hover {
  border-color: #CBD5E1;
}

.faq-accordion-item.is-open {
  border-color: rgba(0, 168, 142, 0.45);
}

.faq-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  color: var(--color-navy);
  outline: none;
  user-select: none;
  transition: color var(--transition-fast);
}

.faq-accordion-header:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: -2px;
}

.faq-question-text {
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.35;
  transition: color var(--transition-fast);
}

.faq-accordion-item.is-open .faq-question-text {
  color: var(--color-teal);
}

.faq-toggle-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #F1F5F9;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-accordion-header:hover .faq-toggle-icon {
  background-color: #E2E8F0;
}

.faq-accordion-item.is-open .faq-toggle-icon {
  background-color: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
}

.faq-icon-v {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
  transform-origin: center;
}

.faq-accordion-item.is-open .faq-icon-v {
  transform: scaleY(0);
  opacity: 0;
}

.faq-accordion-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  opacity: 0;
}

.faq-accordion-item.is-open .faq-accordion-drawer {
  max-height: 320px;
  opacity: 1;
}

.faq-accordion-body {
  padding: 0 18px 14px 18px;
  font-size: clamp(12.5px, 0.85vw, 13.5px);
  color: #475569;
  line-height: 1.55;
  border-top: 1px solid #F8FAFC;
  padding-top: 8px;
}

/* Responsive layout */
@media (max-width: 991px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .faq-header {
    text-align: left;
    margin-bottom: 24px;
  }
}

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

  .faq-form-card {
    padding: 16px 14px;
  }

  .faq-contact-form .form-group-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .faq-accordion-header {
    padding: 12px 14px;
  }

  .faq-accordion-body {
    padding: 0 14px 12px;
  }
}

/* ==========================================================================
   16. Blog Page Styles
   Clean, modern, flat card grid with category filter bar, author tags,
   and pagination.
   Strict Rules: Zero Inline CSS, Zero Internal Styles, Zero Box Shadows.
   ========================================================================== */

.blog-page-body {
  background-color: #F8FAFC;
  color: var(--color-navy);
  overflow-x: clip;
}

.blog-body-section {
  position: relative;
  width: 100%;
  padding: clamp(48px, 6vw, 76px) 0 clamp(64px, 8vw, 96px);
  background-color: #F8FAFC;
}

.blog-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 44px);
  box-sizing: border-box;
}

/* Split Layout: Main Content (Left) + Sticky Sidebar (Right) */
.blog-layout-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 3vw, 44px);
  align-items: stretch;
  width: 100%;
}

.blog-main-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

/* 3 Cards in One Row */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 22px);
  width: 100%;
}

/* Blog Card: Image, Heading, View More (Clickable with arrow) */
.blog-card {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  box-shadow: none !important;
  box-sizing: border-box;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: #CBD5E1;
}

.blog-card.is-hidden {
  display: none !important;
}

/* Card Image */
.blog-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background-color: #F1F5F9;
  text-decoration: none;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

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

/* Card Content: Heading + Clickable View More with Arrow */
.blog-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 18px 18px 18px;
  background-color: #FFFFFF;
}

.blog-card-title {
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 700;
  line-height: 1.42;
  color: var(--color-navy);
  margin: 0 0 16px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-title a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-card-title a:hover {
  color: var(--color-teal);
}

/* Clickable View More Link with Arrow */
.blog-card-view-more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-teal);
  text-decoration: none;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  margin-top: auto;
  transition: color var(--transition-fast);
}

.blog-card-view-more:hover {
  color: var(--color-navy);
}

.blog-view-more-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 168, 142, 0.1);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.blog-card:hover .blog-view-more-arrow,
.blog-card-view-more:hover .blog-view-more-arrow {
  background-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateX(3px);
}

/* Pagination Controls */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(36px, 4.5vw, 50px);
}

.blog-page-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--color-navy);
  background-color: #FFFFFF;
  color: var(--color-navy);
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: none !important;
  outline: none;
}

.blog-page-btn:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
}

.blog-page-btn:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.blog-page-btn.active {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
}

.blog-page-prev,
.blog-page-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1.5px solid var(--color-navy);
  background-color: #FFFFFF;
  color: var(--color-navy);
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: none !important;
  outline: none;
}

.blog-page-prev:hover:not(:disabled),
.blog-page-next:hover:not(:disabled) {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
}

.blog-page-prev:focus-visible,
.blog-page-next:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.blog-page-btn:disabled,
.blog-page-prev:disabled,
.blog-page-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.blog-page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  color: var(--color-navy);
  font-weight: 700;
  user-select: none;
}

.blog-pagination.is-hidden {
  display: none !important;
}

/* ==========================================================================
   Right Side: Sticky Sidebar (Search, Categories, Recent Posts, Tags)
   ========================================================================== */

.blog-sidebar {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  align-self: stretch;
}

.blog-sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 95px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 20;
}

.blog-widget {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: none !important;
  box-sizing: border-box;
}

.blog-widget-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 16px;
  padding-left: 10px;
  border-left: 3px solid var(--color-teal);
}

/* Widget 1: Search Form */
.blog-search-form {
  margin: 0;
}

.blog-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.blog-search-input {
  width: 100%;
  padding: 10px 42px 10px 14px;
  font-family: var(--font-family);
  font-size: 13.5px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background-color: #F8FAFC;
  color: var(--color-navy);
  outline: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  box-sizing: border-box;
}

.blog-search-input:focus {
  border-color: var(--color-teal);
  background-color: #FFFFFF;
}

.blog-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #64748B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.blog-search-btn:hover {
  color: var(--color-teal);
}

/* Widget 2: Categories List */
.blog-category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blog-category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition-fast);
  background-color: transparent;
  border: 1px solid transparent;
}

.blog-category-link:hover {
  background-color: #F8FAFC;
  color: var(--color-teal);
  border-color: #E2E8F0;
}

.blog-category-link.active {
  background-color: rgba(0, 168, 142, 0.08);
  color: var(--color-teal);
  font-weight: 700;
  border-color: rgba(0, 168, 142, 0.25);
}

.blog-category-name {
  line-height: 1.25;
}

.blog-category-count {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  background-color: #F1F5F9;
  color: #64748B;
  transition: all var(--transition-fast);
}

.blog-category-link.active .blog-category-count,
.blog-category-link:hover .blog-category-count {
  background-color: var(--color-teal);
  color: #FFFFFF;
}

/* Widget 3: Recent Posts */
.blog-recent-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-recent-thumb-link {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #F1F5F9;
  display: block;
}

.blog-recent-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-fast);
}

.blog-recent-item:hover .blog-recent-thumb {
  transform: scale(1.06);
}

.blog-recent-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-recent-date {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 500;
  margin-bottom: 3px;
}

.blog-recent-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

.blog-recent-title a {
  color: var(--color-navy);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.blog-recent-title a:hover {
  color: var(--color-teal);
}

/* Widget 4: Tags Cloud */
.blog-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.blog-tag-pill {
  display: inline-block;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.blog-tag-pill:hover {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
}

/* Widget 5: Advisory CTA Banner */
.blog-sidebar-cta {
  background: linear-gradient(145deg, #0B1D3A 0%, #162B4D 100%);
  border-radius: 12px;
  padding: 22px 18px;
  color: #FFFFFF;
}

.sidebar-cta-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.16);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 168, 142, 0.3);
}

.sidebar-cta-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.sidebar-cta-desc {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 16px;
}

.btn-sidebar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 4px 4px 14px;
  background-color: var(--color-saffron);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  transition: background-color var(--transition-fast);
  box-shadow: none !important;
  box-sizing: border-box;
}

.btn-sidebar-cta:hover {
  background-color: var(--color-saffron-hover);
}

.btn-sidebar-cta .arrow-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blog Single Detailed Article Styles */
.blog-article-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none !important;
}

.blog-article-hero-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  background-color: #E2E8F0;
}

.blog-article-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-article-inner {
  padding: clamp(24px, 4vw, 44px);
}

.blog-article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid #F1F5F9;
  margin-bottom: 22px;
}

.blog-article-meta-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

.blog-article-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background-color: rgba(0, 168, 142, 0.1);
  color: var(--color-teal);
  font-weight: 700;
  font-size: 12px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.blog-article-heading {
  font-size: clamp(20px, 2.8vw, 34px) !important;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.28;
  margin: 0 0 20px;
}

.blog-article-lead {
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.75;
  color: #334155;
  font-weight: 500;
  margin-bottom: 24px;
}

/* Key Takeaways Callout Card */
.blog-takeaways-box {
  background-color: #F0FDF4;
  border: 1px solid rgba(0, 168, 142, 0.35);
  border-left: 4px solid var(--color-teal);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 28px 0 32px;
}

.blog-takeaways-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.blog-takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-takeaways-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #1E293B;
}

.blog-takeaway-check {
  color: var(--color-teal);
  flex-shrink: 0;
  margin-top: 3px;
}

/* Article Typography */
.blog-article-subheading {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  color: var(--color-navy);
  margin: 36px 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--color-teal);
  line-height: 1.35;
}

.blog-article-h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 24px 0 10px;
  line-height: 1.4;
}

.blog-article-p {
  font-size: 15px;
  line-height: 1.78;
  color: #475569;
  margin-bottom: 18px;
}

.blog-article-list {
  margin: 14px 0 22px 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-article-list li {
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
}

.blog-article-list li strong {
  color: var(--color-navy);
}

/* Comparison Table */
.blog-table-responsive {
  width: 100%;
  overflow-x: auto;
  margin: 26px 0 30px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background-color: #FFFFFF;
}

.blog-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}

.blog-comparison-table th {
  background-color: var(--color-navy);
  color: #FFFFFF;
  font-weight: 700;
  padding: 13px 18px;
  white-space: nowrap;
}

.blog-comparison-table td {
  padding: 13px 18px;
  border-bottom: 1px solid #F1F5F9;
  color: #334155;
  line-height: 1.55;
  vertical-align: top;
}

.blog-comparison-table tr:nth-child(even) td {
  background-color: #F8FAFC;
}

.blog-comparison-table tr:last-child td {
  border-bottom: none;
}

/* Real-World Scenario / Callout Card */
.blog-scenario-card {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 22px 24px;
  margin: 26px 0 30px;
}

.blog-scenario-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-scenario-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* Advisory Pro-Tip Callout */
.blog-tip-card {
  background-color: #FFFBEB;
  border: 1px solid rgba(255, 138, 0, 0.35);
  border-left: 4px solid var(--color-saffron);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 26px 0 30px;
}

.blog-tip-title {
  font-size: 15px;
  font-weight: 700;
  color: #B45309;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-tip-text {
  font-size: 14px;
  line-height: 1.65;
  color: #78350F;
  margin: 0;
}

/* Author Bio Card */
.blog-author-bio-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 22px 24px;
  margin: 36px 0 28px;
}

.blog-author-bio-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #E2E8F0;
}

.blog-author-bio-info {
  display: flex;
  flex-direction: column;
}

.blog-author-bio-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
}

.blog-author-bio-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-teal);
  margin-top: 2px;
  margin-bottom: 8px;
}

.blog-author-bio-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

/* Post Navigation (Prev / Next) */
.blog-post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #E2E8F0;
}

.blog-post-nav-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background-color: #FFFFFF;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.blog-post-nav-card:hover {
  border-color: var(--color-teal);
  background-color: #F8FAFC;
}

.blog-post-nav-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-teal);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.blog-post-nav-card.next {
  text-align: right;
}

.blog-post-nav-card.next .blog-post-nav-label {
  justify-content: flex-end;
}

.blog-post-nav-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-detail-back-bar {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
  background-color: #FFFFFF;
  color: var(--color-navy);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: none !important;
}

.btn-blog-back:hover {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
}

/* Responsive Breakpoints */
@media (max-width: 1280px) {
  .blog-layout-wrapper {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
  }

  .blog-grid {
    gap: 14px;
  }
}

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

@media (max-width: 991px) {
  .blog-layout-wrapper {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .blog-sidebar {
    height: auto;
  }

  .blog-sidebar-sticky {
    position: static;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-body-section {
    padding: 36px 0 54px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-card-content {
    padding: 16px 14px 14px;
  }

  .blog-widget {
    padding: 18px 16px;
  }
}

/* ==========================================================================
   17. Media & Gallery Page Styles (Masonry Layout)
   Strict Rules: Zero Inline CSS, Zero Internal Styles, Zero Box Shadows.
   ========================================================================== */

.media-page-body {
  background-color: #F8FAFC;
  color: var(--color-navy);
  overflow-x: clip;
}

.media-section {
  position: relative;
  width: 100%;
  padding: clamp(48px, 6vw, 76px) 0 clamp(64px, 8vw, 96px);
  background-color: #F8FAFC;
}

.media-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 44px);
  box-sizing: border-box;
}

/* Media Filter Tabs Bar */
.media-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(36px, 4.5vw, 52px);
}

.media-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  box-shadow: none !important;
  box-sizing: border-box;
}

.media-filter-btn:hover {
  background-color: #F1F5F9;
  border-color: #CBD5E1;
  color: var(--color-navy);
  transform: translateY(-1px);
}

.media-filter-btn.active {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
}

.media-filter-count {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background-color: #F1F5F9;
  color: #64748B;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.media-filter-btn.active .media-filter-count {
  background-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

/* Masonry Layout */
.media-masonry-grid {
  column-count: 3;
  column-gap: 24px;
  width: 100%;
}

.media-masonry-item {
  break-inside: avoid;
  margin-bottom: 24px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  animation: fadeInMedia 0.35s ease forwards;
}

.media-masonry-item.is-hidden {
  display: none;
}

@keyframes fadeInMedia {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Media Card */
.media-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none !important;
  transition: transform var(--transition-base), border-color var(--transition-base);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.media-card:hover {
  transform: translateY(-4px);
  border-color: #CBD5E1;
}

.media-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #E2E8F0;
}

.media-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.media-card:hover .media-img {
  transform: scale(1.03);
}

.media-expand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 29, 58, 0) 45%, rgba(11, 29, 58, 0.65) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
  box-sizing: border-box;
}

.media-card:hover .media-expand-overlay {
  opacity: 1;
}

.media-expand-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.media-card:hover .media-expand-btn:hover {
  background-color: var(--color-teal);
  color: #FFFFFF;
  transform: scale(1.08);
}

/* Card Body */
.media-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.media-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.media-category-pill {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  line-height: 1.2;
}

.media-category-pill.pill-summits {
  background-color: #E6F7F4;
  color: var(--color-teal);
}

.media-category-pill.pill-awards {
  background-color: #FFF4E5;
  color: #D97706;
}

.media-category-pill.pill-partnerships {
  background-color: #EEF2F6;
  color: var(--color-navy);
}

.media-category-pill.pill-advisors {
  background-color: #F0FDF4;
  color: #16A34A;
}

.media-category-pill.pill-operations {
  background-color: #F1F5F9;
  color: #475569;
}

.media-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #64748B;
}

.media-card-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.35;
  margin: 0;
}

.media-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

/* Media Fullscreen Lightbox Modal */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background-color: rgba(5, 11, 21, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  box-sizing: border-box;
}

.media-lightbox.is-open {
  display: flex;
  animation: fadeInMedia 0.25s ease forwards;
}

.media-lightbox-content {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 20px;
  max-width: 980px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
  box-sizing: border-box;
}

.media-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-navy);
  z-index: 20;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  box-shadow: none !important;
}

.media-lightbox-close:hover {
  background-color: var(--color-navy);
  color: #FFFFFF;
  transform: rotate(90deg);
}

.media-lightbox-media-wrap {
  position: relative;
  width: 100%;
  max-height: 60vh;
  background-color: #050B15;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-lightbox-img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}

.media-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-navy);
  z-index: 10;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  box-shadow: none !important;
}

.media-lightbox-nav:hover {
  background-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.08);
}

.media-lightbox-prev {
  left: 16px;
}

.media-lightbox-next {
  right: 16px;
}

.media-lightbox-info {
  padding: 22px 28px 26px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  box-sizing: border-box;
}

.media-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.media-lightbox-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0;
}

.media-lightbox-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

/* Media Bottom CTA Section */
.media-cta-section {
  width: 100%;
  background-color: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  padding: clamp(56px, 7vw, 84px) 0;
}

.media-cta-card {
  background-color: #0B1D3A;
  border-radius: 20px;
  padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
  box-sizing: border-box;
}

.media-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(0, 168, 142, 0.18);
  border: 1px solid rgba(0, 168, 142, 0.35);
  color: #38E1C2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.media-cta-title {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 16px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.media-cta-desc {
  font-size: clamp(14px, 1.6vw, 16.5px);
  line-height: 1.65;
  color: #94A3B8;
  max-width: 620px;
  margin: 0 auto 32px;
}

.media-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.btn-media-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-teal);
  color: #FFFFFF;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  box-shadow: none !important;
  box-sizing: border-box;
}

.btn-media-primary:hover {
  background-color: #008f79;
  transform: translateY(-2px);
}

.btn-media-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  box-shadow: none !important;
  box-sizing: border-box;
}

.btn-media-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .media-masonry-grid {
    column-count: 2;
    column-gap: 20px;
  }

  .media-masonry-item {
    margin-bottom: 20px;
  }
}

@media (max-width: 640px) {
  .media-masonry-grid {
    column-count: 1;
    column-gap: 16px;
  }

  .media-masonry-item {
    margin-bottom: 16px;
  }

  .media-card-body {
    padding: 16px 16px 18px;
  }

  .media-filter-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .media-lightbox-nav {
    display: none;
  }

  .media-lightbox-content {
    border-radius: 14px;
  }

  .media-lightbox-info {
    padding: 16px 18px 20px;
  }
}

/* ==========================================================================
   FAQ Standalone Page Layout
   Full-width section with centered header + 2-column accordion grid.
   ========================================================================== */

.faq-page-section {
  width: 100%;
  background-color: #F8FAFC;
  padding: clamp(14px, 2vw, 24px) 0 clamp(44px, 5vw, 64px);
  box-sizing: border-box;
}

.faq-page-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 36px);
  box-sizing: border-box;
}

/* Centered section header */
.faq-page-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto clamp(20px, 2.5vw, 28px);
}

.faq-subheading {
  display: inline-block;
  padding: 4px 14px;
  background-color: rgba(0, 168, 142, 0.09);
  color: var(--color-teal);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 168, 142, 0.22);
}

.faq-heading,
.faq-page-title {
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 10px;
}

.faq-subheading-text,
.faq-page-subtitle {
  font-size: 14px;
  color: #64748B;
  line-height: 1.55;
  margin: 0 auto;
}

/* 2-column accordion grid - compact and balanced */
.faq-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  align-items: start;
}

/* Individual Accordion Item */
.faq-accordion-item {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  overflow: hidden;
}

.faq-accordion-item:hover {
  border-color: rgba(0, 168, 142, 0.4);
}

.faq-accordion-item.is-open {
  border-color: var(--color-teal);
}

/* Accordion Header / Button - compact touch target */
.faq-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  transition: background-color var(--transition-fast);
  box-sizing: border-box;
  user-select: none;
}

.faq-accordion-header:hover {
  background-color: rgba(248, 250, 252, 0.85);
}

.faq-question-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
  transition: color var(--transition-fast);
  flex: 1;
  pointer-events: none;
}

.faq-accordion-item.is-open .faq-question-text {
  color: var(--color-teal);
}

/* Plus/Minus Toggle Icon - compact 24px pill */
.faq-toggle-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background-color: #F1F5F9;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform 0.22s ease;
}

.faq-toggle-icon svg {
  width: 11px;
  height: 11px;
  display: block;
}

.faq-accordion-item:hover .faq-toggle-icon {
  background-color: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
}

.faq-accordion-item.is-open .faq-toggle-icon {
  background-color: var(--color-teal);
  color: #FFFFFF;
  transform: rotate(45deg);
}

/* Accordion Animated Expansion Drawer */
.faq-accordion-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
  overflow: hidden;
}

.faq-accordion-item.is-open .faq-accordion-drawer {
  grid-template-rows: 1fr;
}

.faq-accordion-body {
  min-height: 0;
  overflow: hidden;
  padding: 0 15px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  box-sizing: border-box;
  opacity: 0;
  transition: padding-bottom 0.25s ease-out, opacity 0.2s ease-out;
}

.faq-accordion-item.is-open .faq-accordion-body {
  padding-bottom: 13px;
  opacity: 1;
}

/* On tablet and smaller, collapse to 1 column */
@media (max-width: 860px) {
  .faq-page-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .faq-accordion-header {
    padding: 11px 14px;
  }
}

/* FAQ Page Bottom CTA Strip */
.faq-page-cta {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: 24px;
  border-top: 1px solid #E2E8F0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.faq-cta-prompt {
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
  margin: 0;
}

.faq-cta-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-faq-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn-faq-contact:hover {
  background-color: #F1F5F9;
  border-color: #94A3B8;
  transform: translateY(-1px);
}

.btn-faq-advisor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 9999px;
  background-color: var(--color-teal);
  color: #FFFFFF;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-faq-advisor:hover {
  background-color: #008f79;
  transform: translateY(-1px);
}

/* ==========================================================================
   19. Dedicated Services Page Styles
   Brand-consistent design: Hero, 6 Service Portfolio Cards,
   Advisor Contact / CTA Banner, and Interactive Service FAQs.
   Strict Rules: Zero Inline CSS, Modern Typography, Fluid Spacing.
   ========================================================================== */

.services-page-body {
  background-color: #F8FAFC;
  color: #334155;
}

.services-portfolio-section {
  width: 100%;
  padding: clamp(36px, 4.5vw, 60px) clamp(16px, 3.5vw, 40px) 0;
  box-sizing: border-box;
}

.services-portfolio-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.services-page-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.services-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 5px 14px;
  margin-bottom: 12px;
}

.services-page-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 12px;
}

.services-page-subtitle {
  font-size: clamp(14px, 1.1vw, 16.5px);
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* 6 Services Unified Grid (No Categories) */
.services-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 30px);
  margin-bottom: clamp(48px, 6vw, 72px);
}

.service-portfolio-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  scroll-margin-top: 100px;
  position: relative;
}

.service-portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border-color: rgba(0, 168, 142, 0.45);
}

.service-card-media-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #0B1D3A;
}

.service-card-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.service-portfolio-card:hover .service-card-media-img {
  transform: scale(1.06);
}

.service-card-media-gradient {
  display: none;
}

.service-card-icon-badge {
  position: absolute;
  bottom: -20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  border: 1px solid #E2E8F0;
  z-index: 3;
}

.icon-badge-teal {
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.1);
}

.icon-badge-navy {
  color: var(--color-navy);
  background-color: rgba(11, 29, 58, 0.08);
}

.icon-badge-saffron {
  color: #D97300;
  background-color: rgba(255, 138, 0, 0.12);
}

.service-card-content {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card-content .service-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 8px;
  line-height: 1.25;
}

.service-card-description {
  font-size: 14px;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 18px;
  font-weight: 500;
}

.service-card-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.4;
  font-weight: 500;
}

.service-check-icon {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(0, 168, 142, 0.14);
  color: var(--color-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.service-card-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
}

.service-view-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-teal);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.service-view-more svg {
  transition: transform var(--transition-fast);
}

.service-view-more:hover {
  color: #008f79;
}

.service-view-more:hover svg {
  transform: translateX(4px);
}

.btn-service-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-teal);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-service-action:hover {
  background-color: #008f79;
  transform: translateY(-1px);
}

.btn-service-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: var(--color-navy);
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.btn-service-contact:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
}

/* User-Friendly Advisory & Contact Card Banner */
.services-advisory-banner {
  background: linear-gradient(135deg, #0B1D3A 0%, #11284E 55%, #0A454E 100%);
  border-radius: 10px;
  padding: clamp(32px, 5vw, 48px);
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: clamp(24px, 3.5vw, 38px);
}

.services-advisory-banner::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(0, 168, 142, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.services-advisory-left {
  position: relative;
  z-index: 2;
}

.advisory-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: rgba(0, 168, 142, 0.22);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 12px;
}

.advisory-banner-title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 10px;
}

.advisory-banner-text {
  font-size: 14px;
  line-height: 1.6;
  color: #CBD5E1;
  margin: 0 0 20px;
  max-width: 580px;
}

.advisory-trust-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  color: #E2E8F0;
  font-weight: 600;
}

.advisory-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.advisory-trust-item svg {
  color: #34D399;
}

.services-advisory-card-right {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.advisory-card-header-text {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.advisory-card-sub {
  font-size: 12px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.4;
}

.advisory-card-contacts {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.advisory-contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.advisory-contact-link:hover {
  background: rgba(0, 168, 142, 0.2);
  color: #34D399;
}

.advisory-contact-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0, 168, 142, 0.25);
  color: #34D399;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-advisory-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-teal);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 10px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  box-shadow: none;
}

.btn-advisory-cta:hover {
  background-color: #008f79;
  transform: translateY(-1px);
  box-shadow: none;
}

/* Responsive Rules for Services Page */
@media (max-width: 1080px) {
  .services-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-advisory-banner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .services-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-card-media-wrap {
    height: 180px;
  }

  .services-advisory-banner {
    padding: 16px 14px;
    gap: 14px;
    border-radius: 12px;
    margin-bottom: 20px;
  }

  .services-advisory-banner::before {
    width: 160px;
    height: 160px;
    top: -50px;
    right: -50px;
  }

  .about-advisory-section {
    padding: 0 16px 24px;
  }

  .advisory-badge-pill {
    font-size: 9.5px;
    padding: 2.5px 8px;
    margin-bottom: 6px;
    gap: 4px;
  }

  .advisory-banner-title {
    font-size: 25px;
    margin: 0 0 6px;
    line-height: 1.25;
  }

  .advisory-banner-text {
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 10px;
  }

  .advisory-trust-highlights {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 12px;
    font-size: 11px;
  }

  .advisory-trust-item {
    gap: 4px;
    font-size: 11px;
  }

  .advisory-trust-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .services-advisory-card-right {
    padding: 12px 14px;
    gap: 9px;
    border-radius: 8px;
  }

  .advisory-card-header-text {
    font-size: 13px;
  }

  .advisory-card-sub {
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.35;
  }

  .advisory-card-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
  }

  .advisory-contact-link {
    padding: 6px 8px;
    font-size: 11px;
    gap: 6px;
    border-radius: 6px;
    justify-content: center;
  }

  .advisory-contact-link span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .advisory-contact-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }

  .advisory-contact-icon svg {
    width: 11px;
    height: 11px;
  }

  .btn-advisory-cta {
    padding: 7px 12px;
    font-size: 12px;
    min-height: 34px;
    border-radius: 6px;
    gap: 6px;
  }

  .btn-advisory-cta svg {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 380px) {
  .services-advisory-banner {
    padding: 14px 12px;
    gap: 12px;
  }

  .advisory-banner-title {
    font-size: 25px;
  }

  .advisory-banner-text {
    font-size: 11.5px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .services-advisory-card-right {
    padding: 10px 10px;
    gap: 8px;
  }

  .advisory-card-header-text {
    font-size: 12.5px;
  }

  .advisory-card-sub {
    font-size: 10.5px;
  }

  .advisory-card-contacts {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .advisory-contact-link {
    font-size: 10.5px;
    padding: 5px 8px;
    justify-content: flex-start;
  }

  .btn-advisory-cta {
    font-size: 11.5px;
    padding: 6px 10px;
    min-height: 32px;
  }
}

/* ==========================================================================
   20. About Us Page Styles - Intro Section
   Pixel-Perfect Multi-Device Responsiveness (320px to 2560px+)
   Zero Inline CSS, Zero Internal Styles, Zero Box Shadow, 15px Image Radius.
   ========================================================================== */

.about-page-body {
  background-color: #F8FAFC;
  color: #334155;
}

.about-intro-section {
  width: 100%;
  padding: clamp(36px, 5vw, 68px) clamp(16px, 3.5vw, 40px) clamp(20px, 3vw, 40px);
  box-sizing: border-box;
}

.about-intro-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.who-we-are-section {
  width: 100%;
  padding: clamp(24px, 3vw, 42px) clamp(16px, 3.5vw, 40px);
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.who-we-are-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.how-we-work-section {
  width: 100%;
  padding: clamp(32px, 4vw, 54px) clamp(16px, 3.5vw, 40px);
  background-color: #F8FAFC;
  box-sizing: border-box;
}

.how-we-work-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.about-pillars-section {
  width: 100%;
  padding: clamp(14px, 2vw, 24px) clamp(16px, 3.5vw, 40px) clamp(24px, 3.2vw, 42px);
  box-sizing: border-box;
}

.about-pillars-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.about-advisory-section {
  width: 100%;
  padding: 0 clamp(16px, 3.5vw, 40px) clamp(48px, 6vw, 84px);
  box-sizing: border-box;
}

.about-advisory-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.about-advisory-container .services-advisory-banner {
  margin-bottom: 0;
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}

/* Left Column: Content */
.about-intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.about-intro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 6px;
  padding: 3.5px 10px;
  margin-bottom: 12px;
}

.about-intro-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 12px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.about-intro-description {
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 20px;
  font-weight: 450;
  word-break: break-word;
}

/* Two Compact Highlight Points (Reduced Card Size) */
.about-intro-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 22px;
}

.about-intro-point-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}

.about-intro-point-item:hover {
  border-color: rgba(0, 168, 142, 0.45);
  background-color: #FAFCFD;
  transform: translateY(-1px);
}

.about-point-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 168, 142, 0.1);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.about-point-icon-box svg {
  width: 17px;
  height: 17px;
}

.about-point-icon-box.saffron {
  background: rgba(255, 138, 0, 0.1);
  color: #D97300;
}

.about-point-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.about-point-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}

.about-point-desc {
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
  font-weight: 450;
  word-break: break-word;
}

/* Compact Intro Actions / CTAs (Reduced Button Size) */
.about-intro-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.btn-about-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--color-teal);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  min-height: 38px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  text-align: center;
}

.btn-about-primary:hover {
  background-color: #008f79;
  transform: translateY(-1px);
}

.btn-about-primary svg {
  width: 13px;
  height: 13px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.btn-about-primary:hover svg {
  transform: translateX(3px);
}

.btn-about-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  color: var(--color-navy);
  border: 1px solid #CBD5E1;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  min-height: 38px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  text-align: center;
}

.btn-about-secondary:hover {
  background-color: #F1F5F9;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

/* Right Column: Increased Image Height & Framing */
.about-intro-media {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.about-intro-media-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  box-shadow: none;
  background-color: #0B1D3A;
  box-sizing: border-box;
}

.about-intro-img {
  width: 100%;
  height: clamp(320px, 38vw, 420px);
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-radius: 15px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-intro-media-wrap:hover .about-intro-img {
  transform: scale(1.025);
}

/* ==========================================================================
   21. About Us Page - Who We Are Section
   Asymmetric Editorial Photo Collage Grid (Matching Exact Reference Layout)
   Multi-Device Pixel-Perfect Responsiveness (320px to 2560px+)
   ========================================================================== */

/* 4-Column Asymmetric Masonry Grid */
.who-gallery-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr 1.05fr 0.9fr;
  gap: clamp(12px, 1.4vw, 18px);
  align-items: start;
}

/* Column Wrappers */
.who-col {
  display: flex;
  flex-direction: column;
}

/* Column 1: Text Statement Block */
.who-col-1 {
  margin-top: 0;
}

.who-statement-wrap {
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

.who-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.who-statement {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.34;
  margin: 0;
}

/* Staggered Vertical Offsets for Columns 2, 3, 4 (Desktop Alignment) */
.who-col-2 {
  margin-top: clamp(44px, 4.8vw, 64px);
  gap: clamp(10px, 1.2vw, 16px);
}

.who-col-3 {
  margin-top: clamp(4px, 0.6vw, 8px);
  gap: clamp(10px, 1.2vw, 16px);
}

.who-col-4 {
  margin-top: clamp(22px, 2.4vw, 36px);
  gap: clamp(10px, 1.2vw, 16px);
}

/* Image Wrappers (Slight rounded corners matching reference UI) */
.who-img-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-color: #0B1D3A;
  box-shadow: none;
}

.who-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.who-img-wrap:hover .who-img {
  transform: scale(1.035);
}

/* Photo Heights for Columns 1 and 2 (Reduced for Compact Section) */
.who-img-wrap-1 {
  height: clamp(160px, 16vw, 230px);
}

.who-img-wrap-2 {
  height: clamp(115px, 11vw, 145px);
}

.who-img-wrap-3 {
  height: clamp(115px, 11vw, 145px);
}

/* ==========================================================================
   Who We Are - Premium Masonry Content Cards (4 Cards in Columns 3 & 4)
   Light Background, Matching Border Color, Clean Typography, No Icons
   ========================================================================== */

.who-content-card {
  background-color: #FFFFFF;
  border-radius: 15px;
  box-shadow: none;
  padding: clamp(14px, 1.4vw, 18px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.who-content-card:hover {
  transform: translateY(-3px);
}

/* Separate Color Borders for Every Card */
.who-card-teal {
  border: 1.5px solid rgba(0, 168, 142, 0.4);
}

.who-card-saffron {
  border: 1.5px solid rgba(255, 138, 0, 0.42);
}

.who-card-blue {
  border: 1.5px solid rgba(37, 99, 235, 0.4);
}

.who-card-purple {
  border: 1.5px solid rgba(124, 58, 237, 0.38);
}

/* Background Subtle Gradient Accent */
.who-content-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.04;
}

.who-card-teal::after {
  background: var(--color-teal);
}

.who-card-saffron::after {
  background: var(--color-saffron);
}

.who-card-blue::after {
  background: #2563EB;
}

.who-card-purple::after {
  background: #7C3AED;
}

/* Subheadings */
.who-card-subheading {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
  display: inline-block;
}

.sub-teal {
  color: var(--color-teal);
}

.sub-saffron {
  color: #D97706;
}

.sub-blue {
  color: #2563EB;
}

.sub-purple {
  color: #7C3AED;
}

/* Headings (Normal Color) */
.who-card-heading {
  font-size: clamp(15px, 1.1vw, 16.5px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0 0 6px;
}

/* Descriptions (Normal Color) */
.who-card-description {
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.52;
  margin: 0;
}

/* ==========================================================================
   22. About Us Page - How We Work Section
   Left: Subheading, Heading, Short Description, Trust Points
   Right: Full-Width Card with 6 Steps (Strict: 10px Radius, Zero Box Shadow)
   ========================================================================== */

.how-we-work-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.25fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}

/* Left Column: Sticky on Scroll */
.how-work-left {
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: clamp(88px, 10vw, 115px);
  align-self: start;
  z-index: 5;
}

.how-work-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 3px 10px;
  margin-bottom: 12px;
  width: fit-content;
}

.how-work-title {
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 14px;
}

.how-work-desc {
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  color: #64748B;
  line-height: 1.62;
  margin: 0 0 22px;
}

.how-work-highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.how-highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-navy);
}

.how-highlight-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-teal);
  flex-shrink: 0;
}

.how-work-cta-wrap {
  display: flex;
}

/* Signature Distroo Pill CTA Button */
.btn-how-work-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background-color: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  font-weight: 600;
  padding: 5px 6px 5px clamp(18px, 1.8vw, 24px);
  border-radius: 9999px;
  transition: background-color var(--transition-base), transform var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  box-shadow: none;
  border: 1px solid transparent;
  width: fit-content;
}

.btn-how-work-cta:hover {
  background-color: var(--color-navy-dark);
  transform: translateY(-1px);
}

.btn-how-work-cta .arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.btn-how-work-cta:hover .arrow-circle {
  transform: translateX(2px);
  background-color: var(--color-teal);
  color: var(--color-white);
}

/* Right Column: 6 Step Cards Stack (No outer container box, only cards have boxes) */
.how-work-right {
  width: 100%;
}

.how-steps-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 18px);
  width: 100%;
}

/* Individual Step Cards (Strict: 10px Radius, Zero Box Shadow) */
.how-step-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: none;
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: border-color 0.25s ease, transform 0.2s ease;
  width: 100%;
}

.how-step-card:hover {
  border-color: rgba(0, 168, 142, 0.45);
  transform: translateY(-2px);
}

.how-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.how-step-num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step-num-1 {
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.1);
  border: 1px solid rgba(0, 168, 142, 0.25);
}

.step-num-2 {
  color: #D97706;
  background-color: rgba(255, 138, 0, 0.1);
  border: 1px solid rgba(255, 138, 0, 0.25);
}

.step-num-3 {
  color: #2563EB;
  background-color: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.step-num-4 {
  color: #7C3AED;
  background-color: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.25);
}

.step-num-5 {
  color: #059669;
  background-color: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.step-num-6 {
  color: #0284C7;
  background-color: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.how-step-tag {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94A3B8;
}

.how-step-title {
  font-size: clamp(15.5px, 1.15vw, 17px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.32;
  margin: 0 0 6px;
}

.how-step-desc {
  font-size: clamp(13px, 0.95vw, 13.8px);
  color: #64748B;
  line-height: 1.58;
  margin: 0;
}

/* ==========================================================================
   23. About Us Page - Mission, Vision & Core Values Section
   Strict Rules: 15px Card Radius, Zero Box Shadow, Matching Color Borders,
   No Hover Effect, Compact Clean Layout
   ========================================================================== */

.about-pillars-header {
  text-align: center;
  margin: 0 auto clamp(20px, 2.5vw, 32px);
}

.about-pillars-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 12px;
  margin-bottom: 8px;
}

.about-pillars-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 8px;
}

.about-pillars-subtitle {
  font-size: clamp(13px, 0.95vw, 14.5px);
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* 3 Pillars Cards Grid */
.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

/* Base Pillar Card */
.about-pillar-card {
  background-color: #FFFFFF;
  border-radius: 15px;
  box-shadow: none;
  padding: clamp(20px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Same Color Border of Cards (Matching Each Card's Icon Theme) */
.pillar-card-mission {
  border: 1.5px solid rgba(0, 168, 142, 0.38);
}

.pillar-card-vision {
  border: 1.5px solid rgba(255, 138, 0, 0.4);
}

.pillar-card-values {
  border: 1.5px solid rgba(37, 99, 235, 0.38);
}

/* Reduced Size Colorful Icons Without Background */
.pillar-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
  background: none;
  border: none;
  padding: 0;
  width: auto;
  height: auto;
}

.pillar-icon-wrap svg {
  width: 22px;
  height: 22px;
  display: block;
}

.pillar-icon-teal {
  color: var(--color-teal);
}

.pillar-icon-saffron {
  color: var(--color-saffron);
}

.pillar-icon-blue {
  color: #2563EB;
}

/* Card Heading & Description */
.pillar-card-heading {
  font-size: clamp(16.5px, 1.15vw, 18.5px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0 0 10px;
}

.pillar-card-description {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   Multi-Device Responsive Breakpoints for About Us Page
   Tailored for Mobile (320px–480px), Phablet (481px–767px),
   Tablet Portrait (768px–991px), Tablet Landscape (992px–1024px),
   and High-DPI / Desktop (1200px+)
   ========================================================================== */

/* Tablet Landscape & Medium Desktops (max-width: 1024px) */
@media (max-width: 1024px) {
  .about-intro-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
  }

  .about-intro-media-wrap,
  .about-intro-img {
    min-height: 420px;
  }

  .who-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .who-col-1 {
    grid-column: span 2;
  }

  .who-statement-wrap {
    margin-bottom: 20px;
  }

  .who-col-2,
  .who-col-3,
  .who-col-4 {
    margin-top: 0 !important;
    gap: 20px;
  }

  .about-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .pillar-card-values {
    grid-column: span 2;
  }
}

/* Tablet Portrait (max-width: 991px) */
@media (max-width: 991px) {
  .about-intro-section {
    padding: clamp(32px, 4.5vw, 48px) clamp(16px, 3.5vw, 32px);
  }

  .who-we-are-section {
    padding: clamp(22px, 3.2vw, 36px) clamp(16px, 3.5vw, 32px);
  }

  .how-we-work-section {
    padding: clamp(28px, 4vw, 44px) clamp(16px, 3.5vw, 32px);
  }

  .how-we-work-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .how-work-left {
    position: static;
    top: auto;
  }

  .about-pillars-section {
    padding: clamp(20px, 3.5vw, 36px) clamp(16px, 3.5vw, 32px) clamp(36px, 4.5vw, 56px);
  }

  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }

  .about-intro-media {
    order: 2;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
  }

  .about-intro-media-wrap {
    max-width: 580px;
    width: 100%;
    height: auto;
    min-height: unset;
  }

  .about-intro-img {
    height: clamp(300px, 48vw, 420px);
    min-height: unset;
  }
}

/* Tablets Portrait & Large Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .who-we-are-section {
    padding: clamp(18px, 3vw, 28px) 16px;
  }

  .how-we-work-section {
    padding: clamp(24px, 3.5vw, 36px) 16px;
  }

  .who-statement {
    font-size: 19px;
    line-height: 1.4;
    margin-bottom: 18px;
  }

  .who-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .who-col-1,
  .who-col-2,
  .who-col-3,
  .who-col-4 {
    display: contents;
  }

  .who-statement-wrap {
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }

  /* Two images in one row/line */
  .who-img-wrap-1,
  .who-img-wrap-2 {
    grid-column: span 1;
    height: clamp(110px, 32vw, 145px);
    border-radius: 10px;
  }

  /* Extra image: full width */
  .who-img-wrap-3 {
    grid-column: 1 / -1;
    height: clamp(140px, 42vw, 190px);
    border-radius: 10px;
  }

  /* Two cards in one row/line */
  .who-content-card {
    grid-column: span 1;
    padding: clamp(12px, 3vw, 15px) clamp(10px, 2.5vw, 13px);
    border-radius: 12px;
  }

  .who-card-subheading {
    font-size: clamp(9px, 2.2vw, 10px);
    margin-bottom: 4px;
    letter-spacing: 0.05em;
  }

  .who-card-heading {
    font-size: clamp(12.5px, 3.2vw, 14px);
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .who-card-description {
    font-size: clamp(10.5px, 2.7vw, 11.5px);
    line-height: 1.45;
  }

  .about-pillars-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pillar-card-values {
    grid-column: auto;
  }

  .about-pillar-card {
    padding: 22px 18px;
  }
}

/* Phablets & Large Phones (max-width: 640px) */
@media (max-width: 640px) {
  .about-intro-section {
    padding: 30px 16px;
  }

  .how-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .how-step-card {
    padding: clamp(10px, 2.8vw, 13px) clamp(8px, 2.4vw, 11px);
    border-radius: 9px;
  }

  .how-step-header {
    margin-bottom: 6px;
  }

  .how-step-num {
    font-size: 11px;
    padding: 1.5px 6px;
  }

  .how-step-tag {
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .how-step-title {
    font-size: clamp(12px, 3.1vw, 13.5px);
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .how-step-desc {
    font-size: clamp(10px, 2.6vw, 11px);
    line-height: 1.4;
  }

  .how-work-title {
    font-size: 25px;
  }

  .btn-how-work-cta {
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    padding: 3px 3px 3px 12px;
    font-size: 11px;
    gap: 7px;
    min-height: 32px;
  }

  .btn-how-work-cta .arrow-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .btn-how-work-cta .arrow-circle svg {
    width: 11px;
    height: 11px;
  }

  .about-pillars-section {
    padding: 24px 16px 36px;
  }

  .about-pillars-header {
    margin-bottom: 24px;
  }

  .about-pillars-title {
    font-size: 25px;
  }

  .about-intro-kicker {
    font-size: 10.5px;
    padding: 3px 9px;
    margin-bottom: 10px;
  }

  .about-intro-description {
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  .about-intro-points {
    gap: 10px;
    margin-bottom: 18px;
  }

  .about-intro-point-item {
    padding: 10px 12px;
    gap: 10px;
  }

  .about-intro-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px;
  }

  .btn-about-primary,
  .btn-about-secondary {
    width: auto;
    max-width: 100%;
    min-height: 32px;
    font-size: 11.5px;
    padding: 6px 13px;
    justify-content: center;
    white-space: nowrap;
  }

  .about-intro-img {
    height: clamp(260px, 60vw, 340px);
  }

  .about-intro-experience-badge {
    bottom: 12px;
    left: 12px;
    padding: 9px 12px;
    gap: 8px;
    max-width: calc(100% - 24px);
  }

  .exp-badge-number {
    font-size: 24px;
  }

  .exp-badge-label {
    font-size: 10.5px;
  }
}

/* Small & Compact Phones (max-width: 400px) */
@media (max-width: 400px) {
  .about-intro-section {
    padding: 24px 12px;
  }

  .about-pillar-card {
    padding: 16px 14px;
  }

  .pillar-icon-wrap svg {
    width: 20px;
    height: 20px;
  }

  .about-intro-title {
    font-size: 25px;
    line-height: 1.25;
  }

  .about-intro-point-item {
    padding: 9px 12px;
    gap: 10px;
  }

  .about-point-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .about-point-icon-box svg {
    width: 15px;
    height: 15px;
  }

  .about-point-title {
    font-size: 13.5px;
  }

  .about-point-desc {
    font-size: 12px;
    line-height: 1.45;
  }

  .btn-about-primary,
  .btn-about-secondary {
    font-size: 11px;
    padding: 5.5px 10px;
    gap: 5px;
  }

  .about-intro-img {
    height: 250px;
  }

  .about-intro-experience-badge {
    bottom: 8px;
    left: 8px;
    padding: 7px 10px;
    gap: 6px;
    border-radius: 10px;
    max-width: calc(100% - 16px);
  }

  .exp-badge-number {
    font-size: 20px;
  }

  .exp-badge-plus {
    font-size: 14px;
  }

  .exp-badge-label {
    font-size: 9.5px;
    letter-spacing: 0.02em;
  }
}

/* Ultra-compact devices (max-width: 340px - iPhone SE 1st gen / fold outer) */
@media (max-width: 340px) {

  .about-intro-section,
  .who-we-are-section,
  .about-pillars-section,
  .about-advisory-section {
    padding-left: 8px;
    padding-right: 8px;
  }

  .about-intro-title {
    font-size: 25px;
  }

  .about-point-desc {
    font-size: 11.5px;
  }

  .btn-about-primary,
  .btn-about-secondary {
    font-size: 10.5px;
    padding: 5px 12px;
    min-height: 28px;
  }
}

/* ==========================================================================
   24. Service Details Page (Health Insurance & Protection Solutions)
   2-Column Editorial Layout, Sticky Sidebar, 10px Card Radius, Zero Box Shadow
   ========================================================================== */

.service-details-section {
  width: 100%;
  padding: clamp(36px, 4.5vw, 64px) clamp(16px, 3.5vw, 40px);
  background-color: #F8FAFC;
  box-sizing: border-box;
}

.service-details-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.service-details-grid {
  display: block;
  width: 100%;
}

/* Main Content Column */
.service-main-content {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 44px);
  width: 100%;
}

@media (max-width: 600px) {
  .service-details-section {
    padding: 20px 12px 28px;
  }

  .service-main-content {
    gap: 18px;
  }
}

/* Detail Card Base (Strict: 10px Radius, Zero Box Shadow) */
.service-detail-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
  box-sizing: border-box;
}

/* Service Overview Split (Left Side Image, Right Side Content) */
.service-overview-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Left Column: Image Media Box */
.service-overview-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
}

.service-overview-img-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  box-shadow: none;
  background-color: var(--color-navy);
  box-sizing: border-box;
}

.service-overview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.4s ease;
}

.service-overview-img-box:hover .service-overview-img {
  transform: scale(1.03);
}

.service-media-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 29, 58, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  z-index: 2;
}

.service-media-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-teal);
}

.service-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 3px 10px;
  margin-bottom: 12px;
  width: fit-content;
}

.service-lead-text {
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  color: #334155;
  line-height: 1.65;
  font-weight: 500;
  margin: 0 0 12px;
}

.service-body-text {
  font-size: clamp(12.5px, 0.88vw, 13.5px);
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}


/* Sub-sections within main content */
.service-sub-section {
  display: flex;
  flex-direction: column;
}

.service-sub-header {
  margin-bottom: clamp(18px, 2vw, 24px);
}

.service-sub-title {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0 0 8px;
}

.service-sub-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* 6 Plan Variants Grid (Full-Width 3-Column on Desktop) */
.service-variants-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 22px);
}

.service-variant-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: none;
  padding: clamp(16px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.2s ease;
  box-sizing: border-box;
}

.service-variant-card:hover {
  border-color: rgba(0, 168, 142, 0.45);
  transform: translateY(-2px);
}

.variant-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.variant-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
}

.badge-teal {
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.1);
  border: 1px solid rgba(0, 168, 142, 0.25);
}

.badge-saffron {
  color: #D97706;
  background-color: rgba(255, 138, 0, 0.1);
  border: 1px solid rgba(255, 138, 0, 0.25);
}

.badge-blue {
  color: #2563EB;
  background-color: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.badge-purple {
  color: #7C3AED;
  background-color: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.25);
}

.badge-emerald {
  color: #059669;
  background-color: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.badge-sky {
  color: #0284C7;
  background-color: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.variant-tag {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94A3B8;
}

.variant-title {
  font-size: clamp(15px, 1.1vw, 16.5px);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 6px;
  line-height: 1.3;
}

.variant-desc {
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.52;
  margin: 0 0 12px;
}

.variant-points {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid #F1F5F9;
  padding-top: 10px;
}

.variant-points li {
  font-size: 11.5px;
  color: #475569;
  font-weight: 500;
  position: relative;
  padding-left: 14px;
  line-height: 1.45;
}

.variant-points li::before {
  content: "•";
  position: absolute;
  left: 3px;
  top: 0;
  color: var(--color-teal);
  font-size: 13px;
}

/* Coverage Inclusions & Exclusions Comparison */
.coverage-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

.coverage-box {
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: none;
  padding: clamp(18px, 2vw, 24px);
  box-sizing: border-box;
}

.coverage-inclusions-box {
  border: 1px solid rgba(0, 168, 142, 0.35);
  border-top: 3px solid var(--color-teal);
}

.coverage-exclusions-box {
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-top: 3px solid #EF4444;
}

.coverage-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.coverage-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-include {
  background-color: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
}

.badge-exclude {
  background-color: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

.coverage-box-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
}

.coverage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coverage-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
}

.list-bullet {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  flex-shrink: 0;
}

.bullet-check {
  color: var(--color-teal);
}

.bullet-cross {
  color: #EF4444;
}

/* 4-Step Cashless Claim Journey (Full-Width 4-Column on Desktop) */
.claim-steps-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

.claim-step-item {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: none;
  padding: clamp(18px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 0.25s ease, transform 0.2s ease;
  box-sizing: border-box;
  height: 100%;
}

.claim-step-item:hover {
  border-color: rgba(0, 168, 142, 0.45);
  transform: translateY(-2px);
}

.claim-step-number {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: rgba(0, 168, 142, 0.1);
  color: var(--color-teal);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0, 168, 142, 0.25);
}

.claim-step-content {
  flex: 1;
}

.claim-step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 4px;
}

.claim-step-desc {
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.52;
  margin: 0;
}


/* Sticky Sidebar Column */
.service-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: -webkit-sticky;
  position: sticky;
  top: clamp(88px, 10vw, 115px);
  align-self: start;
  width: 100%;
}

.sidebar-widget {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: none;
  padding: clamp(18px, 2vw, 24px);
  box-sizing: border-box;
}

.sidebar-widget .widget-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.09);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.sidebar-widget .widget-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 6px;
  line-height: 1.3;
}

.sidebar-widget .widget-desc {
  font-size: 12px;
  color: #64748B;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Sidebar Contact Form */
.sidebar-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-navy);
}

.sidebar-form-input,
.sidebar-form-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--color-navy);
  background-color: #FFFFFF;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.sidebar-form-input:focus,
.sidebar-form-select:focus {
  border-color: var(--color-teal);
}

.btn-sidebar-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background-color: var(--color-navy);
  color: var(--color-white);
  border: 1px solid var(--color-navy);
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 5px 4px 16px;
  cursor: pointer;
  transition: background-color var(--transition-base), transform var(--transition-fast);
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
}

.btn-sidebar-submit:hover {
  background-color: var(--color-navy-dark);
  transform: translateY(-1px);
}

.btn-sidebar-submit .arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.btn-sidebar-submit:hover .arrow-circle {
  transform: translateX(2px);
  background-color: var(--color-teal);
  color: var(--color-white);
}

.sidebar-privacy-note {
  font-size: 10.5px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

/* Sidebar Highlights List */
.sidebar-highlights-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
}

.sidebar-highlights-list .highlight-check {
  color: var(--color-teal);
  font-weight: 800;
  flex-shrink: 0;
  font-size: 13px;
}

/* Emergency Card */
.widget-emergency-card {
  background: linear-gradient(145deg, #0B1D3A 0%, #152B4D 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.widget-emergency-card .emergency-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #F87171;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 9999px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.widget-emergency-card .emergency-title {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 6px;
  line-height: 1.3;
}

.widget-emergency-card .emergency-desc {
  font-size: 12px;
  color: #CBD5E1;
  line-height: 1.5;
  margin: 0 0 14px;
}

.emergency-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-teal);
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.emergency-phone-link:hover {
  background-color: var(--color-teal-hover);
  transform: translateY(-1px);
}

.emergency-subtext {
  display: block;
  font-size: 10.5px;
  color: #94A3B8;
  text-align: center;
  margin-top: 6px;
}

/* Sidebar Services Navigation List */
.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-navy);
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.sidebar-service-link:hover {
  background-color: #FFFFFF;
  border-color: var(--color-teal);
  color: var(--color-teal);
}

/* Service Callout Banner */
/* ==========================================================================
   Full-Width CTA Banner (Overflowing Transparent Advisor Cutout & Bottom Action)
   ========================================================================== */
.service-cta-banner {
  width: 100%;
  padding: clamp(28px, 4vw, 56px) 0;
  margin-top: 0;
  margin-bottom: 0;
  background-color: transparent;
  box-sizing: border-box;
  position: relative;
}

.service-cta-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 44px);
  box-sizing: border-box;
  position: relative;
}

.service-cta-container.ins-container,
.service-cta-banner .ins-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 44px);
  box-sizing: border-box;
}

.service-cta-box {
  width: 100%;
  background-color: var(--color-navy);
  border-radius: 16px;
  padding: clamp(36px, 4vw, 52px) clamp(32px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto clamp(260px, 24vw, 320px);
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  box-sizing: border-box;
  color: #FFFFFF;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.service-cta-text {
  max-width: 620px;
  position: relative;
  z-index: 2;
}

.service-cta-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.16);
  border: 1px solid rgba(0, 168, 142, 0.35);
  border-radius: 9999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.service-cta-heading {
  font-size: clamp(21px, 2.2vw, 29px);
  font-weight: 700;
  line-height: 1.28;
  margin: 0 0 12px;
  color: #FFFFFF;
}

.service-cta-desc {
  font-size: clamp(13px, 0.95vw, 14px);
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}

/* ==========================================================================
   Center Column: Distroo Brand Logo & Continuously Orbiting Service Icons
   ========================================================================== */
.service-cta-orbit-col {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.cta-orbit-system {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* Ambient Radial Glow Halo (Hidden for clean zero-shadow design) */
.cta-orbit-glow {
  display: none;
}

/* Orbit Ring Tracks */
.cta-orbit-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
}

.cta-orbit-ring-outer {
  width: 196px;
  height: 196px;
  border: 1px dashed rgba(0, 168, 142, 0.45);
}

.cta-orbit-ring-inner {
  width: 136px;
  height: 136px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Centerpiece Brand Badge (Zero Box Shadows) */
.cta-orbit-center {
  position: relative;
  z-index: 6;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #152C4E 0%, #071326 100%);
  border: 1.5px solid rgba(0, 168, 142, 0.6);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.cta-orbit-center:hover {
  transform: scale(1.08);
  border-color: var(--color-teal);
  box-shadow: none;
}

.cta-orbit-center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-orbit-center-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1;
}

/* Continuously Orbiting Track */
.cta-orbit-track {
  position: absolute;
  width: 196px;
  height: 196px;
  top: calc(50% - 98px);
  left: calc(50% - 98px);
  border-radius: 50%;
  animation: ctaOrbitSpin 28s linear infinite;
  pointer-events: none;
  z-index: 5;
}

/* Hover over system pauses the rotation for easy clicking and inspection */
.cta-orbit-system:hover .cta-orbit-track,
.cta-orbit-system:hover .cta-orbit-node {
  animation-play-state: paused;
}

@keyframes ctaOrbitSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Counter-spin keeps logos centered on the dashed line and upright */
@keyframes ctaOrbitCounterSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* Positioning each satellite along the 196px circle (radius = 98px) */
.cta-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: auto;
}

/* Distribute 6 service icons 60deg apart centered exactly on the line */
.cta-orbit-item-1 {
  transform: rotate(0deg) translateX(98px) rotate(0deg);
}

.cta-orbit-item-2 {
  transform: rotate(60deg) translateX(98px) rotate(-60deg);
}

.cta-orbit-item-3 {
  transform: rotate(120deg) translateX(98px) rotate(-120deg);
}

.cta-orbit-item-4 {
  transform: rotate(180deg) translateX(98px) rotate(-180deg);
}

.cta-orbit-item-5 {
  transform: rotate(240deg) translateX(98px) rotate(-240deg);
}

.cta-orbit-item-6 {
  transform: rotate(300deg) translateX(98px) rotate(-300deg);
}

/* The node counters the track rotation while maintaining precise line-center position */
.cta-orbit-node {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  animation: ctaOrbitCounterSpin 28s linear infinite;
}

/* Interactive Badge Button (Zero Box Shadows) */
.cta-orbit-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0B1D3A;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.22s ease,
    background-color 0.22s ease;
}

.cta-orbit-badge:hover {
  transform: scale(1.18);
  background-color: #071326;
  box-shadow: none;
  z-index: 10;
}

/* Service-Specific Accent Themes (Zero Box Shadows) */
.cta-orbit-badge.badge-teal {
  color: #00A88E;
  border-color: rgba(0, 168, 142, 0.5);
}

.cta-orbit-badge.badge-teal:hover {
  border-color: #00A88E;
  box-shadow: none;
}

.cta-orbit-badge.badge-sky {
  color: #38BDF8;
  border-color: rgba(56, 189, 248, 0.5);
}

.cta-orbit-badge.badge-sky:hover {
  border-color: #38BDF8;
  box-shadow: none;
}

.cta-orbit-badge.badge-saffron {
  color: #FF8A00;
  border-color: rgba(255, 138, 0, 0.5);
}

.cta-orbit-badge.badge-saffron:hover {
  border-color: #FF8A00;
  box-shadow: none;
}

.cta-orbit-badge.badge-emerald {
  color: #10B981;
  border-color: rgba(16, 185, 129, 0.5);
}

.cta-orbit-badge.badge-emerald:hover {
  border-color: #10B981;
  box-shadow: none;
}

.cta-orbit-badge.badge-rose {
  color: #F43F5E;
  border-color: rgba(244, 63, 94, 0.5);
}

.cta-orbit-badge.badge-rose:hover {
  border-color: #F43F5E;
  box-shadow: none;
}

.cta-orbit-badge.badge-purple {
  color: #A78BFA;
  border-color: rgba(167, 139, 250, 0.5);
}

.cta-orbit-badge.badge-purple:hover {
  border-color: #A78BFA;
  box-shadow: none;
}

/* Floating Tooltip Label on Hover (Zero Box Shadows) */
.cta-orbit-tooltip {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: #071326;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  box-shadow: none;
}

.cta-orbit-badge:hover .cta-orbit-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Right Side: Advisor Visual with Breakthrough Effect + Button */
.service-cta-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-height: 220px;
}

.service-cta-advisor-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  z-index: 2;
}

.service-cta-advisor-img {
  width: auto;
  max-width: 100%;
  height: clamp(300px, 32vw, 370px);
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

.service-cta-action {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding-bottom: 0;
}

.service-cta-advisor-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #071326;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 6px 6px 6px 20px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.service-cta-advisor-btn:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.service-cta-advisor-btn .arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.service-cta-advisor-btn:hover .arrow-circle {
  transform: translateX(2px);
}

/* Service Details Responsive Media Queries */
@media (max-width: 991px) {
  .service-overview-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .service-overview-visual {
    min-height: 320px;
    height: 340px;
  }

  .service-overview-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .service-variants-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .claim-steps-stack {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-cta-box {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding: 32px 28px 28px;
    align-items: center;
  }

  .service-cta-text {
    grid-column: 1 / -1;
  }

  .service-cta-orbit-col {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cta-orbit-system {
    transform: scale(0.78);
    transform-origin: center center;
    margin: -20px auto -15px;
  }

  .service-cta-right {
    display: contents;
  }

  .service-cta-advisor-wrap {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    bottom: auto;
    right: auto;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0;
  }

  .service-cta-advisor-img {
    height: clamp(260px, 35vw, 320px);
    width: auto;
    max-width: 120%;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(1.15);
    transform-origin: bottom center;
  }

  .service-cta-action {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
    position: relative;
    z-index: 5;
  }

  .service-cta-advisor-btn {
    max-width: 320px;
    width: fit-content;
    justify-content: flex-start;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .service-cta-box {
    grid-template-columns: minmax(0, 1.1fr) auto clamp(240px, 22vw, 280px);
    gap: 16px;
    padding: 30px 28px;
  }

  .cta-orbit-system {
    transform: scale(0.85);
  }
}

@media (max-width: 768px) {
  .service-variants-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-variant-card {
    padding: 16px 14px;
    border-radius: 12px;
  }

  .variant-title {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .variant-desc {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .variant-points li {
    font-size: 11.5px;
    padding: 3px 0;
  }

  .claim-steps-stack {
    grid-template-columns: 1fr;
  }

  .coverage-comparison-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .service-overview-visual {
    min-height: 250px;
    height: 260px;
  }

  .service-overview-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service-cta-banner {
    margin-top: 28px;
  }

  .service-cta-box {
    grid-template-columns: 1fr 1.15fr;
    padding: 22px 16px 18px;
    border-radius: 14px;
    overflow: hidden;
    gap: 12px 6px;
    align-items: center;
  }

  .service-cta-kicker {
    font-size: 9.5px;
    padding: 2px 8px;
  }

  .service-cta-heading {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  .service-cta-desc {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .service-cta-text {
    grid-column: 1 / -1;
  }

  .service-cta-orbit-col {
    grid-column: 1;
    grid-row: 2;
    overflow: visible;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  .cta-orbit-system {
    transform: scale(0.60);
    transform-origin: center center;
    margin: -25px auto -20px;
  }

  .service-cta-right {
    display: contents;
  }

  .service-cta-advisor-wrap {
    grid-column: 2;
    grid-row: 2;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0;
    position: relative;
    overflow: visible;
  }

  .service-cta-advisor-img {
    height: clamp(235px, 58vw, 290px);
    width: auto;
    max-width: 130%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    transform: scale(1.3);
    transform-origin: bottom center;
  }

  .service-cta-action {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 8px;
    position: relative;
    z-index: 5;
  }

  .service-cta-advisor-btn {
    width: fit-content;
    max-width: 100%;
    font-size: 11.5px;
    padding: 3px 3px 3px 12px;
    gap: 7px;
    min-height: 32px;
    justify-content: flex-start;
  }

  .service-cta-advisor-btn .arrow-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .service-cta-advisor-btn .arrow-circle svg {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 420px) {
  .service-cta-advisor-btn {
    font-size: 10.5px;
    padding: 2.5px 2.5px 2.5px 10px;
    gap: 6px;
    min-height: 28px;
  }

  .service-cta-advisor-btn .arrow-circle {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .service-cta-advisor-btn .arrow-circle svg {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 360px) {
  .cta-orbit-system {
    transform: scale(0.54);
    margin: -35px auto -28px;
  }

  .service-cta-advisor-img {
    height: 215px;
    transform: scale(1.28);
    transform-origin: bottom center;
  }

  .service-cta-advisor-btn {
    font-size: 10px;
    padding: 2px 2px 2px 8px;
    gap: 5px;
    min-height: 26px;
  }

  .service-cta-advisor-btn .arrow-circle {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  .service-cta-advisor-btn .arrow-circle svg {
    width: 9px;
    height: 9px;
  }
}

/* ==========================================================================
   Home Healthcare & Comfort Section (Pixel-Perfect Matching UI)
   ========================================================================== */
.service-home-care-section {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
}

.care-section-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(24px, 3.2vw, 48px);
  align-items: center;
  width: 100%;
}

/* Left Visual Column with Notched Floating Badge */
.care-visual-col {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

.care-visual-card {
  position: relative;
  width: 100%;
  min-height: 480px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  background-color: var(--color-navy);
  box-shadow: none;
  display: flex;
}

.care-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.4s ease;
}

.care-visual-card:hover .care-visual-img {
  transform: scale(1.02);
}

/* The Notch Cutout Card in Top-Left (Matches Page Background #F8FAFC) */
.care-notch-badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #F8FAFC;
  padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px);
  border-bottom-right-radius: 15px;
  max-width: clamp(230px, 60%, 280px);
  z-index: 2;
  box-sizing: border-box;
  box-shadow: none;
}

/* Inverted Corner: Top-Right of Notch */
.care-notch-badge::before {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  width: 15px;
  height: 15px;
  background: transparent;
  border-top-left-radius: 15px;
  box-shadow: -6px -6px 0 6px #F8FAFC;
  pointer-events: none;
}

/* Inverted Corner: Bottom-Left of Notch */
.care-notch-badge::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 15px;
  height: 15px;
  background: transparent;
  border-top-left-radius: 15px;
  box-shadow: -6px -6px 0 6px #F8FAFC;
  pointer-events: none;
}

.care-notch-title {
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 8px;
}

.care-notch-desc {
  font-size: clamp(12px, 0.95vw, 13px);
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}


/* Right Content Column */
.care-content-col {
  display: flex;
  flex-direction: column;
}

.care-tag-wrap {
  margin-bottom: 12px;
}

.care-tag-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.care-main-title {
  font-size: clamp(28px, 2.9vw, 30px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.18;
  margin: 0 0 16px;
}

.care-main-desc {
  font-size: clamp(13.5px, 1.05vw, 14.5px);
  color: #64748B;
  line-height: 1.65;
  margin: 0 0 clamp(24px, 2.5vw, 34px);
}

/* Bottom Split: Features & Stat Card */
.care-bottom-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(20px, 2.2vw, 32px);
  align-items: center;
}

/* Left Sub-column: Our Features */
.care-features-block {
  display: flex;
  flex-direction: column;
}

.care-features-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 14px;
}

.care-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.care-feature-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid #E2E8F0;
}

.care-feature-item:last-child {
  border-bottom: none;
}

.care-feature-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-teal);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.care-feature-icon svg {
  display: block;
}

.care-feature-text {
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}

/* Right Sub-column: Stat Card Matched with Distroo Website Design System */
.care-stat-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 15px;
  padding: clamp(20px, 2.2vw, 26px);
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.2s ease;
}

.care-stat-card:hover {
  border-color: rgba(0, 168, 142, 0.45);
  transform: translateY(-2px);
  box-shadow: none;
}

.care-stat-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.care-stat-number {
  font-size: clamp(38px, 3.6vw, 30px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}

.care-stat-plus {
  color: var(--color-teal);
  font-weight: 700;
  font-size: 0.9em;
  margin-left: 2px;
}

.care-stat-label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.2;
}

.care-stat-desc {
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .care-section-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .care-visual-card {
    min-height: 380px;
    height: 400px;
  }
}

@media (max-width: 640px) {
  .service-home-care-section {
    padding: 0;
  }

  .care-visual-card {
    min-height: 240px;
    height: 250px;
    border-radius: 14px;
  }

  .care-notch-badge {
    padding: 12px 14px;
    max-width: 82%;
    border-bottom-right-radius: 14px;
  }

  .care-notch-badge::before,
  .care-notch-badge::after {
    display: none;
  }

  .care-notch-title {
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 3px;
  }

  .care-notch-desc {
    font-size: 11px;
    line-height: 1.35;
  }

  .care-main-title {
    font-size: 25px;
    margin-bottom: 8px;
  }

  .care-main-desc {
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .care-bottom-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .care-features-title {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .care-feature-item {
    padding: 7px 0;
    gap: 8px;
  }

  .care-feature-icon {
    width: 16px;
    height: 16px;
  }

  .care-feature-text {
    font-size: 12px;
  }

  .care-stat-card {
    border-radius: 12px;
    padding: 14px 16px;
  }

  .care-stat-top {
    margin-bottom: 6px;
    gap: 10px;
  }

  .care-stat-number {
    font-size: 28px;
  }

  .care-stat-label {
    font-size: 12.5px;
  }

  .care-stat-desc {
    font-size: 11px;
    line-height: 1.4;
  }
}

@media (max-width: 420px) {
  .care-visual-card {
    min-height: 210px;
    height: 220px;
  }

  .care-notch-badge {
    max-width: 88%;
    padding: 10px 12px;
  }

  .care-stat-number {
    font-size: 26px;
  }
}

/* ==========================================================================
   5-Step Wavy Process Flow Section (Same-to-Same UI with Website Colors)
   ========================================================================== */
.service-process-section {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(16px, 2.5vw, 32px) 0;
}

.process-section-header {
  text-align: center;
  margin: 0 auto clamp(32px, 3.8vw, 48px);
}

.process-main-title {
  font-size: clamp(26px, 2.7vw, 30px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.22;
  margin: 12px 0 10px;
}

.process-title-accent {
  color: var(--color-teal);
  display: inline-block;
}

.process-main-desc {
  font-size: clamp(13px, 0.95vw, 15px);
  color: #64748B;
  line-height: 1.6;
  margin: 0 auto;
}

/* Wavy Connector Wrapper */
.wavy-process-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 0 48px;
  overflow: hidden;
}

.wavy-connector-line {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  max-width: 100vw;
  height: 140px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

.wavy-connector-line path {
  stroke: var(--color-navy);
}

/* 5 Staggered Cards Grid */
.wavy-process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  position: relative;
  z-index: 2;
  align-items: start;
}

/* Individual Step Card */
.wavy-step-card {
  position: relative;
  border-radius: 20px;
  padding: 34px clamp(14px, 1.3vw, 20px) 24px clamp(14px, 1.3vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  color: #FFFFFF;
  min-height: 240px;
  box-shadow: none;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* Alternating Up-Down Stagger */
.step-pos-up {
  transform: translateY(0);
}

.step-pos-down {
  transform: translateY(34px);
}

.wavy-step-card:hover {
  filter: brightness(1.05);
}

.step-pos-up:hover {
  transform: translateY(-6px);
}

.step-pos-down:hover {
  transform: translateY(28px);
}

/* Website Colors for 5 Steps */
.step-card-1 {
  background-color: var(--color-teal);
}

.step-card-2 {
  background-color: var(--color-navy);
}

.step-card-3 {
  background-color: var(--color-teal);
}

.step-card-4 {
  background-color: var(--color-navy-light);
}

.step-card-5 {
  background-color: var(--color-teal-hover);
}

/* Floating Numbered Circle Badge */
.wavy-step-badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 800;
  box-sizing: border-box;
}

.badge-saffron {
  border: 2px solid var(--color-saffron);
  color: var(--color-saffron);
}

.badge-navy {
  border: 2px solid var(--color-navy);
  color: var(--color-navy);
}

.badge-teal {
  border: 2px solid var(--color-teal);
  color: var(--color-teal);
}

.badge-slate {
  border: 2px solid var(--color-navy-light);
  color: var(--color-navy-light);
}

.badge-emerald {
  border: 2px solid var(--color-teal-hover);
  color: var(--color-teal-hover);
}

.wavy-step-title {
  color: #FFFFFF;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 700;
  line-height: 1.32;
  margin: 0 0 10px;
}

.wavy-step-desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(11.5px, 0.85vw, 12.5px);
  line-height: 1.55;
  margin: 0;
}

/* Responsive Scaling */
@media (max-width: 1080px) {
  .wavy-process-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px;
  }

  .step-pos-down {
    transform: translateY(0);
  }

  .step-pos-up:hover,
  .step-pos-down:hover {
    transform: translateY(-4px);
  }

  .wavy-connector-line {
    display: none;
  }

  .wavy-process-wrapper {
    padding: 16px 0;
  }
}

@media (max-width: 680px) {
  .wavy-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 10px;
  }

  .wavy-step-card {
    min-height: auto;
    padding: 22px 10px 14px;
    border-radius: 14px;
  }

  .wavy-step-card.step-card-5 {
    grid-column: span 2;
    max-width: 280px;
    margin: 0 auto;
    width: 100%;
  }

  .wavy-step-badge {
    width: 28px;
    height: 28px;
    font-size: 11px;
    top: -14px;
  }

  .wavy-step-title {
    font-size: 12px;
    line-height: 1.25;
    margin: 0 0 5px;
  }

  .wavy-step-desc {
    font-size: 10.5px;
    line-height: 1.38;
  }

  .process-main-title {
    font-size: 25px;
    margin-bottom: 8px;
  }

  .process-main-desc {
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (max-width: 340px) {
  .wavy-process-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .wavy-step-card.step-card-5 {
    grid-column: span 1;
    max-width: 100%;
  }
}

/* ==========================================================================
   Documents Required Tabs Section (15px Border Radius, Website Brand Colors)
   ========================================================================== */
.service-docs-section {
  width: 100%;
  box-sizing: border-box;
}

.docs-redesign-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(20px, 2.2vw, 28px);
}

.docs-redesign-title {
  font-family: var(--font-family);
  font-size: clamp(26px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 8px 0;
}

.docs-redesign-desc {
  font-family: var(--font-family);
  font-size: clamp(14px, 1.05vw, 15.5px);
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* 2-Column Redesign Grid */
.docs-redesign-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.05fr);
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Left Column: Visual Photo Card */
.docs-visual-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background-color: #F1F5F9;
  position: relative;
  box-shadow: none;
}

.docs-visual-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Right Column: White Interactive Checklist Card */
.docs-interactive-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: clamp(24px, 2.5vw, 32px);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Mini Category Tabs */
.docs-mini-tabs-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(18px, 1.8vw, 24px);
}

.docs-mini-tab-btn {
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 24px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
  background-color: #FFFFFF;
  color: var(--color-navy);
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.docs-mini-tab-btn:hover:not(.is-active) {
  border-color: #CBD5E1;
  background-color: #F8FAFC;
}

.docs-mini-tab-btn.is-active {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
  font-weight: 700;
  cursor: default;
}

/* Tab Panels */
.docs-mini-panel {
  display: none;
  flex: 1;
}

.docs-mini-panel.is-active {
  display: block;
  animation: docsMiniFadeIn 0.22s ease forwards;
}

@keyframes docsMiniFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Checklist Items */
.docs-checklist-group {
  display: flex;
  flex-direction: column;
}

.docs-check-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(11px, 1.15vw, 14px) 0;
  border-bottom: 1px solid #F1F5F9;
}

.docs-check-item:first-child {
  padding-top: 0;
}

.docs-check-item:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.docs-check-icon-circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background-color: rgba(0, 168, 142, 0.12);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.docs-check-icon-circle svg {
  width: 19px;
  height: 19px;
  stroke: var(--color-navy);
}

.docs-check-content {
  flex: 1;
  min-width: 0;
}

.docs-check-title {
  font-family: var(--font-family);
  font-size: clamp(14px, 1.02vw, 15px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0 0 3px 0;
}

.docs-check-desc {
  font-family: var(--font-family);
  font-size: clamp(12.5px, 0.9vw, 13.5px);
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

/* Footnote */
.docs-footnote-text {
  font-family: var(--font-family);
  font-size: 12px;
  color: #94A3B8;
  margin: clamp(14px, 1.5vw, 18px) 0 0 0;
  line-height: 1.4;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .docs-redesign-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .docs-visual-card {
    height: 300px;
    min-height: 260px;
  }
}

@media (max-width: 600px) {
  .docs-redesign-header {
    margin-bottom: 16px;
  }

  .docs-redesign-title {
    font-size: clamp(20px, 5.2vw, 24px);
    margin-bottom: 6px;
  }

  .docs-redesign-desc {
    font-size: 12px;
  }

  .docs-visual-card {
    height: 200px;
    min-height: 180px;
    border-radius: 12px;
  }

  .docs-interactive-card {
    padding: 16px 14px;
    border-radius: 12px;
  }

  /* Mini tabs - Length matches content length */
  .docs-mini-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
    margin-bottom: 12px;
  }

  .docs-mini-tab-btn {
    width: fit-content;
    padding: 5px 12px;
    font-size: 11px;
    border-radius: 6px;
    min-height: 28px;
  }

  .docs-check-item {
    gap: 10px;
    padding: 8px 0;
  }

  .docs-check-icon-circle {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .docs-check-icon-circle svg {
    width: 15px;
    height: 15px;
  }

  .docs-check-title {
    font-size: 12.5px;
    margin-bottom: 2px;
  }

  .docs-check-desc {
    font-size: 11px;
    line-height: 1.35;
  }

  .docs-footnote-text {
    font-size: 10.5px;
    margin-top: 10px;
  }
}

/* ==========================================================================
   A Clearer Start Section (Make Sense of Health Insurance)
   Global Brand Typography, Compact Height & Consistent Website Subheading UI
   ========================================================================== */
.clearer-start-section {
  width: 100%;
  box-sizing: border-box;
}

.clearer-start-header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

.clearer-start-col-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.clearer-start-title {
  font-family: var(--font-family);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0;
}

.clearer-start-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.clearer-start-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}

.clearer-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
}

.clearer-badge-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-teal, #00A88E);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 2-Column Visual & Needs Card Grid - Balanced Height */
.clearer-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 22px);
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  height: 350px;
}

/* Left Image Card - Increased Height */
.clearer-media-card {
  width: 100%;
  height: 100%;
  max-height: 350px;
  border-radius: 14px;
  overflow: hidden;
  background-color: #E2E8F0;
  display: flex;
  box-sizing: border-box;
  position: relative;
}

.clearer-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.4s ease;
}

.clearer-media-card:hover .clearer-media-img {
  transform: scale(1.02);
}

/* Right Dark Navy Needs Card - Non-Clickable Display */
.clearer-needs-card {
  background: #081D2A linear-gradient(155deg, #0B2238 0%, #061523 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-height: 350px;
  box-sizing: border-box;
}

.clearer-needs-title {
  font-family: var(--font-family);
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 8px 0;
}

.clearer-needs-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  justify-content: space-around;
}

.clearer-need-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  cursor: default;
  border-radius: 8px;
}

.clearer-need-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.clearer-need-icon-wrap {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00D2B2;
  flex-shrink: 0;
}

.clearer-need-text {
  flex: 1;
  min-width: 0;
}

.clearer-need-heading {
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 2px 0;
  line-height: 1.25;
}

.clearer-need-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.35;
}

.clearer-need-arrow {
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Responsive Rules */
@media (max-width: 991px) {
  .clearer-start-header {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .clearer-start-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 16px;
  }

  .clearer-media-card {
    height: 240px;
    max-height: 240px;
  }

  .clearer-needs-card {
    height: auto;
    max-height: none;
    padding: 20px 18px;
  }
}

@media (max-width: 640px) {
  .clearer-start-header {
    margin-bottom: 14px;
  }

  .clearer-start-title {
    font-size: 25px;
  }

  .clearer-media-card {
    height: 180px;
    max-height: 180px;
    border-radius: 12px;
  }

  .clearer-needs-card {
    border-radius: 12px;
    padding: 16px 14px;
  }

  .clearer-needs-title {
    font-size: 15px;
    margin-bottom: 10px;
  }

  /* Two in one row / line: 2x2 grid for the 4 need items */
  .clearer-needs-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }

  .clearer-need-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 9px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
  }

  .clearer-need-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .clearer-need-icon-wrap {
    width: 20px;
    height: 20px;
  }

  .clearer-need-icon-wrap svg {
    width: 18px;
    height: 18px;
  }

  .clearer-need-heading {
    font-size: 11.5px;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .clearer-need-desc {
    font-size: 10px;
    line-height: 1.3;
  }

  .clearer-need-arrow {
    display: none;
  }
}

@media (max-width: 360px) {
  .clearer-needs-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ==========================================================================
   Advisor Support Banner (An Advisor Behind You, Beyond the Purchase)
   Compact Height, Navy Icons, Global Typography & Fully Responsive Strip
   ========================================================================== */
.advisor-support-banner {
  width: 100%;
  box-sizing: border-box;
}

.advisor-support-card {
  width: 100%;
  background-color: #EAF7F5;
  background: linear-gradient(135deg, #EAF7F5 0%, #EEF9F7 100%);
  border: 1px solid rgba(0, 168, 142, 0.2);
  border-radius: 14px;
  padding: clamp(14px, 1.4vw, 20px) clamp(18px, 2.2vw, 32px);
  box-sizing: border-box;
}

.advisor-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  width: 100%;
  box-sizing: border-box;
}

.advisor-support-title-col {
  display: flex;
  align-items: center;
}

.advisor-support-title {
  font-family: var(--font-family);
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  line-height: 1.22;
  margin: 0;
}

.advisor-support-item {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(11, 29, 58, 0.12);
  padding-left: clamp(14px, 1.6vw, 22px);
  box-sizing: border-box;
}

.advisor-support-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-navy, #0B1D3A);
  margin-bottom: 6px;
}

.advisor-support-icon svg {
  width: 22px;
  height: 22px;
}

.advisor-support-heading {
  font-family: var(--font-family);
  font-size: clamp(13.5px, 0.98vw, 14.5px);
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 3px 0;
  line-height: 1.25;
}

.advisor-support-desc {
  font-family: var(--font-family);
  font-size: clamp(11.5px, 0.82vw, 12.5px);
  color: #4B5563;
  line-height: 1.4;
  margin: 0;
}

/* Responsive Rules for Advisor Support Banner */
@media (max-width: 1024px) {
  .advisor-support-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
  }

  .advisor-support-title-col {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  .advisor-support-item {
    border-left: none;
    border-top: 1px solid rgba(11, 29, 58, 0.1);
    padding-left: 0;
    padding-top: 10px;
  }
}

@media (max-width: 600px) {
  .advisor-support-card {
    border-radius: 12px;
    padding: 14px 14px;
  }

  /* Two in one row / line for advisor support items */
  .advisor-support-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }

  .advisor-support-title-col {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  .advisor-support-title {
    font-size: 15px;
    line-height: 1.25;
  }

  .advisor-support-item {
    border-left: none;
    border-top: 1px solid rgba(11, 29, 58, 0.08);
    padding-left: 0;
    padding-top: 8px;
  }

  .advisor-support-item:last-child {
    grid-column: span 2;
  }

  .advisor-support-icon {
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
  }

  .advisor-support-icon svg {
    width: 18px;
    height: 18px;
  }

  .advisor-support-heading {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .advisor-support-desc {
    font-size: 10.5px;
    line-height: 1.35;
  }
}

/* ==========================================================================
   Dual CTA Cards Section (Left & Right Cards, 10px Border Radius, Black Overlay)
   ========================================================================== */
.service-dual-cta-section,
.ins-dual-cta-section {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(32px, 4vw, 56px) 0;
}

.dual-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
  width: 100%;
  box-sizing: border-box;
}

.dual-cta-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-height: clamp(210px, 18vw, 240px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(20px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
  box-sizing: border-box;
  box-shadow: none;
  background-color: #000000;
}

.dual-cta-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  transition: transform 0.5s ease;
}

.dual-cta-card:hover .dual-cta-bg-img {
  transform: scale(1.03);
}

/* Pure Black Overlay - Smooth Fade Out to Clear Image on the Right */
.dual-cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.78) 32%,
      rgba(0, 0, 0, 0.40) 54%,
      rgba(0, 0, 0, 0.08) 72%,
      rgba(0, 0, 0, 0) 84%,
      transparent 100%);
  pointer-events: none;
}

.dual-cta-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 54%;
}

.dual-cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  padding: 3px 9px;
  margin-bottom: 7px;
}

.kicker-teal {
  color: #2DD4BF;
  background-color: rgba(0, 168, 142, 0.22);
  border: 1px solid rgba(0, 168, 142, 0.4);
}

.kicker-saffron {
  color: #FFA534;
  background-color: rgba(255, 138, 0, 0.22);
  border: 1px solid rgba(255, 138, 0, 0.4);
}

.dual-cta-heading {
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 5px;
  max-width: 330px;
}

.dual-cta-desc {
  font-size: clamp(11.5px, 0.82vw, 12.5px);
  color: #E2E8F0;
  line-height: 1.45;
  margin: 0 0 14px;
  max-width: 320px;
}

.dual-cta-actions {
  display: flex;
  align-items: center;
}

/* Single Navy Button Matched with Website UI */
.btn-dual-navy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-navy);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 5px 5px 5px 16px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.btn-dual-navy:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-dual-navy .arrow-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.btn-dual-navy:hover .arrow-circle {
  transform: translateX(2px);
}

/* Responsive Scaling */
@media (max-width: 860px) {
  .dual-cta-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dual-cta-card {
    min-height: 220px;
    padding: 22px 20px;
  }
}

@media (max-width: 600px) {
  .dual-cta-card {
    min-height: 215px;
    padding: 20px 18px;
    border-radius: 12px;
  }

  /* 1. Content Width and Typography */
  .dual-cta-content {
    max-width: 72%;
  }

  .dual-cta-heading {
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.25;
    margin-bottom: 7px;
    max-width: 270px;
  }

  .dual-cta-desc {
    font-size: clamp(11.5px, 3vw, 12.5px);
    line-height: 1.44;
    margin-bottom: 13px;
    max-width: 260px;
  }

  /* 2. Subheading Capsule Size */
  .dual-cta-kicker {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    margin-bottom: 8px;
    gap: 4px;
  }

  /* 3. Balanced Touch-Friendly Button Size */
  .btn-dual-navy {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 4px 3px 12px;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    justify-content: flex-start;
  }

  .btn-dual-navy .arrow-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .btn-dual-navy .arrow-circle svg {
    width: 11px;
    height: 11px;
  }

  .dual-cta-overlay {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.84) 40%,
        rgba(0, 0, 0, 0.48) 64%,
        rgba(0, 0, 0, 0.12) 82%,
        transparent 100%);
  }
}

@media (max-width: 420px) {
  .dual-cta-card {
    min-height: 210px;
    padding: 18px 16px;
  }

  .dual-cta-content {
    max-width: 76%;
  }

  .dual-cta-heading {
    font-size: 15px;
    line-height: 1.24;
    margin-bottom: 6px;
  }

  .dual-cta-desc {
    font-size: 11.5px;
    line-height: 1.42;
    margin-bottom: 12px;
  }

  .btn-dual-navy {
    font-size: 11px;
    padding: 3px 3px 3px 11px;
    gap: 6px;
    min-height: 30px;
  }

  .btn-dual-navy .arrow-circle {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .btn-dual-navy .arrow-circle svg {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 360px) {
  .dual-cta-card {
    min-height: 200px;
    padding: 16px 14px;
  }

  .dual-cta-content {
    max-width: 80%;
  }

  .dual-cta-heading {
    font-size: 14.5px;
    line-height: 1.22;
    margin-bottom: 5px;
  }

  .dual-cta-desc {
    font-size: 11px;
    line-height: 1.38;
    margin-bottom: 10px;
  }

  .btn-dual-navy {
    font-size: 10.5px;
    padding: 2.5px 3px 2.5px 10px;
    gap: 5px;
    min-height: 28px;
  }

  .btn-dual-navy .arrow-circle {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  .btn-dual-navy .arrow-circle svg {
    width: 9px;
    height: 9px;
  }
}

/* ==========================================================================
   28. Health Insurance Custom Inner Hero Section (Dark Theme)
   Matches website brand palette: Distroo Navy background (#0B1D3A),
   White and teal typography, frosted pill CTAs, framed cloud visual,
   and dark full-width 5-point ribbon.
   Strict Rules: Zero Inline CSS, Zero Box Shadows, Fluid clamp scaling.
   Navbar/Header remains untouched as per instructions.
   ========================================================================== */

.health-hero-section {
  position: relative;
  width: 100%;
  background-color: var(--color-navy);
  padding: clamp(105px, 13.5vh, 135px) 0 0 0;
  box-sizing: border-box;
  overflow: hidden;
}

.health-hero-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 48px) clamp(24px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* 2-Column Split: Copy & Visual */
.health-hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: clamp(32px, 4.5vw, 68px);
  width: 100%;
}

/* Left Copy Column */
.health-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Breadcrumb Navigation - Dark Theme */
.health-hero-breadcrumb {
  margin-bottom: clamp(16px, 2vh, 22px);
}

.health-breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 8px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.health-breadcrumb-item {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
}

.health-breadcrumb-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.health-breadcrumb-link:hover {
  color: var(--color-teal);
}

.health-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  user-select: none;
}

.health-breadcrumb-item.active {
  color: var(--color-teal);
  font-weight: 700;
}

/* Category Badge Pill - Dark Theme */
.health-hero-badge-wrap {
  margin-bottom: clamp(16px, 2.2vh, 22px);
}

.health-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  background-color: rgba(0, 168, 142, 0.16);
  border: 1px solid rgba(0, 168, 142, 0.45);
  border-radius: 9999px;
  color: #00D6B5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Main Headline - Dark Theme */
.health-hero-title {
  font-size: clamp(34px, 4.4vw, 35px);
  font-weight: 700;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0 0 clamp(14px, 1.8vh, 18px);
}

/* Subtitle - Dark Theme */
.health-hero-subtitle {
  font-size: clamp(16px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 clamp(28px, 3.5vh, 36px);
  max-width: 580px;
}

/* CTA Buttons Row - Dark Hero Branded */
.health-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.health-hero-actions .btn-appointment {
  background-color: #FFFFFF;
  color: var(--color-navy);
  border: 1.5px solid #FFFFFF;
  min-height: 48px;
  box-sizing: border-box;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.health-hero-actions .btn-appointment:hover {
  background-color: #F1F5F9;
  color: var(--color-navy);
  transform: translateY(-1px);
}

.health-hero-actions .btn-appointment .arrow-circle {
  background-color: var(--color-navy);
  color: #FFFFFF;
}

.health-hero-actions .btn-appointment:hover .arrow-circle {
  transform: translateX(2px);
}

/* Secondary Button - Frosted Pill Twin on Dark Hero */
.health-hero-actions .btn-appointment-light {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
  border-radius: 9999px;
  padding: 5px 6px 5px 22px;
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
  box-sizing: border-box;
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}

.health-hero-actions .btn-appointment-light:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.health-hero-actions .btn-appointment-light .arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
}

.health-hero-actions .btn-appointment-light:hover .arrow-circle {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateX(2px);
}

/* Right Visual Column - No Capsule, No Image Border-Radius, Cloud Border Design */
.health-hero-visual-col {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}

.health-hero-cloud-box {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.health-cloud-graphic {
  width: 100%;
  height: auto;
  max-height: 480px;
  display: block;
  overflow: visible;
}

.health-cloud-border-line {
  stroke: #00A88E;
  stroke-width: 2.5px;
  transition: stroke 0.3s ease;
}

/* Full-Width Bottom Feature Strip (5 Points) - Dark Theme */
.health-hero-ribbon-fullwidth {
  width: 100%;
  background-color: var(--color-navy-dark);
  border-top: 1px solid rgba(0, 168, 142, 0.28);
  border-bottom: 1px solid rgba(0, 168, 142, 0.28);
  padding: clamp(14px, 1.6vw, 20px) 0;
  box-sizing: border-box;
}

.health-ribbon-fullwidth-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  box-sizing: border-box;
}

.health-ribbon-item {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
}

.health-ribbon-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-teal);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.health-ribbon-item:hover .health-ribbon-icon-wrap {
  transform: scale(1.08);
  background-color: #00D6B5;
  color: var(--color-navy);
}

.health-ribbon-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.health-ribbon-title {
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.health-ribbon-desc {
  font-size: clamp(11.5px, 0.82vw, 12.5px);
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.35;
}

.health-ribbon-divider {
  width: 1px;
  height: 36px;
  background-color: rgba(0, 168, 142, 0.28);
  flex-shrink: 0;
}

/* Multi-device Responsive Breakpoints */
@media (max-width: 1200px) {
  .health-ribbon-fullwidth-container {
    gap: clamp(8px, 1.2vw, 16px);
    padding: 0 clamp(12px, 2.5vw, 24px);
  }
}

@media (max-width: 1080px) {
  .health-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .health-hero-copy {
    max-width: 100%;
  }

  .health-hero-cloud-box {
    max-width: 680px;
    margin: 0 auto;
  }
}

@media (max-width: 991px) {
  .health-hero-section {
    padding-top: 96px;
  }

  .health-hero-title {
    font-size: clamp(26px, 5.2vw, 36px);
    margin-bottom: 12px;
  }

  .health-hero-subtitle {
    font-size: clamp(14px, 2.2vw, 17px);
    margin-bottom: 22px;
  }

  /* Two Rows Layout for Ribbon (Row 1: 3 items, Row 2: 2 items) */
  .health-ribbon-fullwidth-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0 !important;
  }

  .health-ribbon-divider {
    display: none !important;
  }

  .health-ribbon-item {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  /* Row 1: 3 items (each spans 2 of 6 columns) */
  .ribbon-item-1,
  .ribbon-item-2,
  .ribbon-item-3 {
    grid-column: span 2 !important;
    border-bottom: 1px solid rgba(0, 168, 142, 0.28) !important;
    padding: 12px 10px 14px !important;
  }

  .ribbon-item-1,
  .ribbon-item-2 {
    border-right: 1px solid rgba(0, 168, 142, 0.28) !important;
  }

  /* Row 2: 2 items (each spans 3 of 6 columns) */
  .ribbon-item-4,
  .ribbon-item-5 {
    grid-column: span 3 !important;
    padding: 14px 14px 12px !important;
    justify-content: center !important;
  }

  .ribbon-item-4 {
    border-right: 1px solid rgba(0, 168, 142, 0.28) !important;
  }
}

@media (max-width: 560px) {
  .health-hero-section {
    padding-top: 88px;
  }

  .health-hero-container {
    padding: 0 14px 20px;
  }

  .health-hero-breadcrumb {
    margin-bottom: 10px;
  }

  .health-breadcrumb-item {
    font-size: 11.5px;
  }

  .health-hero-badge-wrap {
    margin-bottom: 10px;
  }

  .health-hero-badge {
    font-size: 9.5px;
    padding: 3px 10px;
  }

  .health-hero-title {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 10px;
  }

  .health-hero-subtitle {
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 16px;
  }

  /* Hero CTA Buttons - Length matches content length */
  .health-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
  }

  .health-hero-actions .btn-appointment,
  .health-hero-actions .btn-appointment-light {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    max-width: fit-content !important;
    min-height: 35px;
    padding: 3px 3px 3px 12px;
    gap: 7px;
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
  }

  .health-hero-actions .btn-appointment span:first-child,
  .health-hero-actions .btn-appointment-light span:first-child {
    display: inline-block !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    order: 1 !important;
    text-align: left;
    white-space: nowrap;
  }

  .health-hero-actions .btn-appointment span:first-child {
    color: var(--color-navy) !important;
  }

  .health-hero-actions .btn-appointment-light span:first-child {
    color: #FFFFFF !important;
  }

  .health-hero-actions .btn-appointment .arrow-circle,
  .health-hero-actions .btn-appointment-light .arrow-circle {
    order: 2 !important;
    margin-left: 0 !important;
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .health-hero-actions .btn-appointment .arrow-circle svg,
  .health-hero-actions .btn-appointment-light .arrow-circle svg {
    width: 11px;
    height: 11px;
  }

  .health-hero-cloud-box {
    max-width: 100%;
  }

  /* Ribbon Key Benefits - Exactly Two Rows with Clean Dividers for All Points */
  .health-hero-ribbon-fullwidth {
    padding: 8px 0;
  }

  .health-ribbon-fullwidth-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0 !important;
    padding: 0 8px !important;
  }

  .health-ribbon-divider {
    display: none !important;
  }

  .health-ribbon-item {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  /* Row 1: 3 items (each spans 2 of 6 columns = 33.33%) */
  .ribbon-item-1,
  .ribbon-item-2,
  .ribbon-item-3 {
    grid-column: span 2 !important;
    padding: 8px 5px 10px !important;
    gap: 6px !important;
    border-bottom: 1px solid rgba(0, 168, 142, 0.28) !important;
  }

  .ribbon-item-1 {
    border-right: 1px solid rgba(0, 168, 142, 0.28) !important;
    padding-left: 2px !important;
  }

  .ribbon-item-2 {
    border-right: 1px solid rgba(0, 168, 142, 0.28) !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .ribbon-item-3 {
    padding-left: 5px !important;
    padding-right: 2px !important;
  }

  /* Row 2: 2 items (each spans 3 of 6 columns = 50%) */
  .ribbon-item-4,
  .ribbon-item-5 {
    grid-column: span 3 !important;
    padding: 10px 8px 8px !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .ribbon-item-4 {
    border-right: 1px solid rgba(0, 168, 142, 0.28) !important;
  }

  /* Compact typography & icons for the 2-row layout */
  .ribbon-item-1 .health-ribbon-icon-wrap,
  .ribbon-item-2 .health-ribbon-icon-wrap,
  .ribbon-item-3 .health-ribbon-icon-wrap {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex-shrink: 0 !important;
  }

  .ribbon-item-1 .health-ribbon-icon-wrap svg,
  .ribbon-item-2 .health-ribbon-icon-wrap svg,
  .ribbon-item-3 .health-ribbon-icon-wrap svg {
    width: 13px !important;
    height: 13px !important;
  }

  .ribbon-item-4 .health-ribbon-icon-wrap,
  .ribbon-item-5 .health-ribbon-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
  }

  .ribbon-item-4 .health-ribbon-icon-wrap svg,
  .ribbon-item-5 .health-ribbon-icon-wrap svg {
    width: 14px !important;
    height: 14px !important;
  }

  .health-ribbon-text {
    min-width: 0;
  }

  .health-ribbon-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    color: #FFFFFF !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .health-ribbon-desc {
    font-size: 9px !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Service sub-sections padding & headings for mobile */
  .service-sub-section {
    padding: 24px 0;
  }

  .service-sub-header {
    margin-bottom: 14px;
  }

  .service-sub-title {
    font-size: clamp(18px, 4.8vw, 22px);
    margin-bottom: 6px;
  }

  .service-sub-desc {
    font-size: 12px;
    line-height: 1.5;
  }

  .service-kicker {
    font-size: 9.5px;
    padding: 2px 8px;
    margin-bottom: 8px;
  }

  /* FAQ Items on mobile */
  .faq-accordion-header {
    padding: 12px 14px;
  }

  .faq-question-text {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .faq-toggle-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  .faq-accordion-body {
    padding: 0 14px 12px;
    font-size: 11.5px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {

  .health-hero-actions .btn-appointment,
  .health-hero-actions .btn-appointment-light {
    min-height: 32px !important;
    padding: 2.5px 2.5px 2.5px 10px !important;
    gap: 6px !important;
  }

  .health-hero-actions .btn-appointment span:first-child,
  .health-hero-actions .btn-appointment-light span:first-child {
    font-size: 10.5px !important;
  }

  .health-hero-actions .btn-appointment .arrow-circle,
  .health-hero-actions .btn-appointment-light .arrow-circle {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  .health-hero-actions .btn-appointment .arrow-circle svg,
  .health-hero-actions .btn-appointment-light .arrow-circle svg {
    width: 10px !important;
    height: 10px !important;
  }
}

@media (max-width: 360px) {
  .health-hero-actions {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .health-hero-actions .btn-appointment,
  .health-hero-actions .btn-appointment-light {
    min-height: 29px !important;
    padding: 2px 2px 2px 9px !important;
    gap: 5px !important;
  }

  .health-hero-actions .btn-appointment span:first-child,
  .health-hero-actions .btn-appointment-light span:first-child {
    font-size: 10px !important;
  }

  .health-hero-actions .btn-appointment .arrow-circle,
  .health-hero-actions .btn-appointment-light .arrow-circle {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  .health-hero-actions .btn-appointment .arrow-circle svg,
  .health-hero-actions .btn-appointment-light .arrow-circle svg {
    width: 9px !important;
    height: 9px !important;
  }
}

/* ==========================================================================
   29. Multi-Service Details Custom Hero Framework (Dark Theme)
   Dedicated classes for Life, Motor, SME, Critical Illness, and Personal Accident.
   Guarantees 100% UI fidelity with health-insurance.html while preserving
   clean, service-specific class names for long-term maintenance.
   ========================================================================== */

.life-hero-section,
.motor-hero-section,
.sme-hero-section,
.critical-hero-section,
.accident-hero-section {
  position: relative;
  width: 100%;
  background-color: var(--color-navy);
  padding: clamp(105px, 13.5vh, 135px) 0 0 0;
  box-sizing: border-box;
  overflow: hidden;
}

.life-hero-container,
.motor-hero-container,
.sme-hero-container,
.critical-hero-container,
.accident-hero-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 48px) clamp(24px, 3.5vw, 40px);
  box-sizing: border-box;
}

.life-hero-grid,
.motor-hero-grid,
.sme-hero-grid,
.critical-hero-grid,
.accident-hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: clamp(32px, 4.5vw, 68px);
  width: 100%;
}

.life-hero-copy,
.motor-hero-copy,
.sme-hero-copy,
.critical-hero-copy,
.accident-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.life-hero-breadcrumb,
.motor-hero-breadcrumb,
.sme-hero-breadcrumb,
.critical-hero-breadcrumb,
.accident-hero-breadcrumb {
  margin-bottom: clamp(16px, 2vh, 22px);
}

.life-breadcrumb-list,
.motor-breadcrumb-list,
.sme-breadcrumb-list,
.critical-breadcrumb-list,
.accident-breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 8px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.life-breadcrumb-item,
.motor-breadcrumb-item,
.sme-breadcrumb-item,
.critical-breadcrumb-item,
.accident-breadcrumb-item {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
}

.life-breadcrumb-link,
.motor-breadcrumb-link,
.sme-breadcrumb-link,
.critical-breadcrumb-link,
.accident-breadcrumb-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.life-breadcrumb-link:hover,
.motor-breadcrumb-link:hover,
.sme-breadcrumb-link:hover,
.critical-breadcrumb-link:hover,
.accident-breadcrumb-link:hover {
  color: var(--color-teal);
}

.life-breadcrumb-sep,
.motor-breadcrumb-sep,
.sme-breadcrumb-sep,
.critical-breadcrumb-sep,
.accident-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  user-select: none;
}

.life-breadcrumb-item.active,
.motor-breadcrumb-item.active,
.sme-breadcrumb-item.active,
.critical-breadcrumb-item.active,
.accident-breadcrumb-item.active {
  color: var(--color-teal);
  font-weight: 700;
}

.life-hero-badge-wrap,
.motor-hero-badge-wrap,
.sme-hero-badge-wrap,
.critical-hero-badge-wrap,
.accident-hero-badge-wrap {
  margin-bottom: clamp(16px, 2.2vh, 22px);
}

.life-hero-badge,
.motor-hero-badge,
.sme-hero-badge,
.critical-hero-badge,
.accident-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  background-color: rgba(0, 168, 142, 0.16);
  border: 1px solid rgba(0, 168, 142, 0.45);
  border-radius: 9999px;
  color: #00D6B5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.life-hero-title,
.motor-hero-title,
.sme-hero-title,
.critical-hero-title,
.accident-hero-title {
  font-size: clamp(34px, 4.4vw, 45px);
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0 0 clamp(14px, 1.8vh, 18px);
}

.life-hero-subtitle,
.motor-hero-subtitle,
.sme-hero-subtitle,
.critical-hero-subtitle,
.accident-hero-subtitle {
  font-size: clamp(16px, 1.4vw, 19.5px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 clamp(28px, 3.5vh, 36px);
  max-width: 580px;
}

.life-hero-actions,
.motor-hero-actions,
.sme-hero-actions,
.critical-hero-actions,
.accident-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.life-hero-actions .btn-appointment,
.motor-hero-actions .btn-appointment,
.sme-hero-actions .btn-appointment,
.critical-hero-actions .btn-appointment,
.accident-hero-actions .btn-appointment {
  background-color: #FFFFFF;
  color: var(--color-navy);
  border: 1.5px solid #FFFFFF;
  min-height: 48px;
  box-sizing: border-box;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.life-hero-actions .btn-appointment:hover,
.motor-hero-actions .btn-appointment:hover,
.sme-hero-actions .btn-appointment:hover,
.critical-hero-actions .btn-appointment:hover,
.accident-hero-actions .btn-appointment:hover {
  background-color: #F1F5F9;
  color: var(--color-navy);
  transform: translateY(-1px);
}

.life-hero-actions .btn-appointment .arrow-circle,
.motor-hero-actions .btn-appointment .arrow-circle,
.sme-hero-actions .btn-appointment .arrow-circle,
.critical-hero-actions .btn-appointment .arrow-circle,
.accident-hero-actions .btn-appointment .arrow-circle {
  background-color: var(--color-navy);
  color: #FFFFFF;
}

.life-hero-actions .btn-appointment:hover .arrow-circle,
.motor-hero-actions .btn-appointment:hover .arrow-circle,
.sme-hero-actions .btn-appointment:hover .arrow-circle,
.critical-hero-actions .btn-appointment:hover .arrow-circle,
.accident-hero-actions .btn-appointment:hover .arrow-circle {
  transform: translateX(2px);
}

.life-hero-actions .btn-appointment-light,
.motor-hero-actions .btn-appointment-light,
.sme-hero-actions .btn-appointment-light,
.critical-hero-actions .btn-appointment-light,
.accident-hero-actions .btn-appointment-light {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
  border-radius: 9999px;
  padding: 5px 6px 5px 22px;
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
  box-sizing: border-box;
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}

.life-hero-actions .btn-appointment-light:hover,
.motor-hero-actions .btn-appointment-light:hover,
.sme-hero-actions .btn-appointment-light:hover,
.critical-hero-actions .btn-appointment-light:hover,
.accident-hero-actions .btn-appointment-light:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.life-hero-actions .btn-appointment-light .arrow-circle,
.motor-hero-actions .btn-appointment-light .arrow-circle,
.sme-hero-actions .btn-appointment-light .arrow-circle,
.critical-hero-actions .btn-appointment-light .arrow-circle,
.accident-hero-actions .btn-appointment-light .arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  flex-shrink: 0;
}

.life-hero-actions .btn-appointment-light:hover .arrow-circle,
.motor-hero-actions .btn-appointment-light:hover .arrow-circle,
.sme-hero-actions .btn-appointment-light:hover .arrow-circle,
.critical-hero-actions .btn-appointment-light:hover .arrow-circle,
.accident-hero-actions .btn-appointment-light:hover .arrow-circle {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateX(2px);
}

.life-hero-visual-col,
.motor-hero-visual-col,
.sme-hero-visual-col,
.critical-hero-visual-col,
.accident-hero-visual-col {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}

.life-hero-cloud-box,
.motor-hero-cloud-box,
.sme-hero-cloud-box,
.critical-hero-cloud-box,
.accident-hero-cloud-box {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.life-cloud-graphic,
.motor-cloud-graphic,
.sme-cloud-graphic,
.critical-cloud-graphic,
.accident-cloud-graphic {
  width: 100%;
  height: auto;
  max-height: 480px;
  display: block;
  overflow: visible;
}

.life-cloud-border-line,
.motor-cloud-border-line,
.sme-cloud-border-line,
.critical-cloud-border-line,
.accident-cloud-border-line {
  stroke: #00A88E;
  stroke-width: 2.5px;
  transition: stroke 0.3s ease;
}

.life-hero-ribbon-fullwidth,
.motor-hero-ribbon-fullwidth,
.sme-hero-ribbon-fullwidth,
.critical-hero-ribbon-fullwidth,
.accident-hero-ribbon-fullwidth {
  width: 100%;
  background-color: var(--color-navy-dark);
  border-top: 1px solid rgba(0, 168, 142, 0.28);
  border-bottom: 1px solid rgba(0, 168, 142, 0.28);
  padding: clamp(14px, 1.6vw, 20px) 0;
  box-sizing: border-box;
}

.life-ribbon-fullwidth-container,
.motor-ribbon-fullwidth-container,
.sme-ribbon-fullwidth-container,
.critical-ribbon-fullwidth-container,
.accident-ribbon-fullwidth-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  box-sizing: border-box;
}

.life-ribbon-item,
.motor-ribbon-item,
.sme-ribbon-item,
.critical-ribbon-item,
.accident-ribbon-item {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
}

.life-ribbon-icon-wrap,
.motor-ribbon-icon-wrap,
.sme-ribbon-icon-wrap,
.critical-ribbon-icon-wrap,
.accident-ribbon-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-teal);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.life-ribbon-item:hover .life-ribbon-icon-wrap,
.motor-ribbon-item:hover .motor-ribbon-icon-wrap,
.sme-ribbon-item:hover .sme-ribbon-icon-wrap,
.critical-ribbon-item:hover .critical-ribbon-icon-wrap,
.accident-ribbon-item:hover .accident-ribbon-icon-wrap {
  transform: scale(1.08);
  background-color: #00D6B5;
  color: var(--color-navy);
}

.life-ribbon-text,
.motor-ribbon-text,
.sme-ribbon-text,
.critical-ribbon-text,
.accident-ribbon-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.life-ribbon-title,
.motor-ribbon-title,
.sme-ribbon-title,
.critical-ribbon-title,
.accident-ribbon-title {
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.life-ribbon-desc,
.motor-ribbon-desc,
.sme-ribbon-desc,
.critical-ribbon-desc,
.accident-ribbon-desc {
  font-size: clamp(11.5px, 0.82vw, 12.5px);
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.35;
}

.life-ribbon-divider,
.motor-ribbon-divider,
.sme-ribbon-divider,
.critical-ribbon-divider,
.accident-ribbon-divider {
  width: 1px;
  height: 36px;
  background-color: rgba(0, 168, 142, 0.28);
  flex-shrink: 0;
}

/* Multi-device Responsive Breakpoints for all Services */
@media (max-width: 1200px) {

  .life-ribbon-fullwidth-container,
  .motor-ribbon-fullwidth-container,
  .sme-ribbon-fullwidth-container,
  .critical-ribbon-fullwidth-container,
  .accident-ribbon-fullwidth-container {
    gap: clamp(8px, 1.2vw, 16px);
    padding: 0 clamp(12px, 2.5vw, 24px);
  }
}

@media (max-width: 1080px) {

  .life-hero-grid,
  .motor-hero-grid,
  .sme-hero-grid,
  .critical-hero-grid,
  .accident-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .life-hero-copy,
  .motor-hero-copy,
  .sme-hero-copy,
  .critical-hero-copy,
  .accident-hero-copy {
    max-width: 100%;
  }

  .life-hero-cloud-box,
  .motor-hero-cloud-box,
  .sme-hero-cloud-box,
  .critical-hero-cloud-box,
  .accident-hero-cloud-box {
    max-width: 680px;
    margin: 0 auto;
  }
}

@media (max-width: 991px) {

  .life-hero-section,
  .motor-hero-section,
  .sme-hero-section,
  .critical-hero-section,
  .accident-hero-section {
    padding-top: 96px;
  }

  .life-hero-title,
  .motor-hero-title,
  .sme-hero-title,
  .critical-hero-title,
  .accident-hero-title {
    font-size: clamp(26px, 5.2vw, 36px);
    margin-bottom: 12px;
  }

  .life-hero-subtitle,
  .motor-hero-subtitle,
  .sme-hero-subtitle,
  .critical-hero-subtitle,
  .accident-hero-subtitle {
    font-size: clamp(14px, 2.2vw, 17px);
    margin-bottom: 22px;
  }

  .life-ribbon-fullwidth-container,
  .motor-ribbon-fullwidth-container,
  .sme-ribbon-fullwidth-container,
  .critical-ribbon-fullwidth-container,
  .accident-ribbon-fullwidth-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0 !important;
  }

  .life-ribbon-divider,
  .motor-ribbon-divider,
  .sme-ribbon-divider,
  .critical-ribbon-divider,
  .accident-ribbon-divider {
    display: none !important;
  }

  .life-ribbon-item,
  .motor-ribbon-item,
  .sme-ribbon-item,
  .critical-ribbon-item,
  .accident-ribbon-item {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 560px) {

  .life-hero-section,
  .motor-hero-section,
  .sme-hero-section,
  .critical-hero-section,
  .accident-hero-section {
    padding-top: 88px;
  }

  .life-hero-container,
  .motor-hero-container,
  .sme-hero-container,
  .critical-hero-container,
  .accident-hero-container {
    padding: 0 14px 20px;
  }

  .life-hero-breadcrumb,
  .motor-hero-breadcrumb,
  .sme-hero-breadcrumb,
  .critical-hero-breadcrumb,
  .accident-hero-breadcrumb {
    margin-bottom: 10px;
  }

  .life-breadcrumb-item,
  .motor-breadcrumb-item,
  .sme-breadcrumb-item,
  .critical-breadcrumb-item,
  .accident-breadcrumb-item {
    font-size: 11.5px;
  }

  .life-hero-badge-wrap,
  .motor-hero-badge-wrap,
  .sme-hero-badge-wrap,
  .critical-hero-badge-wrap,
  .accident-hero-badge-wrap {
    margin-bottom: 10px;
  }

  .life-hero-badge,
  .motor-hero-badge,
  .sme-hero-badge,
  .critical-hero-badge,
  .accident-hero-badge {
    font-size: 9.5px;
    padding: 3px 10px;
  }

  .life-hero-title,
  .motor-hero-title,
  .sme-hero-title,
  .critical-hero-title,
  .accident-hero-title {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 10px;
  }

  .life-hero-subtitle,
  .motor-hero-subtitle,
  .sme-hero-subtitle,
  .critical-hero-subtitle,
  .accident-hero-subtitle {
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 16px;
  }

  .life-hero-actions,
  .motor-hero-actions,
  .sme-hero-actions,
  .critical-hero-actions,
  .accident-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
  }

  .life-hero-actions .btn-appointment,
  .life-hero-actions .btn-appointment-light,
  .motor-hero-actions .btn-appointment,
  .motor-hero-actions .btn-appointment-light,
  .sme-hero-actions .btn-appointment,
  .sme-hero-actions .btn-appointment-light,
  .critical-hero-actions .btn-appointment,
  .critical-hero-actions .btn-appointment-light,
  .accident-hero-actions .btn-appointment,
  .accident-hero-actions .btn-appointment-light {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    max-width: fit-content !important;
    min-height: 35px;
    padding: 3px 3px 3px 12px;
    gap: 7px;
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
  }

  .life-hero-actions .btn-appointment span:first-child,
  .life-hero-actions .btn-appointment-light span:first-child,
  .motor-hero-actions .btn-appointment span:first-child,
  .motor-hero-actions .btn-appointment-light span:first-child,
  .sme-hero-actions .btn-appointment span:first-child,
  .sme-hero-actions .btn-appointment-light span:first-child,
  .critical-hero-actions .btn-appointment span:first-child,
  .critical-hero-actions .btn-appointment-light span:first-child,
  .accident-hero-actions .btn-appointment span:first-child,
  .accident-hero-actions .btn-appointment-light span:first-child {
    display: inline-block !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    order: 1 !important;
    text-align: left;
    white-space: nowrap;
  }

  .life-hero-actions .btn-appointment span:first-child,
  .motor-hero-actions .btn-appointment span:first-child,
  .sme-hero-actions .btn-appointment span:first-child,
  .critical-hero-actions .btn-appointment span:first-child,
  .accident-hero-actions .btn-appointment span:first-child {
    color: var(--color-navy) !important;
  }

  .life-hero-actions .btn-appointment-light span:first-child,
  .motor-hero-actions .btn-appointment-light span:first-child,
  .sme-hero-actions .btn-appointment-light span:first-child,
  .critical-hero-actions .btn-appointment-light span:first-child,
  .accident-hero-actions .btn-appointment-light span:first-child {
    color: #FFFFFF !important;
  }

  .life-hero-actions .btn-appointment .arrow-circle,
  .life-hero-actions .btn-appointment-light .arrow-circle,
  .motor-hero-actions .btn-appointment .arrow-circle,
  .motor-hero-actions .btn-appointment-light .arrow-circle,
  .sme-hero-actions .btn-appointment .arrow-circle,
  .sme-hero-actions .btn-appointment-light .arrow-circle,
  .critical-hero-actions .btn-appointment .arrow-circle,
  .critical-hero-actions .btn-appointment-light .arrow-circle,
  .accident-hero-actions .btn-appointment .arrow-circle,
  .accident-hero-actions .btn-appointment-light .arrow-circle {
    order: 2 !important;
    margin-left: 0 !important;
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .life-hero-actions .btn-appointment .arrow-circle svg,
  .life-hero-actions .btn-appointment-light .arrow-circle svg,
  .motor-hero-actions .btn-appointment .arrow-circle svg,
  .motor-hero-actions .btn-appointment-light .arrow-circle svg,
  .sme-hero-actions .btn-appointment .arrow-circle svg,
  .sme-hero-actions .btn-appointment-light .arrow-circle svg,
  .critical-hero-actions .btn-appointment .arrow-circle svg,
  .critical-hero-actions .btn-appointment-light .arrow-circle svg,
  .accident-hero-actions .btn-appointment .arrow-circle svg,
  .accident-hero-actions .btn-appointment-light .arrow-circle svg {
    width: 11px;
    height: 11px;
  }

  .life-hero-cloud-box,
  .motor-hero-cloud-box,
  .sme-hero-cloud-box,
  .critical-hero-cloud-box,
  .accident-hero-cloud-box {
    max-width: 100%;
  }

  .life-hero-ribbon-fullwidth,
  .motor-hero-ribbon-fullwidth,
  .sme-hero-ribbon-fullwidth,
  .critical-hero-ribbon-fullwidth,
  .accident-hero-ribbon-fullwidth {
    padding: 8px 0;
  }

  .life-ribbon-fullwidth-container,
  .motor-ribbon-fullwidth-container,
  .sme-ribbon-fullwidth-container,
  .critical-ribbon-fullwidth-container,
  .accident-ribbon-fullwidth-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0 !important;
    padding: 0 8px !important;
  }

  .life-ribbon-divider,
  .motor-ribbon-divider,
  .sme-ribbon-divider,
  .critical-ribbon-divider,
  .accident-ribbon-divider {
    display: none !important;
  }

  .life-ribbon-item,
  .motor-ribbon-item,
  .sme-ribbon-item,
  .critical-ribbon-item,
  .accident-ribbon-item {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  .ribbon-item-1 .life-ribbon-icon-wrap,
  .ribbon-item-2 .life-ribbon-icon-wrap,
  .ribbon-item-3 .life-ribbon-icon-wrap,
  .ribbon-item-1 .motor-ribbon-icon-wrap,
  .ribbon-item-2 .motor-ribbon-icon-wrap,
  .ribbon-item-3 .motor-ribbon-icon-wrap,
  .ribbon-item-1 .sme-ribbon-icon-wrap,
  .ribbon-item-2 .sme-ribbon-icon-wrap,
  .ribbon-item-3 .sme-ribbon-icon-wrap,
  .ribbon-item-1 .critical-ribbon-icon-wrap,
  .ribbon-item-2 .critical-ribbon-icon-wrap,
  .ribbon-item-3 .critical-ribbon-icon-wrap,
  .ribbon-item-1 .accident-ribbon-icon-wrap,
  .ribbon-item-2 .accident-ribbon-icon-wrap,
  .ribbon-item-3 .accident-ribbon-icon-wrap {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex-shrink: 0 !important;
  }

  .ribbon-item-1 .life-ribbon-icon-wrap svg,
  .ribbon-item-2 .life-ribbon-icon-wrap svg,
  .ribbon-item-3 .life-ribbon-icon-wrap svg,
  .ribbon-item-1 .motor-ribbon-icon-wrap svg,
  .ribbon-item-2 .motor-ribbon-icon-wrap svg,
  .ribbon-item-3 .motor-ribbon-icon-wrap svg,
  .ribbon-item-1 .sme-ribbon-icon-wrap svg,
  .ribbon-item-2 .sme-ribbon-icon-wrap svg,
  .ribbon-item-3 .sme-ribbon-icon-wrap svg,
  .ribbon-item-1 .critical-ribbon-icon-wrap svg,
  .ribbon-item-2 .critical-ribbon-icon-wrap svg,
  .ribbon-item-3 .critical-ribbon-icon-wrap svg,
  .ribbon-item-1 .accident-ribbon-icon-wrap svg,
  .ribbon-item-2 .accident-ribbon-icon-wrap svg,
  .ribbon-item-3 .accident-ribbon-icon-wrap svg {
    width: 13px !important;
    height: 13px !important;
  }

  .ribbon-item-4 .life-ribbon-icon-wrap,
  .ribbon-item-5 .life-ribbon-icon-wrap,
  .ribbon-item-4 .motor-ribbon-icon-wrap,
  .ribbon-item-5 .motor-ribbon-icon-wrap,
  .ribbon-item-4 .sme-ribbon-icon-wrap,
  .ribbon-item-5 .sme-ribbon-icon-wrap,
  .ribbon-item-4 .critical-ribbon-icon-wrap,
  .ribbon-item-5 .critical-ribbon-icon-wrap,
  .ribbon-item-4 .accident-ribbon-icon-wrap,
  .ribbon-item-5 .accident-ribbon-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
  }

  .ribbon-item-4 .life-ribbon-icon-wrap svg,
  .ribbon-item-5 .life-ribbon-icon-wrap svg,
  .ribbon-item-4 .motor-ribbon-icon-wrap svg,
  .ribbon-item-5 .motor-ribbon-icon-wrap svg,
  .ribbon-item-4 .sme-ribbon-icon-wrap svg,
  .ribbon-item-5 .sme-ribbon-icon-wrap svg,
  .ribbon-item-4 .critical-ribbon-icon-wrap svg,
  .ribbon-item-5 .critical-ribbon-icon-wrap svg,
  .ribbon-item-4 .accident-ribbon-icon-wrap svg,
  .ribbon-item-5 .accident-ribbon-icon-wrap svg {
    width: 14px !important;
    height: 14px !important;
  }

  .life-ribbon-text,
  .motor-ribbon-text,
  .sme-ribbon-text,
  .critical-ribbon-text,
  .accident-ribbon-text {
    min-width: 0;
  }

  .life-ribbon-title,
  .motor-ribbon-title,
  .sme-ribbon-title,
  .critical-ribbon-title,
  .accident-ribbon-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    color: #FFFFFF !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .life-ribbon-desc,
  .motor-ribbon-desc,
  .sme-ribbon-desc,
  .critical-ribbon-desc,
  .accident-ribbon-desc {
    font-size: 9px !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

@media (max-width: 480px) {

  .life-hero-actions .btn-appointment,
  .life-hero-actions .btn-appointment-light,
  .motor-hero-actions .btn-appointment,
  .motor-hero-actions .btn-appointment-light,
  .sme-hero-actions .btn-appointment,
  .sme-hero-actions .btn-appointment-light,
  .critical-hero-actions .btn-appointment,
  .critical-hero-actions .btn-appointment-light,
  .accident-hero-actions .btn-appointment,
  .accident-hero-actions .btn-appointment-light {
    min-height: 32px !important;
    padding: 2.5px 2.5px 2.5px 10px !important;
    gap: 6px !important;
  }

  .life-hero-actions .btn-appointment span:first-child,
  .life-hero-actions .btn-appointment-light span:first-child,
  .motor-hero-actions .btn-appointment span:first-child,
  .motor-hero-actions .btn-appointment-light span:first-child,
  .sme-hero-actions .btn-appointment span:first-child,
  .sme-hero-actions .btn-appointment-light span:first-child,
  .critical-hero-actions .btn-appointment span:first-child,
  .critical-hero-actions .btn-appointment-light span:first-child,
  .accident-hero-actions .btn-appointment span:first-child,
  .accident-hero-actions .btn-appointment-light span:first-child {
    font-size: 10.5px !important;
  }

  .life-hero-actions .btn-appointment .arrow-circle,
  .life-hero-actions .btn-appointment-light .arrow-circle,
  .motor-hero-actions .btn-appointment .arrow-circle,
  .motor-hero-actions .btn-appointment-light .arrow-circle,
  .sme-hero-actions .btn-appointment .arrow-circle,
  .sme-hero-actions .btn-appointment-light .arrow-circle,
  .critical-hero-actions .btn-appointment .arrow-circle,
  .critical-hero-actions .btn-appointment-light .arrow-circle,
  .accident-hero-actions .btn-appointment .arrow-circle,
  .accident-hero-actions .btn-appointment-light .arrow-circle {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  .life-hero-actions .btn-appointment .arrow-circle svg,
  .life-hero-actions .btn-appointment-light .arrow-circle svg,
  .motor-hero-actions .btn-appointment .arrow-circle svg,
  .motor-hero-actions .btn-appointment-light .arrow-circle svg,
  .sme-hero-actions .btn-appointment .arrow-circle svg,
  .sme-hero-actions .btn-appointment-light .arrow-circle svg,
  .critical-hero-actions .btn-appointment .arrow-circle svg,
  .critical-hero-actions .btn-appointment-light .arrow-circle svg,
  .accident-hero-actions .btn-appointment .arrow-circle svg,
  .accident-hero-actions .btn-appointment-light .arrow-circle svg {
    width: 10px !important;
    height: 10px !important;
  }
}

@media (max-width: 360px) {

  .life-hero-actions,
  .motor-hero-actions,
  .sme-hero-actions,
  .critical-hero-actions,
  .accident-hero-actions {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .life-hero-actions .btn-appointment,
  .life-hero-actions .btn-appointment-light,
  .motor-hero-actions .btn-appointment,
  .motor-hero-actions .btn-appointment-light,
  .sme-hero-actions .btn-appointment,
  .sme-hero-actions .btn-appointment-light,
  .critical-hero-actions .btn-appointment,
  .critical-hero-actions .btn-appointment-light,
  .accident-hero-actions .btn-appointment,
  .accident-hero-actions .btn-appointment-light {
    min-height: 29px !important;
    padding: 2px 2px 2px 9px !important;
    gap: 5px !important;
  }

  .life-hero-actions .btn-appointment span:first-child,
  .life-hero-actions .btn-appointment-light span:first-child,
  .motor-hero-actions .btn-appointment span:first-child,
  .motor-hero-actions .btn-appointment-light span:first-child,
  .sme-hero-actions .btn-appointment span:first-child,
  .sme-hero-actions .btn-appointment-light span:first-child,
  .critical-hero-actions .btn-appointment span:first-child,
  .critical-hero-actions .btn-appointment-light span:first-child,
  .accident-hero-actions .btn-appointment span:first-child,
  .accident-hero-actions .btn-appointment-light span:first-child {
    font-size: 10px !important;
  }

  .life-hero-actions .btn-appointment .arrow-circle,
  .life-hero-actions .btn-appointment-light .arrow-circle,
  .motor-hero-actions .btn-appointment .arrow-circle,
  .motor-hero-actions .btn-appointment-light .arrow-circle,
  .sme-hero-actions .btn-appointment .arrow-circle,
  .sme-hero-actions .btn-appointment-light .arrow-circle,
  .critical-hero-actions .btn-appointment .arrow-circle,
  .critical-hero-actions .btn-appointment-light .arrow-circle,
  .accident-hero-actions .btn-appointment .arrow-circle,
  .accident-hero-actions .btn-appointment-light .arrow-circle {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  .life-hero-actions .btn-appointment .arrow-circle svg,
  .life-hero-actions .btn-appointment-light .arrow-circle svg,
  .motor-hero-actions .btn-appointment .arrow-circle svg,
  .motor-hero-actions .btn-appointment-light .arrow-circle svg,
  .sme-hero-actions .btn-appointment .arrow-circle svg,
  .sme-hero-actions .btn-appointment-light .arrow-circle svg,
  .critical-hero-actions .btn-appointment .arrow-circle svg,
  .critical-hero-actions .btn-appointment-light .arrow-circle svg,
  .accident-hero-actions .btn-appointment .arrow-circle svg,
  .accident-hero-actions .btn-appointment-light .arrow-circle svg {
    width: 9px !important;
    height: 9px !important;
  }
}

/* ==========================================================================
   18. Insurance Hub & Insurance Detailed Pages Design System (12+ Sections)
   Brand: Distroo IMF Pvt. Ltd. | Insurance Distribution. Engineered for Trust.
   Strict Rules: Zero Inline CSS, Zero Internal Styles, Zero Box Shadows,
                 Zero Gradients, Pure Authentic Indian Photography,
                 Organic Pill Geometry, Fluid clamp() Scaling (320px to 2560px+).
   ========================================================================== */

.ins-page-body {
  background-color: #F8FAFC;
  color: var(--color-navy);
  font-family: var(--font-family);
  overflow-x: clip;
}

/* --- Core Section & Container Utilities --- */
.ins-section {
  position: relative;
  width: 100%;
  padding: clamp(56px, 7vw, 92px) 0;
  box-sizing: border-box;
}

.ins-section-alt {
  background-color: #FFFFFF;
}

.ins-section-dark {
  background-color: var(--color-navy);
  color: #FFFFFF;
}

.ins-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 44px);
  box-sizing: border-box;
}

.ins-section-header {
  text-align: center;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.ins-section-header.text-left {
  text-align: left;
  margin-left: 0;
}

.ins-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}

.ins-kicker-saffron {
  color: var(--color-saffron);
  background-color: rgba(255, 138, 0, 0.08);
  border-color: rgba(255, 138, 0, 0.24);
}

.ins-kicker-white {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}

.ins-title {
  font-size: clamp(26px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--color-navy);
  margin: 0 0 14px;
}

.ins-section-dark .ins-title {
  color: #FFFFFF;
}

.ins-title-accent {
  color: var(--color-teal);
}

.ins-desc {
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.65;
  color: #64748B;
  margin: 0;
}

.ins-section-dark .ins-desc {
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   Section 1: Tailored Product Hero
   ========================================================================== */
.ins-hero-section {
  position: relative;
  width: 100%;
  background-color: var(--color-navy);
  color: #FFFFFF;
  padding: clamp(100px, 12vw, 135px) 0 clamp(44px, 5.5vw, 68px);
  overflow: hidden;
}

/* ==========================================================================
   Insurance Detail Pages Custom Hero Banners (Full Background + Left Dark Overlay)
   Matching /life-insurance.html layout across all 6 insurance detail pages
   ========================================================================== */
#life-hero.ins-hero-section,
#health-hero.ins-hero-section,
#motor-hero.ins-hero-section,
#sme-hero.ins-hero-section,
#critical-hero.ins-hero-section,
#accident-hero.ins-hero-section {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 60vh, 640px);
  display: flex;
  align-items: center;
  background-color: #030712;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: clamp(115px, 12vw, 145px) 0 clamp(36px, 4.5vw, 50px);
  overflow: hidden;
}

#life-hero .ins-hero-bg-accent,
#health-hero .ins-hero-bg-accent,
#motor-hero .ins-hero-bg-accent,
#sme-hero .ins-hero-bg-accent,
#critical-hero .ins-hero-bg-accent,
#accident-hero .ins-hero-bg-accent {
  display: none;
}

#life-hero .ins-hero-grid,
#health-hero .ins-hero-grid,
#motor-hero .ins-hero-grid,
#sme-hero .ins-hero-grid,
#critical-hero .ins-hero-grid,
#accident-hero .ins-hero-grid {
  display: block;
}

#life-hero .ins-hero-copy,
#health-hero .ins-hero-copy,
#motor-hero .ins-hero-copy,
#sme-hero .ins-hero-copy,
#critical-hero .ins-hero-copy,
#accident-hero .ins-hero-copy {
  max-width: 680px;
  width: 100%;
  position: relative;
  z-index: 2;
}

#life-hero .ins-hero-title,
#health-hero .ins-hero-title,
#motor-hero .ins-hero-title,
#sme-hero .ins-hero-title,
#critical-hero .ins-hero-title,
#accident-hero .ins-hero-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0 0 20px;
  max-width: 700px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* 1. Life & Term Insurance Banner */
#life-hero.ins-hero-section {
  background-image:
    linear-gradient(90deg,
      rgba(3, 7, 18, 0.96) 0%,
      rgba(3, 7, 18, 0.93) 38%,
      rgba(3, 7, 18, 0.74) 56%,
      rgba(3, 7, 18, 0.30) 76%,
      rgba(3, 7, 18, 0.04) 100%),
    url('./assets/life-insurance/family-protection-insurance-banner.webp');
}

/* 2. Health Insurance Banner */
#health-hero.ins-hero-section {
  background-image:
    linear-gradient(90deg,
      rgba(3, 7, 18, 0.96) 0%,
      rgba(3, 7, 18, 0.93) 38%,
      rgba(3, 7, 18, 0.74) 56%,
      rgba(3, 7, 18, 0.30) 76%,
      rgba(3, 7, 18, 0.04) 100%),
    url('assets/health-insurance/Family-Healthcare-Coverage-Consultation.webp');
}

/* 3. Motor Insurance Banner */
#motor-hero.ins-hero-section {
  background-image:
    linear-gradient(90deg,
      rgba(3, 7, 18, 0.96) 0%,
      rgba(3, 7, 18, 0.93) 38%,
      rgba(3, 7, 18, 0.74) 56%,
      rgba(3, 7, 18, 0.30) 76%,
      rgba(3, 7, 18, 0.04) 100%),
    url('./assets/motor-insurance/Fleet-Insurance-Consultation-with-City-Vehicles.webp');
}

/* 4. SME & Business Insurance Banner */
#sme-hero.ins-hero-section {
  background-image:
    linear-gradient(90deg,
      rgba(3, 7, 18, 0.96) 0%,
      rgba(3, 7, 18, 0.93) 38%,
      rgba(3, 7, 18, 0.74) 56%,
      rgba(3, 7, 18, 0.30) 76%,
      rgba(3, 7, 18, 0.04) 100%),
    url('./assets/sme-business-insurance/Collaborative-Business-Insurance-Protection.webp');
}

/* 5. Critical Illness Insurance Banner */
#critical-hero.ins-hero-section {
  background-image:
    linear-gradient(90deg,
      rgba(3, 7, 18, 0.96) 0%,
      rgba(3, 7, 18, 0.93) 38%,
      rgba(3, 7, 18, 0.74) 56%,
      rgba(3, 7, 18, 0.30) 76%,
      rgba(3, 7, 18, 0.04) 100%),
    url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=1920&q=85');
}

/* 6. Personal Accident Insurance Banner */
#accident-hero.ins-hero-section {
  background-image:
    linear-gradient(90deg,
      rgba(3, 7, 18, 0.96) 0%,
      rgba(3, 7, 18, 0.93) 38%,
      rgba(3, 7, 18, 0.74) 56%,
      rgba(3, 7, 18, 0.30) 76%,
      rgba(3, 7, 18, 0.04) 100%),
    url('https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?auto=format&fit=crop&w=1920&q=85');
}

@media (max-width: 991px) {

  .ins-hero-section,
  #life-hero.ins-hero-section,
  #health-hero.ins-hero-section,
  #motor-hero.ins-hero-section,
  #sme-hero.ins-hero-section,
  #critical-hero.ins-hero-section,
  #accident-hero.ins-hero-section {
    min-height: clamp(500px, 75vh, 600px);
    padding: clamp(115px, 14vw, 135px) 0 clamp(44px, 6vw, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-position: center top;
  }

  #life-hero .ins-hero-copy,
  #health-hero .ins-hero-copy,
  #motor-hero .ins-hero-copy,
  #sme-hero .ins-hero-copy,
  #critical-hero .ins-hero-copy,
  #accident-hero .ins-hero-copy {
    max-width: 100%;
  }

  #life-hero.ins-hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(3, 7, 18, 0.92) 0%,
        rgba(3, 7, 18, 0.78) 45%,
        rgba(3, 7, 18, 0.50) 100%),
      url('./assets/life-insurance/family-protection-insurance-app-banner.webp');
  }

  #health-hero.ins-hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(3, 7, 18, 0.92) 0%,
        rgba(3, 7, 18, 0.78) 45%,
        rgba(3, 7, 18, 0.50) 100%),
      url('assets/health-insurance/Modern-Healthcare-Coverage-Consultation.webp');
  }

  #motor-hero.ins-hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(3, 7, 18, 0.92) 0%,
        rgba(3, 7, 18, 0.78) 45%,
        rgba(3, 7, 18, 0.50) 100%),
      url('./assets/motor-insurance/Outdoor-Auto-Consultation-Meeting.webp');
  }

  #sme-hero.ins-hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(3, 7, 18, 0.92) 0%,
        rgba(3, 7, 18, 0.78) 45%,
        rgba(3, 7, 18, 0.50) 100%),
      url('./assets/sme-business-insurance/Collaborative-Team-Under-Protective-Shield.webp');
  }

  #critical-hero.ins-hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(3, 7, 18, 0.92) 0%,
        rgba(3, 7, 18, 0.78) 45%,
        rgba(3, 7, 18, 0.50) 100%),
      url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=1200&q=80');
  }

  #accident-hero.ins-hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(3, 7, 18, 0.92) 0%,
        rgba(3, 7, 18, 0.78) 45%,
        rgba(3, 7, 18, 0.50) 100%),
      url('https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?auto=format&fit=crop&w=1200&q=80');
  }
}

.ins-hero-bg-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(0, 168, 142, 0.12) 0%, rgba(11, 29, 58, 0) 70%);
  pointer-events: none;
  aria-hidden: true;
}

.ins-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.ins-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}

.ins-breadcrumb {
  margin-bottom: 18px;
}

.ins-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

.ins-breadcrumb-link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ins-breadcrumb-link:hover {
  color: #FFFFFF;
}

.ins-breadcrumb-sep {
  opacity: 0.4;
}

.ins-breadcrumb-current {
  color: var(--color-teal);
  font-weight: 700;
}

.ins-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0, 168, 142, 0.16);
  border: 1px solid rgba(0, 168, 142, 0.35);
  color: #00D6B5;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 18px;
}

.ins-hero-title {
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 18px;
}

.ins-hero-subtitle {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px;
  max-width: 620px;
}

.ins-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.ins-hero-actions .btn-appointment {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #FFFFFF;
  color: var(--color-navy);
  border: 1.5px solid #FFFFFF;
  border-radius: 9999px;
  padding: 4px 4px 4px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  min-height: 40px;
  box-sizing: border-box;
  transition: all var(--transition-base);
}

.ins-hero-actions .btn-appointment:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 168, 142, 0.3);
}

.ins-hero-actions .btn-appointment .arrow-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.ins-hero-actions .btn-appointment .arrow-circle svg,
.ins-hero-actions .btn-appointment-light .arrow-circle svg {
  width: 12px;
  height: 12px;
}

.ins-hero-actions .btn-appointment:hover .arrow-circle {
  background-color: #FFFFFF;
  color: var(--color-teal);
  transform: translateX(2px);
}

.ins-hero-actions .btn-appointment-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
  border-radius: 9999px;
  padding: 4px 4px 4px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  min-height: 40px;
  box-sizing: border-box;
  transition: all var(--transition-base);
}

.ins-hero-actions .btn-appointment-light:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.ins-hero-actions .btn-appointment-light .arrow-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.ins-hero-actions .btn-appointment-light:hover .arrow-circle {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateX(2px);
}

.ins-hero-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
}

.ins-trust-point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.ins-trust-point svg {
  color: var(--color-teal);
  flex-shrink: 0;
}

/* Hero Visual Box */
.ins-hero-visual {
  position: relative;
  z-index: 1;
}

.ins-hero-image-card {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: var(--color-navy-dark);
  box-shadow: none !important;
}

.ins-hero-img {
  width: 100%;
  height: clamp(340px, 40vw, 440px);
  object-fit: cover;
  display: block;
}

.ins-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 29, 58, 0.1) 0%, rgba(11, 29, 58, 0.75) 100%);
}

.ins-hero-float-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: rgba(11, 29, 58, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

.ins-float-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ins-float-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-saffron);
  letter-spacing: 0.6px;
}

.ins-float-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
}

.ins-float-stat {
  font-size: 20px;
  font-weight: 800;
  color: #00D6B5;
  white-space: nowrap;
}

/* ==========================================================================
   Section 2: Metric & Advantage Ribbon
   ========================================================================== */
.ins-ribbon-section {
  width: 100%;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  padding: 0;
}

.ins-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
}

.ins-ribbon-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(20px, 2.5vw, 28px) clamp(16px, 1.8vw, 24px);
  border-right: 1px solid #E2E8F0;
  box-sizing: border-box;
}

.ins-ribbon-item:last-child {
  border-right: none;
}

.ins-ribbon-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ins-ribbon-item:hover .ins-ribbon-icon-box {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
}

.ins-ribbon-stat-num {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 3px;
}

.ins-ribbon-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  margin: 0;
  line-height: 1.35;
}

/* ==========================================================================
   Section 3: Plan Variants Matrix
   ========================================================================== */
.ins-variants-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.ins-variant-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: clamp(24px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), border-color var(--transition-base);
  box-shadow: none !important;
  box-sizing: border-box;
  position: relative;
}

.ins-variant-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-teal);
}

.ins-variant-card.featured {
  border: 2px solid var(--color-teal);
  background-color: #F8FFFD;
}

.ins-featured-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background-color: var(--color-teal);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.ins-variant-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ins-variant-tag {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-navy);
  background-color: #F1F5F9;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.ins-variant-badge-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-teal);
}

.ins-variant-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 10px;
  line-height: 1.25;
}

.ins-variant-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #64748B;
  margin: 0 0 20px;
}

.ins-variant-sum {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
}

.ins-sum-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  display: block;
}

.ins-sum-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-navy);
}

.ins-variant-points {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex-grow: 1;
}

.ins-variant-point {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
}

.ins-variant-point svg {
  color: var(--color-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.ins-btn-variant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background-color: var(--color-navy);
  color: #FFFFFF;
  border: 1px solid var(--color-navy);
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: none !important;
}

.ins-btn-variant:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
}

.ins-variant-card.featured .ins-btn-variant {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}

.ins-variant-card.featured .ins-btn-variant:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}

/* ==========================================================================
   Section 4: What is Covered vs What is Not (Inclusions & Exclusions)
   ========================================================================== */
#life-inclusions-exclusions {
  padding: clamp(34px, 4vw, 50px) 0;
}

#life-inclusions-exclusions .ins-section-header {
  margin: 0 auto clamp(18px, 2.2vw, 26px);
}

#life-inclusions-exclusions .ins-kicker {
  margin-bottom: 6px;
  padding: 3px 11px;
  font-size: 11px;
}

#life-inclusions-exclusions .ins-title {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.8vw, 28px);
}

#life-inclusions-exclusions .ins-desc {
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.5;
}

.ins-inc-exc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  align-items: stretch;
}

.ins-ie-card {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: clamp(15px, 1.6vw, 20px);
  border: 1px solid #E2E8F0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 12px -2px rgba(15, 23, 42, 0.04), 0 2px 4px -1px rgba(15, 23, 42, 0.02);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.ins-ie-card:hover {
  transform: translateY(-3px);
}

/* Left Card: Green Theme (Inclusions / Covered) */
.ins-inc-card {
  border-top: 3.5px solid #10B981;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, #FFFFFF 110px);
}

.ins-inc-card:hover {
  border-color: #10B981;
  box-shadow: 0 10px 22px -4px rgba(16, 185, 129, 0.14), 0 3px 6px rgba(15, 23, 42, 0.03);
}

.ins-inc-card .ins-ie-icon {
  background-color: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.ins-inc-card .ins-ie-bullet {
  background-color: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.ins-inc-card .ins-ie-item:hover {
  background-color: rgba(16, 185, 129, 0.04);
}

/* Right Card: Red Theme (Exclusions / Not Covered) */
.ins-exc-card {
  border-top: 3.5px solid #EF4444;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.04) 0%, #FFFFFF 110px);
}

.ins-exc-card:hover {
  border-color: #EF4444;
  box-shadow: 0 10px 22px -4px rgba(239, 68, 68, 0.14), 0 3px 6px rgba(15, 23, 42, 0.03);
}

.ins-exc-card .ins-ie-icon {
  background-color: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.ins-exc-card .ins-ie-bullet {
  background-color: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.ins-exc-card .ins-ie-item:hover {
  background-color: rgba(239, 68, 68, 0.04);
}

/* Header Area */
.ins-ie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid #F1F5F9;
}

.ins-ie-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ins-ie-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.ins-ie-card:hover .ins-ie-icon {
  transform: scale(1.05);
}

.ins-ie-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 2px;
}

.ins-ie-title {
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  font-weight: 800;
  color: var(--color-navy);
  margin: 0;
  line-height: 1.2;
}

.ins-ie-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ins-ie-badge-green {
  color: #047857;
  background-color: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.ins-ie-badge-red {
  color: #B91C1C;
  background-color: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.ins-ie-subtitle {
  font-size: 11.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.35;
}

/* Points List */
.ins-ie-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-grow: 1;
}

.ins-ie-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 6px;
  transition: background-color var(--transition-fast);
}

.ins-ie-bullet {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform var(--transition-fast);
}

.ins-ie-bullet svg {
  width: 10px;
  height: 10px;
}

.ins-ie-item:hover .ins-ie-bullet {
  transform: scale(1.08);
}

.ins-ie-content {
  flex: 1;
}

.ins-ie-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 1px;
  line-height: 1.25;
}

.ins-ie-item-desc {
  font-size: 11.8px;
  line-height: 1.4;
  color: #64748B;
  margin: 0;
}

/* Card Footers */
.ins-ie-footer {
  margin-top: auto;
  padding: 5px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.ins-ie-footer svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.ins-ie-footer-green {
  background-color: rgba(16, 185, 129, 0.08);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.ins-ie-footer-red {
  background-color: rgba(239, 68, 68, 0.08);
  color: #B91C1C;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ==========================================================================
   Section 5: Interactive Premium & Coverage Calculator
   ========================================================================== */
.ins-calc-card {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-sizing: border-box;
}

.ins-calc-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.ins-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ins-calc-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ins-calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ins-calc-label {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

.ins-calc-val-display {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.15);
  border: 1px solid rgba(0, 168, 142, 0.3);
  padding: 3px 12px;
  border-radius: 9999px;
}

.ins-slider {
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.ins-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-teal);
  border: 3px solid #FFFFFF;
  cursor: pointer;
}

.ins-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-teal);
  border: 3px solid #FFFFFF;
  cursor: pointer;
}

.ins-pill-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ins-pill-toggle-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: none !important;
}

.ins-pill-toggle-btn.is-active,
.ins-pill-toggle-btn:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
}

/* Calculator Output Side */
.ins-calc-output-box {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  text-align: center;
  box-sizing: border-box;
}

.ins-calc-output-kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

.ins-calc-price-big {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  margin: 0 0 4px;
}

.ins-calc-period {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 20px;
}

.ins-calc-benefits-list {
  list-style: none;
  padding: 16px 0;
  margin: 0 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.ins-calc-ben-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
}

.ins-calc-ben-item svg {
  color: #00D6B5;
  flex-shrink: 0;
}

.ins-btn-calc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 22px;
  background-color: var(--color-saffron);
  color: var(--color-navy);
  border: 1px solid var(--color-saffron);
  border-radius: 9999px;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: none !important;
}

.ins-btn-calc-cta:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--color-navy);
}

/* ==========================================================================
   Section 6: Critical Riders & Add-On Protection Vault
   ========================================================================== */
.ins-riders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}

.ins-rider-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: clamp(20px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), border-color var(--transition-base);
  box-sizing: border-box;
}

.ins-rider-card:hover {
  transform: translateY(-4px);
  border-color: #CBD5E1;
}

.ins-rider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ins-rider-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

/* Colorful Icon Badges */
.ins-rider-icon.icon-teal {
  background-color: rgba(0, 168, 142, 0.1);
  color: var(--color-teal);
  border: 1px solid rgba(0, 168, 142, 0.25);
}

.ins-rider-icon.icon-saffron {
  background-color: rgba(255, 138, 0, 0.1);
  color: #FF8A00;
  border: 1px solid rgba(255, 138, 0, 0.25);
}

.ins-rider-icon.icon-blue {
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.ins-rider-icon.icon-purple {
  background-color: rgba(124, 58, 237, 0.1);
  color: #7C3AED;
  border: 1px solid rgba(124, 58, 237, 0.25);
}


.ins-rider-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 9999px;
}

.ins-rider-badge.badge-teal {
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.25);
}

.ins-rider-badge.badge-saffron {
  color: #D97706;
  background-color: rgba(255, 138, 0, 0.08);
  border: 1px solid rgba(255, 138, 0, 0.25);
}

.ins-rider-badge.badge-blue {
  color: #2563EB;
  background-color: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.ins-rider-badge.badge-purple {
  color: #7C3AED;
  background-color: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
}

.ins-rider-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 8px;
  line-height: 1.3;
}

.ins-rider-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #64748B;
  margin: 0;
}

/* ==========================================================================
   Section 7: Distroo Advisor Advantage vs Online Aggregators (Comparison Table)
   ========================================================================== */
.ins-adv-table-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: none !important;
}

.ins-adv-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ins-adv-table th,
.ins-adv-table td {
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2.2vw, 28px);
  border-bottom: 1px solid #E2E8F0;
  font-size: 14px;
  line-height: 1.5;
}

.ins-adv-table tr:last-child td {
  border-bottom: none;
}

.ins-adv-table th {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background-color: #F8FAFC;
  color: #64748B;
}

.ins-adv-table th.col-distroo {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.ins-adv-table td.col-distroo {
  background-color: rgba(0, 168, 142, 0.04);
  font-weight: 600;
  color: var(--color-navy);
}

.ins-adv-feature-name {
  font-weight: 700;
  color: var(--color-navy);
}

.ins-adv-feature-desc {
  font-size: 12.5px;
  color: #64748B;
  display: block;
  margin-top: 2px;
}

.ins-adv-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-teal);
  font-weight: 700;
}

.ins-adv-cross {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94A3B8;
}

/* ==========================================================================
   Section 8: Streamlined 5-Step Claim Settlement Journey
   ========================================================================== */
#life-claim-journey {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 5.5vw, 68px) 0;
}

/* Full-Width Curved Dotted Line Background */
.ins-journey-curve-wrap {
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  height: 90px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ins-journey-curve-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ins-claim-journey-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
  position: relative;
  z-index: 2;
  align-items: stretch;
}

.ins-claim-step-card {
  border-radius: 15px;
  padding: clamp(18px, 1.8vw, 24px) clamp(14px, 1.4vw, 18px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px -2px rgba(11, 29, 58, 0.08);
  /* Hover effect strictly removed as requested */
  transition: none;
}

.ins-claim-step-card:hover {
  transform: none;
  border-color: transparent;
}

/* Alternate Cards: Navy (Odd: Steps 1, 3, 5) */
.ins-claim-step-card.card-navy,
.ins-claim-step-card:nth-child(odd) {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border: 1px solid rgba(11, 29, 58, 0.2);
}

.ins-claim-step-card.card-navy:hover,
.ins-claim-step-card:nth-child(odd):hover {
  border-color: rgba(11, 29, 58, 0.2);
}

.ins-claim-step-card.card-navy .ins-claim-step-badge,
.ins-claim-step-card:nth-child(odd) .ins-claim-step-badge {
  background-color: rgba(0, 168, 142, 0.22);
  color: #00D6B5;
  border: 1px solid rgba(0, 168, 142, 0.4);
}

.ins-claim-step-card.card-navy .ins-claim-step-title,
.ins-claim-step-card:nth-child(odd) .ins-claim-step-title {
  color: #FFFFFF;
}

.ins-claim-step-card.card-navy .ins-claim-step-desc,
.ins-claim-step-card:nth-child(odd) .ins-claim-step-desc {
  color: rgba(255, 255, 255, 0.82);
}

/* Alternate Cards: Teal (Even: Steps 2, 4) */
.ins-claim-step-card.card-teal,
.ins-claim-step-card:nth-child(even) {
  background-color: var(--color-teal);
  color: #FFFFFF;
  border: 1px solid rgba(0, 168, 142, 0.3);
}

.ins-claim-step-card.card-teal:hover,
.ins-claim-step-card:nth-child(even):hover {
  border-color: rgba(0, 168, 142, 0.3);
}

.ins-claim-step-card.card-teal .ins-claim-step-badge,
.ins-claim-step-card:nth-child(even) .ins-claim-step-badge {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ins-claim-step-card.card-teal .ins-claim-step-title,
.ins-claim-step-card:nth-child(even) .ins-claim-step-title {
  color: #FFFFFF;
}

.ins-claim-step-card.card-teal .ins-claim-step-desc,
.ins-claim-step-card:nth-child(even) .ins-claim-step-desc {
  color: rgba(255, 255, 255, 0.92);
}

/* Step Badge & Typography */
.ins-claim-step-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 3px 9px;
  width: fit-content;
  margin-bottom: 12px;
}

.ins-claim-step-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}

.ins-claim-step-desc {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   Section 9: Documentation & Eligibility Checklist
   ========================================================================== */
.ins-docs-container-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: clamp(24px, 3.5vw, 40px);
  box-sizing: border-box;
}

.ins-docs-tabs-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 16px;
}

.ins-doc-tab-btn {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #475569;
  border-radius: 9999px;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: none !important;
}

.ins-doc-tab-btn.is-active,
.ins-doc-tab-btn:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
}

.ins-doc-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ins-doc-item {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
}

.ins-doc-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ins-doc-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 3px;
}

.ins-doc-item-desc {
  font-size: 12.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.45;
}

/* ==========================================================================
   Section 10: IRDAI Partner Insurers Showcase
   ========================================================================== */
.ins-partners-chip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.ins-partner-chip-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.ins-partner-chip-card:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
}

.ins-partner-brand-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 4px;
}

.ins-partner-csr-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.08);
  padding: 2px 8px;
  border-radius: 9999px;
}

/* ==========================================================================
   Section 11: Real Customer Case Studies & Settlement Proof
   ========================================================================== */
.ins-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
}

.ins-case-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: clamp(22px, 2.5vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  transition: transform var(--transition-base);
}

.ins-case-card:hover {
  transform: translateY(-4px);
}

.ins-case-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ins-case-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-teal);
  background-color: rgba(0, 168, 142, 0.08);
  padding: 3px 10px;
  border-radius: 9999px;
}

.ins-case-timeline {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
}

.ins-case-title {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 10px;
  line-height: 1.3;
}

.ins-case-quote {
  font-size: 13.5px;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 20px;
}

.ins-case-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
}

.ins-case-settled-box {
  display: flex;
  flex-direction: column;
}

.ins-settled-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748B;
}

.ins-settled-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-teal);
}

.ins-case-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
}

/* ==========================================================================
   Section 12: Expert Advisor Consultation & Instant Quote Form (Dark Full-Width)
   ========================================================================== */
#consultation-form.ins-section-dark {
  background-color: #07152B;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(0, 168, 142, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(0, 168, 142, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #061224 0%, #0B1D3A 100%);
  color: #FFFFFF;
  padding: clamp(38px, 4.5vw, 56px) 0;
  position: relative;
  overflow: hidden;
}

#consultation-form .ins-form-wrapper-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none;
}

#consultation-form .ins-form-split-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}

#consultation-form .ins-form-info-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#consultation-form .ins-kicker {
  margin-bottom: 4px;
  padding: 3px 11px;
  font-size: 11px;
  color: #00D6B5;
  background-color: rgba(0, 168, 142, 0.16);
  border: 1px solid rgba(0, 168, 142, 0.35);
  align-self: flex-start;
}

#consultation-form .ins-title {
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.22;
  margin: 0 0 6px;
}

#consultation-form .ins-desc {
  font-size: clamp(12.5px, 0.95vw, 14px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 10px;
}

#consultation-form .ins-form-perks-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#consultation-form .ins-form-perk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

#consultation-form .ins-form-perk-item svg {
  color: #00D6B5;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

/* Form Container on the Right */
#consultation-form .ins-consultation-form {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: clamp(24px, 2.8vw, 32px) clamp(20px, 2.4vw, 28px);
  box-sizing: border-box;
  box-shadow: none !important;
  max-width: 480px;
  width: 100%;
  margin-left: auto;
}

#consultation-form .ins-form-grid-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}

#consultation-form .ins-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#consultation-form .ins-form-group.full-width {
  grid-column: 1 / -1;
}

#consultation-form .ins-form-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

#consultation-form .ins-form-input,
#consultation-form .ins-form-select {
  width: 100%;
  padding: 10.5px 13px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 13px;
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.06);
  outline: none;
  box-shadow: none !important;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

#consultation-form .ins-form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

#consultation-form .ins-form-select:invalid,
#consultation-form .ins-form-select option[value=""] {
  color: rgba(255, 255, 255, 0.4);
}

#consultation-form .ins-form-select option {
  background-color: #07152B;
  color: #FFFFFF;
}

#consultation-form .ins-form-input:focus,
#consultation-form .ins-form-select:focus {
  border-color: #00D6B5;
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: none !important;
}

/* Submit Button: Matches Website Button UI (.btn-appointment), length as per button text length */
#consultation-form .btn-appointment-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  max-width: max-content;
  align-self: flex-start;
  background-color: #FFFFFF;
  color: var(--color-navy);
  border: 1.5px solid #FFFFFF;
  border-radius: 9999px;
  padding: 4px 5px 4px 18px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 42px;
  box-sizing: border-box;
  box-shadow: none !important;
  transition: all var(--transition-base);
  margin-top: 6px;
  text-decoration: none;
}

#consultation-form .btn-appointment-submit:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: none !important;
}

#consultation-form .btn-appointment-submit .arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

#consultation-form .btn-appointment-submit:hover .arrow-circle {
  background-color: #FFFFFF;
  color: var(--color-teal);
  transform: translateX(2px);
  box-shadow: none !important;
}

#consultation-form .ins-form-guarantee {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
  margin: 7px 0 0 2px;
}

/* ==========================================================================
   Customer Lead Form & Global Lead Popup Modal
   Fields: Name, Mobile Number, City, Insurance Requirement (Life/Health/Motor/SME/Other)
   CTA: Request Assistance
   ========================================================================== */

/* Customer Lead Form Base Styles (Used both Inline & in Modal) */
.customer-lead-form {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.customer-lead-form .lead-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}

.customer-lead-form .lead-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.customer-lead-form .lead-form-group.full-width {
  grid-column: 1 / -1;
}

.customer-lead-form .lead-form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #07152B;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Dark context styling (e.g. within #consultation-form sections) */
.dark-lead-form .lead-form-label,
#consultation-form .lead-form-label {
  color: rgba(255, 255, 255, 0.92);
}

.customer-lead-form .lead-form-input,
.customer-lead-form .lead-form-select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 13.5px;
  color: #0F172A;
  background-color: #FFFFFF;
  outline: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.customer-lead-form .lead-form-input::placeholder {
  color: #94A3B8;
}

.customer-lead-form .lead-form-input:focus,
.customer-lead-form .lead-form-select:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(0, 168, 142, 0.15);
  background-color: #FFFFFF;
}

/* Dark mode inputs (for dark consultation sections) */
.dark-lead-form .lead-form-input,
.dark-lead-form .lead-form-select,
#consultation-form .lead-form-input,
#consultation-form .lead-form-select {
  border-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.07);
}

.dark-lead-form .lead-form-input::placeholder,
#consultation-form .lead-form-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.dark-lead-form .lead-form-input:focus,
.dark-lead-form .lead-form-select:focus,
#consultation-form .lead-form-input:focus,
#consultation-form .lead-form-select:focus {
  border-color: #00D6B5;
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(0, 214, 181, 0.2);
}

.dark-lead-form .lead-form-select option,
#consultation-form .lead-form-select option {
  background-color: #0B1D3A;
  color: #FFFFFF;
}

/* Phone input with country code badge */
.lead-phone-input-wrap {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.lead-phone-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  background-color: #F1F5F9;
  border: 1.5px solid #E2E8F0;
  border-right: none;
  border-radius: 10px 0 0 10px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.dark-lead-form .lead-phone-prefix,
#consultation-form .lead-phone-prefix {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}

.lead-phone-input-wrap .lead-form-input {
  border-radius: 0 10px 10px 0;
}

/* Form Inline Error & Warning Styles (Under Field) */
.form-field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1.3;
  color: #DC2626;
  margin-top: 4px;
  font-weight: 500;
  animation: formErrorFadeIn 0.18s ease-out;
}

@keyframes formErrorFadeIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-field-error svg {
  flex-shrink: 0;
  color: #DC2626;
  width: 12px;
  height: 12px;
}

input.is-error,
select.is-error,
textarea.is-error,
.lead-form-input.is-error,
.lead-form-select.is-error,
.claims-form-input.is-error,
.claims-form-select.is-error,
.claims-form-textarea.is-error {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
}

.lead-phone-prefix.is-error {
  border-color: #DC2626 !important;
}

.claims-form-group .form-field-error {
  margin-top: 5px;
  font-size: 11.5px;
}

/* For dark forms (wellness banner, dark consultation sections) */
.wellness-form-card .form-field-error,
.dark-lead-form .form-field-error,
#consultation-form .form-field-error {
  color: #FFA4A4;
  font-size: 10.5px;
  margin-top: 3px;
}

.wellness-form-card .form-field-error svg,
.dark-lead-form .form-field-error svg,
#consultation-form .form-field-error svg {
  color: #FFA4A4;
}

.wellness-form-card .lead-form-input.is-error,
.wellness-form-card .lead-form-select.is-error,
.dark-lead-form .lead-form-input.is-error,
.dark-lead-form .lead-form-select.is-error {
  border-color: #FF6B6B !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2) !important;
}

.wellness-form-card .lead-phone-prefix.is-error,
.dark-lead-form .lead-phone-prefix.is-error {
  border-color: #FF6B6B !important;
}

/* CTA: Request Assistance Button */
.customer-lead-form .btn-lead-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background-color: var(--color-teal);
  color: #FFFFFF;
  border: 1.5px solid var(--color-teal);
  border-radius: 9999px;
  padding: 6px 8px 6px 24px;
  font-family: var(--font-family);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  box-sizing: border-box;
  transition: all var(--transition-base);
  margin-top: 6px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 168, 142, 0.25);
}

.customer-lead-form .btn-lead-submit:hover {
  background-color: #008f79;
  border-color: #008f79;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 168, 142, 0.35);
}

.customer-lead-form .btn-lead-submit .arrow-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.customer-lead-form .btn-lead-submit:hover .arrow-circle {
  transform: translateX(3px);
  background-color: #07152B;
  color: #FFFFFF;
}

/* Inline Dark Form Variant for Section 1.5 / Consultation Blocks */
#consultation-form .btn-lead-submit {
  background-color: #FFFFFF;
  color: var(--color-navy);
  border-color: #FFFFFF;
}

#consultation-form .btn-lead-submit:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
}

#consultation-form .btn-lead-submit .arrow-circle {
  background-color: var(--color-navy);
  color: #FFFFFF;
}

#consultation-form .btn-lead-submit:hover .arrow-circle {
  background-color: #FFFFFF;
  color: var(--color-teal);
}

/* Trust Strip below CTA */
.lead-form-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748B;
  text-align: center;
}

.dark-lead-form .lead-form-trust-strip,
#consultation-form .lead-form-trust-strip {
  color: rgba(255, 255, 255, 0.65);
}

/* Inline Success State */
.lead-form-success-alert {
  background: rgba(0, 168, 142, 0.1);
  border: 1.5px solid var(--color-teal);
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #07152B;
}

.dark-lead-form .lead-form-success-alert,
#consultation-form .lead-form-success-alert {
  color: #FFFFFF;
  background: rgba(0, 214, 181, 0.15);
  border-color: #00D6B5;
}

.lead-form-success-alert .lead-alert-icon {
  color: var(--color-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.lead-form-success-alert strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.lead-form-success-alert p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.9;
}

/* ==========================================================================
   GLOBAL LEAD POPUP MODAL STYLES
   ========================================================================== */
.lead-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.lead-modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lead-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: clamp(24px, 4vw, 36px) clamp(20px, 3.5vw, 32px);
  box-sizing: border-box;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-modal-backdrop.is-active .lead-modal-dialog {
  transform: scale(1) translateY(0);
}

/* Close button */
.lead-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F1F5F9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all var(--transition-fast);
  z-index: 10;
}

.lead-modal-close:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: rotate(90deg);
}

/* Modal Header */
.lead-modal-header {
  margin-bottom: 22px;
  padding-right: 32px;
}

.lead-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal);
  background: rgba(0, 168, 142, 0.1);
  padding: 4px 10px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.lead-modal-kicker svg {
  color: var(--color-teal);
}

.lead-modal-title {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  color: #0B1D3A;
  margin: 0 0 6px;
  line-height: 1.25;
}

.lead-modal-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #64748B;
  margin: 0;
}

/* Modal Success State */
.lead-modal-success {
  text-align: center;
  padding: 24px 8px 12px;
}

.lead-modal-success .lead-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  animation: leadSuccessPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes leadSuccessPop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.lead-modal-success h4 {
  font-size: 22px;
  font-weight: 700;
  color: #0B1D3A;
  margin: 0 0 10px;
}

.lead-modal-success p {
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 24px;
}

.lead-modal-success .btn-success-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 32px;
  background: var(--color-navy);
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.lead-modal-success .btn-success-dismiss:hover {
  background: var(--color-teal);
  transform: translateY(-1px);
}

@media (max-width: 576px) {
  .customer-lead-form .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lead-modal-dialog {
    padding: 18px 16px 16px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   Advisor Lead Form & Global Advisor Popup Modal
   Fields: Name, Mobile Number, City, Current Profession
   CTA: Join Distroo (Saffron Brand Accent #FF8A00)
   ========================================================================== */

/* Advisor Lead Form Base Styles (Used both Inline & in Modal) */
.advisor-lead-form {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.advisor-lead-form .lead-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}

.advisor-lead-form .lead-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.advisor-lead-form .lead-form-group.full-width {
  grid-column: 1 / -1;
}

.advisor-lead-form .lead-form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #07152B;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Dark context styling (within dark sections) */
.dark-lead-form .lead-form-label,
.advisor-section-dark .lead-form-label {
  color: rgba(255, 255, 255, 0.92);
}

.advisor-lead-form .lead-form-input,
.advisor-lead-form .lead-form-select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 13.5px;
  color: #0F172A;
  background-color: #FFFFFF;
  outline: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.advisor-lead-form .lead-form-input::placeholder {
  color: #94A3B8;
}

.advisor-lead-form .lead-form-input:focus,
.advisor-lead-form .lead-form-select:focus {
  border-color: #FF8A00;
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.16);
  background-color: #FFFFFF;
}

/* Dark mode inputs */
.dark-lead-form .lead-form-input,
.dark-lead-form .lead-form-select,
.advisor-section-dark .lead-form-input,
.advisor-section-dark .lead-form-select {
  border-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.07);
}

.dark-lead-form .lead-form-input::placeholder,
.advisor-section-dark .lead-form-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.dark-lead-form .lead-form-input:focus,
.dark-lead-form .lead-form-select:focus,
.advisor-section-dark .lead-form-input:focus,
.advisor-section-dark .lead-form-select:focus {
  border-color: #FF8A00;
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.22);
}

.dark-lead-form .lead-form-select option,
.advisor-section-dark .lead-form-select option {
  background-color: #0B1D3A;
  color: #FFFFFF;
}

/* CTA: Join Distroo Button (Advisor Saffron Accent) */
.advisor-lead-form .btn-advisor-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background-color: #FF8A00;
  color: #FFFFFF;
  border: 1.5px solid #FF8A00;
  border-radius: 9999px;
  padding: 6px 8px 6px 24px;
  font-family: var(--font-family);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  box-sizing: border-box;
  transition: all var(--transition-base);
  margin-top: 6px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 138, 0, 0.25);
}

.advisor-lead-form .btn-advisor-submit:hover {
  background-color: #e67a00;
  border-color: #e67a00;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 138, 0, 0.35);
}

.advisor-lead-form .btn-advisor-submit .arrow-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #FF8A00;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.advisor-lead-form .btn-advisor-submit:hover .arrow-circle {
  transform: translateX(3px);
  background-color: #07152B;
  color: #FFFFFF;
}

/* Trust Strip below CTA */
.advisor-lead-form .lead-form-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748B;
  text-align: center;
}

.dark-lead-form .advisor-lead-form .lead-form-trust-strip,
.advisor-section-dark .lead-form-trust-strip {
  color: rgba(255, 255, 255, 0.65);
}

/* Inline Success State */
.advisor-lead-form .lead-form-success-alert {
  background: rgba(255, 138, 0, 0.1);
  border: 1.5px solid #FF8A00;
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #07152B;
}

.dark-lead-form .advisor-lead-form .lead-form-success-alert,
.advisor-section-dark .lead-form-success-alert {
  color: #FFFFFF;
  background: rgba(255, 138, 0, 0.16);
  border-color: #FF8A00;
}

.advisor-lead-form .lead-form-success-alert .lead-alert-icon {
  color: #FF8A00;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Inline Advisor Lead Section on Advisor Pages */
.advisor-lead-section {
  background-color: #07152B;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255, 138, 0, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(0, 168, 142, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #061224 0%, #0B1D3A 100%);
  color: #FFFFFF;
  border-radius: 20px;
  padding: clamp(32px, 3.8vw, 48px) clamp(20px, 3vw, 40px);
  margin: 48px 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 45px rgba(7, 21, 43, 0.35);
  box-sizing: border-box;
}

.advisor-lead-section .advisor-split-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
}

.advisor-lead-section .advisor-info-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.advisor-lead-section .advisor-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FF8A00;
  background-color: rgba(255, 138, 0, 0.14);
  border: 1px solid rgba(255, 138, 0, 0.3);
  border-radius: 9999px;
  align-self: flex-start;
}

.advisor-lead-section .advisor-title {
  font-size: clamp(22px, 2.4vw, 29px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0;
}

.advisor-lead-section .advisor-desc {
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.advisor-lead-section .advisor-perks-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advisor-lead-section .advisor-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.advisor-lead-section .advisor-perk-item svg {
  color: #FF8A00;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.advisor-lead-section .advisor-form-container {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: clamp(22px, 2.5vw, 30px) clamp(18px, 2.2vw, 26px);
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 900px) {
  .advisor-lead-section .advisor-split-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   GLOBAL ADVISOR POPUP MODAL STYLES
   ========================================================================== */
.advisor-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.advisor-modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.advisor-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: clamp(24px, 4vw, 36px) clamp(20px, 3.5vw, 32px);
  box-sizing: border-box;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.advisor-modal-backdrop.is-active .advisor-modal-dialog {
  transform: scale(1) translateY(0);
}

/* Close button */
.advisor-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F1F5F9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all var(--transition-fast);
  z-index: 10;
}

.advisor-modal-close:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: rotate(90deg);
}

/* Modal Header */
.advisor-modal-header {
  margin-bottom: 22px;
  padding-right: 32px;
}

.advisor-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FF8A00;
  background: rgba(255, 138, 0, 0.1);
  padding: 4px 10px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.advisor-modal-kicker svg {
  color: #FF8A00;
}

.advisor-modal-title {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  color: #0B1D3A;
  margin: 0 0 6px;
  line-height: 1.25;
}

.advisor-modal-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #64748B;
  margin: 0;
}

/* Advisor Modal Success State */
.advisor-modal-success {
  text-align: center;
  padding: 24px 8px 12px;
}

.advisor-modal-success .advisor-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 138, 0, 0.12);
  color: #FF8A00;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  animation: advisorSuccessPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes advisorSuccessPop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.advisor-modal-success h4 {
  font-size: 22px;
  font-weight: 700;
  color: #0B1D3A;
  margin: 0 0 10px;
}

.advisor-modal-success p {
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 24px;
}

.advisor-modal-success .btn-advisor-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 32px;
  background: var(--color-navy);
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.advisor-modal-success .btn-advisor-dismiss:hover {
  background: #FF8A00;
  transform: translateY(-1px);
}

@media (max-width: 576px) {
  .advisor-lead-form .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .advisor-modal-dialog {
    padding: 18px 16px 16px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   Section 13: Product FAQs Accordion
   ========================================================================== */
.ins-faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}

.ins-faq-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.ins-faq-card:hover {
  border-color: #CBD5E1;
}

.ins-faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-family);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-navy);
  cursor: pointer;
  box-sizing: border-box;
}

.ins-faq-btn svg {
  flex-shrink: 0;
  color: var(--color-teal);
  transition: transform 0.25s ease;
}

.ins-faq-card.is-open .ins-faq-btn svg {
  transform: rotate(180deg);
}

.ins-faq-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ins-faq-body {
  padding: 0 24px 22px;
  font-size: 14px;
  line-height: 1.65;
  color: #475569;
}

/* ==========================================================================
   Section 14: High-Conversion Closing Call-to-Action Banner
   ========================================================================== */
.ins-cta-wrapper {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-radius: 28px;
  padding: clamp(32px, 5vw, 64px);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.ins-cta-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  position: relative;
  z-index: 2;
}

.ins-cta-heading {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 14px;
}

.ins-cta-desc {
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 26px;
}

.ins-cta-btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.ins-cta-card-visual {
  display: flex;
  justify-content: flex-end;
}

.ins-cta-advisor-card {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  max-width: 360px;
}

.ins-cta-advisor-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-teal);
  flex-shrink: 0;
}

.ins-cta-advisor-text {
  display: flex;
  flex-direction: column;
}

.ins-advisor-name {
  font-size: 15.5px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.ins-advisor-role {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.ins-advisor-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #00D6B5;
  text-decoration: none;
}

.ins-advisor-phone:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Insurance Hub Page Specific Styles
   ========================================================================== */
.ins-hub-hero {
  position: relative;
  background-color: var(--color-navy);
  color: #FFFFFF;
  padding: clamp(105px, 13vw, 140px) 0 clamp(48px, 6vw, 76px);
  text-align: center;
}

.ins-hub-hero-container {
  max-width: 920px;
  margin: 0 auto;
}

.ins-hub-headline {
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0 0 18px;
}

.ins-hub-subheadline {
  font-size: clamp(15.5px, 1.25vw, 18.5px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto 32px;
  max-width: 720px;
}

.ins-hub-nav-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.ins-hub-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.ins-hub-nav-pill:hover,
.ins-hub-nav-pill.active {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
}

/* 4 Core Hub Pillars Grid */
.ins-hub-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3.2vw, 36px);
}

.ins-hub-pillar-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
  transition: transform var(--transition-base), border-color var(--transition-base);
  box-sizing: border-box;
}

.ins-hub-pillar-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-teal);
}

.ins-hub-pillar-media {
  position: relative;
  width: 100%;
  height: clamp(200px, 24vw, 240px);
  overflow: hidden;
  background-color: var(--color-navy);
}

.ins-hub-pillar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ins-hub-pillar-card:hover .ins-hub-pillar-img {
  transform: scale(1.04);
}

.ins-hub-pillar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 29, 58, 0.1) 0%, rgba(11, 29, 58, 0.6) 100%);
}

.ins-hub-pillar-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background-color: #FFFFFF;
  color: var(--color-navy);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.ins-hub-pillar-body {
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ins-hub-pillar-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 10px;
}

.ins-hub-pillar-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #64748B;
  margin: 0 0 20px;
}

.ins-hub-features-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
  padding: 16px;
  background-color: #F8FAFC;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
}

.ins-hub-feat-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.ins-hub-feat-item svg {
  color: var(--color-teal);
  flex-shrink: 0;
}

.ins-hub-pillar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #F1F5F9;
}

.ins-hub-sum-tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
}

.ins-hub-sum-tag span {
  color: var(--color-teal);
  font-weight: 800;
}

.ins-hub-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-teal);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.ins-hub-explore-link:hover {
  color: var(--color-navy);
  gap: 12px;
}

/* ==========================================================================
   Responsive Multi-Device Breakpoints for Insurance Pages
   ========================================================================== */

/* 1200px (Laptops & Small Desktops) */
@media (max-width: 1200px) {
  .ins-variants-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ins-riders-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ins-claim-journey-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ins-partners-chip-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ins-cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 991px (Tablets Portrait) */
@media (max-width: 991px) {
  .ins-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ins-hero-image-card {
    max-width: 600px;
    margin: 0 auto;
  }

  .ins-ribbon-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ins-ribbon-item:nth-child(2) {
    border-right: none;
  }

  .ins-ribbon-item:last-child {
    grid-column: 1 / -1;
  }

  .ins-inc-exc-grid {
    grid-template-columns: 1fr;
  }

  .ins-calc-grid {
    grid-template-columns: 1fr;
  }

  .ins-doc-checklist-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ins-hub-pillars-grid {
    grid-template-columns: 1fr;
  }

  #consultation-form .ins-form-split-grid,
  .ins-form-split-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  #consultation-form .ins-form-info-col {
    width: 100%;
    max-width: 100%;
  }

  #consultation-form .ins-consultation-form {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .ins-cta-grid {
    grid-template-columns: 1fr;
  }

  .ins-cta-card-visual {
    justify-content: flex-start;
  }

  .ins-journey-curve-wrap {
    display: none;
  }
}

/* 768px (Mobile & Tablets) */
@media (max-width: 768px) {

  /* All Mobile Headings Standardized to 25px */
  h1,
  h2,
  .ins-title,
  .ins-section-dark .ins-title,
  #consultation-form .ins-title,
  #life-inclusions-exclusions .ins-title,
  .ins-hero-title,
  #life-hero .ins-hero-title,
  #health-hero .ins-hero-title,
  #motor-hero .ins-hero-title,
  #sme-hero .ins-hero-title,
  #critical-hero .ins-hero-title,
  #accident-hero .ins-hero-title,
  .ins-intro-heading,
  .service-cta-heading,
  .how-work-title,
  .care-main-title,
  .process-main-title,
  .clearer-start-title,
  .about-intro-title,
  .about-pillars-title,
  .hero-title,
  .inner-hero-title,
  .health-hero-title,
  .life-hero-title,
  .motor-hero-title,
  .sme-hero-title,
  .critical-hero-title,
  .accident-hero-title,
  .about-heading,
  .services-heading,
  .customer-journey-title,
  .advisor-journey-title,
  .engine-heading,
  .impact-heading,
  .partners-heading,
  .testimonials-heading,
  .home-blog-heading,
  .wellness-title,
  .faq-heading,
  .advisory-banner-title,
  .insurance-showcase-heading,
  .why-distroo-heading,
  .leadership-title {
    font-size: 23px !important;
    line-height: 1.25;
  }

  .ins-variants-grid {
    grid-template-columns: 1fr;
  }

  .ins-riders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ins-rider-card {
    padding: 14px 12px;
  }

  .ins-rider-top {
    margin-bottom: 12px;
  }

  .ins-rider-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .ins-rider-icon svg {
    width: 17px;
    height: 17px;
  }

  .ins-rider-badge {
    font-size: 9.5px;
    padding: 2.5px 7px;
  }

  .ins-rider-title {
    font-size: 13.5px;
    margin-bottom: 6px;
    line-height: 1.3;
  }

  .ins-rider-desc {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .ins-claim-journey-grid {
    grid-template-columns: 1fr;
  }

  .ins-cases-grid {
    grid-template-columns: 1fr;
  }

  .ins-doc-checklist-grid {
    grid-template-columns: 1fr;
  }

  .ins-docs-container-card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .ins-docs-tabs-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    width: 100%;
  }

  .ins-docs-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .ins-doc-tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 9999px;
  }

  .ins-doc-item {
    padding: 14px 12px;
    border-radius: 12px;
    gap: 10px;
  }

  .ins-doc-item-title {
    font-size: 13.5px;
  }

  .ins-doc-item-desc {
    font-size: 12px;
  }

  .ins-form-grid-fields {
    grid-template-columns: 1fr;
  }

  #consultation-form .ins-form-split-grid,
  .ins-form-split-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #consultation-form .ins-form-info-col {
    width: 100%;
    max-width: 100%;
  }

  #consultation-form .ins-title {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 8px;
  }

  #consultation-form .ins-desc {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  #consultation-form .ins-form-perks-list {
    gap: 8px;
  }

  #consultation-form .ins-form-perk-item {
    font-size: 12px;
    gap: 8px;
  }

  #consultation-form .ins-consultation-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 22px 18px;
    border-radius: 16px;
  }

  .ins-partners-chip-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ins-adv-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ins-hub-features-row {
    grid-template-columns: 1fr;
  }

  .ins-hero-section,
  #life-hero.ins-hero-section,
  #health-hero.ins-hero-section,
  #motor-hero.ins-hero-section,
  #sme-hero.ins-hero-section,
  #critical-hero.ins-hero-section,
  #accident-hero.ins-hero-section {
    min-height: clamp(500px, 76vh, 600px);
    padding: clamp(115px, 14vw, 132px) 0 clamp(42px, 6vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ins-hero-title,
  #life-hero .ins-hero-title,
  #health-hero .ins-hero-title,
  #motor-hero .ins-hero-title,
  #sme-hero .ins-hero-title,
  #critical-hero .ins-hero-title,
  #accident-hero .ins-hero-title {
    margin-bottom: 24px;
    line-height: 1.28;
  }

  .ins-hero-actions {
    margin-bottom: 24px;
    gap: 10px;
  }

  .ins-hero-trust-row {
    flex-wrap: wrap;
    gap: 12px 18px;
    overflow: visible;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .ins-trust-point {
    font-size: 12px;
    white-space: normal;
  }
}

/* 480px (Standard & Compact Mobile) */
@media (max-width: 480px) {
  .ins-ribbon-grid {
    grid-template-columns: 1fr;
  }

  .ins-ribbon-item {
    border-right: none;
    border-bottom: 1px solid #E2E8F0;
  }

  .ins-hero-section,
  #life-hero.ins-hero-section,
  #health-hero.ins-hero-section,
  #motor-hero.ins-hero-section,
  #sme-hero.ins-hero-section,
  #critical-hero.ins-hero-section,
  #accident-hero.ins-hero-section {
    min-height: clamp(520px, 82vh, 600px);
    padding: clamp(112px, 15vw, 132px) 0 clamp(42px, 6vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ins-breadcrumb {
    margin-bottom: 16px;
  }

  .ins-hero-title,
  #life-hero .ins-hero-title,
  #health-hero .ins-hero-title,
  #motor-hero .ins-hero-title,
  #sme-hero .ins-hero-title,
  #critical-hero .ins-hero-title,
  #accident-hero .ins-hero-title {
    font-size: 25px;
    line-height: 1.28;
    margin-bottom: 24px;
  }

  /* Buttons in one row / line with balanced touch-friendly sizing */
  .ins-hero-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 10px;
    margin-bottom: 24px;
  }

  .ins-hero-actions .btn-appointment,
  .ins-hero-actions .btn-appointment-light {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 4px 5px 4px 12px;
    font-size: 11.5px;
    gap: 6px;
    justify-content: space-between;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .ins-hero-actions .btn-appointment span:first-child,
  .ins-hero-actions .btn-appointment-light span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ins-hero-actions .btn-appointment .arrow-circle,
  .ins-hero-actions .btn-appointment-light .arrow-circle {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
  }

  .ins-hero-actions .btn-appointment .arrow-circle svg,
  .ins-hero-actions .btn-appointment-light .arrow-circle svg {
    width: 11px;
    height: 11px;
  }

  /* Trust points with generous, clean breathing room */
  .ins-hero-trust-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    overflow: visible;
    gap: 12px 18px;
    padding-top: 22px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .ins-hero-trust-row::-webkit-scrollbar {
    display: none;
  }

  .ins-trust-point {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: normal;
    flex-shrink: 0;
  }

  .ins-trust-point svg {
    width: 14px;
    height: 14px;
    color: var(--color-teal);
    flex-shrink: 0;
  }

  .ins-cta-btn-row {
    flex-direction: column;
    width: 100%;
  }

  .ins-cta-btn-row .btn-appointment {
    width: 100%;
    justify-content: center;
  }

  .ins-hero-float-badge {
    position: relative;
    inset: auto;
    margin: 12px;
  }

  .ins-ie-card {
    padding: 20px 16px;
    border-radius: 10px;
  }

  .ins-ie-item {
    padding: 8px 6px;
    gap: 10px;
  }

  .ins-ie-header-left {
    align-items: flex-start;
  }

  #consultation-form .ins-consultation-form {
    padding: 20px 16px;
    border-radius: 14px;
    max-width: 100%;
    margin-left: 0;
  }

  #consultation-form .btn-appointment-submit {
    font-size: 12px;
    padding-left: 14px;
  }

  .ins-riders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ins-rider-card {
    padding: 12px 10px;
    border-radius: 8px;
  }

  .ins-rider-top {
    margin-bottom: 10px;
    gap: 4px;
  }

  .ins-rider-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .ins-rider-icon svg {
    width: 15px;
    height: 15px;
  }

  .ins-rider-badge {
    font-size: 8.5px;
    padding: 2px 5.5px;
  }

  .ins-rider-title {
    font-size: 12px;
    margin-bottom: 5px;
    line-height: 1.3;
  }

  .ins-rider-desc {
    font-size: 10.5px;
    line-height: 1.4;
  }

  .ins-docs-container-card {
    padding: 16px 12px;
    border-radius: 14px;
  }

  .ins-docs-tabs-nav {
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .ins-doc-tab-btn {
    font-size: 11px;
    padding: 5px 10px;
    min-height: 28px;
  }

  .ins-doc-item {
    padding: 12px 10px;
    border-radius: 10px;
    gap: 10px;
  }

  .ins-doc-item-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .ins-doc-item-icon svg {
    width: 14px;
    height: 14px;
  }

  .ins-doc-item-title {
    font-size: 12.5px;
    margin-bottom: 2px;
  }

  .ins-doc-item-desc {
    font-size: 11px;
    line-height: 1.4;
  }

  #consultation-form .ins-form-split-grid,
  .ins-form-split-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #consultation-form .ins-title {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  #consultation-form .ins-desc {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  #consultation-form .ins-form-perks-list {
    gap: 6px;
  }

  #consultation-form .ins-form-perk-item {
    font-size: 11.5px;
    gap: 7px;
  }

  #consultation-form .ins-form-perk-item svg {
    width: 13px;
    height: 13px;
  }

  #consultation-form .ins-consultation-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 18px 14px;
    border-radius: 14px;
  }
}

/* 360px (Ultra-Compact Mobile Devices) */
@media (max-width: 360px) {

  .ins-hero-section,
  #life-hero.ins-hero-section,
  #health-hero.ins-hero-section,
  #motor-hero.ins-hero-section,
  #sme-hero.ins-hero-section,
  #critical-hero.ins-hero-section,
  #accident-hero.ins-hero-section {
    min-height: 500px;
    padding: 104px 0 38px;
  }

  .ins-hero-title,
  #life-hero .ins-hero-title,
  #health-hero .ins-hero-title,
  #motor-hero .ins-hero-title,
  #sme-hero .ins-hero-title,
  #critical-hero .ins-hero-title,
  #accident-hero .ins-hero-title {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 20px;
  }

  .ins-hero-actions {
    gap: 8px;
    margin-bottom: 20px;
  }

  .ins-hero-actions .btn-appointment,
  .ins-hero-actions .btn-appointment-light {
    font-size: 11px;
    padding: 3px 3px 3px 10px;
    min-height: 36px;
  }

  .ins-hero-trust-row {
    gap: 10px 14px;
    padding-top: 18px;
  }

  .ins-trust-point {
    font-size: 11px;
    gap: 5px;
  }

  .ins-trust-point svg {
    width: 13px;
    height: 13px;
  }

  .ins-riders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ins-rider-card {
    padding: 10px 8px;
  }

  .ins-rider-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
  }

  .ins-rider-icon svg {
    width: 13px;
    height: 13px;
  }

  .ins-rider-badge {
    font-size: 7.5px;
    padding: 1.5px 4.5px;
  }

  .ins-rider-title {
    font-size: 11px;
    margin-bottom: 4px;
    line-height: 1.25;
  }

  .ins-rider-desc {
    font-size: 10px;
    line-height: 1.35;
  }

  .ins-docs-container-card {
    padding: 14px 10px;
    border-radius: 12px;
  }

  .ins-docs-tabs-nav {
    gap: 5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
  }

  .ins-doc-tab-btn {
    font-size: 10.5px;
    padding: 4px 8px;
    min-height: 26px;
  }

  .ins-doc-item {
    padding: 10px 8px;
  }

  .ins-doc-item-title {
    font-size: 12px;
  }

  .ins-doc-item-desc {
    font-size: 10.5px;
  }

  #consultation-form .ins-form-split-grid,
  .ins-form-split-grid {
    gap: 16px;
  }

  #consultation-form .ins-title {
    font-size: 25px;
  }

  #consultation-form .ins-desc {
    font-size: 11.5px;
  }

  #consultation-form .ins-form-perk-item {
    font-size: 11px;
  }

  #consultation-form .ins-consultation-form {
    padding: 16px 12px;
  }
}

/* ==========================================================================
   Section 18.2: Insurance Detail Utilities & Clean State Helpers
   ========================================================================== */
.ins-hero-floating-stat {
  position: absolute;
  background-color: rgba(11, 29, 58, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

.ins-hero-floating-stat.stat-bottom-left {
  bottom: 24px;
  left: 24px;
}

.ins-hero-floating-stat.stat-top-right {
  top: 24px;
  right: 24px;
}

.ins-floating-number {
  font-size: 20px;
  font-weight: 800;
  color: #00D6B5;
}

.ins-floating-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.ins-adv-table th.col-dim {
  width: 36%;
}

.ins-adv-table th.col-generic {
  width: 32%;
}

.ins-adv-table th.col-distroo {
  width: 32%;
}

.ins-section-cta-wrap {
  padding-bottom: clamp(60px, 8vw, 100px);
}

.ins-doc-panel {
  display: grid;
}

.ins-doc-panel.is-hidden {
  display: none !important;
}

.ins-faq-card.is-open .ins-faq-drawer {
  max-height: 500px;
}

/* ==========================================================================
   Section 18.3: Insurance Hub 4-Cards Showcase, CTA & FAQ Styles
   ========================================================================== */
.ins-showcase-section {
  padding: clamp(56px, 7vw, 88px) 0;
  background-color: #F8FAFC;
}

.ins-4cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}

.ins-showcase-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  box-sizing: border-box;
}

.ins-showcase-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-teal);
}

.ins-showcase-media {
  position: relative;
  width: 100%;
  height: clamp(190px, 15vw, 240px);
  overflow: hidden;
  background-color: var(--color-navy);
}

.ins-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ins-showcase-card:hover .ins-showcase-img {
  transform: scale(1.05);
}

.ins-showcase-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #FFFFFF;
  color: var(--color-navy);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
}

.ins-showcase-body {
  padding: 14px 16px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ins-showcase-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 5px;
  line-height: 1.25;
}

.ins-showcase-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: #64748B;
  margin: 0 0 10px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 54px;
}

.ins-showcase-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 10px 12px;
  background-color: #F8FAFC;
  border-radius: 8px;
  border: 1px solid #F1F5F9;
}

.ins-showcase-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

.ins-showcase-item svg {
  color: var(--color-teal);
  flex-shrink: 0;
}

.ins-showcase-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ins-showcase-rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11.5px;
  color: #64748B;
}

.ins-showcase-rate span {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-teal);
}

.ins-showcase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 7px 12px;
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-navy);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.ins-showcase-btn:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
}

/* CTA Placeholder Section */
.ins-cta-placeholder-section {
  padding: clamp(48px, 6vw, 76px) 0;
  background-color: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.ins-cta-placeholder-card {
  background-color: var(--color-navy);
  border: 1px solid #1E3E62;
  border-radius: 20px;
  padding: clamp(32px, 4.5vw, 56px) clamp(24px, 4vw, 48px);
  text-align: center;
  color: #FFFFFF;
  box-sizing: border-box;
}

.ins-cta-placeholder-content {
  max-width: 720px;
  margin: 0 auto;
}

.ins-cta-placeholder-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00D6B5;
  margin-bottom: 10px;
}

.ins-cta-placeholder-title {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.22;
  color: #FFFFFF;
  margin: 0 0 14px;
}

.ins-cta-placeholder-desc {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px;
}

.ins-cta-placeholder-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* FAQ Wrapper on Insurance Hub */
.ins-faq-section {
  padding: clamp(56px, 7vw, 88px) 0;
  background-color: #F8FAFC;
}

.ins-faq-wrapper {
  max-width: 860px;
  margin: 0 auto;
}

/* Multi-device responsiveness for 4 cards */
@media (max-width: 1024px) {
  .ins-4cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .ins-4cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ins-cta-placeholder-actions {
    flex-direction: column;
    width: 100%;
  }

  .ins-cta-placeholder-actions .btn-appointment,
  .ins-cta-placeholder-actions .btn-appointment-light {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Section 1.5: Intro Section (Life & Term Protection Overview)
   ========================================================================== */
.ins-intro-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(32px, 3.8vw, 48px) 0;
  border-bottom: 1px solid #EDF2F7;
}

.ins-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(24px, 3.8vw, 44px);
}

.ins-intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.ins-intro-kicker {
  margin-bottom: 10px;
}

.ins-intro-heading {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy);
  margin: 0 0 12px;
}

.ins-intro-desc {
  font-size: clamp(14px, 0.98vw, 15.5px);
  line-height: 1.6;
  color: #475569;
  margin: 0 0 18px;
  max-width: 620px;
}

.ins-intro-points {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
}

.ins-intro-point {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ins-intro-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-teal, #00A88E);
  color: #FFFFFF;
  border: none;
  flex-shrink: 0;
}

.ins-intro-check-icon svg {
  display: block;
}

.ins-intro-point-body {
  flex: 1;
}

.ins-intro-point-title,
.ins-intro-point-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
  margin: 0;
}

.ins-intro-point-desc {
  display: none;
}

/* Right Side Image (Strictly no box shadow, no hover effect) */
.ins-intro-media {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  box-shadow: none !important;
}

.ins-intro-img {
  width: 100%;
  height: clamp(300px, 32vw, 400px);
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.ins-intro-media:hover,
.ins-intro-img:hover {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Responsive styles */
@media (max-width: 991px) {
  .ins-intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ins-intro-img {
    height: clamp(260px, 45vw, 360px);
  }
}

@media (max-width: 640px) {
  .ins-intro-section {
    padding: 24px 0;
  }

  .ins-intro-heading {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 10px;
  }

  .ins-intro-desc {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .ins-intro-points {
    gap: 8px;
  }

  .ins-intro-point {
    gap: 8px;
    align-items: flex-start;
  }

  .ins-intro-check-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-top: 1.5px;
  }

  .ins-intro-check-icon svg {
    width: 8.5px;
    height: 8.5px;
  }

  .ins-intro-point-title {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .ins-intro-point-desc {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .ins-intro-points {
    gap: 7px;
  }

  .ins-intro-point {
    gap: 7px;
    align-items: flex-start;
  }

  .ins-intro-check-icon {
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin-top: 1px;
  }

  .ins-intro-check-icon svg {
    width: 8px;
    height: 8px;
  }

  .ins-intro-point-title {
    font-size: 12px;
    line-height: 1.35;
  }
}

@media (max-width: 360px) {
  .ins-intro-points {
    gap: 6px;
  }

  .ins-intro-point {
    gap: 6px;
  }

  .ins-intro-check-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin-top: 1px;
  }

  .ins-intro-check-icon svg {
    width: 7.5px;
    height: 7.5px;
  }

  .ins-intro-point-title {
    font-size: 11.5px;
    line-height: 1.3;
  }
}

/* ==========================================================================
   Section 14: Legal & Regulatory Compliance Pages (Privacy, Terms, Disclaimer, Grievance)
   ========================================================================== */
.legal-page-section {
  padding: clamp(48px, 5.5vw, 80px) 0;
  background-color: #F8FAFC;
  position: relative;
}

.legal-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.legal-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: clamp(28px, 4.5vw, 56px);
  box-shadow: 0 4px 25px rgba(11, 29, 58, 0.04);
  box-sizing: border-box;
}

.legal-meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E2E8F0;
}

.legal-badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.legal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: rgba(0, 168, 142, 0.12);
  color: #00A88E;
  border: 1px solid rgba(0, 168, 142, 0.25);
}

.legal-status-badge.badge-saffron {
  background-color: rgba(255, 138, 0, 0.12);
  color: #FF8A00;
  border-color: rgba(255, 138, 0, 0.3);
}

.legal-date-text {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

.legal-toc-bar {
  background-color: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 36px;
}

.legal-toc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0B1D3A;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.legal-toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-toc-link {
  font-size: 13px;
  color: #00A88E;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.legal-toc-link:hover {
  color: #0B1D3A;
  text-decoration: underline;
}

.legal-section {
  margin-bottom: 40px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section-header {
  margin-bottom: 14px;
}

.legal-section-num {
  font-size: 13px;
  font-weight: 700;
  color: #FF8A00;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.legal-section-title {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  color: #0B1D3A;
  line-height: 1.35;
  margin: 0;
}

.legal-body-text {
  font-size: 15px;
  line-height: 1.7;
  color: #334155;
  margin: 0 0 16px;
}

.legal-body-text:last-child {
  margin-bottom: 0;
}

.legal-list {
  margin: 12px 0 18px 20px;
  padding: 0;
  color: #334155;
  font-size: 14.5px;
  line-height: 1.65;
}

.legal-list li {
  margin-bottom: 8px;
}

.legal-list li strong {
  color: #0B1D3A;
}

.legal-notice-box {
  background-color: #FEF3C7;
  border-left: 4px solid #D97706;
  border-radius: 8px 12px 12px 8px;
  padding: 16px 20px;
  margin: 20px 0;
  color: #92400E;
  font-size: 14px;
  line-height: 1.6;
}

.legal-notice-box strong {
  color: #78350F;
}

.legal-callout-teal {
  background-color: rgba(0, 168, 142, 0.06);
  border-left: 4px solid #00A88E;
  border-radius: 8px 12px 12px 8px;
  padding: 16px 20px;
  margin: 20px 0;
  color: #0F172A;
  font-size: 14px;
  line-height: 1.6;
}

.legal-callout-teal strong {
  color: #0B1D3A;
}

.legal-table-responsive {
  width: 100%;
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.legal-table th {
  background-color: #0B1D3A;
  color: #FFFFFF;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

.legal-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #E2E8F0;
  color: #334155;
  line-height: 1.55;
  vertical-align: top;
}

.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table tr:nth-child(even) td {
  background-color: #F8FAFC;
}

.legal-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 22px 0;
}

.legal-contact-card {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-contact-kicker {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #00A88E;
  letter-spacing: 0.04em;
}

.legal-contact-title {
  font-size: 16px;
  font-weight: 700;
  color: #0B1D3A;
  margin: 0;
}

.legal-contact-desc {
  font-size: 13.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

.legal-contact-link {
  font-size: 13.5px;
  font-weight: 600;
  color: #00A88E;
  text-decoration: none;
  word-break: break-all;
}

.legal-contact-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .legal-card {
    padding: 24px 16px;
    border-radius: 16px;
  }

  .legal-meta-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Section 15: Insurance Solutions Clean Showcase
   Clean UI: Zero Box Shadows, Zero Color Gradients, Zero Card Top Borders,
   Zero Hover Movement Effects, Exactly 15px Border Radius
   Strict Rules: Zero Inline CSS, 100% External CSS
   ========================================================================== */
.insurance-showcase-section {
  position: relative;
  width: 100%;
  background-color: #F8FAFC;
  padding: clamp(48px, 5.5vw, 80px) 0;
  margin: 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  overflow: hidden;
  box-sizing: border-box;
}

.insurance-showcase-container {
  width: 100%;
  max-width: var(--container-max, 1320px);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* Header Row with Action CTA & Navigation Controls */
.insurance-showcase-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 3vw, 36px);
  flex-wrap: wrap;
}

.insurance-showcase-header {
  max-width: 680px;
  text-align: left;
  margin: 0;
}

.insurance-showcase-badge-wrap {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
}

.insurance-showcase-subheading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal, #00A88E);
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 15px;
  padding: 5px 14px;
  line-height: 1.2;
}

.ins-subheading-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-teal, #00A88E);
  display: inline-block;
}

.insurance-showcase-heading {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 10px;
  line-height: 1.22;
}

.insurance-showcase-desc {
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.6;
  color: #64748B;
  margin: 0;
  max-width: 620px;
}

/* Header Action Controls */
.insurance-showcase-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.ins-header-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 15px;
  background-color: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  color: var(--color-navy, #0B1D3A);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--transition-fast, 0.2s ease),
    color var(--transition-fast, 0.2s ease),
    border-color var(--transition-fast, 0.2s ease);
}

.ins-header-cta-btn:hover {
  background-color: var(--color-navy, #0B1D3A);
  color: #FFFFFF;
  border-color: var(--color-navy, #0B1D3A);
}

.ins-header-cta-arrow {
  display: inline-flex;
  align-items: center;
}

/* Carousel Prev / Next Arrow Buttons */
.insurance-carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ins-carousel-btn {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background-color: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  color: var(--color-navy, #0B1D3A);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--transition-fast, 0.2s ease),
    color var(--transition-fast, 0.2s ease),
    border-color var(--transition-fast, 0.2s ease);
}

.ins-carousel-btn:hover:not(:disabled) {
  background-color: var(--color-teal, #00A88E);
  color: #FFFFFF;
  border-color: var(--color-teal, #00A88E);
}

.ins-carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background-color: #F8FAFC;
  color: #94A3B8;
  border-color: #E2E8F0;
  box-shadow: none;
}

/* Carousel Viewport Wrapper */
.insurance-carousel-wrapper {
  position: relative;
  width: 100%;
}

/* Carousel Track (Horizontal Flex with Scroll Snap) */
.insurance-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 2px 14px;
  margin: 0;
  box-sizing: border-box;
}

.insurance-carousel-track::-webkit-scrollbar {
  display: none;
}

/* Exactly 4 Cards in One View on Desktop (15px Border Radius, No Box Shadow, No Gradient, No Card Top Border, No Hover Effect) */
.insurance-card {
  flex: 0 0 calc((100% - (3 * 20px)) / 4);
  min-width: calc((100% - (3 * 20px)) / 4);
  max-width: calc((100% - (3 * 20px)) / 4);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 15px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  position: relative;
  box-sizing: border-box;
}

/* Photographic Media Container (15px Border Radius, No Gradient) */
.insurance-card-media {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background-color: #E2E8F0;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.insurance-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Floating Dual-Tone Icon Badge (15px Border Radius, No Box Shadow) */
.insurance-card-icon-anchor {
  position: relative;
  width: 100%;
  height: 0;
  z-index: 4;
}

.insurance-card-icon-pill {
  position: absolute;
  left: 20px;
  bottom: -24px;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background-color: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal, #00A88E);
}

/* Card Body */
.insurance-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 34px 20px 18px;
  box-sizing: border-box;
}

.insurance-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 8px;
  line-height: 1.3;
}

.insurance-card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #64748B;
  margin: 0 0 18px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
  font-weight: 500;
}

/* Card Footer & Action CTA */
.insurance-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  margin-top: auto;
}

.insurance-card-action-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.insurance-card-arrow {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #F1F5F9;
  color: var(--color-navy, #0B1D3A);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

/* Pagination Dots */
.insurance-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.ins-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #CBD5E1;
  border: none;
  padding: 0;
  cursor: pointer;
}

.ins-dot.active {
  width: 24px;
  background-color: var(--color-teal, #00A88E);
}

/* Responsive Breakpoints */
@media (min-width: 1201px) {
  .insurance-carousel-dots {
    display: none !important;
  }
}

@media (max-width: 1200px) {

  /* 3 Cards in view */
  .insurance-card {
    flex: 0 0 calc((100% - (2 * 18px)) / 3);
    min-width: calc((100% - (2 * 18px)) / 3);
    max-width: calc((100% - (2 * 18px)) / 3);
  }
}

@media (max-width: 860px) {

  /* 2 Cards in view */
  .insurance-card {
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }

  .insurance-showcase-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .insurance-carousel-track {
    gap: 14px;
    padding: 6px 2px 12px;
  }

  /* Compact, user-friendly mobile cards with clear peek preview */
  .insurance-card {
    flex: 0 0 235px;
    min-width: 235px;
    max-width: 235px;
    border-radius: 14px;
  }

  .insurance-card-media {
    height: 120px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }

  .insurance-card-icon-anchor {
    height: 0;
  }

  .insurance-card-icon-pill {
    left: 14px;
    bottom: -18px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .insurance-card-icon-pill svg {
    width: 17px;
    height: 17px;
  }

  .insurance-card-body {
    padding: 24px 15px 14px;
  }

  .insurance-card-title {
    font-size: 15px;
    margin: 0 0 4px;
    line-height: 1.25;
  }

  .insurance-card-desc {
    font-size: 11.5px;
    line-height: 1.45;
    margin: 0 0 10px;
    min-height: 34px;
  }

  .insurance-card-footer {
    padding-top: 10px;
    margin-top: auto;
  }

  .insurance-card-action-text {
    font-size: 12px;
  }

  .insurance-card-arrow {
    width: 26px;
    height: 26px;
    border-radius: 13px;
  }

  .insurance-card-arrow svg {
    width: 12px;
    height: 12px;
  }

  .ins-carousel-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .ins-carousel-btn svg {
    width: 14px;
    height: 14px;
  }

  .insurance-showcase-header-row {
    align-items: flex-start;
    text-align: left;
  }

  .insurance-showcase-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 380px) {
  .insurance-card {
    flex: 0 0 215px;
    min-width: 215px;
    max-width: 215px;
  }

  .insurance-card-media {
    height: 112px;
  }

  .insurance-card-body {
    padding: 22px 13px 12px;
  }

  .insurance-card-title {
    font-size: 14.5px;
  }

  .insurance-card-desc {
    font-size: 11px;
    min-height: 32px;
  }
}

/* ==========================================================================
   Home Claims Process Section (The 5 Steps of a Claim)
   Placed next to Insurance Solutions Section on Homepage
   Exact same-to-same UI matching reference design with pixel-perfect responsive scaling
   ========================================================================== */
.home-claims-process-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(48px, 5.5vw, 80px) 0;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
  overflow: hidden;
  box-sizing: border-box;
}

.home-claims-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

.home-claims-header {
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 720px;
}

.home-claims-badge-wrap {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
}

.home-claims-subheading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal, #00A88E);
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 15px;
  padding: 5px 14px;
  line-height: 1.2;
}

.home-claims-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-teal, #00A88E);
  display: inline-block;
}

.home-claims-title {
  font-family: var(--font-family);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.home-claims-desc {
  font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

/* 5-Column Grid on Desktop */
.home-claims-flow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  width: 100%;
  box-sizing: border-box;
}

.home-claims-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  box-sizing: border-box;
}

/* Top Row: Number + Icon Badge + Connector Arrow */
.claims-step-top {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  margin-bottom: 18px;
  position: relative;
}

.claims-step-num {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-teal, #00A88E);
  line-height: 1;
  flex-shrink: 0;
}

.claims-step-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 168, 142, 0.08);
  border: 1.5px solid rgba(0, 168, 142, 0.24);
  color: var(--color-teal, #00A88E);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.claims-step-icon-badge svg {
  width: 22px;
  height: 22px;
  color: var(--color-teal, #00A88E);
  transition: color var(--transition-fast);
}

.home-claims-step:hover .claims-step-icon-badge {
  transform: translateY(-2px);
  background: rgba(0, 168, 142, 0.16);
  border-color: var(--color-teal, #00A88E);
}

/* Step 5 Solid Checkmark Circle */
.claims-icon-badge-final {
  background: var(--color-teal, #00A88E);
  border-color: var(--color-teal, #00A88E);
  color: #FFFFFF;
}

.claims-icon-badge-final svg {
  color: #FFFFFF;
  width: 20px;
  height: 20px;
}

.home-claims-step:hover .claims-icon-badge-final {
  background: var(--color-teal-hover, #008F79);
  border-color: var(--color-teal-hover, #008F79);
}

.home-claims-step:hover .claims-icon-badge-final svg {
  color: #FFFFFF;
}

/* Connector: Dashed line with arrowhead pointing right */
.claims-step-connector {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 24px;
  margin-left: 2px;
  position: relative;
}

.claims-connector-line {
  flex: 1;
  height: 0;
  border-top: 1.5px dashed rgba(0, 168, 142, 0.35);
}

.claims-connector-arrow {
  color: var(--color-teal, #00A88E);
  width: 9px;
  height: 11px;
  flex-shrink: 0;
  margin-left: -2px;
}

/* Step Title */
.claims-step-title {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 8px;
  line-height: 1.3;
}

/* Step Description */
.claims-step-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #64748B;
  margin: 0 0 16px;
  flex-grow: 1;
  min-height: 58px;
}

/* Bottom Feature Chip Container */
.claims-step-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  background: rgba(0, 168, 142, 0.05);
  border: 1px solid rgba(0, 168, 142, 0.18);
  border-radius: 12px;
  padding: 10px 14px;
  box-sizing: border-box;
  margin-top: auto;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.home-claims-step:hover .claims-step-features {
  background-color: rgba(0, 168, 142, 0.09);
  border-color: rgba(0, 168, 142, 0.32);
}

.claims-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy, #0B1D3A);
  line-height: 1.35;
}

.claims-feature-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-teal, #00A88E);
  flex-shrink: 0;
}

/* Carousel Scrollbar & Dots for Tablet & Mobile */
.home-claims-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.home-claims-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #CBD5E1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-claims-dot.active {
  width: 24px;
  background-color: var(--color-teal, #00A88E);
}

/* Responsive Media Queries */
@media (max-width: 1140px) and (min-width: 769px) {
  .home-claims-flow-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 6px 2px 16px;
    scrollbar-width: none;
  }

  .home-claims-flow-grid::-webkit-scrollbar {
    display: none;
  }

  .home-claims-step {
    flex: 0 0 255px;
    min-width: 255px;
    max-width: 255px;
    scroll-snap-align: start;
  }

  .home-claims-dots {
    display: flex;
  }
}

/* Mobile: Show all 5 steps in one screen, 1 step in each row/line */
@media (max-width: 768px) {
  .home-claims-process-section {
    padding: clamp(24px, 3.8vw, 36px) 0;
  }

  .home-claims-header {
    margin-bottom: 14px;
    text-align: left;
  }

  .home-claims-badge-wrap {
    margin-bottom: 8px;
  }

  .home-claims-title {
    font-size: clamp(20px, 4.5vw, 24px);
    margin: 0 0 4px;
    line-height: 1.2;
  }

  .home-claims-desc {
    font-size: 11.5px;
    line-height: 1.4;
    color: #64748B;
  }

  /* Vertical 1-step-per-row layout */
  .home-claims-flow-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .home-claims-step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon desc"
      "icon features";
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: none;
    background: #FFFFFF;
    border: 1px solid rgba(0, 168, 142, 0.16);
    border-radius: 12px;
    padding: 8px 12px;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
  }

  .home-claims-step:hover {
    border-color: rgba(0, 168, 142, 0.4);
    background-color: rgba(0, 168, 142, 0.02);
  }

  .claims-step-top {
    grid-area: icon;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    width: auto;
    padding-top: 2px;
  }

  .claims-step-num {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--color-teal, #00A88E);
    line-height: 1;
    min-width: 18px;
  }

  .claims-step-icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
  }

  .claims-step-icon-badge svg {
    width: 17px;
    height: 17px;
  }

  .claims-icon-badge-final svg {
    width: 15px;
    height: 15px;
  }

  .claims-step-connector {
    display: none !important;
  }

  .claims-step-title {
    grid-area: title;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-navy, #0B1D3A);
    margin: 0;
    line-height: 1.25;
  }

  .claims-step-desc {
    grid-area: desc;
    font-size: 11px;
    line-height: 1.35;
    color: #64748B;
    margin: 1px 0 3px;
    min-height: auto;
  }

  .claims-step-features {
    grid-area: features;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 10px;
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 2px;
  }

  .claims-feature-item {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--color-navy, #0B1D3A);
    gap: 5px;
  }

  .claims-feature-dot {
    width: 4px;
    height: 4px;
    background-color: var(--color-teal, #00A88E);
  }

  .home-claims-dots {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .home-claims-step {
    column-gap: 8px;
    padding: 7px 10px;
  }

  .claims-step-top {
    gap: 6px;
  }

  .claims-step-num {
    font-size: 13px;
  }

  .claims-step-icon-badge {
    width: 30px;
    height: 30px;
  }

  .claims-step-icon-badge svg {
    width: 14px;
    height: 14px;
  }

  .claims-step-title {
    font-size: 12.5px;
  }

  .claims-step-desc {
    font-size: 10.5px;
  }

  .claims-feature-item {
    font-size: 10px;
  }
}

/* ==========================================================================
   Section 16: Why Distroo (Tangible Differentiators Grid)
   4 Cards in One Row, Compact User-Friendly UI, Navy Filled Icons (No BG Box)
   Strict Rules: Zero Inline CSS, 100% External CSS
   ========================================================================== */
.why-distroo-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(42px, 4.8vw, 70px) 0;
  margin: 0;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
  overflow: hidden;
  box-sizing: border-box;
}

.why-distroo-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

.why-distroo-header {
  margin-bottom: clamp(24px, 3vw, 40px);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.why-distroo-subheading {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-teal, #00A88E);
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 9999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

.why-distroo-heading {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 10px;
  line-height: 1.25;
}

.why-distroo-desc {
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.55;
  color: #64748B;
  margin: 0;
}

/* 4 Cards in 1 Row on Desktop */
.why-distroo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

.why-distroo-card {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 15px;
  padding: clamp(18px, 1.8vw, 24px) clamp(16px, 1.5vw, 20px);
  box-sizing: border-box;
  transition: all var(--transition-base, 0.3s ease);
  position: relative;
  box-shadow: 0 2px 10px rgba(11, 29, 58, 0.03);
}

.why-distroo-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-teal, #00A88E);
  box-shadow: 0 12px 28px rgba(11, 29, 58, 0.07);
}

.why-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* Icon Wrap: NO BG Box, Navy Color, Compact */
.why-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--color-navy, #0B1D3A) !important;
  flex-shrink: 0;
  transition: transform var(--transition-fast, 0.2s ease);
}

.why-card-icon-wrap svg {
  width: 24px;
  height: 24px;
  fill: var(--color-navy, #0B1D3A);
  color: var(--color-navy, #0B1D3A);
  display: block;
}

.why-distroo-card:hover .why-card-icon-wrap {
  transform: scale(1.08);
}

.why-card-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 9999px;
  background-color: #F8FAFC;
  color: #64748B;
  border: 1px solid #E2E8F0;
}

.why-card-title {
  font-size: clamp(15.5px, 1.1vw, 17px);
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 8px;
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.why-distroo-card:hover .why-card-title {
  color: var(--color-teal, #00A88E);
}

.why-card-bold-line {
  font-size: clamp(12.5px, 0.9vw, 13.5px);
  font-weight: 700;
  color: #0F172A;
  line-height: 1.45;
  margin: 0 0 8px;
}

.why-card-support-line {
  font-size: clamp(11.5px, 0.85vw, 12.5px);
  line-height: 1.55;
  color: #64748B;
  margin: 0;
  flex: 1;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .why-distroo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .why-distroo-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ==========================================================================
   Section 17: Leadership Section (About Us Page)
   Compact & User-Friendly UI: 15px Border Radius, Zero Box Shadow,
   Zero Hover Lift, and Clean Natural Image Display.
   Strict Rules: Zero Inline CSS, 100% External CSS
   ========================================================================== */
.leadership-section {
  position: relative;
  width: 100%;
  background-color: #F8FAFC;
  padding: clamp(40px, 4.5vw, 64px) 0;
  margin: 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  box-sizing: border-box;
}

.leadership-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

.leadership-header {
  text-align: center;
  margin: 0 auto clamp(24px, 3vw, 36px);
}

.leadership-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal, #00A88E);
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 15px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

.leadership-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 10px;
  line-height: 1.25;

}

.leadership-desc {
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

.leadership-cards-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 24px);
  width: 100%;
}

.leadership-card {
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: none;
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: stretch;
  box-sizing: border-box;
}

.leadership-card.leader-card-reversed {
  grid-template-columns: 1fr 340px;
}

/* Remove hover lift and box shadow */
.leadership-card:hover {
  transform: none;
  box-shadow: none;
  border-color: #CBD5E1;
}

/* Card Media / Image - Height matches card height exactly */
.leader-media {
  position: relative;
  background-color: #F1F5F9;
  height: 350px;
  min-height: 100%;
  overflow: hidden;
  display: flex;
}

.leader-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transform: none;
}

.leadership-card:hover .leader-img {
  transform: none;
}

/* Remove image color gradient */
.leader-media-overlay {
  display: none !important;
}

.leader-experience-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(11, 29, 58, 0.9);
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
}

.leader-experience-badge svg {
  color: var(--color-saffron, #FF8A00);
  width: 12px;
  height: 12px;
}

/* Card Content Area - Compact & User Friendly */
.leader-content {
  padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.leader-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.leader-role-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 15px;
  background-color: rgba(0, 168, 142, 0.08);
  color: var(--color-teal, #00A88E);
  border: 1px solid rgba(0, 168, 142, 0.2);
}

.leader-role-badge.badge-saffron {
  background-color: rgba(255, 138, 0, 0.08);
  color: var(--color-saffron, #FF8A00);
  border-color: rgba(255, 138, 0, 0.22);
}

.leader-linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  text-decoration: none;
}

.leader-linkedin-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.leader-name {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 4px;
  line-height: 1.2;
}

.leader-designation {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-teal, #00A88E);
  margin: 0 0 12px;
}

.leader-card-reversed .leader-designation {
  color: var(--color-saffron, #FF8A00);
}

.leader-message {
  position: relative;
  font-size: clamp(13px, 0.92vw, 14px);
  line-height: 1.6;
  color: #475569;
  margin: 0 0 16px;
  border-left: 2.5px solid var(--color-teal, #00A88E);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.leader-card-reversed .leader-message {
  border-left-color: var(--color-saffron, #FF8A00);
}

.leader-message p {
  margin: 0;
  line-height: 1.55;
}

.leader-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.leader-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 4px 10px;
  border-radius: 15px;
}

.leader-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-teal, #00A88E);
}

.leader-card-reversed .leader-chip-dot {
  background-color: var(--color-saffron, #FF8A00);
}

/* Responsive Breakpoints */
@media (max-width: 900px) {

  .leadership-card,
  .leadership-card.leader-card-reversed {
    grid-template-columns: 1fr;
  }

  .leadership-card.leader-card-reversed .leader-media {
    order: -1;
  }

  .leader-media {
    height: 220px;
    min-height: 200px;
    max-height: 240px;
  }
}

/* ==========================================================================
   Responsive Hardening (device / pixel / mobile audit fixes)
   ========================================================================== */
/* Selects/inputs in any form must never exceed their container */
.lead-form-group,
.lead-form-select,
.lead-form-input {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lead-form-select {
  width: 100%;
}

/* Counter bar: let metrics shrink and wrap labels on narrow desktops/tablets */
@media (min-width: 992px) and (max-width: 1200px) {
  .counter-metrics-col {
    min-width: 0;
    gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .counter-metric-item {
    min-width: 0;
    flex: 1 1 0;
  }

  .metric-label {
    white-space: normal;
  }
}

/* Counter heading: beat the global h1/h2 !important size so it stays compact */
h2.counter-heading {
  font-size: clamp(15px, 1.28vw, 19px) !important;
}

@media (max-width: 991px) {
  h2.counter-heading {
    font-size: 15px !important;
  }
}

@media (max-width: 575px) {
  h2.counter-heading {
    font-size: 13.5px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile Hero Layout: text block on top, photo fully visible below (no overlap)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-container {
    min-height: 0;
    justify-content: flex-start;
    align-items: stretch;
    padding: 96px 20px calc(var(--hero-photo-h) + 8px);
    --hero-photo-h: clamp(240px, 78vw, 400px);
  }

  /* Buttons pinned to the bottom of the hero, over the photo */
  .hero-content {
    position: static;
  }

  .hero-cta-group {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: auto;
    z-index: 5;
  }

  /* Black fade behind the buttons so they stay readable over the photo */
  .hero-cta-group::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -56px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 45%,
        rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
  }

  .hero-bg-picture {
    top: 0;
    bottom: 0;
    height: 100%;
  }

  .hero-bg {
    object-position: center bottom;
  }

  /* Solid black behind text, fading out so the photo is clear underneath */
  .hero-overlay {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.70) calc(100% - var(--hero-photo-h) - 40px),
        rgba(0, 0, 0, 0.35) calc(100% - var(--hero-photo-h) - 5px),
        rgba(0, 0, 0, 0) calc(100% - var(--hero-photo-h) + 50px),
        rgba(0, 0, 0, 0) 100%);
  }

  .hero-content {
    max-width: 560px;
    margin: 0;
  }

  .hero-title {
    font-size: clamp(27px, 7.4vw, 36px);
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .hero-subtitle {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 22px;
  }

  .hero-cta-group {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }

  .btn-assessment,
  .btn-advisor {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    align-self: stretch;
    justify-content: space-between;
    gap: 6px;
    min-height: 42px;
    padding: 4px 4px 4px 14px;
    font-size: 12.5px;
    line-height: 1.2;
    white-space: normal;
  }

  .btn-assessment .cta-arrow,
  .btn-advisor .cta-arrow-secondary {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
}

@media (max-width: 375px) {
  .hero-container {
    padding: 84px 16px calc(var(--hero-photo-h) + 8px);
  }

  .hero-cta-group {
    left: 16px;
    right: 16px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .btn-assessment,
  .btn-advisor {
    font-size: 11.5px;
    padding-left: 11px;
  }
}

/* --------------------------------------------------------------------------
   Advisor Proposition Section (light)
   -------------------------------------------------------------------------- */
.advisor-prop-section {
  width: 100%;
  background-color: #F4F8FB;
  padding: clamp(36px, 4vw, 56px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(11, 29, 58, 0.06);
}

.advisor-prop-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
}

.advisor-prop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4.5vw, 64px);
  align-items: center;
}

.advisor-prop-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.advisor-prop-kicker {
  display: inline-flex;
  align-items: center;
  background-color: rgba(0, 168, 142, 0.10);
  border: 1px solid rgba(0, 168, 142, 0.30);
  border-radius: 9999px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 10px;
  line-height: 1.2;
}

.advisor-prop-title {
  font-family: var(--font-family);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
  margin: 0 0 10px;
}

.advisor-prop-accent {
  color: var(--color-teal);
}

.advisor-prop-text {
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.6;
  color: var(--color-text-dark-muted);
  max-width: 540px;
  margin: 0 0 clamp(16px, 2vw, 22px);
}

.advisor-prop-sub {
  font-family: var(--font-family);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 10px;
}

/* Compact left-aligned audience list */
.advisor-prop-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0 0 clamp(18px, 2vw, 24px);
}

.advisor-prop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: #FFFFFF;
  border: 1px solid rgba(11, 29, 58, 0.10);
  border-radius: 12px;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.advisor-prop-item:last-child {
  grid-column: 1 / -1;
}

.advisor-prop-item:hover {
  border-color: rgba(0, 168, 142, 0.55);
  transform: translateY(-2px);
}

.advisor-prop-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: var(--color-teal);
  color: var(--color-white);
}

.advisor-prop-item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.advisor-prop-item-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
}

.advisor-prop-item-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-dark-muted);
}

.advisor-prop-cta {
  width: fit-content;
  background-color: var(--color-navy);
  color: var(--color-white);
}

.advisor-prop-cta:hover {
  background-color: var(--color-navy-light);
}

.advisor-prop-cta .cta-arrow {
  background: var(--color-teal);
  color: var(--color-white);
}

.advisor-prop-media {
  width: 100%;
  aspect-ratio: 4 / 4.2;
  max-height: 460px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(11, 29, 58, 0.08);
  justify-self: end;
}

.advisor-prop-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

@media (max-width: 900px) {
  .advisor-prop-layout {
    grid-template-columns: 1fr;
  }

  .advisor-prop-media {
    order: -1;
    aspect-ratio: 16 / 9;
    max-height: 260px;
    justify-self: stretch;
  }

  .advisor-prop-text {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .advisor-prop-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 clamp(16px, 3vw, 20px);
  }

  .advisor-prop-item {
    align-items: flex-start;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 10px;
  }

  .advisor-prop-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    margin-top: 2px;
  }

  .advisor-prop-item-icon svg {
    width: 15px;
    height: 15px;
  }

  .advisor-prop-item-title {
    font-size: 12.5px;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .advisor-prop-item-desc {
    font-size: 10.5px;
    line-height: 1.35;
  }

  .advisor-prop-item:last-child {
    grid-column: 1 / -1;
    align-items: center;
  }

  .advisor-prop-cta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 360px) {
  .advisor-prop-list {
    gap: 6px;
  }

  .advisor-prop-item {
    padding: 7px 6px;
    gap: 6px;
  }

  .advisor-prop-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }

  .advisor-prop-item-icon svg {
    width: 13px;
    height: 13px;
  }

  .advisor-prop-item-title {
    font-size: 11.5px;
  }

  .advisor-prop-item-desc {
    font-size: 10px;
  }
}

/* --------------------------------------------------------------------------
   Brand Logo Image (header, mobile drawer, footer)
   -------------------------------------------------------------------------- */
.brand-logo {
  display: block;
  width: auto;
  height: clamp(28px, 2.6vw, 25px);
  max-width: 100%;
  object-fit: contain;
}

/* White-background logo sits on a white rounded chip over dark areas */
.brand-logo-on-dark {
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 6px 10px;
  box-sizing: content-box;
  height: 30px;
}

.footer-brand .brand-logo-on-dark {
  height: 34px;
}

@media (max-width: 575px) {
  .brand-logo {
    height: 26px;
  }

  .brand-logo-on-dark {
    height: 26px;
  }

  .footer-brand .brand-logo-on-dark {
    height: 30px;
  }
}

/* --------------------------------------------------------------------------
   Homepage Capabilities Cards: title + short description from services.html
   -------------------------------------------------------------------------- */
.service-card {
  height: clamp(320px, 29vw, 380px);
}

.service-card-badge {
  align-items: flex-end;
}

.service-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.service-card-desc {
  font-size: clamp(11.5px, 0.8vw, 12.5px);
  line-height: 1.45;
  color: var(--color-text-dark-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 575px) {
  .service-card {
    height: 340px;
  }

  .service-card-desc {
    font-size: 12.5px;
  }
}

/* Capabilities cards: image on top (full, uncropped 3:2), content box below it */
.service-card,
.service-card:hover {
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid rgba(11, 29, 58, 0.08);
}

.service-card-media {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  flex: 0 0 auto;
}

.service-card-badge,
.service-card:hover .service-card-badge {
  position: static;
  flex: 1 1 auto;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  padding: 14px 16px 16px;
}

/* --------------------------------------------------------------------------
   Popup Forms: heading only, Navy + Teal palette (no orange/saffron)
   -------------------------------------------------------------------------- */
.lead-modal-title,
.advisor-modal-title {
  position: relative;
  margin: 0;
  padding-bottom: 12px;
  color: var(--color-navy);
}

.lead-modal-title::after,
.advisor-modal-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-teal);
}

.lead-modal-close:hover,
.advisor-modal-close:hover {
  background: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
}

.advisor-modal-dialog .lead-form-input:focus,
.advisor-modal-dialog .lead-form-select:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(0, 168, 142, 0.15);
}

.advisor-modal-dialog .btn-advisor-submit {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  box-shadow: 0 4px 14px rgba(0, 168, 142, 0.25);
}

.advisor-modal-dialog .btn-advisor-submit:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  box-shadow: 0 6px 20px rgba(11, 29, 58, 0.3);
}

.advisor-modal-dialog .btn-advisor-submit .arrow-circle {
  color: var(--color-teal);
}

.advisor-modal-dialog .btn-advisor-submit:hover .arrow-circle {
  background-color: var(--color-teal);
  color: #FFFFFF;
}

.customer-lead-form .btn-lead-submit:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}

.customer-lead-form .btn-lead-submit:hover .arrow-circle {
  background-color: var(--color-teal);
}

.advisor-modal-success .advisor-success-icon {
  background: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
}

.advisor-modal-success .btn-advisor-dismiss:hover {
  background: var(--color-teal);
}

/* --------------------------------------------------------------------------
   Mobile: 2 blog cards per row (homepage carousel + blog listing)
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .home-blog-track {
    gap: 10px;
  }

  .home-blog-card {
    flex: 0 0 calc((100% - 10px) / 2);
    width: calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
  }

  .home-blog-card-media {
    aspect-ratio: 4 / 3;
  }

  .home-blog-card-content {
    padding: 10px 10px 12px;
  }

  .home-blog-card-meta,
  .home-blog-card-excerpt {
    display: none;
  }

  .home-blog-card-title {
    font-size: 12.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .home-blog-view-more {
    font-size: 12px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .blog-card-media {
    aspect-ratio: 4 / 3;
  }

  .blog-card-content {
    padding: 10px 10px 12px;
  }

  .blog-card-title {
    font-size: 12.5px !important;
    line-height: 1.35;
    margin-bottom: 10px;
    -webkit-line-clamp: 4;
  }

  .blog-card-view-more {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Who We Are: show the full 3:2 photos (no cropping) and align the columns
   -------------------------------------------------------------------------- */
.who-img-wrap-1,
.who-img-wrap-2,
.who-img-wrap-3 {
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 2;
}

@media (min-width: 1025px) {
  .who-gallery-grid {
    align-items: stretch;
  }

  .who-col-2,
  .who-col-3,
  .who-col-4 {
    margin-top: 0;
  }

  /* Cards share the column height so both columns end on the same line as the photos */
  .who-col-3 .who-content-card,
  .who-col-4 .who-content-card {
    flex: 1 1 0;
  }
}

/* --------------------------------------------------------------------------
   Insurance detail pages, mobile hero: taller section, smaller heading & buttons
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  .ins-hero-section,
  #life-hero.ins-hero-section,
  #health-hero.ins-hero-section,
  #motor-hero.ins-hero-section,
  #sme-hero.ins-hero-section,
  #critical-hero.ins-hero-section,
  #accident-hero.ins-hero-section {
    min-height: clamp(600px, 82svh, 720px);
    justify-content: flex-start;
    padding-top: 100px;
    padding-bottom: 44px;
  }

  .ins-hero-title,
  #life-hero .ins-hero-title,
  #health-hero .ins-hero-title,
  #motor-hero .ins-hero-title,
  #sme-hero .ins-hero-title,
  #critical-hero .ins-hero-title,
  #accident-hero .ins-hero-title {
    font-size: clamp(21px, 6vw, 25px);
    line-height: 1.25;
    margin-bottom: 16px;
  }

  .ins-hero-actions {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 20px;
  }

  .ins-hero-actions .btn-appointment,
  .ins-hero-actions .btn-appointment-light {
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    gap: 6px;
    padding: 3px 3px 3px 12px;
    font-size: 11.5px;
    line-height: 1.2;
    white-space: normal;
    justify-content: space-between;
  }

  .ins-hero-actions .btn-appointment .arrow-circle,
  .ins-hero-actions .btn-appointment-light .arrow-circle {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .ins-hero-actions .btn-appointment .arrow-circle svg,
  .ins-hero-actions .btn-appointment-light .arrow-circle svg {
    width: 12px;
    height: 12px;
  }
}

/* --------------------------------------------------------------------------
   Advisor CTA banner (mobile): orbit graphic (left) and advisor photo (right)
   share one scale factor, so both stay the same size and aligned on every
   phone width. --cta-s multiplies the 240px orbit design size.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .service-cta-box {
    --cta-s: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    overflow: hidden;
  }

  .service-cta-orbit-col,
  .service-cta-advisor-wrap {
    grid-row: 2;
    min-width: 0;
    height: calc(240px * var(--cta-s));
    margin: 0;
    overflow: visible;
    align-items: flex-end;
    justify-content: center;
  }

  .service-cta-orbit-col {
    grid-column: 1;
    align-items: center;
  }

  .service-cta-advisor-wrap {
    grid-column: 2;
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
  }

  .cta-orbit-system {
    transform: scale(var(--cta-s));
    transform-origin: center center;
    flex: 0 0 240px;
    margin: calc((var(--cta-s) - 1) * 120px) calc((var(--cta-s) - 1) * 120px);
  }

  .service-cta-advisor-img {
    height: calc(240px * var(--cta-s));
    width: auto;
    max-width: 100%;
    transform: none;
    object-fit: contain;
    object-position: bottom center;
  }
}

@media (max-width: 575px) {
  .service-cta-box {
    --cta-s: 0.8;
  }
}

@media (max-width: 479px) {
  .service-cta-box {
    --cta-s: 0.68;
  }
}

@media (max-width: 419px) {
  .service-cta-box {
    --cta-s: 0.6;
  }
}

@media (max-width: 379px) {
  .service-cta-box {
    --cta-s: 0.54;
  }
}

@media (max-width: 339px) {
  .service-cta-box {
    --cta-s: 0.46;
  }
}

/* --------------------------------------------------------------------------
   "A Clearer Start" block: show the full 3:2 photo and let the needs card
   stretch to the same height (instead of cropping the photo to a fixed 350px)
   -------------------------------------------------------------------------- */
.clearer-start-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: auto;
  align-items: stretch;
}

.clearer-media-card {
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 2;
}

.clearer-media-img {
  object-position: center;
}

.clearer-needs-card {
  height: auto;
  max-height: none;
}

@media (max-width: 991px) {
  .clearer-start-grid {
    grid-template-columns: 1fr;
  }

  .clearer-media-card {
    height: auto;
    max-height: none;
  }
}

/* --------------------------------------------------------------------------
   Services page cards: 4 per row on desktop/laptop, 2 per row on tablet/mobile.
   Photos keep their native 3:2 ratio (no fixed-height cropping).
   -------------------------------------------------------------------------- */
.services-cards-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  align-items: stretch;
}

.service-card-media-wrap {
  height: auto;
  aspect-ratio: 3 / 2;
}

.service-card-content {
  padding: 18px 16px 16px;
}

.service-card-content .service-card-title {
  font-size: clamp(15px, 1.2vw, 17px);
}

.service-card-description {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.service-card-footer {
  padding-top: 12px;
}

.service-view-more {
  font-size: 13px;
}

@media (max-width: 991px) {
  .services-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .services-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .service-card-media-wrap {
    height: auto;
  }

  .service-portfolio-card {
    border-radius: 12px;
  }

  .service-card-content {
    padding: 10px 10px 10px;
  }

  .service-card-content .service-card-title {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .service-card-description {
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .service-card-footer {
    padding-top: 8px;
  }

  .service-view-more {
    font-size: 11px;
    gap: 5px;
  }

  .service-view-more svg {
    width: 12px;
    height: 12px;
  }
}

/* --------------------------------------------------------------------------
   "Why Choose Distroo" block (all service pages, desktop): photo takes the
   same height as the text column beside it instead of running taller
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .care-section-grid {
    align-items: stretch;
  }

  .care-visual-col {
    height: auto;
  }

  .care-visual-card {
    min-height: 0;
    height: auto;
  }

  .care-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .care-content-col {
    justify-content: center;
  }
}

/* Compact notch badge on the "Why Choose Distroo" photo (all service pages),
   so more of the image stays visible */
@media (min-width: 641px) {
  .care-notch-badge {
    max-width: clamp(170px, 36%, 210px);
    padding: 14px 16px 16px 16px;
  }

  .care-notch-title {
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 5px;
  }

  .care-notch-desc {
    font-size: 11.5px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Document checklist block (all service pages): give the 3:2 photo more width
   on desktop so it is barely cropped, and show it in full on tablet/mobile
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .docs-redesign-grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  }
}

@media (max-width: 991px) {
  .docs-visual-card {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

/* --------------------------------------------------------------------------
   Service-page photos come in mixed ratios (1:1, 3:2, 16:9). Use a 4:3 frame
   and bias the crop toward the top so floating UI cards in the artwork stay
   visible.
   -------------------------------------------------------------------------- */
.clearer-media-card {
  aspect-ratio: 4 / 3;
}

.clearer-media-img,
.docs-visual-img,
.care-visual-img {
  object-position: center top;
}

@media (min-width: 992px) {
  .clearer-start-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  }
}

@media (max-width: 991px) {
  .docs-visual-card {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   Advisor popup form: one field per row, consistent submit button size
   -------------------------------------------------------------------------- */
.advisor-modal-dialog .advisor-lead-form .lead-form-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit {
  width: 100%;
  min-height: 44px;
  padding: 4px 5px 4px 20px;
  font-size: 14px;
  gap: 10px;
  margin-top: 4px;
}

.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit .arrow-circle {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit .arrow-circle svg {
  width: 14px;
  height: 14px;
}

/* Advisor popup submit button: no shadow, narrower and centered */
.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit,
.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit:hover {
  box-shadow: none;
}

.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit {
  display: flex;
  width: fit-content;
  min-width: 190px;
  max-width: 100%;
  margin: 6px auto 0;
}

/* --------------------------------------------------------------------------
   "Key Pathways / A Clearer Start" block (all service pages, desktop):
   compact fixed height so the section is less tall
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .clearer-start-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    height: clamp(340px, 27vw, 400px);
  }

  .clearer-media-card {
    aspect-ratio: auto;
    height: 100%;
  }

  .clearer-needs-card {
    height: 100%;
    padding: 18px 22px;
  }

  .clearer-needs-list {
    justify-content: space-between;
  }

  .clearer-need-item {
    padding: 8px 10px;
  }
}

/* Even more compact: card height follows its content, photo matches it */
@media (min-width: 992px) {
  .clearer-start-grid {
    height: auto;
    align-items: stretch;
  }

  .clearer-media-card {
    height: auto;
    min-height: 0;
  }

  .clearer-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .clearer-needs-card {
    height: auto;
    padding: 16px 20px;
  }

  .clearer-needs-title {
    margin-bottom: 4px;
  }

  .clearer-needs-list {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 0;
  }

  .clearer-need-item {
    padding: 7px 10px;
  }
}

/* --------------------------------------------------------------------------
   Checklist / pathways block ("docs-redesign", all service pages, desktop):
   tighter header, card padding and list spacing so the section is shorter
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .docs-redesign-header {
    margin-bottom: 14px;
  }

  .docs-redesign-title {
    font-size: clamp(22px, 2.1vw, 26px);
    margin-bottom: 4px;
  }

  .docs-redesign-desc {
    font-size: 13.5px;
  }

  .docs-redesign-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 20px;
  }

  .docs-interactive-card {
    padding: 16px 20px;
  }

  .docs-mini-tabs-nav {
    margin-bottom: 10px;
  }

  .docs-mini-tab-btn {
    font-size: 12.5px;
    padding: 6px 16px;
  }

  .docs-check-item {
    gap: 12px;
    padding: 8px 0;
  }

  .docs-check-icon-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-top: 0;
  }

  .docs-check-icon-circle svg {
    width: 16px;
    height: 16px;
  }

  .docs-check-title {
    font-size: 13.5px;
    margin-bottom: 1px;
  }

  .docs-check-desc {
    font-size: 12px;
    line-height: 1.4;
  }

  .docs-footnote-text {
    margin-top: 8px;
    font-size: 11px;
  }
}

/* "Key Pathways" block: a bit taller than the compact version so the photo shows more */
@media (min-width: 992px) {
  .clearer-start-grid {
    min-height: clamp(380px, 25vw, 430px);
  }

  .clearer-needs-card {
    padding: 22px 24px;
  }

  .clearer-needs-list {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .clearer-need-item {
    padding: 10px 10px;
  }
}

/* --------------------------------------------------------------------------
   "Why Choose Distroo" block (all service pages, desktop): tighter text,
   list and stat card so the section is shorter (the photo follows its height)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .care-section-grid {
    gap: clamp(20px, 2.4vw, 32px);
  }

  .care-tag-wrap {
    margin-bottom: 8px;
  }

  .care-main-title {
    font-size: clamp(22px, 2.1vw, 26px);
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .care-main-desc {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 16px;
  }

  .care-features-title {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .care-feature-item {
    padding: 7px 0;
    gap: 9px;
  }

  .care-feature-text {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .care-stat-card {
    padding: 16px 18px;
  }

  .care-stat-number {
    font-size: 30px;
  }

  .care-stat-label {
    font-size: 13px;
  }

  .care-stat-desc {
    font-size: 12px;
    line-height: 1.45;
  }
}

/* --------------------------------------------------------------------------
   Service-page photo frames: guarantee a minimum frame shape (via ::before)
   so a short text column can no longer squash a photo into a thin strip and
   cut off faces. The frame grows with the text if the text is taller.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .care-section-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .docs-redesign-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .clearer-start-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  }

  .care-visual-card::before,
  .docs-visual-card::before,
  .clearer-media-card::before {
    content: "";
    display: block;
    flex: 0 0 0;
    width: 0;
    pointer-events: none;
  }

  .care-visual-card::before {
    padding-top: 75%;
  }

  .docs-visual-card::before {
    padding-top: 62.5%;
  }

  .clearer-media-card::before {
    padding-top: 56.25%;
  }

  .care-visual-img,
  .docs-visual-img,
  .clearer-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }
}

/* --------------------------------------------------------------------------
   Insurance assistance popup: one field per row, compact centered button
   -------------------------------------------------------------------------- */
.lead-modal-dialog .customer-lead-form .lead-form-grid,
.advisor-modal-dialog .advisor-lead-form .lead-form-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.lead-modal-dialog .customer-lead-form .btn-lead-submit,
.lead-modal-dialog .customer-lead-form .btn-lead-submit:hover,
.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit,
.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit:hover {
  box-shadow: none;
}

.lead-modal-dialog .customer-lead-form .btn-lead-submit,
.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit {
  display: flex;
  width: fit-content;
  min-width: 190px;
  max-width: 100%;
  min-height: 44px;
  padding: 4px 5px 4px 20px;
  font-size: 14px;
  gap: 10px;
  margin: 6px auto 0;
}

.lead-modal-dialog .customer-lead-form .btn-lead-submit .arrow-circle,
.advisor-modal-dialog .advisor-lead-form .btn-advisor-submit .arrow-circle {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

/* Compact Popup Form on Mobile View (max-width: 576px) */
@media (max-width: 576px) {

  .lead-modal-backdrop,
  .advisor-modal-backdrop,
  .claims-modal-backdrop {
    padding: 12px 10px;
    align-items: center;
    justify-content: center;
  }

  .lead-modal-dialog,
  .advisor-modal-dialog,
  .claims-modal-dialog {
    max-width: 320px;
    width: 92%;
    padding: 16px 14px 14px;
    border-radius: 16px;
    max-height: 94vh;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.45);
  }

  .lead-modal-close,
  .advisor-modal-close,
  .claims-modal-close {
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
  }

  .lead-modal-close svg,
  .advisor-modal-close svg,
  .claims-modal-close svg {
    width: 15px;
    height: 15px;
  }

  .lead-modal-header,
  .advisor-modal-header,
  .claims-modal-header {
    margin-bottom: 12px;
    padding-right: 28px;
  }

  .lead-modal-title,
  .advisor-modal-title,
  .claims-modal-title {
    font-size: 17px;
    line-height: 1.25;
    margin: 0;
    padding-bottom: 8px;
  }

  .lead-modal-title::after,
  .advisor-modal-title::after {
    width: 32px;
    height: 2.5px;
  }

  .lead-modal-dialog .customer-lead-form .lead-form-grid,
  .advisor-modal-dialog .advisor-lead-form .lead-form-grid,
  .claims-modal-form {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .lead-modal-dialog .customer-lead-form .lead-form-group,
  .advisor-modal-dialog .advisor-lead-form .lead-form-group,
  .claims-modal-form .claims-form-group {
    gap: 3px;
  }

  .lead-modal-dialog .customer-lead-form .lead-form-label,
  .advisor-modal-dialog .advisor-lead-form .lead-form-label,
  .claims-modal-form .claims-form-label {
    font-size: 11.5px;
    font-weight: 600;
  }

  .lead-modal-dialog .customer-lead-form .lead-form-input,
  .lead-modal-dialog .customer-lead-form .lead-form-select,
  .advisor-modal-dialog .advisor-lead-form .lead-form-input,
  .advisor-modal-dialog .advisor-lead-form .lead-form-select,
  .claims-modal-form .claims-form-input,
  .claims-modal-form .claims-form-select {
    height: 38px;
    min-height: 38px;
    padding: 6px 12px;
    font-size: 13.5px;
    border-radius: 8px;
  }

  .lead-modal-dialog .lead-phone-prefix {
    height: 38px;
    padding: 0 10px;
    font-size: 12.5px;
    border-radius: 8px 0 0 8px;
  }

  .lead-modal-dialog .lead-phone-input-wrap .lead-form-input {
    border-radius: 0 8px 8px 0;
  }

  .lead-modal-dialog .customer-lead-form .btn-lead-submit,
  .advisor-modal-dialog .advisor-lead-form .btn-advisor-submit,
  .claims-modal-form .btn-claims-submit {
    min-height: 38px;
    height: 38px;
    padding: 2px 4px 2px 16px;
    font-size: 13px;
    min-width: 165px;
    margin: 4px auto 0;
    gap: 8px;
  }

  .lead-modal-dialog .customer-lead-form .btn-lead-submit .arrow-circle,
  .advisor-modal-dialog .advisor-lead-form .btn-advisor-submit .arrow-circle {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .lead-modal-dialog .customer-lead-form .btn-lead-submit .arrow-circle svg,
  .advisor-modal-dialog .advisor-lead-form .btn-advisor-submit .arrow-circle svg {
    width: 13px;
    height: 13px;
  }

  .lead-modal-dialog .lead-modal-success,
  .advisor-modal-dialog .advisor-modal-success,
  .claims-modal-dialog .claims-modal-success {
    padding: 14px 6px 6px;
  }

  .lead-modal-dialog .lead-modal-success .lead-success-icon,
  .advisor-modal-dialog .advisor-modal-success .advisor-success-icon,
  .claims-modal-dialog .claims-modal-success .claims-modal-success-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
  }

  .lead-modal-dialog .lead-modal-success .lead-success-icon svg,
  .advisor-modal-dialog .advisor-modal-success .advisor-success-icon svg,
  .claims-modal-dialog .claims-modal-success .claims-modal-success-icon svg {
    width: 26px;
    height: 26px;
  }

  .lead-modal-dialog .lead-modal-success h4,
  .advisor-modal-dialog .advisor-modal-success h4,
  .claims-modal-dialog .claims-modal-success h4 {
    font-size: 18px;
    margin: 0 0 8px;
  }

  .lead-modal-dialog .lead-modal-success p,
  .advisor-modal-dialog .advisor-modal-success p,
  .claims-modal-dialog .claims-modal-success p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
  }

  .lead-modal-dialog .lead-modal-success .btn-success-dismiss,
  .advisor-modal-dialog .advisor-modal-success .btn-advisor-dismiss,
  .claims-modal-dialog .claims-modal-success .btn-modal-dismiss {
    min-height: 38px;
    height: 38px;
    padding: 0 24px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {

  .lead-modal-backdrop,
  .advisor-modal-backdrop,
  .claims-modal-backdrop {
    padding: 8px 4px;
  }

  .lead-modal-dialog,
  .advisor-modal-dialog,
  .claims-modal-dialog {
    max-width: 295px;
    width: 94%;
    padding: 14px 10px 10px;
    border-radius: 14px;
  }

  .lead-modal-title,
  .advisor-modal-title,
  .claims-modal-title {
    font-size: 15.5px;
  }

  .lead-modal-dialog .customer-lead-form .lead-form-grid,
  .advisor-modal-dialog .advisor-lead-form .lead-form-grid {
    gap: 7px;
  }

  .lead-modal-dialog .customer-lead-form .lead-form-input,
  .lead-modal-dialog .customer-lead-form .lead-form-select,
  .advisor-modal-dialog .advisor-lead-form .lead-form-input,
  .advisor-modal-dialog .advisor-lead-form .lead-form-select {
    height: 36px;
    min-height: 36px;
    font-size: 12.5px;
    padding: 5px 10px;
  }

  .lead-modal-dialog .lead-phone-prefix {
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
  }

  .lead-modal-dialog .customer-lead-form .btn-lead-submit {
    min-height: 36px;
    height: 36px;
    min-width: 150px;
    font-size: 12.5px;
  }
}

/* ==========================================================================
   Growth Desk: Coming Soon Showcase & Business-Enablement Operating System
   Pixel-Perfect Multi-Device Scaling (320px to 2560px+)
   Zero Inline CSS | Zero Box Shadows | Distroo Navy & Saffron Design System
   ========================================================================== */

/* Navbar responsive adjustments for 7 desktop items */
@media (min-width: 992px) and (max-width: 1200px) {
  .nav-links {
    gap: clamp(10px, 1.2vw, 16px) !important;
  }

  .nav-link {
    font-size: 13.5px !important;
    padding: 6px 2px !important;
  }

  .navbar {
    padding-left: clamp(14px, 1.5vw, 20px) !important;
    padding-right: clamp(8px, 1vw, 12px) !important;
  }

  .brand-logo {
    width: 165px !important;
    height: auto !important;
  }

  .btn-appointment {
    padding: 6px 6px 6px 14px !important;
    font-size: 13px !important;
  }
}

/* --------------------------------------------------------------------------
   Growth Desk: Clean Coming Soon Section
   Zero Box Shadows | Pure Distroo Design System
   -------------------------------------------------------------------------- */
.coming-soon-section {
  width: 100%;
  padding: clamp(70px, 10vh, 120px) clamp(16px, 3.5vw, 48px);
  background: #F8FAFC;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

.coming-soon-container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.coming-soon-card {
  background: var(--color-white);
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 138, 0, 0.1);
  border: 1px solid rgba(255, 138, 0, 0.3);
  color: var(--color-saffron);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.coming-soon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-saffron);
  display: inline-block;
  animation: cs-pulse 2s infinite ease-out;
}

@keyframes cs-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

.coming-soon-title {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-navy);
  margin: 0 0 16px;
}

.coming-soon-text {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-dark-muted);
  margin: 0;
  max-width: 520px;
}

/* --------------------------------------------------------------------------
   Grievance Redressal Form & Customer Forms
   Strict Rules: Zero Inline CSS, Zero Box Shadows, Pure Distroo Design System
   -------------------------------------------------------------------------- */
.grievance-form-container {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: clamp(20px, 3.5vw, 36px);
  margin-top: 24px;
  box-sizing: border-box;
  box-shadow: none;
}

/* Grievance Lead Form: Robust 2-Column Responsive Layout */
.grievance-lead-form {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.grievance-lead-form .lead-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}

.grievance-lead-form .lead-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grievance-lead-form .lead-form-group.full-width {
  grid-column: 1 / -1;
}

.grievance-lead-form .lead-form-label {
  font-size: 13px;
  font-weight: 600;
  color: #07152B;
  display: flex;
  align-items: center;
  gap: 4px;
}

.grievance-lead-form .lead-form-input,
.grievance-lead-form .lead-form-select {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 14px;
  color: #0F172A;
  background-color: #FFFFFF;
  outline: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  box-sizing: border-box;
}

.grievance-lead-form textarea.lead-form-input,
.customer-lead-form textarea.lead-form-input {
  height: auto;
  min-height: 120px;
  resize: vertical;
  padding: 12px 14px;
  line-height: 1.5;
  font-family: var(--font-family);
}

.grievance-lead-form .lead-form-input::placeholder {
  color: #94A3B8;
}

.grievance-lead-form .lead-form-input:focus,
.grievance-lead-form .lead-form-select:focus {
  border-color: var(--color-teal);
  background-color: #FFFFFF;
  box-shadow: none;
}

.grievance-lead-form .lead-phone-input-wrap {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.grievance-lead-form .lead-phone-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #475569;
  background-color: #F1F5F9;
  border: 1.5px solid #E2E8F0;
  border-right: none;
  border-radius: 10px 0 0 10px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.grievance-lead-form .lead-phone-input-wrap .lead-form-input {
  border-radius: 0 10px 10px 0;
}

/* Distinguished High-Trust Navy Grievance Submit Button */
.btn-grievance-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background-color: var(--color-navy);
  color: #FFFFFF;
  border: 1.5px solid var(--color-navy);
  border-radius: 9999px;
  padding: 6px 8px 6px 24px;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-height: 50px;
  box-sizing: border-box;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
  margin-top: 8px;
  text-decoration: none;
  box-shadow: none;
}

.btn-grievance-submit:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-grievance-submit .arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-teal);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
  flex-shrink: 0;
}

.btn-grievance-submit:hover .arrow-circle {
  background-color: #FFFFFF;
  color: var(--color-navy);
  transform: translateX(3px);
}

.grievance-lead-form .lead-form-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  text-align: center;
}

/* Success alert box styles (Zero inline CSS needed) */
#grv-success-alert {
  display: none;
}

.lead-form-success-alert strong#grv-ticket-id {
  color: var(--color-teal);
  font-weight: 800;
}

@media (max-width: 640px) {
  .grievance-lead-form .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================================
   Claims Page: Same-to-Same UI Design System
   Left Black Overlay | 2x2 Feature Pills | Floating Partner Badge
   General Enquiry Card | 6 Category Cards Row | Zero Unnatural Box Shadows
   ========================================================================== */

/* Navbar responsive adjustments for 8 desktop items (including Claims) & Register Your Interest CTA */
@media (min-width: 992px) and (max-width: 1320px) {
  .nav-links {
    gap: clamp(6px, 0.9vw, 12px) !important;
  }

  .nav-link {
    font-size: 12.5px !important;
    padding: 6px 2px !important;
  }

  .brand-logo {
    width: 145px !important;
    height: auto !important;
  }

  .btn-appointment {
    padding: 6px 6px 6px 14px !important;
    font-size: 12.5px !important;
    gap: 8px !important;
  }

  .btn-appointment .arrow-circle {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ==========================================================================
   Claims Page (claims.html) - Unified Distroo Design System
   Matches Brand Palette (--color-navy, --color-teal, --color-saffron)
   Reduced Hero Height, Label-Free Form, Signature Distroo Pill Button UI
   ========================================================================== */

/* Claims Hero Section - Compact & Balanced Height */
.claims-hero-section {
  position: relative;
  width: 100%;
  min-height: auto;
  background-color: #060D1A;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.claims-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Left Black Gradient Overlay */
.claims-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(6, 13, 26, 0.96) 0%,
      rgba(6, 13, 26, 0.91) 38%,
      rgba(6, 13, 26, 0.65) 56%,
      rgba(6, 13, 26, 0.24) 75%,
      rgba(6, 13, 26, 0.06) 100%);
  z-index: 2;
  pointer-events: none;
}

.claims-hero-container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(126px, 14.5vh, 148px) clamp(16px, 3.5vw, 40px) clamp(36px, 4.5vh, 48px);
  box-sizing: border-box;
}

.claims-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}

/* Left Content Column */
.claims-hero-content {
  display: flex;
  flex-direction: column;
}

.claims-breadcrumb {
  margin-bottom: 12px;
}

.claims-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.claims-breadcrumb-list a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.claims-breadcrumb-list a:hover {
  color: var(--color-white);
}

.claims-breadcrumb-list .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}

.claims-breadcrumb-list .active {
  color: var(--color-white);
}

.claims-hero-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-white);
  margin: 0 0 10px;
}

.claims-hero-title span {
  display: block;
}

.claims-title-accent {
  color: var(--color-teal);
}

.claims-hero-desc {
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
  margin: 0 0 16px;
  max-width: 480px;
}

/* 4 Feature Highlights in 2x2 Grid */
.claims-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin-bottom: 16px;
  max-width: 480px;
}

.claims-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.claims-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 168, 142, 0.15);
  border: 1px solid rgba(0, 168, 142, 0.35);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.claims-feature-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.25;
}

/* Floating Partner Badge */
.claims-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: var(--color-navy);
  width: fit-content;
}

.partner-badge-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.partner-badge-info {
  display: flex;
  flex-direction: column;
}

.partner-badge-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.2;
}

.partner-badge-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  line-height: 1.2;
}

/* Right Column: Floating General Enquiry Form Card (No Labels, Compact) */
.claims-enquiry-card {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1.5px solid #E2E8F0;
  padding: clamp(18px, 2.2vw, 24px);
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
}

.enquiry-card-header {
  margin-bottom: 12px;
}

.enquiry-card-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}

.enquiry-card-desc {
  font-size: 12.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

.claims-enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.claims-form-group {
  display: flex;
  flex-direction: column;
}

.claims-form-label {
  display: none;
}

.claims-form-input,
.claims-form-select,
.claims-form-textarea {
  width: 100%;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--font-family);
  font-size: 13.5px;
  color: #0F172A;
  background-color: #FFFFFF;
  outline: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  box-sizing: border-box;
}

.claims-form-input,
.claims-form-select {
  height: 42px;
  min-height: 42px;
}

.claims-form-textarea {
  height: 64px;
  min-height: 64px;
  resize: none;
  line-height: 1.45;
}

.claims-form-input::placeholder,
.claims-form-textarea::placeholder {
  color: #94A3B8;
  font-size: 13px;
}

.claims-form-input:focus,
.claims-form-select:focus,
.claims-form-textarea:focus {
  border-color: var(--color-teal);
  background-color: #FFFFFF;
}

/* Distroo Signature Pill Button for Claims Submit */
.btn-claims-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--color-navy);
  color: var(--color-white);
  border: 1px solid var(--color-navy);
  border-radius: 9999px;
  height: 44px;
  min-height: 44px;
  padding: 4px 5px 4px 20px;
  font-family: var(--font-family);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  margin-top: 2px;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-claims-submit:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  transform: translateY(-1px);
}

.btn-claims-submit .arrow-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}

.btn-claims-submit:hover .arrow-circle {
  background: var(--color-white);
  color: var(--color-navy);
  transform: translateX(2px);
}

.btn-claims-submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

/* Ticket highlight */
.claims-ticket-highlight {
  font-weight: 800;
  color: var(--color-teal);
}

/* Success Message inside Enquiry Card */
.claims-form-success {
  display: none;
  background: rgba(0, 168, 142, 0.08);
  border: 1.5px solid var(--color-teal);
  border-radius: 12px;
  padding: 12px 14px;
  color: #064E3B;
  font-size: 12.5px;
  line-height: 1.45;
}

.claims-form-success strong {
  display: block;
  font-size: 13.5px;
  color: var(--color-teal);
  margin-bottom: 2px;
}

/* Bottom 6 Category Cards Row */
.claims-categories-section {
  width: 100%;
  background-color: #F8FAFC;
  padding: clamp(32px, 4.5vh, 48px) 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  box-sizing: border-box;
}

.claims-categories-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

.claims-categories-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}

.claims-cat-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.claims-cat-card:hover {
  border-color: var(--color-teal);
  transform: translateY(-3px);
}

.cat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.claims-cat-card:hover .cat-card-icon {
  transform: scale(1.05);
}

.cat-card-icon-teal {
  background: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
}

.cat-card-icon-saffron {
  background: rgba(255, 138, 0, 0.12);
  color: var(--color-saffron);
}

.cat-card-icon-navy {
  background: rgba(11, 29, 58, 0.08);
  color: var(--color-navy);
}

.cat-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 6px;
  line-height: 1.3;
}

.cat-card-link {
  font-size: 12.5px;
  font-weight: 700;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition-fast);
  margin-top: auto;
}

.claims-cat-card:hover .cat-card-link {
  color: var(--color-teal);
}

.cat-card-link svg {
  transition: transform var(--transition-fast);
}

.claims-cat-card:hover .cat-card-link svg {
  transform: translateX(3px);
}

/* Claims 5-Step Process Flow (Same-to-Same UI Redesign) */
.claims-steps-section {
  width: 100%;
  padding: clamp(60px, 7.5vh, 90px) 0;
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.claims-steps-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.claims-steps-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(36px, 5vh, 56px);
}

.claims-steps-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  display: block;
  margin-bottom: 8px;
}

.claims-steps-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 10px;
}

.claims-steps-desc {
  font-size: 14.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.6;
}

/* 5-Step Process Flow Row matching reference image */
.claims-process-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 2.2vw, 28px);
  width: 100%;
  box-sizing: border-box;
}

.claims-process-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  box-sizing: border-box;
  position: relative;
}

.step-icon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 18px;
  position: relative;
}

/* Circle Badge with Concentric Halo */
.step-circle-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 168, 142, 0.06);
  border: 1.5px solid rgba(0, 168, 142, 0.28);
  outline: 4px solid rgba(0, 168, 142, 0.05);
  outline-offset: 2.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  flex-shrink: 0;
  position: relative;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.step-circle-badge svg {
  width: 20px;
  height: 20px;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.claims-process-step:hover .step-circle-badge {
  transform: translateY(-2px);
  border-color: var(--color-teal);
  background: rgba(0, 168, 142, 0.12);
  outline-color: rgba(0, 168, 142, 0.08);
}

.claims-process-step:hover .step-circle-badge svg {
  color: var(--color-teal);
}

/* Step 5 Final Badge: Solid Teal Circle with Checkmark */
.step-circle-final {
  background: var(--color-teal);
  border-color: var(--color-teal);
  outline-color: rgba(0, 168, 142, 0.16);
  color: #FFFFFF;
}

.step-circle-final svg {
  width: 18px;
  height: 18px;
  color: #FFFFFF;
}

.claims-process-step:hover .step-circle-final {
  background: var(--color-teal-hover);
  border-color: var(--color-teal-hover);
}

.claims-process-step:hover .step-circle-final svg {
  color: #FFFFFF;
}

/* Connecting Chevron Arrow */
.step-connector {
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  margin-left: auto;
  margin-right: -8px;
  flex-shrink: 0;
}

.step-connector svg {
  width: 14px;
  height: 14px;
}

/* Step Number */
.step-number {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-teal);
  display: block;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Step Title */
.step-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 8px;
  line-height: 1.35;
}

/* Step Description */
.step-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* Claims Assistance Helpline CTA Banner */
.claims-cta-section {
  width: 100%;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: var(--color-white);
  padding: clamp(44px, 5.5vh, 60px) 0;
  box-sizing: border-box;
}

.claims-cta-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  box-sizing: border-box;
}

.claims-cta-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--color-white);
  margin: 0 0 8px;
}

.claims-cta-desc {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  line-height: 1.5;
}

.claims-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.btn-claims-helpline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-teal);
  color: var(--color-white);
  border: 1px solid var(--color-teal);
  padding: 11px 22px;
  border-radius: 9999px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}

.btn-claims-helpline:hover {
  background-color: var(--color-teal-hover);
  border-color: var(--color-teal-hover);
  transform: translateY(-1px);
}

.btn-claims-advisor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 11px 22px;
  border-radius: 9999px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}

.btn-claims-advisor:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
  transform: translateY(-1px);
}

/* ==========================================================================
   Responsive Scaling for Claims Page across Mobile, Tablet, & Desktop
   ========================================================================== */
@media (max-width: 1100px) {
  .claims-categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .claims-process-flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }

  .claims-process-step:nth-child(3) .step-connector {
    display: none;
  }
}

@media (max-width: 991px) {
  .claims-hero-container {
    padding-top: clamp(108px, 13vh, 126px);
  }

  .claims-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .claims-hero-overlay {
    background: linear-gradient(180deg,
        rgba(6, 13, 26, 0.96) 0%,
        rgba(6, 13, 26, 0.91) 45%,
        rgba(6, 13, 26, 0.85) 100%);
  }

  .claims-enquiry-card {
    max-width: 100%;
    margin-left: 0;
  }

  .claims-cta-container {
    flex-direction: column;
    text-align: center;
  }

  .claims-cta-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .claims-process-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
  }

  .step-connector {
    display: none;
  }

  .claims-process-step:nth-child(5) {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .claims-hero-container {
    padding: clamp(96px, 12vh, 110px) 16px 24px;
  }

  .claims-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .claims-cat-card {
    padding: 16px 14px;
    border-radius: 14px;
  }

  .cat-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }

  .cat-card-title {
    font-size: 13.5px;
    margin-bottom: 4px;
  }

  .cat-card-link {
    font-size: 12px;
  }

  .claims-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
    width: 100%;
  }

  .claims-feature-item {
    gap: 8px;
  }

  .claims-feature-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .claims-feature-icon svg {
    width: 15px;
    height: 15px;
  }

  .claims-feature-text {
    font-size: 12.5px;
    line-height: 1.25;
  }

  .claims-cta-actions {
    width: 100%;
    flex-direction: column;
  }

  .btn-claims-helpline,
  .btn-claims-advisor {
    width: 100%;
    justify-content: center;
  }

  /* Compact Mobile General Enquiry Card */
  .claims-enquiry-card {
    padding: 16px 14px;
    border-radius: 16px;
  }

  .enquiry-card-header {
    margin-bottom: 8px;
  }

  .enquiry-card-title {
    font-size: 18px;
    margin-bottom: 2px;
  }

  .enquiry-card-desc {
    font-size: 11.5px;
    line-height: 1.35;
  }

  .claims-enquiry-form {
    gap: 8px;
  }

  .claims-form-input,
  .claims-form-select {
    height: 38px;
    min-height: 38px;
    padding: 6px 12px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  .claims-form-textarea {
    height: 50px;
    min-height: 50px;
    padding: 6px 12px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  .claims-form-input::placeholder,
  .claims-form-textarea::placeholder {
    font-size: 12px;
  }

  .btn-claims-submit {
    height: 40px;
    min-height: 40px;
    font-size: 13.5px;
    padding: 3px 4px 3px 16px;
  }

  .btn-claims-submit .arrow-circle {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 520px) {
  .claims-process-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }

  .claims-process-step {
    padding: 14px 12px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
  }

  .step-icon-row {
    margin-bottom: 10px;
  }

  .step-circle-badge {
    width: 38px;
    height: 38px;
  }

  .step-circle-badge svg {
    width: 16px;
    height: 16px;
  }

  .step-number {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .step-title {
    font-size: 13px;
    margin-bottom: 3px;
    line-height: 1.25;
  }

  .step-desc {
    font-size: 11.5px;
    line-height: 1.4;
  }
}

@media (max-width: 380px) {
  .claims-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .claims-cat-card {
    padding: 12px 10px;
    border-radius: 12px;
  }

  .cat-card-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
  }

  .cat-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .cat-card-title {
    font-size: 12.5px;
  }

  .cat-card-link {
    font-size: 11px;
  }

  .claims-features-grid {
    gap: 8px 6px;
  }

  .claims-feature-item {
    gap: 6px;
  }

  .claims-feature-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .claims-feature-icon svg {
    width: 13px;
    height: 13px;
  }

  .claims-feature-text {
    font-size: 11.5px;
  }

  .claims-process-flow {
    gap: 10px 8px;
  }

  .claims-process-step {
    padding: 12px 10px;
    border-radius: 12px;
  }

  .step-circle-badge {
    width: 34px;
    height: 34px;
  }

  .step-circle-badge svg {
    width: 15px;
    height: 15px;
  }

  .step-title {
    font-size: 12px;
  }

  .step-desc {
    font-size: 11px;
  }

  .claims-enquiry-card {
    padding: 13px 12px;
  }

  .enquiry-card-title {
    font-size: 16px;
  }

  .claims-form-input,
  .claims-form-select {
    height: 34px;
    min-height: 34px;
  }

  .claims-form-textarea {
    height: 44px;
    min-height: 44px;
  }
}

@media (max-width: 440px) {
  .claims-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .claims-cat-card {
    padding: 14px 12px;
  }

  .claims-partner-badge {
    width: 100%;
  }

  .claims-enquiry-card {
    padding: 14px 12px;
    border-radius: 14px;
  }

  .enquiry-card-title {
    font-size: 17px;
  }

  .claims-enquiry-form {
    gap: 7px;
  }

  .claims-form-input,
  .claims-form-select {
    height: 36px;
    min-height: 36px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .claims-form-textarea {
    height: 46px;
    min-height: 46px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .btn-claims-submit {
    height: 38px;
    min-height: 38px;
    font-size: 13px;
    padding: 3px 4px 3px 14px;
  }

  .btn-claims-submit .arrow-circle {
    width: 30px;
    height: 30px;
  }
}

/* =============================================================================
   Claims Documents Required Section (Streamlined & Compact)
   ============================================================================= */
.claims-docs-section {
  padding: 52px 0;
  background: #FFFFFF;
  position: relative;
  border-bottom: 1.5px solid #F1F5F9;
}

.claims-docs-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.claims-docs-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: stretch;
}

/* Left Content Column */
.claims-docs-content {
  display: flex;
  flex-direction: column;
}

.claims-docs-kicker {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-teal);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-block;
}

.claims-docs-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 8px;
  line-height: 1.22;
}

.claims-docs-desc {
  font-size: 14.5px;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 4px;
}

.claims-docs-subnote {
  font-size: 12.5px;
  color: #94A3B8;
  margin-bottom: 18px;
  font-style: normal;
}

/* Pill Tabs Navigation */
.docs-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.docs-tab-btn {
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: #475569;
  border: 1.5px solid #E2E8F0;
  transition: all var(--transition-fast);
  outline: none;
}

.docs-tab-btn:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.docs-tab-btn.active {
  background: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
}

/* Tab Panes */
.docs-tab-pane {
  display: none;
}

.docs-tab-pane.active {
  display: block;
  animation: fadeInDocsPane 0.2s ease-out;
}

@keyframes fadeInDocsPane {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Checklist Items */
.docs-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.45;
}

.docs-check-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: rgba(0, 168, 142, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  margin-top: 1px;
  flex-shrink: 0;
}

.docs-check-icon svg {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

/* Right Visual Column - Aligned 100% with Left Column Height */
.claims-docs-visual-col {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  min-height: 100%;
  background: #F1F5F9;
  border: 1.5px solid #E2E8F0;
}

.docs-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

/* Overlaid Floating Help Card */
.docs-help-card {
  position: absolute;
  bottom: 14px;
  right: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-help-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0;
  line-height: 1.3;
}

.docs-help-desc {
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

.btn-docs-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 5px 6px 5px 18px;
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  margin-top: 4px;
  transition: background var(--transition-base), transform var(--transition-fast);
}

.btn-docs-contact:hover {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translateX(2px);
}

.btn-docs-contact .arrow-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}

.btn-docs-contact:hover .arrow-circle {
  color: var(--color-teal);
  transform: translateX(2px);
}

/* Responsive Breakpoints for Docs */
@media (max-width: 991px) {
  .claims-docs-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .claims-docs-visual-col {
    min-height: 320px;
  }
}

@media (max-width: 520px) {
  .claims-docs-section {
    padding: 38px 0;
  }

  .claims-docs-title {
    font-size: 24px;
  }

  .claims-docs-visual-col {
    min-height: 300px;
  }

  .docs-help-card {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 14px;
  }

  .docs-tab-btn {
    padding: 5px 12px;
    font-size: 12.5px;
  }
}

/* =============================================================================
   Claims Support & Assistance (Streamlined & Compact)
   ============================================================================= */
.claims-assistance-section {
  padding: 52px 0;
  background: #F8FAFC;
  position: relative;
  border-bottom: 1.5px solid #E2E8F0;
}

.claims-assistance-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.claims-assistance-header {
  margin-bottom: 26px;
}

.claims-assistance-kicker {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-teal);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-block;
}

.claims-assistance-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
  line-height: 1.25;
}

.claims-assistance-desc {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

/* 4-Card Grid */
.claims-assistance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.claims-assistance-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.claims-assistance-card:hover {
  border-color: var(--color-teal);
  transform: translateY(-2px);
}

.assistance-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 168, 142, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  margin-bottom: 14px;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.assistance-icon-box svg {
  width: 20px;
  height: 20px;
}

.claims-assistance-card:hover .assistance-icon-box {
  background: var(--color-teal);
  color: var(--color-white);
  transform: scale(1.05);
}

.assistance-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 6px;
  line-height: 1.3;
}

.assistance-card-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* Responsive Breakpoints for Assistance */
@media (max-width: 1024px) {
  .claims-assistance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .claims-assistance-section {
    padding: 38px 0;
  }

  .claims-assistance-title {
    font-size: 24px;
  }

  .claims-assistance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }

  .claims-assistance-card {
    padding: 16px 14px;
    border-radius: 14px;
  }

  .assistance-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  .assistance-icon-box svg {
    width: 18px;
    height: 18px;
  }

  .assistance-card-title {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.25;
  }

  .assistance-card-desc {
    font-size: 12px;
    line-height: 1.45;
  }
}

@media (max-width: 380px) {
  .claims-assistance-grid {
    gap: 10px 8px;
  }

  .claims-assistance-card {
    padding: 12px 10px;
    border-radius: 12px;
  }

  .assistance-icon-box {
    width: 34px;
    height: 34px;
  }

  .assistance-icon-box svg {
    width: 16px;
    height: 16px;
  }

  .assistance-card-title {
    font-size: 13px;
  }

  .assistance-card-desc {
    font-size: 11px;
    line-height: 1.4;
  }
}

/* =============================================================================
   Claims FAQ Section (Your Questions, Answered)
   ============================================================================= */
.claims-faq-section {
  padding: 52px 0;
  background: #FFFFFF;
  position: relative;
  border-bottom: 1.5px solid #E2E8F0;
}

.claims-faq-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.claims-faq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  gap: 20px;
  flex-wrap: wrap;
}

.claims-faq-header-left {
  max-width: 700px;
}

.claims-faq-kicker {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-teal);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-block;
}

.claims-faq-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 6px;
  line-height: 1.25;
}

.claims-faq-desc {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

.btn-view-all-faqs {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 5px 6px 5px 18px;
  border-radius: 9999px;
  border: 1.5px solid var(--color-teal);
  color: var(--color-teal);
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-view-all-faqs:hover {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translateX(2px);
}

.btn-view-all-faqs .arrow-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
}

.btn-view-all-faqs:hover .arrow-circle {
  background: var(--color-white);
  color: var(--color-teal);
  transform: translateX(2px);
}

.claims-faq-mobile-action {
  display: none;
}

/* FAQ 2-Column Grid */
.claims-faq-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: stretch;
}

/* Accordion List */
.claims-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.claims-faq-item {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.claims-faq-item:hover {
  border-color: #CBD5E1;
}

.claims-faq-item.active {
  border-color: var(--color-teal);
  background: rgba(0, 168, 142, 0.03);
}

.claims-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-navy);
  gap: 12px;
  outline: none;
  transition: color var(--transition-fast);
}

.claims-faq-item.active .claims-faq-question {
  color: var(--color-teal);
}

.faq-icon-toggle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 600;
  color: var(--color-teal);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.claims-faq-item.active .faq-icon-toggle {
  transform: rotate(45deg);
}

.claims-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
  padding: 0 18px;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
}

.claims-faq-item.active .claims-faq-answer {
  max-height: 300px;
  padding: 0 18px 14px 18px;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease;
}

/* Right Support Card with Seamless Wide Background */
.claims-faq-support-card {
  position: relative;
  background-color: #BBE2FA;
  border: 1.5px solid #BAE6FD;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 250px;
  height: 100%;
}

.faq-support-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 1;
}

.faq-support-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(206, 236, 254, 0.96) 0%, rgba(206, 236, 254, 0.88) 46%, rgba(206, 236, 254, 0.15) 75%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.faq-support-content {
  position: relative;
  z-index: 3;
  max-width: 60%;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.faq-support-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 6px;
  line-height: 1.25;
}

.faq-support-desc {
  font-size: 13px;
  color: #334155;
  line-height: 1.45;
  margin-bottom: 16px;
}

.btn-faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 5px 6px 5px 18px;
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: background var(--transition-base), transform var(--transition-fast);
}

.btn-faq-contact:hover {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translateX(2px);
}

.btn-faq-contact .arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}

.btn-faq-contact:hover .arrow-circle {
  color: var(--color-teal);
  transform: translateX(2px);
}

/* Responsive Breakpoints for FAQ */
@media (max-width: 991px) {
  .claims-faq-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .claims-faq-support-card {
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .claims-faq-section {
    padding: 38px 0;
  }

  .claims-faq-title {
    font-size: 24px;
  }

  .claims-faq-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .claims-faq-header .btn-view-all-faqs {
    display: none;
  }

  .claims-faq-mobile-action {
    display: flex;
    justify-content: flex-start;
    margin-top: 6px;
    margin-bottom: 2px;
  }

  .claims-faq-support-card {
    min-height: 195px;
    align-items: center;
    border-radius: 16px;
  }

  .faq-support-overlay {
    background: linear-gradient(90deg, rgba(206, 236, 254, 0.96) 0%, rgba(206, 236, 254, 0.90) 54%, rgba(206, 236, 254, 0.28) 82%, transparent 100%);
  }

  .faq-support-content {
    max-width: 70%;
    padding: 18px 18px;
  }

  .faq-support-title {
    font-size: 19px;
    margin-bottom: 4px;
    line-height: 1.25;
  }

  .faq-support-desc {
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 12px;
  }

  .faq-support-bg-img {
    object-position: right center;
  }
}

@media (max-width: 440px) {
  .claims-faq-support-card {
    min-height: 180px;
  }

  .faq-support-content {
    max-width: 74%;
    padding: 15px 14px;
  }

  .faq-support-title {
    font-size: 17px;
  }

  .faq-support-desc {
    font-size: 11.5px;
    margin-bottom: 10px;
  }

  .btn-faq-contact {
    font-size: 12px;
    padding: 4px 5px 4px 14px;
  }

  .btn-faq-contact .arrow-circle {
    width: 26px;
    height: 26px;
  }
}

/* =============================================================================
   Claims Protection Banner Section (Your Protection, Our Priority)
   ============================================================================= */
.claims-protection-section {
  padding: 30px 0 45px 0;
  background: #FFFFFF;
  position: relative;
}

.claims-protection-container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
}

.claims-protection-card {
  position: relative;
  background-color: #07152B;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 215px;
  border: 1.5px solid rgba(0, 168, 142, 0.28);
}

.protection-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 1;
}

.protection-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #07152B 0%, rgba(7, 21, 43, 0.95) 45%, rgba(7, 21, 43, 0.3) 72%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.protection-content {
  position: relative;
  z-index: 3;
  max-width: 580px;
  padding: 26px 36px;
  display: flex;
  flex-direction: column;
}

.protection-kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-teal);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: inline-block;
}

.protection-title {
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 6px;
  line-height: 1.25;
}

.protection-accent {
  color: var(--color-teal);
}

.protection-desc {
  font-size: 13.5px;
  color: #CBD5E1;
  line-height: 1.45;
  margin-bottom: 16px;
  max-width: 480px;
}

.btn-protection-touch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  color: var(--color-navy);
  padding: 5px 6px 5px 20px;
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.btn-protection-touch:hover {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translateX(3px);
}

.btn-protection-touch .arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.btn-protection-touch:hover .arrow-circle {
  background: var(--color-white);
  color: var(--color-teal);
  transform: translateX(2px);
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .protection-content {
    padding: 24px 26px;
    max-width: 520px;
  }

  .protection-title {
    font-size: 24px;
  }
}

@media (max-width: 640px) {
  .claims-protection-section {
    padding: 16px 0 24px 0;
  }

  .claims-protection-container {
    padding: 0 16px;
  }

  .claims-protection-card {
    min-height: 190px;
    border-radius: 16px;
    align-items: center;
  }

  .protection-gradient-overlay {
    background: linear-gradient(180deg, rgba(7, 21, 43, 0.94) 0%, rgba(7, 21, 43, 0.88) 60%, rgba(7, 21, 43, 0.45) 100%);
  }

  .protection-content {
    padding: 18px 16px;
    max-width: 100%;
  }

  .protection-kicker {
    font-size: 10px;
    margin-bottom: 3px;
    letter-spacing: 0.8px;
  }

  .protection-title {
    font-size: 18px;
    margin-bottom: 4px;
    line-height: 1.25;
  }

  .protection-desc {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 12px;
    max-width: 95%;
  }

  .btn-protection-touch {
    font-size: 12.5px;
    padding: 4px 5px 4px 16px;
    gap: 8px;
  }

  .btn-protection-touch .arrow-circle {
    width: 28px;
    height: 28px;
  }

  .btn-protection-touch .arrow-circle svg {
    width: 13px;
    height: 13px;
  }

  .protection-bg-img {
    object-position: right bottom;
  }
}

@media (max-width: 380px) {
  .claims-protection-card {
    min-height: 180px;
    border-radius: 14px;
  }

  .protection-content {
    padding: 15px 12px;
  }

  .protection-title {
    font-size: 16.5px;
  }

  .protection-desc {
    font-size: 11.5px;
    margin-bottom: 10px;
  }

  .btn-protection-touch {
    font-size: 12px;
    padding: 3px 4px 3px 14px;
  }

  .btn-protection-touch .arrow-circle {
    width: 26px;
    height: 26px;
  }
}

/* =============================================================================
   Claims Inquiry Modal Popup
   ============================================================================= */
body.body-modal-open {
  overflow: hidden;
}

.claims-modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 19, 38, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.claims-modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.claims-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 92vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1.5px solid #E2E8F0;
  padding: 28px 24px 24px;
  box-sizing: border-box;
  transform: scale(0.92) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.claims-modal-backdrop.is-active .claims-modal-dialog {
  transform: scale(1) translateY(0);
}

.claims-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all var(--transition-fast);
  z-index: 10;
}

.claims-modal-close:hover {
  background: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
  transform: rotate(90deg);
}

.claims-modal-header {
  margin-bottom: 18px;
  padding-right: 30px;
}

.claims-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal);
  background: rgba(0, 168, 142, 0.1);
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.claims-modal-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 5px;
  line-height: 1.25;
}

.claims-modal-desc {
  font-size: 13px;
  line-height: 1.45;
  color: #64748B;
  margin: 0;
}

.claims-modal-body {
  position: relative;
}

.claims-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.claims-modal-form.is-hidden {
  display: none;
}

.claims-modal-form .claims-form-group {
  margin-bottom: 0;
}

.claims-modal-form .claims-form-input,
.claims-modal-form .claims-form-select,
.claims-modal-form .claims-form-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #CBD5E1;
  background: #F8FAFC;
  color: var(--color-navy);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.claims-modal-form .claims-form-input:focus,
.claims-modal-form .claims-form-select:focus,
.claims-modal-form .claims-form-textarea:focus {
  outline: none;
  border-color: var(--color-teal);
  background: #FFFFFF;
}

/* Modal Success State */
.claims-modal-success {
  display: none;
  text-align: center;
  padding: 16px 8px 8px;
}

.claims-modal-success.is-visible {
  display: block;
  animation: fadeInDocsPane 0.25s ease-out;
}

.claims-modal-success .claims-modal-success-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 168, 142, 0.12);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border: 1.5px solid rgba(0, 168, 142, 0.25);
}

.claims-modal-success h4 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 8px;
}

.claims-modal-success p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 20px;
}

.claims-modal-success .btn-modal-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 26px;
  background: var(--color-navy);
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.claims-modal-success .btn-modal-dismiss:hover {
  background: var(--color-teal);
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .claims-modal-dialog {
    padding: 22px 18px 20px;
    border-radius: 16px;
  }

  .claims-modal-title {
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   Growth Desk page (advisor-facing content sections)
   -------------------------------------------------------------------------- */
.gd-section {
  width: 100%;
  padding: clamp(48px, 6vw, 88px) 0;
  background-color: #FFFFFF;
}

.gd-section-soft {
  background-color: #F4F7FB;
}

.gd-section-navy {
  background-color: var(--color-navy);
}

.gd-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 44px);
  min-width: 0;
}

.gd-kicker {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-hover);
  margin-bottom: 12px;
}

.gd-title {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 16px;
  max-width: 22ch;
}

.gd-title-light,
.gd-lead-light,
.gd-lead-light a {
  color: #FFFFFF;
}

.gd-lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--color-text-dark-muted);
  max-width: 70ch;
  margin-bottom: 24px;
}

.gd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.gd-text-link {
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.gd-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
  margin-top: 28px;
}

.gd-steps-four {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.gd-step {
  border: 1px solid #DDE4EE;
  border-radius: 24px;
  background: #FFFFFF;
  padding: 22px 20px;
  min-width: 0;
}

.gd-step-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-saffron-hover);
  margin-bottom: 10px;
}

.gd-step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.gd-step-text,
.gd-card-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-dark-muted);
}

.gd-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-top: 28px;
}

.gd-card {
  border: 1px solid #DDE4EE;
  border-radius: 24px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  background: #FFFFFF;
}

.gd-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.35;
}

.gd-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-teal-hover);
  min-height: 44px;
}

.gd-table-wrap {
  margin-top: 28px;
  overflow-x: auto;
  border: 1px solid #DDE4EE;
  border-radius: 24px;
  background: #FFFFFF;
}

.gd-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.gd-table th,
.gd-table td {
  text-align: left;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-dark-muted);
  border-bottom: 1px solid #E8EDF4;
}

.gd-table thead th {
  color: var(--color-navy);
  font-weight: 700;
  background: #F4F7FB;
}

.gd-table tbody th {
  color: var(--color-navy);
  font-weight: 600;
}

.gd-table tbody tr:last-child th,
.gd-table tbody tr:last-child td {
  border-bottom: 0;
}

.gd-who {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
  margin-top: 28px;
}

.gd-who-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #DDE4EE;
  border-radius: 24px;
  padding: 20px;
  background: #FFFFFF;
  min-width: 0;
}

.gd-who-item strong {
  color: var(--color-navy);
  font-size: 16.5px;
}

.gd-who-item span {
  color: var(--color-text-dark-muted);
  font-size: 15px;
  line-height: 1.6;
}

.gd-note {
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-dark-muted);
  max-width: 80ch;
}

.gd-faq {
  margin-top: 24px;
  display: grid;
  gap: 14px;
  max-width: 880px;
}

.gd-faq-item {
  border: 1px solid #DDE4EE;
  border-radius: 24px;
  padding: 20px 22px;
  background: #FFFFFF;
}

.gd-faq-q {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 8px;
  line-height: 1.4;
}

.gd-faq-a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-dark-muted);
}

.gd-section-navy .gd-lead a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-share-btn.is-copied {
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.blog-noscript-list {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.blog-noscript-list a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
}

/* Accessibility: skip to content link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10000;
  background: var(--color-navy);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 15px;
}

.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--color-saffron);
  outline-offset: 2px;
}

/* ==========================================================================
   Section: Home Growth Desk (For Advisors)
   Compact, User-Friendly UI matching Distroo Website Design System:
   - Subheading capsule: matching website UI (.home-gd-subheading + .home-gd-pulse)
   - Title & Fonts: matching website UI (clamp(24px, 2.8vw, 34px), Navy + Saffron)
   - Action Buttons: matching website UI (15px border-radius, clean non-heavy shadows)
   - Proportional Compact Stage: 250x280px portrait, neatly scaled floating cards
   - Slim Bottom Capabilities Strip: 14px padding, 28px icons, 11.5px typography
   - 100% Device, pixel, tablet and mobile responsive
   ========================================================================== */
.home-growth-desk-section {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #FCF8F2 0%, #FFFDFB 45%, #FBF5ED 100%);
  padding: clamp(32px, 3.8vw, 50px) 0 clamp(28px, 3.2vw, 42px) 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
}

/* Ambient Background Waves */
.home-gd-bg-ambient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.home-gd-wave-svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.home-gd-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
  box-sizing: border-box;
}

/* Top Hero Grid */
.home-gd-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(24px, 3.5vw, 48px);
  width: 100%;
}

/* Left Column: Content */
.home-gd-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 520px;
}

/* Subheading / Capsule matching Website UI */
.home-gd-badge-wrap {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
}

.home-gd-subheading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal, #00A88E);
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  border-radius: 15px;
  padding: 5px 14px;
  line-height: 1.2;
}

.home-gd-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-teal, #00A88E);
  display: inline-block;
}

/* Heading & Typography matching Website UI */
.home-gd-title {
  font-family: var(--font-family);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 8px 0;
}

.home-gd-title-accent {
  background: linear-gradient(135deg, #FF8A00 0%, #B45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.home-gd-tagline {
  font-family: var(--font-family);
  font-size: clamp(14.5px, 1.3vw, 17.5px);
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.home-gd-desc {
  font-family: var(--font-family);
  font-size: clamp(13px, 0.95vw, 14px);
  line-height: 1.55;
  color: #64748B;
  margin: 0 0 20px 0;
  max-width: 470px;
}

/* Action Buttons matching Website UI & Colors */
.home-gd-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-gd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-navy, #0B1D3A);
  color: var(--color-white, #FFFFFF);
  padding: 4px 4px 4px 18px;
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  border: none;
  white-space: nowrap;
  transition: background-color var(--transition-base, 0.25s ease), transform var(--transition-fast, 0.15s ease);
}

.home-gd-btn-primary:hover {
  background-color: var(--color-navy-dark, #071326);
  transform: translateY(-1px);
  color: #FFFFFF;
}

.home-gd-btn-primary:active {
  transform: translateY(0);
}

.home-gd-btn-primary .cta-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-white, #FFFFFF);
  color: var(--color-navy, #0B1D3A);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base, 0.25s ease);
  flex-shrink: 0;
}

.home-gd-btn-primary:hover .cta-arrow {
  transform: translateX(2px);
}

.home-gd-btn-video {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #FFFFFF;
  color: var(--color-navy, #0B1D3A);
  padding: 4px 16px 4px 4px;
  border-radius: 9999px;
  border: 1.5px solid #CBD5E1;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast, 0.2s ease),
    color var(--transition-fast, 0.2s ease),
    border-color var(--transition-fast, 0.2s ease),
    transform 0.15s ease;
}

.home-gd-btn-video:hover {
  background-color: var(--color-navy, #0B1D3A);
  color: #FFFFFF;
  border-color: var(--color-navy, #0B1D3A);
  transform: translateY(-1px);
}

.home-gd-btn-video:active {
  transform: translateY(0);
}

.home-gd-play-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(11, 29, 58, 0.08);
  color: var(--color-navy, #0B1D3A);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-base, 0.25s ease), color var(--transition-base, 0.25s ease);
}

.home-gd-play-circle svg {
  margin-left: 2px;
}

.home-gd-btn-video:hover .home-gd-play-circle {
  background-color: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

/* Right Column: Visual Stage (Compact) */
.home-gd-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.home-gd-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Portrait Box */
.home-gd-portrait-box {
  position: relative;
  width: 250px;
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  border: 2px solid #E2E8F0;
  background: #F1F5F9;
  z-index: 2;
  transition: transform 0.25s ease;
}

.home-gd-portrait-box:hover {
  transform: scale(1.015);
}

.home-gd-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 15%;
  display: block;
}

/* Script Note & Arrow (Learn Today Lead Tomorrow) */
.home-gd-script-note {
  position: absolute;
  top: 4px;
  right: -6px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 1;
  pointer-events: none;
}

.home-gd-script-text {
  font-family: 'Caveat', 'Playfair Display', cursive, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #718096;
  line-height: 1.1;
  transform: rotate(-6deg);
  text-align: right;
  letter-spacing: 0.02em;
}

.home-gd-script-arrow {
  position: absolute;
  top: -18px;
  right: -16px;
  width: 52px;
  height: 58px;
  opacity: 0.85;
}

/* Floating Badges / Cards Shared (Compact, Flat - Zero Box Shadow, 10px Border Radius) */
.home-gd-card {
  position: absolute;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 7px 11px;
  box-shadow: none;
  border: 1px solid #E2E8F0;
  z-index: 3;
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.home-gd-card:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
  box-shadow: none;
}

.home-gd-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.home-gd-card-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-gd-card-icon svg {
  width: 13px;
  height: 13px;
}

.home-gd-card-icon.badge-blue {
  background-color: #EFF6FF;
  color: #2563EB;
}

.home-gd-card-icon.badge-gold {
  background-color: #FFF7ED;
  color: #EA580C;
}

.home-gd-card-icon.badge-coral {
  background-color: #FFF1F2;
  color: #E11D48;
}

.home-gd-card-title {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  line-height: 1.2;
}

.home-gd-card-body {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-gd-avatars {
  display: flex;
  align-items: center;
}

.home-gd-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  object-fit: cover;
  margin-left: -5px;
  box-shadow: none;
}

.home-gd-avatar:first-child {
  margin-left: 0;
}

.home-gd-stat-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.home-gd-stat-num {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
}

.home-gd-stat-label {
  font-family: var(--font-family);
  font-size: 9px;
  font-weight: 600;
  color: #64748B;
}

/* Card 1: Top Left */
.home-gd-card-training {
  top: 14px;
  left: -10px;
}

/* Card 2: Top Right */
.home-gd-card-earnings {
  top: 18px;
  right: -8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
}

.home-gd-card-earnings .home-gd-card-title {
  margin: 0;
}

/* Card 3: Bottom Right */
.home-gd-card-mentors {
  bottom: 14px;
  right: -12px;
}

.home-gd-card-mentors .home-gd-card-header {
  margin-bottom: 4px;
}

/* Bottom Capabilities Strip (Slim, Flat - Zero Box Shadow, 10px Border Radius) */
.home-gd-features-strip {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: none;
  border: 1px solid #E2E8F0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  box-sizing: border-box;
}

.home-gd-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  box-sizing: border-box;
}

/* Subtle Vertical Divider between columns on desktop */
.home-gd-feature-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: #EDF2F7;
}

.home-gd-feature-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  background-color: #EBF5FF;
  color: #0284C7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.home-gd-feature-icon svg {
  width: 16px;
  height: 16px;
}

.home-gd-feature-item:hover .home-gd-feature-icon {
  transform: translateY(-1px);
  background-color: #DBEAFE;
}

.home-gd-feature-text {
  display: flex;
  flex-direction: column;
}

.home-gd-feature-title {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  line-height: 1.25;
  margin: 0 0 2px 0;
}

.home-gd-feature-desc {
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 1.35;
  color: #64748B;
  margin: 0;
}

/* Video Modal */
.home-gd-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(11, 29, 58, 0.8);
  backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.home-gd-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.home-gd-modal-dialog {
  background: #FFFFFF;
  border-radius: 18px;
  width: 100%;
  max-width: 760px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-gd-modal-backdrop.is-open .home-gd-modal-dialog {
  transform: translateY(0) scale(1);
}

.home-gd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #F1F5F9;
  background-color: #FAF5EE;
}

.home-gd-modal-title {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  margin: 0;
}

.home-gd-modal-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #64748B;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.home-gd-modal-close:hover {
  color: #0F172A;
  background-color: #E2E8F0;
}

.home-gd-modal-body {
  padding: 20px;
  background-color: #000000;
}

.home-gd-video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.home-gd-video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Responsive Breakpoints for Home Growth Desk
   ========================================================================== */
/* Medium Desktop / Small Laptop (1024px - 1200px) */
@media (max-width: 1200px) {
  .home-gd-features-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .home-gd-feature-item::after {
    display: none;
  }

  .home-gd-card-training {
    left: -8px;
  }

  .home-gd-card-mentors {
    right: -8px;
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .home-gd-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .home-gd-content {
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
  }

  .home-gd-desc {
    text-align: center;
  }

  .home-gd-actions {
    justify-content: center;
  }

  .home-gd-visual {
    margin-top: 6px;
  }

  .home-gd-features-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile & Small Tablets (max-width: 767px) */
@media (max-width: 767px) {
  .home-growth-desk-section {
    padding: 28px 0;
  }

  .home-gd-container {
    gap: 20px;
    padding: 0 16px;
  }

  /* Single row buttons for mobile with compact user-friendly sizing matching website UI */
  .home-gd-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
  }

  .home-gd-btn-primary,
  .home-gd-btn-video {
    flex: 0 1 auto;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
    letter-spacing: -0.01em;
  }

  .home-gd-btn-primary {
    gap: 7px;
    padding: 3px 3px 3px 12px;
  }

  .home-gd-btn-video {
    gap: 7px;
    padding: 3px 12px 3px 3px;
  }

  .home-gd-btn-primary .cta-arrow,
  .home-gd-play-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .home-gd-btn-primary .cta-arrow svg {
    width: 11px;
    height: 11px;
  }

  .home-gd-play-circle svg {
    width: 9.5px;
    height: 9.5px;
  }

  .home-gd-stage {
    max-width: 100%;
    height: 250px;
  }

  .home-gd-portrait-box {
    width: 190px;
    height: 220px;
    border-radius: 10px;
  }

  /* Compact floating cards for mobile */
  .home-gd-card {
    padding: 5px 8px;
    border-radius: 10px;
  }

  .home-gd-card-training {
    top: 6px;
    left: -6px;
  }

  .home-gd-card-title {
    font-size: 10px;
  }

  .home-gd-card-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .home-gd-card-icon svg {
    width: 11px;
    height: 11px;
  }

  .home-gd-avatar {
    width: 16px;
    height: 16px;
    margin-left: -4px;
  }

  .home-gd-stat-num {
    font-size: 10px;
  }

  .home-gd-stat-label {
    font-size: 8px;
  }

  .home-gd-card-earnings {
    top: 10px;
    right: -4px;
    padding: 5px 8px;
    gap: 6px;
  }

  .home-gd-card-mentors {
    bottom: 8px;
    right: -6px;
  }

  .home-gd-script-note {
    top: -2px;
    right: -2px;
  }

  .home-gd-script-text {
    font-size: 15px;
  }

  .home-gd-script-arrow {
    width: 42px;
    height: 46px;
    right: -12px;
  }

  /* 2 columns on mobile for the 6 capabilities with clean dividers */
  .home-gd-features-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 6px;
    gap: 0;
    border-radius: 10px;
  }

  .home-gd-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
    padding: 10px 8px;
    position: relative;
  }

  .home-gd-feature-item::after {
    display: none !important;
  }

  /* Vertical divider between left and right columns */
  .home-gd-feature-item:nth-child(odd) {
    border-right: 1px solid #E2E8F0;
    padding-left: 6px;
    padding-right: 10px;
  }

  .home-gd-feature-item:nth-child(even) {
    border-right: none;
    padding-left: 10px;
    padding-right: 6px;
  }

  /* Horizontal dividers between rows */
  .home-gd-feature-item:nth-child(-n+4) {
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 10px;
  }

  .home-gd-feature-item:nth-child(-n+2) {
    padding-top: 6px;
  }

  .home-gd-feature-item:nth-child(n+3) {
    padding-top: 10px;
  }

  .home-gd-feature-item:nth-child(n+5) {
    border-bottom: none;
    padding-bottom: 6px;
  }

  .home-gd-feature-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 6px;
  }

  .home-gd-feature-icon svg {
    width: 14px;
    height: 14px;
  }

  .home-gd-feature-title {
    font-size: 11px;
    margin-bottom: 2px;
  }

  .home-gd-feature-desc {
    font-size: 9.5px;
    line-height: 1.3;
  }
}

/* Extra small mobile (max-width: 480px) */
@media (max-width: 480px) {
  .home-gd-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
  }

  .home-gd-btn-primary,
  .home-gd-btn-video {
    flex: 0 1 auto;
    font-size: 11px;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .home-gd-btn-primary {
    gap: 6px;
    padding: 2.5px 2.5px 2.5px 10px;
  }

  .home-gd-btn-video {
    gap: 6px;
    padding: 2.5px 10px 2.5px 2.5px;
  }

  .home-gd-btn-primary .cta-arrow,
  .home-gd-play-circle {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .home-gd-btn-primary .cta-arrow svg {
    width: 10px;
    height: 10px;
  }

  .home-gd-play-circle svg {
    width: 9px;
    height: 9px;
  }

  .home-gd-stage {
    height: 230px;
  }

  .home-gd-portrait-box {
    width: 170px;
    height: 200px;
  }

  .home-gd-card-training {
    left: -10px;
    top: 4px;
  }

  .home-gd-card-earnings {
    right: -10px;
    top: 6px;
  }

  .home-gd-card-mentors {
    right: -10px;
    bottom: 4px;
  }

  .home-gd-features-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 4px;
    gap: 0;
  }

  .home-gd-feature-item {
    gap: 6px;
  }

  .home-gd-feature-item:nth-child(odd) {
    padding-left: 4px;
    padding-right: 8px;
  }

  .home-gd-feature-item:nth-child(even) {
    padding-left: 8px;
    padding-right: 4px;
  }

  .home-gd-feature-item:nth-child(-n+4) {
    padding-bottom: 8px;
  }

  .home-gd-feature-item:nth-child(-n+2) {
    padding-top: 4px;
  }

  .home-gd-feature-item:nth-child(n+3) {
    padding-top: 8px;
  }

  .home-gd-feature-item:nth-child(n+5) {
    padding-bottom: 4px;
  }

  .home-gd-feature-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 5px;
  }

  .home-gd-feature-icon svg {
    width: 13px;
    height: 13px;
  }

  .home-gd-feature-title {
    font-size: 10.5px;
  }

  .home-gd-feature-desc {
    font-size: 9px;
    line-height: 1.25;
  }
}

/* Ultra small mobile devices (max-width: 360px) */
@media (max-width: 360px) {
  .home-gd-actions {
    gap: 4px;
  }

  .home-gd-btn-primary,
  .home-gd-btn-video {
    font-size: 10.5px;
  }

  .home-gd-btn-primary {
    gap: 5px;
    padding: 2px 2px 2px 8px;
  }

  .home-gd-btn-video {
    gap: 5px;
    padding: 2px 8px 2px 2px;
  }

  .home-gd-btn-primary .cta-arrow,
  .home-gd-play-circle {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  .home-gd-features-strip {
    padding: 3px;
    gap: 0;
  }

  .home-gd-feature-item {
    gap: 5px;
  }

  .home-gd-feature-item:nth-child(odd) {
    padding-left: 3px;
    padding-right: 6px;
  }

  .home-gd-feature-item:nth-child(even) {
    padding-left: 6px;
    padding-right: 3px;
  }

  .home-gd-feature-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  .home-gd-feature-icon svg {
    width: 12px;
    height: 12px;
  }

  .home-gd-feature-title {
    font-size: 10px;
  }

  .home-gd-feature-desc {
    font-size: 8.5px;
  }
}

/* =========================================================================
   Why Distroo Section (Built to Solve Real Problems in Insurance Distribution)
   Positioned next to About Distroo section on homepage
   Split comparison: The Customer Problem vs Our Purpose with Center Bridge
   Clean, device, pixel and mobile responsive UI
   ========================================================================= */
.why-distroo-section {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  padding: clamp(52px, 5.8vw, 88px) 0;
  overflow: hidden;
}

.why-distroo-container {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.5vw, 32px);
  box-sizing: border-box;
}

/* Header Area */
.why-distroo-header {
  text-align: center;
  margin-bottom: clamp(34px, 4vw, 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why-distroo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  color: var(--color-teal, #00A88E);
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.why-distroo-title {
  font-family: var(--font-family);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 12px 0;
  max-width: 820px;
}

.why-distroo-title-accent {
  color: #0284C7;
  display: block;
}

.why-distroo-subtitle {
  font-family: var(--font-family);
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.6;
  color: #64748B;
  max-width: 680px;
  margin: 0;
}

/* Main Comparison Arena: 2 Cards + Center Bridge */
.why-distroo-arena {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
  width: 100%;
}

.why-distroo-compare-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: clamp(20px, 2.4vw, 30px);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  box-sizing: border-box;
}

.why-distroo-compare-card:hover {
  transform: none;
  box-shadow: none;
}

.why-distroo-card-problem {
  border: 1.5px solid #E11D48;
  box-shadow: none;
}

.why-distroo-card-problem:hover {
  border-color: #E11D48;
  transform: none;
  box-shadow: none;
}

.why-distroo-card-purpose {
  border: 1.5px solid var(--color-teal, #00A88E);
  box-shadow: none;
}

.why-distroo-card-purpose:hover {
  border-color: var(--color-teal, #00A88E);
  transform: none;
  box-shadow: none;
}

/* Card Header */
.why-distroo-card-header {
  margin-bottom: 20px;
}

.why-distroo-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.badge-problem {
  background-color: rgba(225, 29, 72, 0.08);
  color: #E11D48;
  border: 1px solid rgba(225, 29, 72, 0.2);
}

.badge-purpose {
  background-color: rgba(0, 168, 142, 0.08);
  color: var(--color-teal, #00A88E);
  border: 1px solid rgba(0, 168, 142, 0.2);
}

.why-distroo-card-title {
  font-family: var(--font-family);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.28;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 8px 0;
}

.why-distroo-accent-problem {
  color: #E11D48;
}

.why-distroo-accent-purpose {
  color: var(--color-teal, #00A88E);
}

.why-distroo-card-desc {
  font-family: var(--font-family);
  font-size: clamp(12px, 0.9vw, 13px);
  line-height: 1.55;
  color: #64748B;
  margin: 0;
}

/* Card Body Grid (Items + Photo) */
.why-distroo-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
  flex: 1;
}

/* Feature Points List */
.why-distroo-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why-distroo-point-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.why-distroo-point-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-problem {
  background-color: #FFE4E6;
  color: #E11D48;
}

.icon-purpose {
  background-color: #CCFBF1;
  color: var(--color-teal, #00A88E);
}

.why-distroo-point-content {
  display: flex;
  flex-direction: column;
}

.why-distroo-point-title {
  font-family: var(--font-family);
  font-size: clamp(12.5px, 0.95vw, 13.5px);
  font-weight: 700;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 2px 0;
  line-height: 1.25;
}

.why-distroo-point-desc {
  font-family: var(--font-family);
  font-size: clamp(11px, 0.82vw, 12px);
  line-height: 1.4;
  color: #64748B;
  margin: 0;
}

/* Visual Stage & Floating Thought Bubbles */
.why-distroo-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-distroo-img-wrap {
  width: 100%;
  height: 100%;
  max-height: 270px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
}

.why-distroo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Floating Thought Bubbles on Problem Visual */
.why-distroo-bubble {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: #FFFFFF;
  padding: 6px 12px 6px 8px;
  border-radius: 9999px;
  box-shadow: none;
  border: 1px solid rgba(225, 29, 72, 0.3);
  z-index: 2;
  white-space: nowrap;
}

.why-distroo-bubble-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.icon-rose {
  background-color: #FFE4E6;
  color: #E11D48;
}

.why-distroo-bubble-text {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-navy, #0B1D3A);
}

.bubble-top {
  top: 10px;
  left: -12px;
}

.bubble-middle {
  top: 42%;
  right: -10px;
}

.bubble-bottom {
  bottom: 12px;
  left: -8px;
}

/* Center Bridge Medallion */
.why-distroo-bridge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.why-distroo-medallion {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.why-distroo-medallion-logo {
  width: 78px;
  height: auto;
  margin-bottom: 4px;
}

.why-distroo-medallion-tagline {
  font-family: var(--font-family);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.2;
  color: #64748B;
  text-align: center;
}

.why-distroo-arrow-top {
  margin-bottom: -8px;
  animation: pulseArrow 2.5s ease-in-out infinite alternate;
}

.why-distroo-arrow-bottom {
  margin-top: -8px;
  animation: pulseArrow 2.5s ease-in-out infinite alternate-reverse;
}

@keyframes pulseArrow {
  0% {
    opacity: 0.6;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Tablet (max-width: 1023px) */
@media (max-width: 1023px) {
  .why-distroo-arena {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .why-distroo-bridge {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 8px auto;
  }

  .why-distroo-arrow-top,
  .why-distroo-arrow-bottom {
    display: none;
  }

  .why-distroo-medallion {
    width: 108px;
    height: 108px;
  }
}

/* Mobile & Small Tablets (max-width: 767px) */
@media (max-width: 767px) {
  .why-distroo-section {
    padding: 36px 0;
  }

  .why-distroo-container {
    padding: 0 16px;
  }

  .why-distroo-title {
    font-size: 22px;
  }

  .why-distroo-subtitle {
    font-size: 13px;
  }

  .why-distroo-compare-card {
    padding: 18px 14px;
    border-radius: 16px;
  }

  .why-distroo-card-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* In problem card, place image above problem list for optimal mobile storytelling */
  .why-distroo-card-problem .why-distroo-visual {
    order: -1;
  }

  .why-distroo-visual {
    min-height: 190px;
  }

  .why-distroo-img-wrap {
    max-height: 200px;
  }

  .why-distroo-bubble {
    padding: 4px 10px 4px 6px;
  }

  .why-distroo-bubble-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    font-size: 9.5px;
  }

  .why-distroo-bubble-text {
    font-size: 10px;
  }

  .bubble-top {
    left: 4px;
    top: 6px;
  }

  .bubble-middle {
    right: 4px;
    top: 40%;
  }

  .bubble-bottom {
    left: 4px;
    bottom: 6px;
  }

  .why-distroo-points {
    gap: 12px;
  }

  .why-distroo-point-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .why-distroo-point-icon svg {
    width: 15px;
    height: 15px;
  }

  .why-distroo-point-title {
    font-size: 12px;
  }

  .why-distroo-point-desc {
    font-size: 10.5px;
  }
}

/* Extra small mobile (max-width: 480px) */
@media (max-width: 480px) {
  .why-distroo-title {
    font-size: 20px;
  }

  .why-distroo-card-title {
    font-size: 16px;
  }

  .why-distroo-medallion {
    width: 96px;
    height: 96px;
    padding: 8px;
  }

  .why-distroo-medallion-logo {
    width: 68px;
  }

  .why-distroo-medallion-tagline {
    font-size: 7.5px;
  }
}

/* =========================================================================
   Founders Section: Two Founders. One Shared Purpose.
   Positioned directly next to Growth Desk section on homepage
   Primary Brand Colors (Teal #00A88E, Navy #0B1D3A, Amber #D97706)
   Clean borders, zero box shadows, zero hover transforms
   Generous card width, completely unclipped/non-overlapping Venn diagram
   Pixel-perfect device & mobile responsive UI (320px - 2560px)
   ========================================================================= */
.founders-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: clamp(52px, 5.5vw, 84px) 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Background Decorative Graphics: Subtle Arcs & Dot Matrix */
.founders-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.founders-bg-dots-left {
  position: absolute;
  top: 15%;
  left: 3%;
  width: 130px;
  height: 200px;
  background-image: radial-gradient(#CBD5E1 1.2px, transparent 1.2px);
  background-size: 16px 16px;
  opacity: 0.5;
}

.founders-bg-dots-right {
  position: absolute;
  top: 15%;
  right: 3%;
  width: 130px;
  height: 200px;
  background-image: radial-gradient(#CBD5E1 1.2px, transparent 1.2px);
  background-size: 16px 16px;
  opacity: 0.5;
}

.founders-bg-arcs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 1200px;
}

.founders-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.5vw, 36px);
  box-sizing: border-box;
}

/* Section Header */
.founders-header {
  position: relative;
  text-align: center;
  margin: 0 auto clamp(32px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Capsule Kicker using Primary Teal */
.founders-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1px solid rgba(0, 168, 142, 0.22);
  color: var(--color-teal, #00A88E);
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.founders-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 12px 0;
  letter-spacing: -0.025em;
}

/* Highlight text using Primary Teal */
.founders-title-highlight {
  color: var(--color-teal, #00A88E);
}

.founders-subtitle {
  font-family: var(--font-family);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  color: #475569;
  margin: 0 auto;
  font-weight: 450;
}

/* Main Synergy Stage: Generous Card Width & Center Separation */
.founders-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto minmax(360px, 1fr);
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  width: 100%;
  margin: 0 auto;
}

/* Founder Profile Cards: No Box Shadow, No Hover Effect, Wider Layout */
.founder-card {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: clamp(24px, 2.5vw, 36px);
  box-sizing: border-box;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
}

.founder-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.founder-card-left {
  border-color: rgba(0, 168, 142, 0.22);
}

.founder-card-right {
  background-color: #FFFDF9;
  border-color: rgba(245, 158, 11, 0.25);
}

.founder-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.founder-avatar-wrap {
  width: 70px;
  height: 70px;
  min-width: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid #F8FAFC;
  box-shadow: none !important;
  background-color: #F1F5F9;
}

.founder-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.founder-meta-wrap {
  display: flex;
  flex-direction: column;
}

.founder-role-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 11px;
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Primary Teal Badge */
.badge-teal {
  background-color: rgba(0, 168, 142, 0.08);
  color: var(--color-teal, #00A88E);
  border: 1px solid rgba(0, 168, 142, 0.22);
}

/* Brand Amber Badge */
.badge-amber {
  background-color: rgba(245, 158, 11, 0.08);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.founder-name {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.founder-label {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.label-teal {
  color: var(--color-teal, #00A88E);
}

.label-amber {
  color: #D97706;
}

.founder-bio-text {
  font-family: var(--font-family);
  font-size: clamp(12.5px, 0.92vw, 13.5px);
  line-height: 1.6;
  color: #475569;
  margin: 0 0 22px 0;
}

/* Bullet Points */
.founder-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.founder-bullet-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.founder-bullet-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Primary Teal Bullet Icon */
.founder-bullet-icon.icon-teal {
  background-color: var(--color-teal, #00A88E);
  color: #FFFFFF;
}

/* Brand Amber Bullet Icon */
.founder-bullet-icon.icon-amber {
  background-color: #D97706;
  color: #FFFFFF;
}

.founder-bullet-text {
  display: flex;
  flex-direction: column;
}

.founder-bullet-primary {
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 750;
  color: var(--color-navy, #0B1D3A);
  line-height: 1.25;
}

.founder-bullet-secondary {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 450;
  color: #64748B;
  line-height: 1.3;
}

/* Center Column: Venn Synergy + A Shared Vision */
.founder-synergy-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

/* Venn Diagram Component: Fixed Width & Proper Content Separation (No Overlap) */
.founder-venn-diagram {
  position: relative;
  width: 440px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.venn-circle {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.venn-circle-left {
  left: 0;
  background-color: rgba(0, 168, 142, 0.08);
  border: 1.5px solid rgba(0, 168, 142, 0.35);
}

.venn-circle-right {
  right: 0;
  background-color: rgba(245, 158, 11, 0.08);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
}

.venn-pin-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
}

.venn-pin-dot.dot-left {
  background-color: var(--color-teal, #00A88E);
}

.venn-pin-dot.dot-right {
  background-color: #D97706;
}

/* Inner content positioned into clear visible zone (no overlap with center medallion) */
.venn-circle-left .venn-circle-inner {
  width: 145px;
  margin-right: 65px;
  margin-left: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.venn-circle-right .venn-circle-inner {
  width: 145px;
  margin-left: 65px;
  margin-right: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.venn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.venn-icon.icon-teal {
  background-color: var(--color-teal, #00A88E);
  color: #FFFFFF;
}

.venn-icon.icon-amber {
  background-color: #D97706;
  color: #FFFFFF;
}

.venn-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  margin: 0 0 3px 0;
  line-height: 1.2;
}

.venn-desc {
  font-family: var(--font-family);
  font-size: 9px;
  line-height: 1.3;
  color: #475569;
  max-width: 100px;
  margin: 0 auto;
}

/* Intersecting Center Medallion: Centered with Zero Box Shadow */
.venn-center-medallion {
  position: absolute;
  z-index: 4;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 1.5px solid rgba(11, 29, 58, 0.12);
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.venn-logo-img {
  width: 86px;
  height: auto;
  margin-bottom: 3px;
}

.venn-tagline {
  font-family: var(--font-family);
  font-size: 8px;
  font-weight: 600;
  color: #64748B;
  line-height: 1.25;
}

/* Shared Vision Section */
.founder-shared-vision {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 14px;
  position: relative;
}

.founder-vision-pin-line {
  width: 1.5px;
  height: 22px;
  background-color: rgba(11, 29, 58, 0.22);
}

.founder-vision-pin-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-navy, #0B1D3A);
  margin-bottom: 12px;
}

.founder-vision-kicker {
  font-family: var(--font-family);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.founder-vision-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy, #0B1D3A);
  line-height: 1.35;
  max-width: 290px;
  margin: 0 0 10px 0;
}

.founder-vision-bar {
  display: flex;
  width: 38px;
  height: 3.5px;
  border-radius: 9999px;
  overflow: hidden;
}

.vision-bar-teal {
  flex: 1;
  background-color: var(--color-teal, #00A88E);
}

.vision-bar-amber {
  flex: 1;
  background-color: #D97706;
}

/* =========================================================================
   Responsive Breakpoints for Founders Section
   ========================================================================= */

/* Compact Desktop (1024px to 1279px) */
@media (max-width: 1279px) {
  .founders-stage {
    grid-template-columns: minmax(320px, 1fr) auto minmax(320px, 1fr);
    gap: 20px;
  }

  .founder-venn-diagram {
    width: 380px;
    height: 230px;
  }

  .venn-circle {
    width: 205px;
    height: 205px;
  }

  .venn-circle-left .venn-circle-inner {
    width: 125px;
    margin-right: 56px;
  }

  .venn-circle-right .venn-circle-inner {
    width: 125px;
    margin-left: 56px;
  }

  .venn-center-medallion {
    width: 114px;
    height: 114px;
  }

  .venn-logo-img {
    width: 78px;
  }
}

/* Tablets (768px to 1023px) */
@media (max-width: 1023px) {
  .founders-stage {
    grid-template-columns: 1fr;
    max-width: 620px;
    gap: 32px;
  }

  .founder-card {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }

  .founder-synergy-col {
    order: 2;
    margin: 10px auto;
  }

  .founder-card-left {
    order: 1;
  }

  .founder-card-right {
    order: 3;
  }
}

/* Mobile Screens (max-width: 767px) */
@media (max-width: 767px) {
  .founders-section {
    padding: 42px 0;
  }

  .founders-container {
    padding: 0 16px;
  }

  .founders-header {
    margin-bottom: 26px;
  }

  .founders-title {
    font-size: 24px;
  }

  .founders-subtitle {
    font-size: 13px;
  }

  .founder-card {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .founder-avatar-wrap {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }

  .founder-name {
    font-size: 20px;
  }

  .founder-label {
    font-size: 12.5px;
  }

  .founder-bio-text {
    font-size: 12.5px;
    margin-bottom: 18px;
  }

  .founder-bullet-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
  }

  .founder-bullet-primary {
    font-size: 13px;
  }

  .founder-bullet-secondary {
    font-size: 11.5px;
  }

  .founder-venn-diagram {
    width: 340px;
    height: 220px;
  }

  .venn-circle {
    width: 185px;
    height: 185px;
  }

  .venn-circle-left .venn-circle-inner {
    width: 115px;
    margin-right: 50px;
    margin-left: 6px;
  }

  .venn-circle-right .venn-circle-inner {
    width: 115px;
    margin-left: 50px;
    margin-right: 6px;
  }

  .venn-title {
    font-size: 11px;
  }

  .venn-desc {
    font-size: 8px;
    max-width: 82px;
  }

  .venn-center-medallion {
    width: 104px;
    height: 104px;
    padding: 6px;
  }

  .venn-logo-img {
    width: 72px;
  }

  .founder-vision-title {
    font-size: 14px;
  }
}

/* Extra Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .founders-title {
    font-size: 22px;
  }

  .founder-venn-diagram {
    width: 300px;
    height: 200px;
  }

  .venn-circle {
    width: 165px;
    height: 165px;
  }

  .venn-circle-left .venn-circle-inner {
    width: 100px;
    margin-right: 45px;
    margin-left: 4px;
  }

  .venn-circle-right .venn-circle-inner {
    width: 100px;
    margin-left: 45px;
    margin-right: 4px;
  }

  .venn-center-medallion {
    width: 94px;
    height: 94px;
    padding: 6px;
  }

  .venn-logo-img {
    width: 65px;
  }

  .venn-tagline {
    font-size: 7px;
  }
}