/*
Theme Name: ElderCare Pro
Theme URI: https://yoursite.com
Author: Your Name
Author URI: https://yoursite.com
Description: A warm, mobile-first WordPress theme for elder care and home healthcare startups. Fully customizable — no hardcoding. All text, colours, services, team members and pricing managed from WordPress admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eldercare-pro
Tags: healthcare, elder-care, mobile-first, booking, services, one-page, custom-colors, custom-logo
*/

/* =============================================
   GOOGLE FONTS IMPORT
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700;800;900&family=Rubik:wght@300;400;500;600;700;800&display=swap');

/* =============================================
   CSS CUSTOM PROPERTIES (Theme Variables)
   All colours controlled via Customizer
   ============================================= */
:root {
  --color-primary:     #1F4373;
  --color-secondary:   #359895;
  --color-accent:      #F4743E;
  --color-dark:        #163058;
  --color-bg:          #F0F8F7;
  --color-white:       #FFFFFF;
  --color-text:        #1F4373;
  --color-text-light:  #5A7A9A;
  --color-border:      #C8DDE3;
  --color-success:     #1F4373;

  --font-display: 'Raleway', 'Rubik', sans-serif;
  --font-body:    'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Bahnschrift', 'DM Mono', 'Courier New', monospace;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  --shadow-sm:  0 2px 8px rgba(38,70,83,0.08);
  --shadow-md:  0 6px 24px rgba(38,70,83,0.12);
  --shadow-lg:  0 16px 48px rgba(38,70,83,0.16);

  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1200px;
  --section-pad: 80px 0;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-dark); }
ul { list-style: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--color-dark);
  line-height: 1.25;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1rem; color: var(--color-text); }

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  display: block;
}
.section-title { margin-bottom: 1rem; }
.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-light);
  max-width: 560px;
  line-height: 1.7;
}
.text-center { text-align: center; }
.text-center .section-subtitle { margin: 0 auto; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}
.btn-whatsapp {
  background: #25D366;
  color: var(--color-white);
  border-color: #25D366;
}
.btn-whatsapp:hover {
  background: #1da851;
  border-color: #1da851;
  color: var(--color-white);
  transform: translateY(-2px);
}
.btn-accent {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn-accent:hover {
  background: #e08c4a;
  border-color: #e08c4a;
  color: var(--color-white);
  transform: translateY(-2px);
}
.btn-lg { padding: 18px 36px; font-size: 1.05rem; }
.btn-full { width: 100%; justify-content: center; }

/* =============================================
   HEADER & NAVIGATION
   ============================================= */
/* ==============================================
   HEADER & NAVIGATION — FIXED DESKTOP LAYOUT
   Prevents nav wrapping to second line on desktop
   ============================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  box-shadow: 0 2px 12px rgba(31,67,115,0.08);
  border-bottom: 2px solid var(--color-secondary);
  transition: box-shadow var(--transition);
}

/* Single-row layout: logo | nav links | CTA buttons */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0 24px;
  max-width: 1400px;         /* wider max to accommodate all items */
  margin: 0 auto;
  height: 68px;              /* fixed height — prevents wrapping */
  flex-wrap: nowrap;         /* NEVER wrap to second line */
}

/* ---- LOGO ---- */
.site-logo {
  flex-shrink: 0;            /* logo never shrinks */
  margin-right: 20px;
}
.site-logo img { height: 44px; width: auto; }
.site-logo .logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;        /* slightly smaller to save space */
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.site-logo .logo-text svg { flex-shrink: 0; }

/* ---- NAV LINKS (middle section) ---- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;                   /* takes available space between logo and CTAs */
  justify-content: center;   /* centre the nav links */
  flex-wrap: nowrap;         /* never wrap */
  overflow: hidden;
}

/* Each nav link */
.main-nav > a:not(.nav-cta),
.main-nav ul li a {
  display: inline-block;
  font-size: 0.82rem;        /* compact but readable */
  font-weight: 500;
  color: var(--color-primary);
  font-family: var(--font-body);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;       /* never break a link label */
  transition: all var(--transition);
  text-decoration: none;
}
.main-nav > a:not(.nav-cta):hover,
.main-nav ul li a:hover,
.main-nav > a.active,
.main-nav ul li.current-menu-item > a {
  color: var(--color-secondary);
  background: rgba(53,152,149,0.08);
}

/* WordPress generates a <ul> menu — flatten it */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.main-nav ul li { position: relative; }

/* ---- CTA BUTTONS (right side) ---- */
.nav-cta {
  flex-shrink: 0;            /* CTA buttons never shrink */
  white-space: nowrap;
  margin-left: 6px;
  font-size: 0.82rem !important;
  padding: 9px 14px !important;
}
.btn-whatsapp.nav-cta {
  background: #25D366;
  color: white;
  border-color: #25D366;
}
.btn-whatsapp.nav-cta:hover { background: #1da851; }

/* ---- HAMBURGER (mobile only) ---- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ---- BREAKPOINTS ---- */

/* 1200px — reduce font & padding slightly */
@media (max-width: 1200px) {
  .main-nav > a:not(.nav-cta),
  .main-nav ul li a {
    font-size: 0.78rem;
    padding: 8px 8px;
  }
  .nav-cta {
    font-size: 0.78rem !important;
    padding: 8px 12px !important;
  }
  .site-logo .logo-text { font-size: 1.1rem; }
}

/* 1024px — hide WhatsApp nav button, keep Book CTA */
@media (max-width: 1024px) {
  .btn-whatsapp.nav-cta { display: none; }
  .main-nav > a:not(.nav-cta),
  .main-nav ul li a {
    font-size: 0.75rem;
    padding: 7px 7px;
  }
}

/* 900px — switch to hamburger */
@media (max-width: 900px) {
  .hamburger { display: flex; }

  .main-nav {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    box-shadow: 0 8px 32px rgba(31,67,115,0.15);
    z-index: 999;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    border-top: 2px solid var(--color-secondary);
  }
  .main-nav.open { display: flex; }

  .main-nav > a:not(.nav-cta),
  .main-nav ul li a {
    font-size: 0.95rem;
    padding: 13px 4px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    width: 100%;
  }
  .main-nav ul { flex-direction: column; width: 100%; }
  .main-nav ul li { width: 100%; }

  .nav-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-left: 0 !important;
    margin-top: 10px !important;
    font-size: 0.92rem !important;
    padding: 13px 20px !important;
  }
  .btn-whatsapp.nav-cta { display: flex; }

  /* Body padding so sticky header + mobile bar don't overlap content */
  body { padding-bottom: 72px; }
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero-section {
  background: linear-gradient(135deg, var(--color-dark) 0%, #1a3a47 60%, var(--color-primary) 100%);
  color: var(--color-white);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(233,196,106,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(42,157,143,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(233,196,106,0.2);
  border: 1px solid rgba(233,196,106,0.4);
  color: var(--color-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}
.hero-title {
  color: var(--color-white);
  margin-bottom: 20px;
  font-size: clamp(2rem, 4.5vw, 3rem);
}
.hero-title .highlight {
  color: var(--color-secondary);
  position: relative;
}
.hero-subtitle {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  margin-bottom: 36px;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}
.trust-item .check {
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: white;
  flex-shrink: 0;
}
.hero-image-wrap {
  position: relative;
}
.hero-image-wrap img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 480px;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}
.hero-stat-card {
  position: absolute;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
}
.hero-stat-card.card-families {
  bottom: 24px;
  left: -24px;
}
.hero-stat-card.card-rating {
  top: 24px;
  right: -24px;
}
.hero-stat-card .stat-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1;
}
.hero-stat-card .stat-label {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-top: 2px;
}
.stat-stars { color: var(--color-secondary); font-size: 0.9rem; }

/* =============================================
   CARE MATCHER WIDGET
   ============================================= */
.care-matcher {
  background: var(--color-white);
  padding: 48px 0;
  border-bottom: 1px solid var(--color-border);
}
.matcher-inner {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.matcher-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.matcher-question {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-dark);
  margin-bottom: 20px;
}
.matcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.matcher-step { display: none; }
.matcher-step.active { display: block; }
.matcher-btn {
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}
.matcher-btn:hover, .matcher-btn.selected {
  border-color: var(--color-primary);
  background: rgba(42,157,143,0.06);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.matcher-btn .btn-icon { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.matcher-progress {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition);
}
.progress-dot.active { background: var(--color-primary); }
.progress-dot.done { background: var(--color-secondary); }

/* =============================================
   SERVICES SECTION
   ============================================= */
.services-section { padding: var(--section-pad); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.service-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--color-border);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: left;
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: rgba(42,157,143,0.3);
}
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  font-size: 2.4rem;
  margin-bottom: 16px;
  display: block;
}
.service-card h3 { margin-bottom: 8px; font-size: 1.15rem; }
.service-card p { color: var(--color-text-light); font-size: 0.9rem; margin-bottom: 16px; }
.service-price {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: 20px;
  padding: 6px 12px;
  background: rgba(42,157,143,0.08);
  border-radius: var(--radius-sm);
  display: inline-block;
}
.service-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}
.service-link:hover { gap: 8px; color: var(--color-dark); }

/* =============================================
   HOW IT WORKS
   ============================================= */
.how-it-works {
  background: var(--color-dark);
  padding: var(--section-pad);
  color: var(--color-white);
}
.how-it-works .section-title { color: var(--color-white); }
.how-it-works .section-subtitle { color: rgba(255,255,255,0.7); }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(16.66% + 20px);
  right: calc(16.66% + 20px);
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
.step-item { text-align: center; padding: 0 24px; }
.step-number {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
  border: 3px solid rgba(42,157,143,0.3);
}
.step-item:nth-child(2) .step-number { background: var(--color-secondary); color: var(--color-dark); }
.step-item:nth-child(3) .step-number { background: var(--color-accent); }
.step-item h3 { color: var(--color-white); margin-bottom: 10px; font-size: 1.1rem; }
.step-item p { color: rgba(255,255,255,0.65); font-size: 0.9rem; }

/* =============================================
   PRICE CALCULATOR
   ============================================= */
.price-calculator { padding: var(--section-pad); background: var(--color-white); }
.calc-wrap {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 48px;
  border: 1px solid var(--color-border);
  max-width: 800px;
  margin: 48px auto 0;
}
.calc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.calc-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.calc-field select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23777' fill='none' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color var(--transition);
}
.calc-field select:focus { outline: none; border-color: var(--color-primary); }
.calc-result {
  background: var(--color-dark);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.calc-price-label { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-bottom: 4px; }
.calc-price-value {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--color-secondary);
  line-height: 1;
}
.calc-note { color: rgba(255,255,255,0.5); font-size: 0.78rem; margin-top: 6px; }

/* =============================================
   TEAM / DOCTOR PROFILES
   ============================================= */
.team-section { padding: var(--section-pad); background: var(--color-bg); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.team-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  border: 1px solid var(--color-border);
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.team-photo {
  position: relative;
  height: 240px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  overflow: hidden;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.team-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: rgba(255,255,255,0.4);
}
.video-trigger {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(233,196,106,0.95);
  color: var(--color-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition);
}
.video-trigger:hover { background: var(--color-secondary); transform: scale(1.05); }
.team-info { padding: 24px; }
.team-info h3 { margin-bottom: 4px; font-size: 1.1rem; }
.team-designation {
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.team-quals {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-bottom: 12px;
  line-height: 1.5;
}
.team-exp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(42,157,143,0.08);
  color: var(--color-primary);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
}

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonials-section { padding: var(--section-pad); background: var(--color-white); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.testimonial-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--color-border);
  position: relative;
}
.testimonial-card::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--color-primary);
  opacity: 0.15;
  position: absolute;
  top: 10px;
  left: 20px;
  line-height: 1;
}
.testimonial-stars { color: var(--color-secondary); font-size: 1rem; margin-bottom: 12px; }
.testimonial-text {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-white);
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-weight: 600; font-size: 0.9rem; color: var(--color-dark); }
.author-meta { font-size: 0.78rem; color: var(--color-text-light); }
.video-testimonial .play-overlay {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 16px;
}
.video-testimonial .play-overlay img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38,70,83,0.4);
  transition: background var(--transition);
}
.play-btn:hover { background: rgba(38,70,83,0.6); }
.play-btn svg { width: 48px; height: 48px; fill: white; }

/* =============================================
   BLOG SECTION
   ============================================= */
.blog-section { padding: var(--section-pad); background: var(--color-bg); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-thumb {
  height: 200px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  overflow: hidden;
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.blog-body { padding: 24px; }
.blog-cat {
  display: inline-block;
  background: rgba(42,157,143,0.1);
  color: var(--color-primary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.blog-card h3 { font-size: 1rem; margin-bottom: 10px; line-height: 1.4; }
.blog-card p { font-size: 0.88rem; color: var(--color-text-light); margin-bottom: 16px; }
.blog-meta { font-size: 0.78rem; color: var(--color-text-light); display: flex; gap: 12px; }

/* =============================================
   BOOKING / CONTACT SECTION
   ============================================= */
.booking-section { padding: var(--section-pad); background: var(--color-white); }
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 48px;
}
.booking-form {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--color-border);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition);
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(42,157,143,0.1);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-submit-note {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.booking-info h3 { margin-bottom: 20px; }
.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.contact-icon {
  width: 44px;
  height: 44px;
  background: rgba(42,157,143,0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.contact-item h4 { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 2px; font-family: var(--font-body); font-weight: 600; }
.contact-item p { font-size: 0.95rem; margin: 0; font-weight: 500; }
.whatsapp-cta-box {
  background: linear-gradient(135deg, #25D366, #1da851);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 24px;
  color: white;
  text-align: center;
}
.whatsapp-cta-box h4 { color: white; margin-bottom: 8px; font-family: var(--font-body); }
.whatsapp-cta-box p { color: rgba(255,255,255,0.85); font-size: 0.88rem; margin-bottom: 16px; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.8);
  padding: 64px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand .logo-text { color: white; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-top: 16px; line-height: 1.7; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.9rem;
  transition: all var(--transition);
}
.social-link:hover { background: var(--color-primary); color: white; transform: translateY(-2px); }
.footer-col h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: rgba(255,255,255,0.6); font-size: 0.88rem; transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--color-secondary); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { color: rgba(255,255,255,0.45); font-size: 0.82rem; margin: 0; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: rgba(255,255,255,0.45); font-size: 0.82rem; }
.footer-legal a:hover { color: var(--color-secondary); }

/* =============================================
   FLOATING ELEMENTS
   ============================================= */
.whatsapp-float {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 999;
  background: #25D366;
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: all var(--transition);
  text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.1); background: #1da851; color: white; box-shadow: 0 6px 28px rgba(37,211,102,0.5); }
.whatsapp-float svg { width: 28px; height: 28px; fill: white; }

/* Mobile sticky bar */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 10px 16px;
  gap: 8px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.mobile-sticky-bar .btn { flex: 1; padding: 12px 8px; font-size: 0.82rem; }

/* =============================================
   VIDEO MODAL
   ============================================= */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.video-modal.open { display: flex; }
.modal-inner {
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: 760px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background var(--transition);
}
.modal-close:hover { background: rgba(255,255,255,0.35); }
.modal-video { width: 100%; aspect-ratio: 16/9; }
.modal-video iframe { width: 100%; height: 100%; border: none; }

/* =============================================
   PAGE TEMPLATES
   ============================================= */
.page-hero {
  background: linear-gradient(135deg, var(--color-dark), #1a3a47);
  padding: 80px 0 60px;
  text-align: center;
}
.page-hero h1 { color: var(--color-white); margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,0.75); font-size: 1.05rem; max-width: 500px; margin: 0 auto; }
.page-content { padding: var(--section-pad); }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  justify-content: center;
}
.breadcrumb a { color: rgba(255,255,255,0.6); }
.breadcrumb a:hover { color: var(--color-secondary); }
.breadcrumb span { color: rgba(255,255,255,0.4); }

/* =============================================
   PRICING PAGE
   ============================================= */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  margin: 48px 0 24px;
}
.pricing-table th {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 18px 20px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pricing-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table tr:hover td { background: rgba(42,157,143,0.04); }
.price-cell {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-primary);
}
.pricing-note {
  background: rgba(42,157,143,0.08);
  border: 1px solid rgba(42,157,143,0.2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 0.88rem;
  color: var(--color-text);
}

/* FAQ Accordion */
.faq-list { margin-top: 40px; }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--color-white);
}
.faq-question {
  padding: 20px 24px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background var(--transition);
  font-size: 0.95rem;
  color: var(--color-dark);
}
.faq-question:hover { background: var(--color-bg); }
.faq-question.open { color: var(--color-primary); }
.faq-icon { flex-shrink: 0; font-size: 1.2rem; transition: transform var(--transition); }
.faq-question.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.8;
}
.faq-answer.open { max-height: 300px; padding: 0 24px 20px; }

/* =============================================
   UTILITY CLASSES
   ============================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; } .flex-center { align-items: center; justify-content: center; }
.gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-primary { background: rgba(42,157,143,0.1); color: var(--color-primary); }
.badge-amber { background: rgba(233,196,106,0.2); color: #b8860b; }

/* =============================================
   RESPONSIVE — TABLET
   ============================================= */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-image-wrap { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid::before { display: none; }
  .steps-grid { grid-template-columns: 1fr; gap: 36px; }
  .booking-grid { grid-template-columns: 1fr; }
  .calc-row { grid-template-columns: 1fr; }
}

/* =============================================
   RESPONSIVE — MOBILE
   ============================================= */
@media (max-width: 768px) {
  :root { --section-pad: 56px 0; }

  .main-nav { display: none; flex-direction: column; }
  .main-nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    padding: 16px 20px 24px;
    box-shadow: var(--shadow-md);
    border-top: 1px solid var(--color-border);
    z-index: 999;
  }
  .main-nav.open a { padding: 12px 0; border-bottom: 1px solid var(--color-border); border-radius: 0; font-size: 1rem; }
  .nav-cta { margin-left: 0; margin-top: 8px; }
  .hamburger { display: flex; }
  .site-header { position: relative; }

  .hero-section { padding: 48px 0 40px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: 12px; }

  .matcher-grid { grid-template-columns: 1fr 1fr; }
  .matcher-inner { padding: 24px; }

  .services-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }

  .calc-wrap { padding: 24px; }
  .calc-result { flex-direction: column; text-align: center; }

  .booking-form { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .mobile-sticky-bar { display: flex; }
  .whatsapp-float { bottom: 80px; }

  .pricing-table { font-size: 0.85rem; }
  .pricing-table th, .pricing-table td { padding: 12px 14px; }
}

@media (max-width: 480px) {
  .matcher-grid { grid-template-columns: 1fr; }
  .hero-trust { flex-direction: column; gap: 8px; }
}

/* =============================================
   PRINT
   ============================================= */
@media print {
  .site-header, .whatsapp-float, .mobile-sticky-bar, .video-modal { display: none !important; }
}

/* =================================================================
   RESPONSIVE FIXES — COMPREHENSIVE MOBILE-FIRST PATCH
   Fixes identified issues:
   1. Header overlaps content (sticky + relative conflict)
   2. Matcher inner grid breaks on small screens
   3. Pricing table overflows horizontally
   4. Care matcher 2-col grid still too wide on 360px phones
   5. Hero badge text wraps ugly
   6. Steps grid connector line shows on mobile
   7. Footer bottom legal links overflow
   8. Booking form padding too large on small phones
   9. Calc result buttons overflow
  10. Page-hero breadcrumb wraps badly
  11. Single blog post 2-col grid breaks
  12. Services page alternating grid breaks
  13. Team profile page 2-col grid breaks
  14. Video modal not full-screen on small phones
  15. Mobile sticky bar overlaps page content (missing bottom padding)
  16. WhatsApp float overlaps mobile sticky bar
  17. Container has no horizontal overflow guard
  18. Inputs zoom in on iOS (font-size must be >= 16px)
  19. Hamburger active state (lines don't animate to X)
  20. select dropdowns missing -webkit-appearance fix for iOS
   ================================================================= */

/* ------------------------------------------------------------------
   GLOBAL OVERFLOW GUARD
   Prevents any element from causing horizontal scroll
   ------------------------------------------------------------------ */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* Prevent iOS font size inflation */
}

* { box-sizing: border-box; }

/* ------------------------------------------------------------------
   IOS INPUT ZOOM FIX
   iOS zooms in when input font-size < 16px. Force 16px minimum.
   ------------------------------------------------------------------ */
input, select, textarea {
  font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
}

/* ------------------------------------------------------------------
   STICKY HEADER — fix so mobile menu dropdown is positioned correctly
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .site-header {
    position: sticky;   /* Keep sticky on mobile too */
    top: 0;
    z-index: 1000;
  }

  /* Hamburger animates to X when active */
  .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile nav dropdown — full width, properly positioned */
  .main-nav.open {
    position: fixed;      /* fixed so it overlays content correctly */
    top: 72px;            /* below the header */
    left: 0;
    right: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    z-index: 999;
  }

  /* Bottom padding so sticky bar doesn't cover page content */
  body {
    padding-bottom: 72px;
  }
}

/* ------------------------------------------------------------------
   HERO — mobile fixes
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .hero-section {
    padding: 40px 0 36px;
  }
  .hero-badge {
    font-size: 0.72rem;
    padding: 5px 10px;
    word-break: break-word;
    white-space: normal;
    text-align: center;
  }
  .hero-title {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }
  .hero-subtitle {
    font-size: 0.95rem;
  }
  .hero-actions {
    flex-direction: column;
    gap: 10px;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    padding: 14px 20px;
  }
  .hero-trust {
    flex-direction: column;
    gap: 8px;
  }
  /* Hide decorative blobs on small screens for performance */
  .hero-section::before,
  .hero-section::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 32px 0 28px;
  }
  .hero-title {
    font-size: 1.6rem;
  }
}

/* ------------------------------------------------------------------
   CARE MATCHER WIDGET — mobile fixes
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .care-matcher {
    padding: 32px 0;
  }
  .matcher-inner {
    padding: 20px 16px;
    /* The 2-col heading+steps grid must stack on mobile */
    display: block !important;
  }
  /* The inner grid (heading | steps) stacks vertically */
  .matcher-inner > div[style*="grid"] {
    display: block !important;
  }
  .matcher-question {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }
  .matcher-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .matcher-btn {
    padding: 14px 8px;
    font-size: 0.82rem;
  }
  .matcher-btn .btn-icon {
    font-size: 1.5rem;
  }
}

@media (max-width: 420px) {
  .matcher-grid {
    grid-template-columns: 1fr; /* 1 column on very small phones */
  }
}

/* ------------------------------------------------------------------
   PRICE CALCULATOR — mobile fixes
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .price-calculator {
    padding: 40px 0;
  }
  .calc-wrap {
    padding: 20px 16px;
    margin-top: 28px;
  }
  .calc-result {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }
  .calc-result .btn {
    width: 100%;
    justify-content: center;
  }
  .calc-price-value {
    font-size: 1.8rem;
  }
}

/* ------------------------------------------------------------------
   SERVICES GRID — ensure 1 col on mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    margin-top: 32px;
    gap: 16px;
  }
  .service-card {
    padding: 24px 20px;
  }
}

/* ------------------------------------------------------------------
   HOW IT WORKS — mobile fixes
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .steps-grid::before {
    display: none; /* Hide connector line */
  }
  .step-item {
    padding: 0;
    display: flex;
    gap: 16px;
    text-align: left;
    align-items: flex-start;
  }
  .step-number {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1.1rem;
    margin: 0;
  }
  .step-item h3 { margin-bottom: 6px; font-size: 1rem; }
  .step-item p  { font-size: 0.88rem; }
}

/* ------------------------------------------------------------------
   TEAM SECTION — mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }
  .team-photo { height: 200px; }
  .team-info  { padding: 18px; }
}

/* ------------------------------------------------------------------
   TESTIMONIALS — mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  .testimonial-card {
    padding: 24px 20px;
  }
}

/* ------------------------------------------------------------------
   BLOG SECTION — mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }
  .blog-thumb { height: 180px; }
  .blog-body  { padding: 18px; }
}

/* ------------------------------------------------------------------
   BOOKING / CONTACT SECTION — mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .booking-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 28px;
  }
  .booking-form {
    padding: 20px 16px;
  }
  .form-row {
    grid-template-columns: 1fr; /* Always 1 col on mobile */
  }
  .whatsapp-cta-box {
    padding: 20px 16px;
  }
  .whatsapp-cta-box .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   PRICING TABLE — horizontal scroll on small screens
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Wrap table in a scrollable div via CSS */
  .pricing-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
  }
  .pricing-table {
    min-width: 540px; /* Force minimum width so it scrolls cleanly */
    font-size: 0.8rem;
    border: none;     /* Border is on the wrapper */
    border-radius: 0;
  }
  .pricing-table th,
  .pricing-table td {
    padding: 10px 12px;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------
   FOOTER — mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .site-footer {
    padding: 48px 0 0;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
  }
  .footer-social {
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px 0;
  }
  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .footer-legal a {
    font-size: 0.8rem;
  }
}

/* ------------------------------------------------------------------
   FLOATING WHATSAPP + MOBILE STICKY BAR — positioning fix
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .mobile-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    padding: 10px 12px;
    gap: 8px;
    /* Safe area inset for iPhone X+ home indicator */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .mobile-sticky-bar .btn {
    flex: 1;
    padding: 11px 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    justify-content: center;
  }
  /* WhatsApp float sits above the sticky bar */
  .whatsapp-float {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 50px;
    height: 50px;
  }
  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

/* ------------------------------------------------------------------
   PAGE HERO (inner pages) — mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .page-hero {
    padding: 48px 0 36px;
  }
  .page-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .page-hero p {
    font-size: 0.92rem;
  }
  .breadcrumb {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.75rem;
    gap: 4px;
  }
}

/* ------------------------------------------------------------------
   SINGLE BLOG POST — 2-col grid fix
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* The blog post uses inline style grid — override with !important */
  .page-content .container > div[style*="grid-template-columns:2fr 1fr"] {
    display: block !important;
  }
  .page-content .container > div[style*="grid-template-columns:2fr 1fr"] > aside {
    margin-top: 32px;
  }
  /* Post navigation 2-col */
  .page-content div[style*="grid-template-columns:1fr 1fr"] {
    display: block !important;
  }
  .page-content div[style*="grid-template-columns:1fr 1fr"] > a {
    display: block;
    margin-bottom: 12px;
  }
}

/* ------------------------------------------------------------------
   SERVICES PAGE — alternating 2-col layout fix
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Override the inline-style grid on services page */
  .page-content div[style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:80px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-bottom: 48px !important;
    padding-bottom: 48px !important;
  }
  /* Reset the order:2 / order:1 alternating trick on mobile */
  .page-content div[style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:80px"] > div {
    order: 0 !important;
  }
  /* Service icon placeholder boxes */
  .page-content div[style*="background:linear-gradient"][style*="border-radius:20px"] {
    height: 200px !important;
    font-size: 4rem !important;
  }
  /* Service CTA row */
  .page-content div[style*="display:flex"][style*="gap:12px"] {
    flex-direction: column;
    gap: 10px !important;
  }
  .page-content div[style*="display:flex"][style*="gap:12px"] .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   TEAM PROFILE PAGE — 2-col fix
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .page-content .container > div[style*="grid-template-columns:1fr 2fr"] {
    display: block !important;
  }
  .page-content .container > div[style*="grid-template-columns:1fr 2fr"] > div:last-child {
    margin-top: 24px;
  }
  /* Team profile book CTA row */
  .page-content div[style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    text-align: center;
  }
  .page-content div[style*="display:flex;align-items:center;justify-content:space-between"] > div[style*="display:flex;gap:12px"] {
    flex-direction: column;
    gap: 10px !important;
  }
  .page-content div[style*="display:flex;align-items:center;justify-content:space-between"] .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   VIDEO MODAL — full screen on mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .video-modal {
    padding: 0;
    align-items: flex-end;
  }
  .modal-inner {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 100%;
  }
  .modal-video {
    aspect-ratio: 16/9;
  }
}

/* ------------------------------------------------------------------
   FAQ ACCORDION — mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .faq-question {
    padding: 16px 18px;
    font-size: 0.88rem;
  }
  .faq-answer {
    padding: 0 18px;
    font-size: 0.85rem;
  }
  .faq-answer.open {
    padding: 0 18px 16px;
    max-height: 500px; /* Increase for longer answers on mobile */
  }
}

/* ------------------------------------------------------------------
   SECTION HEADERS — mobile spacing
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: 8px;
  }
  .section-title {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem);
    margin-bottom: 10px;
  }
  .section-subtitle {
    font-size: 0.9rem;
  }
  .section-eyebrow {
    font-size: 0.72rem;
  }
}

/* ------------------------------------------------------------------
   BUTTONS — minimum tap target 44px (WCAG)
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    padding: 12px 20px;
  }
  .btn-lg {
    min-height: 50px;
    padding: 14px 24px;
  }
}

/* ------------------------------------------------------------------
   CONTAINER — ensure horizontal padding on all screens
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
  :root {
    --section-pad: 44px 0;
  }
}

/* ------------------------------------------------------------------
   BACK-TO-TOP BUTTON — above mobile sticky bar
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Back to top is created in JS, ensure it sits above sticky bar */
  body > button[aria-label="Back to top"] {
    bottom: 84px !important;
  }
}

/* ------------------------------------------------------------------
   WORDPRESS CORE ELEMENTS — ensure images don't overflow
   ------------------------------------------------------------------ */
img, video, iframe, embed, object {
  max-width: 100%;
}

/* Prevent WordPress .wp-block-* from overflowing */
.entry-content * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tables in blog posts — make scrollable */
.entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ------------------------------------------------------------------
   SMALL PHONE — 360px and below
   ------------------------------------------------------------------ */
@media (max-width: 360px) {
  .hero-title { font-size: 1.45rem; }
  .site-logo .logo-text { font-size: 1.2rem; }
  .mobile-sticky-bar .btn { font-size: 0.72rem; padding: 10px 4px; }
  .matcher-btn { padding: 12px 6px; font-size: 0.78rem; }
  .booking-form { padding: 16px 12px; }
  .calc-wrap { padding: 16px 12px; }
}

/* ------------------------------------------------------------------
   LANDSCAPE MOBILE — phones rotated sideways
   ------------------------------------------------------------------ */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section { padding: 28px 0 24px; }
  .mobile-sticky-bar { padding: 6px 12px; }
  .mobile-sticky-bar .btn { padding: 8px 6px; font-size: 0.75rem; }
}

/* =================================================================
   IMAGE EXTENSION — Hero Background Image + Overlay Text
   Service Cards with Images, Team Gallery, Why Choose Us Banner,
   Before/After Stats Banner, Inner Page Hero Images
   All images & overlay text configurable from WordPress Customizer
   ================================================================= */

/* ------------------------------------------------------------------
   HERO — Full Background Image with Overlay
   ------------------------------------------------------------------ */
.hero-section {
  position: relative;
  overflow: hidden;
  /* Min-height so content is always visible even without image */
  min-height: 520px;
  display: flex;
  align-items: center;
}

/* Background image layer — image set via inline style from PHP */
.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  transition: transform 6s ease;
}
/* Subtle Ken Burns zoom effect on load */
.hero-bg-image.loaded { transform: scale(1.04); }

/* Gradient overlay — darkens image so text stays readable */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Default overlay — configurable via Customizer */
  background: linear-gradient(
    135deg,
    rgba(38, 70, 83, 0.82) 0%,
    rgba(38, 70, 83, 0.65) 50%,
    rgba(42, 157, 143, 0.45) 100%
  );
}

/* When a background image is present, the hero content sits above overlay */
.hero-section .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Overlay text block — sits centred or left, configurable */
.hero-overlay-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  padding: 0 16px;
}
.hero-overlay-text.align-left  { text-align: left; margin: 0 0 40px; }
.hero-overlay-text.align-right { text-align: right; margin: 0 0 40px auto; }

/* Super headline above the main title */
.hero-super-title {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 16px;
  padding: 6px 16px;
  border: 1px solid rgba(233,196,106,0.5);
  border-radius: var(--radius-full);
  background: rgba(233,196,106,0.1);
}

/* Main overlay headline */
.hero-overlay-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 20px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  /* Font size set via inline style from Customizer */
}

/* Overlay subtitle / description */
.hero-overlay-subtitle {
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
  margin-bottom: 32px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
  /* Font size set via inline style from Customizer */
}

/* Scroll-down indicator */
.hero-scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.6);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounceDown 2s infinite;
  cursor: pointer;
}
.hero-scroll-hint svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255,255,255,0.6);
}
@keyframes bounceDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* Trust badges row below CTA buttons */
.hero-trust-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.hero-trust-row.align-left { justify-content: flex-start; }
.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}
.trust-badge-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   HERO SLIDER — multiple background images cycle
   ------------------------------------------------------------------ */
.hero-slider-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slider-dots {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.slider-dot.active {
  background: var(--color-secondary);
  width: 24px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------
   WHY CHOOSE US — Full-width image banner with stats overlay
   ------------------------------------------------------------------ */
.why-choose-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  color: #fff;
}
.why-choose-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax effect on desktop */
  z-index: 0;
}
.why-choose-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(38,70,83,0.88), rgba(42,157,143,0.75));
  z-index: 1;
}
.why-choose-section .container { position: relative; z-index: 2; }
.why-choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.why-choose-content h2 { color: #fff; margin-bottom: 20px; }
.why-choose-content p  { color: rgba(255,255,255,0.8); margin-bottom: 28px; line-height: 1.8; }
.why-list { list-style: none; padding: 0; }
.why-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
}
.why-list li::before {
  content: '✓';
  background: var(--color-secondary);
  color: var(--color-dark);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.why-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.why-stat-card {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
}
.why-stat-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1;
  margin-bottom: 8px;
}
.why-stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   SERVICE CARDS — with image support
   ------------------------------------------------------------------ */
.service-card-image {
  height: 180px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  position: relative;
  margin: -32px -28px 20px; /* Bleed to card edges */
}
.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-card:hover .service-card-image img {
  transform: scale(1.06);
}
.service-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
/* When card has image, adjust padding */
.service-card.has-image {
  padding-top: 0;
  overflow: hidden;
}
.service-card.has-image .service-card-content {
  padding: 20px 28px 28px;
}

/* ------------------------------------------------------------------
   TEAM CARDS — full photo with hover overlay
   ------------------------------------------------------------------ */
.team-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38,70,83,0.92) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.team-card:hover .team-photo-overlay { opacity: 1; }
.team-overlay-bio {
  color: rgba(255,255,255,0.88);
  font-size: 0.78rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   TESTIMONIALS — background image section
   ------------------------------------------------------------------ */
.testimonials-section {
  position: relative;
}
.testimonials-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0.06; /* Very subtle — just adds texture */
}
.testimonials-section .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------------
   GALLERY SECTION — new section between team and testimonials
   ------------------------------------------------------------------ */
.gallery-section {
  padding: var(--section-pad);
  background: var(--color-bg);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 240px 240px;
  gap: 12px;
  margin-top: 40px;
}
/* First image spans 2 cols and 2 rows — hero of the gallery */
.gallery-item:first-child {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
  display: block;
}
.gallery-item:hover img {
  transform: scale(1.07);
  filter: brightness(0.85);
}
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38,70,83,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-zoom-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
}
/* Placeholder when no image uploaded */
.gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: rgba(255,255,255,0.3);
}

/* ------------------------------------------------------------------
   INNER PAGE HERO — with background image support
   ------------------------------------------------------------------ */
.page-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(38,70,83,0.85), rgba(42,157,143,0.6));
  z-index: 1;
}
.page-hero .container {
  position: relative;
  z-index: 2;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* ------------------------------------------------------------------
   ABOUT / MISSION STRIP — image left, text right
   ------------------------------------------------------------------ */
.about-strip {
  padding: var(--section-pad);
  background: var(--color-white);
}
.about-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.about-image-wrap img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
/* Accent frame decoration */
.about-image-wrap::before {
  content: '';
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 70%;
  height: 70%;
  border: 4px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.about-image-wrap::after {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  width: 50%;
  height: 50%;
  background: rgba(42,157,143,0.1);
  border-radius: var(--radius-lg);
  z-index: -1;
}
/* Floating experience badge */
.about-exp-badge {
  position: absolute;
  bottom: 24px;
  left: -20px;
  background: var(--color-dark);
  color: white;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.about-exp-badge .exp-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1;
}
.about-exp-badge .exp-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}
.about-content h2 { margin-bottom: 16px; }
.about-content .lead {
  font-size: 1.1rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.6;
}
.about-content p { color: var(--color-text-light); line-height: 1.8; margin-bottom: 16px; }

/* ------------------------------------------------------------------
   RESPONSIVE — IMAGE SECTIONS
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .why-choose-grid  { grid-template-columns: 1fr; gap: 40px; }
  .about-strip-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-image-wrap::before,
  .about-image-wrap::after { display: none; }
  .about-exp-badge { left: 16px; }
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 200px 200px;
  }
  .gallery-item:first-child {
    grid-column: 1 / 3;
  }
}

@media (max-width: 768px) {
  /* Hero */
  .hero-section { min-height: 480px; }
  .hero-overlay-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  .hero-overlay-subtitle { font-size: 0.92rem !important; }
  .hero-overlay-text { margin-bottom: 24px; }
  .hero-trust-row { gap: 10px; }
  .trust-badge { font-size: 0.75rem; padding: 6px 12px; }
  .hero-scroll-hint { display: none; }

  /* Slider dots */
  .hero-slider-dots { bottom: 80px; }

  /* Why Choose */
  .why-choose-section { padding: 60px 0; }
  .why-choose-bg { background-attachment: scroll; } /* Disable parallax on mobile */
  .why-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .why-stat-card { padding: 20px 16px; }
  .why-stat-number { font-size: 1.8rem; }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px 160px;
  }
  .gallery-item:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  /* About strip */
  .about-strip-grid { grid-template-columns: 1fr; }
  .about-image-wrap img { height: 280px; }
  .about-exp-badge { left: 12px; bottom: 12px; }

  /* Page hero */
  .page-hero { min-height: 200px; }
  .page-hero .container { padding-top: 44px; padding-bottom: 44px; }

  /* Service card images */
  .service-card-image { height: 150px; margin: -24px -20px 16px; }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .gallery-item { height: 200px; }
  .gallery-item:first-child {
    grid-column: 1;
    grid-row: 1;
    height: 240px;
  }
  .why-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* =================================================================
   WARM BEIGE PALETTE — Complete Design Override
   Extracted from client colour palette image
   Palette: #1F4373 · #359895 · #F4743E · #F0F8F7 · #E3F0EF
   All 10 colours configurable via Appearance → Customize → Colours
   ================================================================= */

:root {
  --color-primary:     #1F4373;
  --color-secondary:   #359895;
  --color-accent:      #F4743E;
  --color-dark:        #163058;
  --color-bg:          #F0F8F7;
  --color-surface:     #E3F0EF;
  --color-text:        #1F4373;
  --color-text-light:  #5A7A9A;
  --color-border:      #C8DDE3;
  --color-white:       #FFFFFF;
  --color-wa-green:    #25D366;   /* WhatsApp — unchanged */
}

/* Body & base */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Headings use dark espresso */
h1, h2, h3, h4, h5 { color: var(--color-dark); }

/* Links */
a { color: var(--color-primary); }
a:hover { color: var(--color-dark); }

/* ---- HEADER ---- */
.site-header { background: var(--color-white); border-bottom: 2px solid var(--color-border); }
.main-nav a { color: var(--color-text); }
.main-nav a:hover, .main-nav a.active {
  color: var(--color-primary);
  background: rgba(167,122,91,0.08);
}

/* ---- HERO — warm gradient using palette ---- */
.hero-section {
  background: linear-gradient(135deg, var(--color-dark) 0%, #6B4C38 55%, var(--color-primary) 100%);
}
.hero-section::before {
  background: radial-gradient(circle, rgba(193,151,113,0.15) 0%, transparent 70%);
}
.hero-section::after {
  background: radial-gradient(circle, rgba(167,122,91,0.2) 0%, transparent 70%);
}
.hero-overlay {
  background: linear-gradient(135deg,
    rgba(74,55,40,0.82) 0%,
    rgba(74,55,40,0.65) 50%,
    rgba(167,122,91,0.45) 100%
  ) !important;
}
.hero-super-title {
  background: rgba(193,151,113,0.2);
  border-color: rgba(193,151,113,0.45);
  color: var(--color-accent);
}
.hero-badge {
  background: rgba(193,151,113,0.2);
  border-color: rgba(193,151,113,0.4);
  color: var(--color-accent);
}

/* ---- BUTTONS — warm palette ---- */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}
.btn-secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-accent {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}
.btn-accent:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ---- SERVICE CARDS ---- */
.service-card {
  background: var(--color-white);
  border-color: var(--color-border);
}
.service-card::before { background: var(--color-primary); }
.service-card:hover { border-color: rgba(167,122,91,0.35); }
.service-price {
  background: rgba(167,122,91,0.1);
  color: var(--color-primary);
}
.service-link { color: var(--color-primary); }
.service-link:hover { color: var(--color-dark); }

/* ---- CARE MATCHER ---- */
.care-matcher { background: var(--color-white); border-color: var(--color-border); }
.matcher-inner { background: var(--color-bg); border-color: var(--color-border); }
.matcher-btn { background: var(--color-white); border-color: var(--color-border); color: var(--color-text); }
.matcher-btn:hover, .matcher-btn.selected {
  border-color: var(--color-primary);
  background: rgba(167,122,91,0.06);
  color: var(--color-primary);
}
.progress-dot.active { background: var(--color-primary); }
.progress-dot.done  { background: var(--color-secondary); }

/* ---- HOW IT WORKS ---- */
.how-it-works { background: var(--color-dark); }
.step-number { background: var(--color-primary); }
.step-item:nth-child(2) .step-number { background: var(--color-secondary); color: var(--color-dark); }
.step-item:nth-child(3) .step-number { background: var(--color-accent); color: var(--color-dark); }
.steps-grid::before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

/* ---- PRICE CALCULATOR ---- */
.price-calculator { background: var(--color-white); }
.calc-wrap { background: var(--color-bg); border-color: var(--color-border); }
.calc-field select:focus { border-color: var(--color-primary); }
.calc-result { background: var(--color-dark); }
.calc-price-value { color: var(--color-secondary); }

/* ---- TEAM CARDS ---- */
.team-section { background: var(--color-bg); }
.team-card { background: var(--color-white); border-color: var(--color-border); }
.team-photo { background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); }
.team-designation { color: var(--color-primary); }
.team-exp { background: rgba(167,122,91,0.1); color: var(--color-primary); }

/* ---- TESTIMONIALS ---- */
.testimonials-section { background: var(--color-white); }
.testimonial-card { background: var(--color-bg); border-color: var(--color-border); }
.testimonial-card::before { color: var(--color-primary); }
.testimonial-stars { color: var(--color-secondary); }
.author-avatar { background: var(--color-primary); }

/* ---- BLOG CARDS ---- */
.blog-section { background: var(--color-bg); }
.blog-card { background: var(--color-white); border-color: var(--color-border); }
.blog-thumb { background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); }
.blog-cat {
  background: rgba(167,122,91,0.1);
  color: var(--color-primary);
}

/* ---- BOOKING SECTION ---- */
.booking-section { background: var(--color-white); }
.booking-form { background: var(--color-bg); border-color: var(--color-border); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(167,122,91,0.12);
}
.whatsapp-cta-box {
  background: linear-gradient(135deg, var(--color-wa-green), #1da851);
}

/* ---- SECTION EYEBROW ---- */
.section-eyebrow { color: var(--color-primary); }

/* ---- PAGE HERO (inner pages) ---- */
.page-hero {
  background: linear-gradient(135deg, var(--color-dark), #6B4C38);
}
.page-hero-overlay {
  background: linear-gradient(135deg, rgba(74,55,40,0.85), rgba(167,122,91,0.6));
}

/* ---- ABOUT STRIP ---- */
.about-strip { background: var(--color-white); }
.about-image-wrap::before { border-color: var(--color-secondary); }
.about-image-wrap::after  { background: rgba(167,122,91,0.1); }
.about-exp-badge { background: var(--color-dark); }
.about-exp-badge .exp-number { color: var(--color-secondary); }
.about-content .lead { color: var(--color-primary); }

/* ---- WHY CHOOSE US ---- */
.why-choose-overlay {
  background: linear-gradient(135deg, rgba(74,55,40,0.88), rgba(167,122,91,0.75));
}
.why-stat-card {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}
.why-stat-number { color: var(--color-accent); }
.why-list li::before { background: var(--color-secondary); color: var(--color-dark); }

/* ---- GALLERY ---- */
.gallery-section { background: var(--color-bg); }
.gallery-item { background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); }

/* ---- PRICING TABLE ---- */
.pricing-table th { background: var(--color-dark); }
.pricing-table tr:hover td { background: rgba(167,122,91,0.05); }
.price-cell { color: var(--color-primary); }
.pricing-note {
  background: rgba(167,122,91,0.08);
  border-color: rgba(167,122,91,0.2);
}

/* ---- FAQ ---- */
.faq-item { background: var(--color-white); border-color: var(--color-border); }
.faq-question.open { color: var(--color-primary); }

/* ---- FOOTER ---- */
.site-footer { background: var(--color-dark); }
.footer-col h4 { color: var(--color-white); }
.footer-col ul li a:hover { color: var(--color-secondary); }
.footer-legal a:hover { color: var(--color-secondary); }
.social-link:hover { background: var(--color-primary); }

/* ---- MOBILE STICKY BAR ---- */
.mobile-sticky-bar { background: var(--color-white); border-color: var(--color-border); }

/* ---- HERO SLIDER DOTS ---- */
.slider-dot.active { background: var(--color-secondary); }

/* ---- BADGE ---- */
.badge-primary { background: rgba(167,122,91,0.1); color: var(--color-primary); }
.badge-amber   { background: rgba(193,151,113,0.2); color: #7D5A2A; }

/* ---- CONTACT ICON ---- */
.contact-icon { background: rgba(167,122,91,0.1); }

/* ---- SURFACE / CARD BACKGROUNDS ---- */
.ec-surface { background: var(--color-surface); }

/* =================================================================
   WHATSAPP FLOATING BUTTON — Enhanced Smart Version
   - Mobile: opens WhatsApp app directly
   - Desktop: opens web.whatsapp.com if no app, app if installed
   - Number & default message configurable from WordPress admin
   - Fully accessible with aria labels
   ================================================================= */

/* Main floating button */
.wa-float-btn {
  position: fixed;
  bottom: 84px;
  right: 20px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* The green circle button */
.wa-float-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-wa-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.wa-float-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.55);
  color: #fff;
}
.wa-float-circle svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  flex-shrink: 0;
}

/* Pulse ring animation */
.wa-float-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.5);
  animation: waPulse 2.5s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Tooltip bubble — shows on hover */
.wa-float-tooltip {
  background: var(--color-dark);
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-body);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wa-float-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--color-dark);
  border-right: 0;
}
.wa-float-btn:hover .wa-float-tooltip,
.wa-float-btn:focus-within .wa-float-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* Chat bubble popup — opens on click */
.wa-chat-popup {
  position: fixed;
  bottom: 160px;
  right: 20px;
  width: 300px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  z-index: 1002;
  overflow: hidden;
  transform: scale(0.85) translateY(16px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.wa-chat-popup.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Popup header */
.wa-popup-header {
  background: var(--color-wa-green);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa-popup-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.wa-popup-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.92rem;
  font-family: var(--font-body);
}
.wa-popup-status {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.wa-popup-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #A8E6CF;
  flex-shrink: 0;
}
.wa-popup-close {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.2s;
}
.wa-popup-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Chat bubble */
.wa-popup-body { padding: 16px 16px 12px; }
.wa-chat-bubble {
  background: #F0F0F0;
  border-radius: 12px 12px 12px 2px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
  margin-bottom: 12px;
  position: relative;
}
.wa-chat-bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -6px;
  border: 6px solid transparent;
  border-right-color: #F0F0F0;
  border-bottom-color: #F0F0F0;
}
.wa-chat-time {
  font-size: 0.7rem;
  color: var(--color-text-light);
  text-align: right;
  margin-top: 4px;
}

/* Start chat button */
.wa-popup-footer { padding: 0 16px 16px; }
.wa-start-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-wa-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.wa-start-chat:hover {
  background: #1da851;
  color: #fff;
  transform: translateY(-1px);
}
.wa-start-chat svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  flex-shrink: 0;
}

/* Notification badge */
.wa-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: #FF4B4B;
  color: #fff;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
  animation: badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .wa-float-btn { bottom: 78px; right: 14px; }
  .wa-float-circle { width: 52px; height: 52px; }
  .wa-float-circle svg { width: 26px; height: 26px; }
  .wa-chat-popup { right: 12px; width: calc(100vw - 24px); max-width: 320px; bottom: 148px; }
}

/* Hide the old simple float button — replaced by new enhanced one */
.whatsapp-float { display: none !important; }

/* =================================================================
   MAXIMON INDIA — Brand Colour & Font System
   Extracted directly from Guardian Family Card design (Illustrator file)

   FONTS (from PDF metadata):
   - Rubik Medium / SemiBold  → Body, navigation, UI elements
   - Creato Display ExtraBold → Hero headlines, large titles  
   - Bahnschrift              → Card numbers, mono data
   - Myriad Pro               → Supporting text

   Google Fonts equivalents used (web-safe):
   - Rubik → Available on Google Fonts ✓
   - Creato Display → Not on Google Fonts; fallback: Raleway ExtraBold

   COLOUR PALETTE (exact from card design):
   #1F4373 — Navy Blue    — Primary, headings, footer, badges
   #359895 — Teal         — Brand accent, logo, links, section headers  
   #F4743E — Orange       — CTAs, decorative curves, highlights
   #E3F0EF — Light Teal   — Card/section backgrounds, subtle fills
   #F0F8F7 — Near White   — Page background (very light teal-white)
   #163058 — Deep Navy    — Footer bg, darkest elements
   #FFFFFF — White        — Content card backgrounds
   ================================================================= */

/* ---- GOOGLE FONTS IMPORT (Rubik — exact match from card) ---- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&family=Raleway:wght@700;800;900&display=swap');

/* ---- ROOT VARIABLES — MAXIMON INDIA PALETTE ---- */
:root {
  --color-primary:     #1F4373;   /* Navy Blue — main brand colour */
  --color-secondary:   #359895;   /* Teal — logo, accents, links */
  --color-accent:      #F4743E;   /* Orange — CTAs, decorative */
  --color-dark:        #163058;   /* Deep Navy — footer, darkest */
  --color-bg:          #F0F8F7;   /* Near-white teal — page bg */
  --color-surface:     #E3F0EF;   /* Light Teal — card bg */
  --color-text:        #1F4373;   /* Navy — body text */
  --color-text-light:  #5A7A9A;   /* Muted navy — captions */
  --color-border:      #C8DDE3;   /* Light blue-grey — borders */
  --color-white:       #FFFFFF;
  --color-wa-green:    #25D366;

  /* Font families */
  --font-display: 'Raleway', 'Rubik', sans-serif;   /* Headlines */
  --font-body:    'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Bahnschrift', 'DM Mono', 'Courier New', monospace;
}

/* ---- BODY & BASE ---- */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--color-primary);
}

/* ---- HEADER ---- */
.site-header {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-secondary);
  box-shadow: 0 2px 12px rgba(31,67,115,0.08);
}
.site-logo .logo-text { color: var(--color-primary); font-family: var(--font-display); }
.site-logo .logo-text span { color: var(--color-secondary); }
.main-nav a { color: var(--color-primary); font-family: var(--font-body); font-weight: 500; }
.main-nav a:hover, .main-nav a.active {
  color: var(--color-secondary);
  background: rgba(53,152,149,0.08);
}
.btn-whatsapp { background: #25D366; border-color: #25D366; color: white; }

/* ---- HERO SECTION — Maximon India brand gradient ---- */
.hero-section {
  background: linear-gradient(135deg, #163058 0%, #1F4373 55%, #2A5F8F 100%);
}
.hero-overlay {
  background: linear-gradient(135deg,
    rgba(22,48,88,0.85) 0%,
    rgba(31,67,115,0.70) 50%,
    rgba(53,152,149,0.45) 100%
  ) !important;
}
.hero-section::before {
  background: radial-gradient(circle, rgba(244,116,62,0.15) 0%, transparent 70%);
}
.hero-super-title {
  background: rgba(244,116,62,0.2);
  border-color: rgba(244,116,62,0.5);
  color: #F4743E;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.hero-overlay-title {
  font-family: var(--font-display);
  font-weight: 900;
}
.hero-overlay-subtitle { font-family: var(--font-body); font-weight: 400; }
.highlight { color: #F4743E !important; }
.hero-stat-card .stat-number { color: var(--color-primary); font-family: var(--font-display); }
.stat-stars { color: #F4743E; }

/* ---- TRUST BADGES in hero ---- */
.trust-badge {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

/* ---- SLIDER DOTS ---- */
.slider-dot.active { background: #F4743E; width: 24px; }

/* ---- SCROLL HINT ---- */
.hero-scroll-hint { color: rgba(255,255,255,0.6); }

/* ---- BUTTONS ---- */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  font-family: var(--font-body);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: white;
}
.btn-secondary {
  background: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-weight: 600;
}
.btn-secondary:hover {
  background: var(--color-secondary);
  color: white;
}
.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
  font-family: var(--font-body);
  font-weight: 700;
}
.btn-accent:hover {
  background: #e05f2a;
  border-color: #e05f2a;
  color: white;
}

/* ---- SECTION EYEBROW ---- */
.section-eyebrow {
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* ---- CARE MATCHER ---- */
.care-matcher { background: var(--color-white); }
.matcher-inner { background: var(--color-bg); border-color: var(--color-border); }
.matcher-question { font-family: var(--font-display); color: var(--color-primary); }
.matcher-btn { background: white; border-color: var(--color-border); color: var(--color-text); font-family: var(--font-body); }
.matcher-btn:hover, .matcher-btn.selected {
  border-color: var(--color-secondary);
  background: rgba(53,152,149,0.07);
  color: var(--color-secondary);
}
.progress-dot.active { background: var(--color-secondary); }
.progress-dot.done  { background: var(--color-accent); }
.matcher-label { color: var(--color-text-light); font-family: var(--font-body); }

/* ---- SERVICE CARDS ---- */
.service-card { background: white; border-color: var(--color-border); }
.service-card::before { background: var(--color-secondary); }
.service-card:hover { border-color: rgba(53,152,149,0.4); box-shadow: 0 8px 32px rgba(31,67,115,0.10); }
.service-card h3 { font-family: var(--font-display); color: var(--color-primary); }
.service-price { background: rgba(53,152,149,0.10); color: var(--color-secondary); font-family: var(--font-mono); }
.service-link { color: var(--color-secondary); font-family: var(--font-body); font-weight: 600; }
.service-link:hover { color: var(--color-primary); }

/* ---- ABOUT STRIP ---- */
.about-strip { background: white; }
.about-image-wrap::before { border-color: var(--color-accent); }
.about-image-wrap::after  { background: rgba(53,152,149,0.08); }
.about-exp-badge { background: var(--color-primary); }
.about-exp-badge .exp-number { color: #F4743E; font-family: var(--font-display); }
.about-exp-badge .exp-label  { color: rgba(255,255,255,0.75); }
.about-content .lead { color: var(--color-secondary); font-family: var(--font-body); font-weight: 500; }

/* ---- HOW IT WORKS ---- */
.how-it-works {
  background: linear-gradient(135deg, #163058 0%, #1F4373 100%);
}
.steps-grid::before {
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
}
.step-number { background: var(--color-secondary); font-family: var(--font-display); }
.step-item:nth-child(2) .step-number { background: var(--color-accent); color: white; }
.step-item:nth-child(3) .step-number { background: white; color: var(--color-primary); }
.step-item h3 { font-family: var(--font-display); }

/* ---- WHY CHOOSE US ---- */
.why-choose-overlay {
  background: linear-gradient(135deg, rgba(22,48,88,0.90), rgba(31,67,115,0.78));
}
.why-stat-number { color: #F4743E; font-family: var(--font-display); font-weight: 800; }
.why-stat-card { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.why-list li::before { background: #F4743E; color: white; }

/* ---- PRICE CALCULATOR ---- */
.price-calculator { background: white; }
.calc-wrap { background: var(--color-bg); border-color: var(--color-border); }
.calc-result { background: var(--color-primary); }
.calc-price-value { color: #F4743E; font-family: var(--font-mono); }
.calc-price-label { color: rgba(255,255,255,0.75); }
.calc-note { color: rgba(255,255,255,0.5); }
.calc-field select:focus { border-color: var(--color-secondary); }

/* ---- TEAM CARDS ---- */
.team-section { background: var(--color-surface); }
.team-card { background: white; border-color: var(--color-border); }
.team-photo { background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); }
.team-designation { color: var(--color-secondary); font-family: var(--font-body); font-weight: 600; }
.team-quals { color: var(--color-text-light); }
.team-exp { background: rgba(53,152,149,0.10); color: var(--color-secondary); font-family: var(--font-body); }
.video-trigger { background: rgba(244,116,62,0.92); color: white; }

/* ---- TESTIMONIALS ---- */
.testimonials-section { background: white; }
.testimonial-card { background: var(--color-bg); border-color: var(--color-border); }
.testimonial-card::before { color: var(--color-secondary); opacity: 0.18; }
.testimonial-stars { color: #F4743E; }
.author-avatar { background: var(--color-secondary); }
.author-name { color: var(--color-primary); font-family: var(--font-body); font-weight: 600; }

/* ---- GALLERY ---- */
.gallery-section { background: var(--color-bg); }
.gallery-item { background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); }

/* ---- BLOG CARDS ---- */
.blog-section { background: var(--color-surface); }
.blog-card { background: white; border-color: var(--color-border); }
.blog-thumb { background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); }
.blog-cat { background: rgba(53,152,149,0.10); color: var(--color-secondary); font-family: var(--font-body); font-weight: 600; }
.blog-card h3 a { color: var(--color-primary); font-family: var(--font-display); }
.blog-card h3 a:hover { color: var(--color-secondary); }
.blog-meta { color: var(--color-text-light); }

/* ---- BOOKING / CONTACT ---- */
.booking-section { background: white; }
.booking-form { background: var(--color-bg); border-color: var(--color-border); }
.form-group label { color: var(--color-primary); font-family: var(--font-body); font-weight: 600; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(53,152,149,0.12);
}
.contact-icon { background: rgba(53,152,149,0.10); }
.whatsapp-cta-box { background: linear-gradient(135deg, #25D366, #1da851); }

/* ---- PRICING PAGE ---- */
.pricing-table th { background: var(--color-primary); }
.pricing-table tr:hover td { background: rgba(53,152,149,0.05); }
.price-cell { color: var(--color-secondary); font-family: var(--font-mono); font-weight: 500; }
.pricing-note { background: rgba(53,152,149,0.08); border-color: rgba(53,152,149,0.2); }

/* ---- FAQ ---- */
.faq-item { background: white; border-color: var(--color-border); }
.faq-question { color: var(--color-primary); font-family: var(--font-body); font-weight: 600; }
.faq-question.open { color: var(--color-secondary); }

/* ---- PAGE HERO (inner pages) ---- */
.page-hero {
  background: linear-gradient(135deg, #163058, #1F4373);
}
.page-hero-overlay {
  background: linear-gradient(135deg, rgba(22,48,88,0.88), rgba(53,152,149,0.55));
}
.page-hero h1 { font-family: var(--font-display); color: white; font-weight: 900; }

/* ---- FOOTER ---- */
.site-footer { background: var(--color-dark); }
.footer-brand .logo-text { color: white; }
.footer-col h4 { color: white; font-family: var(--font-body); }
.footer-col ul li a { color: rgba(255,255,255,0.65); }
.footer-col ul li a:hover { color: #F4743E; }
.footer-legal a:hover { color: #F4743E; }
.social-link:hover { background: var(--color-secondary); }
.footer-bottom p { color: rgba(255,255,255,0.45); }

/* ---- MOBILE STICKY BAR ---- */
.mobile-sticky-bar { background: white; border-color: var(--color-border); }
.mobile-sticky-bar .btn-secondary {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* ---- WHATSAPP BUTTON COLOURS ---- */
.wa-float-tooltip { background: var(--color-primary); }
.wa-float-tooltip::after { border-left-color: var(--color-primary); }
.wa-popup-header { background: #25D366; }

/* ---- BACK TO TOP BUTTON ---- */
body > button[aria-label="Back to top"] {
  background: var(--color-primary) !important;
}

/* ---- BADGE / PILL ELEMENTS ---- */
.badge-primary { background: rgba(53,152,149,0.10); color: var(--color-secondary); }

/* ---- HERO STAT CARDS (no-image fallback) ---- */
.hero-stat-cards > div {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* ---- DECORATIVE ORANGE ACCENT CURVE (hero top-right corner) ---- */
.hero-section::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border: 30px solid #F4743E;
  border-radius: 50%;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* ---- NUMBER / MONO DATA ---- */
.hero-stat-card .stat-number,
.calc-price-value,
.price-cell {
  font-family: var(--font-mono);
}

/* ---- SECTION TITLE FONT ---- */
.section-title,
.hero-title,
.hero-overlay-title,
.matcher-question,
.page-hero h1,
.booking-info h3,
.about-content h2,
.why-choose-content h2 {
  font-family: var(--font-display);
}


/* ==============================================
   MOBILE STICKY BAR — 2 buttons only (Call + Book Now)
   WhatsApp removed — floating button handles it
   ============================================== */
.mobile-sticky-bar {
  display: none; /* hidden on desktop */
}

@media (max-width: 900px) {
  .mobile-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 997;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 10px;
    box-shadow: 0 -4px 20px rgba(31,67,115,0.10);
  }

  /* Each button takes exactly half the width */
  .mobile-sticky-bar .btn {
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 13px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  /* Call button — outlined navy */
  .mobile-sticky-bar .btn-secondary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
  }
  .mobile-sticky-bar .btn-secondary:hover {
    background: var(--color-primary);
    color: white;
  }

  /* Book Now button — solid navy */
  .mobile-sticky-bar .btn-primary {
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: white;
  }

  /* Body bottom padding so sticky bar doesn't cover content */
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  /* WhatsApp floating button — sits ABOVE the sticky bar */
  .wa-float-btn {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }

  /* WhatsApp popup also moves up */
  .wa-chat-popup {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: 320px !important;
  }
}

/* On desktop — hide sticky bar entirely, WhatsApp float at normal position */
@media (min-width: 901px) {
  .mobile-sticky-bar { display: none !important; }
  .wa-float-btn {
    bottom: 24px;
    right: 20px;
  }
}

/* =================================================================
   LOGO FIX — Constrain custom logo image on all screen sizes
   WordPress the_custom_logo() outputs full-size image by default
   ================================================================= */

/* Wrapper div that constrains the logo area */
.site-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  max-height: 68px;          /* matches header height */
  overflow: hidden;
  margin-right: 20px;
}

/* WordPress wraps custom logo in: <a class="custom-logo-link"><img class="custom-logo"></a> */
.site-logo-wrap .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;            /* removes inline gap below image */
  flex-shrink: 0;
}

/* The actual logo image — constrained height, auto width */
.site-logo-wrap .custom-logo,
.site-logo-wrap img,
.custom-logo-link img,
.custom-logo-link .custom-logo {
  height: 52px !important;   /* desktop logo height */
  width: auto !important;    /* maintain aspect ratio */
  max-width: 200px !important; /* prevent very wide logos */
  object-fit: contain;
  display: block;
}

/* Text logo fallback */
.site-logo-wrap .site-logo,
.site-logo-wrap .logo-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  text-decoration: none;
}

/* ---- TABLET 768–900px ---- */
@media (max-width: 900px) {
  .site-logo-wrap .custom-logo,
  .site-logo-wrap img,
  .custom-logo-link img {
    height: 44px !important;
    max-width: 160px !important;
  }
}

/* ---- MOBILE below 480px ---- */
@media (max-width: 480px) {
  .site-logo-wrap .custom-logo,
  .site-logo-wrap img,
  .custom-logo-link img {
    height: 38px !important;
    max-width: 140px !important;
  }
  .site-logo-wrap { margin-right: 10px; }
}

/* Also constrain via WordPress body class targeting */
body .site-header .custom-logo {
  height: 52px !important;
  width: auto !important;
  max-width: 200px !important;
}
@media (max-width: 900px) {
  body .site-header .custom-logo {
    height: 40px !important;
    max-width: 150px !important;
  }
}

/* =================================================================
   HEADER FINAL FIX — Logo sizes + Nav spacing
   Fixes:
   1. Mobile logo too small (was 38px — raised to 48px)
   2. Desktop nav items squished with no gaps (bullet showing)
   3. Nav ul/li list styles not reset
   ================================================================= */

/* ---- LOGO — correct sizes per breakpoint ---- */
/* Desktop: 56px — comfortable, visible, fits header */
.site-logo-wrap .custom-logo,
.site-logo-wrap img,
.custom-logo-link img,
.custom-logo-link .custom-logo,
body .site-header .custom-logo {
  height: 56px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
  display: block;
}

/* Tablet 768–900px */
@media (max-width: 900px) {
  .site-logo-wrap .custom-logo,
  .site-logo-wrap img,
  .custom-logo-link img,
  .custom-logo-link .custom-logo,
  body .site-header .custom-logo {
    height: 48px !important;
    max-width: 180px !important;
  }
}

/* Mobile below 480px — was 38px which was too small, now 44px */
@media (max-width: 480px) {
  .site-logo-wrap .custom-logo,
  .site-logo-wrap img,
  .custom-logo-link img,
  .custom-logo-link .custom-logo,
  body .site-header .custom-logo {
    height: 44px !important;
    max-width: 160px !important;
  }
  .site-logo-wrap { margin-right: 8px; }
}

/* ---- NAV — remove all list styles, fix spacing ---- */
/* Reset the ul that wp_nav_menu outputs */
.main-nav .nav-menu-list,
.main-nav ul {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
}

/* Remove any bullet/disc from li */
.main-nav li,
.main-nav .nav-menu-list li,
.main-nav ul li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}
.main-nav li::before,
.main-nav li::marker {
  display: none !important;
  content: none !important;
}

/* Nav link styling — proper padding for readability */
.main-nav li a,
.main-nav .nav-menu-list li a,
.main-nav ul li a {
  display: inline-flex !important;
  align-items: center;
  padding: 8px 11px !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: var(--color-primary) !important;
  font-family: var(--font-body) !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
  letter-spacing: 0 !important;
}
.main-nav li a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  color: var(--color-secondary) !important;
  background: rgba(53,152,149,0.09) !important;
}

/* ---- CTA buttons in nav ---- */
.nav-cta {
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  font-size: 0.82rem !important;
  padding: 9px 14px !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}
.btn-whatsapp.nav-cta {
  background: #25D366 !important;
  color: white !important;
  border-color: #25D366 !important;
}

/* ---- MOBILE NAV — full width stacked links ---- */
@media (max-width: 900px) {
  .main-nav .nav-menu-list,
  .main-nav ul {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .main-nav li a,
  .main-nav .nav-menu-list li a,
  .main-nav ul li a {
    padding: 13px 8px !important;
    font-size: 0.95rem !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    width: 100% !important;
    display: flex !important;
  }
  .nav-cta {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    font-size: 0.92rem !important;
    padding: 13px 20px !important;
  }
}

/* ---- Extra large screens — more space between nav items ---- */
@media (min-width: 1280px) {
  .main-nav li a,
  .main-nav ul li a {
    padding: 8px 13px !important;
    font-size: 0.88rem !important;
  }
}

/* =================================================================
   NAV BOOK BUTTON FIX — White text on navy background
   The Book a Caregiver button was dark text on dark bg (unreadable)
   ================================================================= */

/* Book button in nav — orange background, white text */
.main-nav .btn-primary.nav-cta,
a.btn-primary.nav-cta,
.nav-cta.btn-primary {
  background: var(--color-accent) !important;   /* orange #F4743E */
  color: #ffffff !important;
  border-color: var(--color-accent) !important;
  font-weight: 700 !important;
}
.main-nav .btn-primary.nav-cta:hover,
a.btn-primary.nav-cta:hover,
.nav-cta.btn-primary:hover {
  background: #e05f2a !important;   /* darker orange on hover */
  border-color: #e05f2a !important;
  color: #ffffff !important;
}

/* Mobile menu — Book button full width orange */
@media (max-width: 900px) {
  .main-nav .btn-primary.nav-cta,
  a.btn-primary.nav-cta,
  .nav-cta.btn-primary {
    background: var(--color-accent) !important;
    color: #ffffff !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 999px !important;
    margin-top: 8px !important;
  }
}

/* =================================================================
   TRUST BADGE FIX — clean single icon + text layout
   ================================================================= */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  white-space: nowrap;
}
.trust-badge-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  line-height: 1;
}

/* =================================================================
   GUARDIAN CARD SECTION — Mobile Fix
   Card stacks below text on mobile (was showing half-cut)
   ================================================================= */
.guardian-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .guardian-card-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Card visual goes below text on mobile */
  .guardian-card-grid > div:last-child {
    order: 2;
  }
}

/* Guardian enrollment modal — mobile full screen */
@media (max-width: 480px) {
  #guardianModal > div {
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #guardianModal {
    align-items: flex-end !important;
  }
}