/*
Theme Name: FrontlineAide Custom Theme
Theme URI: https://frontlineaide.com/
Author: FrontlineAide
Author URI: https://frontlineaide.com/
Description: A custom WordPress theme for FrontlineAide Home Care Services, inspired by VisitingAngels and ComfortKeepers designs.
Version: 6.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frontlineaide
*/

/* ===== CSS VARIABLES ===== */
:root {
  --color-primary: #1a5276;
  --color-primary-dark: #154360;
  --color-primary-light: #2c7da0;
  --color-accent: #d4a017;
  --color-accent-hover: #b88a0e;
  --color-accent-light: #f0c040;
  --color-teal: #0088a8;
  --color-teal-dark: #006b85;
  --color-white: #ffffff;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  --font-primary: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-heading: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-brand: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

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

html {
  font-size: 16px;
  scroll-padding-top: 100px;
}

@media (min-width: 769px) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  background-color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-sm);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
  margin-bottom: var(--spacing-sm);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

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

/* ===== UTILITY ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  width: 100%;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-primary);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-white);
  text-decoration: none;
}

.btn-secondary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-secondary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  text-decoration: none;
}

/* CTA Nav Button (Get Started) */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.65rem 1.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-accent) 0%, #c4922e 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(212, 160, 23, 0.4), 0 0 0 0 rgba(212, 160, 23, 0);
  transition: all 0.3s ease;
  font-family: var(--font-primary);
  white-space: nowrap;
  position: relative;
}

@media (min-width: 769px) {
  .btn-cta {
    animation: cta-pulse 3s ease-in-out infinite;
  }
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(212, 160, 23, 0.4), 0 0 0 0 rgba(212, 160, 23, 0); }
  50% { box-shadow: 0 2px 10px rgba(212, 160, 23, 0.4), 0 0 0 6px rgba(212, 160, 23, 0.1); }
}

.btn-cta:hover {
  background: linear-gradient(135deg, #c4922e 0%, #b8851a 100%);
  box-shadow: 0 4px 18px rgba(212, 160, 23, 0.55);
  transform: translateY(-2px);
  color: var(--color-white);
  text-decoration: none;
  animation: none;
}

.btn-cta svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.btn-cta:hover svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta,
  .hero-headline,
  .hero-description,
  .hero-cta-group,
  .hero-location {
    animation: none !important;
  }
  .hero-section::before {
    animation: none !important;
  }
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* ===== PAGE CONTENT WRAPPER ===== */
.page-content-wrapper {
  padding: var(--spacing-xxl) 0;
  min-height: 60vh;
}

/* ===== HEADER ===== */
.site-header {
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  /* No translate3d/backface-visibility — these force expensive GPU compositing on mobile */
}

.top-bar {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.45rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left {
  display: flex;
  align-items: center;
}

.top-bar-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-white);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.top-bar-phone-icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.top-bar-phone-label {
  color: rgba(255,255,255,0.7);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.top-bar-phone-number {
  font-weight: 600;
  letter-spacing: 0.03em;
}

.top-bar-phone:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.top-bar-phone:hover .top-bar-phone-number {
  color: var(--color-accent);
}

.top-bar-right {
  display: flex;
  align-items: center;
}

.top-bar-social {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.top-bar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255,255,255,0.75);
  transition: all 0.2s ease;
  background: rgba(255,255,255,0.08);
}

.top-bar-social a:hover {
  color: var(--color-accent);
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.main-header {
  padding: var(--spacing-sm) 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo img,
.site-logo .site-logo-img {
  height: 90px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

.mobile-logo-img {
  height: 65px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

.site-title {
  font-size: 1.85rem;
  font-family: var(--font-brand);
  color: var(--color-primary);
  margin: 0;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.8px;
  line-height: 1.1;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(30, 90, 142, 0.08);
  transition: text-shadow var(--transition-normal);
}

.site-logo a:hover .site-title {
  text-shadow: 0 2px 6px rgba(30, 90, 142, 0.15);
}

.site-title span {
  color: var(--color-accent);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.3px;
  position: relative;
}

/* Mobile nav panel: site-title inherits brand font */
.mobile-nav-header .site-title {
  font-size: 1.65rem;
}

/* ===== NAVIGATION ===== */
.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
}

.main-navigation a {
  color: var(--color-gray-700);
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
}

.main-navigation a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.main-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-normal);
}

.main-navigation a:hover::after {
  width: 100%;
}

.nav-cta {
  margin-left: var(--spacing-lg);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-primary);
  margin: 5px 0;
  transition: var(--transition-fast);
}

/* ===== HERO SECTION (Redesigned) ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero-section {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: 100px 0 90px;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(135deg, rgba(26, 82, 118, 0.90) 0%, rgba(26, 82, 118, 0.78) 50%, rgba(44, 125, 160, 0.55) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
}

/* Disable backdrop-filter on hero for mobile performance */
@media (max-width: 768px) {
  .hero-section::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(135deg, rgba(26, 82, 118, 0.92) 0%, rgba(26, 82, 118, 0.85) 50%, rgba(44, 125, 160, 0.70) 100%);
  }
}




/* ===== Hero Content (Left Column) ===== */
.hero-content {
  max-width: 600px;
  position: relative;
  z-index: 2;
  isolation: isolate;
}


/* Hero Headline — 3-line structure */
.hero-headline {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  color: #ffffff;
  margin-bottom: 24px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-headline-line {
  display: block;
}

.hero-headline-line-2 {
  color: var(--color-accent-light, #f0c040);
}

.hero-headline-line-3 {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

/* Hero Description */
.hero-description {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 36px;
  line-height: 1.75;
  max-width: 520px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 0.8s ease-out 0.35s both;
}

/* Hero CTA Group */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #d4a017;
  color: #fff;
  border: none;
  padding: 15px 34px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 18px rgba(212, 160, 23, 0.4);
  transition: all 0.3s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  font-family: var(--font-primary);
}

.hero-cta-primary:hover {
  background-color: #b88a0e;
  color: #fff;
  box-shadow: 0 6px 24px rgba(212, 160, 23, 0.55);
  transform: translateY(-2px);
  text-decoration: none;
}

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  background: transparent;
  font-family: var(--font-primary);
}

.hero-cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  text-decoration: none;
}

.hero-cta-secondary svg {
  transition: transform 0.3s ease;
}

.hero-cta-secondary:hover svg {
  transform: translateX(3px);
}

/* Hero Location */
.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  animation: fadeInUp 0.8s ease-out 0.65s both;
}

.hero-location-diamond {
  color: var(--color-accent);
  opacity: 0.6;
  font-size: 0.8rem;
}




.location-search {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  -webkit-backdrop-filter: blur(10px);
}

/* Disable backdrop-filter on mobile for scroll performance */
@media (max-width: 768px) {
  .location-search {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.location-search-label {
  color: var(--color-white);
  font-size: 1rem;
  margin-bottom: var(--spacing-sm);
  display: block;
}

.location-search-form {
  display: flex;
  gap: 0;
}

.location-search-input {
  flex: 1;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  outline: none;
  font-family: var(--font-primary);
}

.location-search-input::placeholder {
  color: var(--color-gray-500);
}

.location-search-btn {
  padding: 1rem 1.5rem;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-weight: 600;
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  font-family: var(--font-primary);
}

.location-search-btn:hover {
  background-color: var(--color-accent-hover);
}

/* ===== HERO NOTE (legacy, kept for backward compat) ===== */
.hero-note {
  color: var(--color-gray-500);
  font-size: 0.85rem;
  opacity: 1;
}

.hero-note a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ===== Request Care Modal ===== */
.care-modal-overlay{display:none;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);z-index:99999;padding:20px;animation:modalFadeIn .3s ease-out}
.care-modal-overlay[style*="flex"]{display:flex!important}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
.care-modal{background:#fff;border-radius:16px;max-width:540px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 60px rgba(0,0,0,.3);animation:modalSlideUp .35s ease-out;position:relative}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.care-modal-header{padding:32px 32px 0;position:relative}
.care-modal-header h2{font-family:'Playfair Display',Georgia,serif;font-size:1.75rem;font-weight:800;color:#1a5276;margin:0 0 8px}
.care-modal-subtitle{font-size:.95rem;color:#6c757d;margin:0 0 24px;line-height:1.5}
.care-modal-close{position:absolute;top:24px;right:24px;width:36px;height:36px;border:none;background:#f0f2f5;border-radius:50%;font-size:1.3rem;color:#495057;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;line-height:1}
.care-modal-close:hover{background:#e0e3e8;color:#1a5276}
.care-modal-form{padding:0 32px 32px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.care-modal-field{display:flex;flex-direction:column;gap:6px}
.care-modal-field-full{grid-column:1/-1}
.care-modal-field label{font-size:.85rem;font-weight:600;color:#343a40}
.care-modal-field input,.care-modal-field select,.care-modal-field textarea{padding:12px 14px;border:1.5px solid #dee2e6;border-radius:8px;font-size:.95rem;font-family:'Open Sans',sans-serif;color:#212529;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.care-modal-field input:focus,.care-modal-field select:focus,.care-modal-field textarea:focus{outline:none;border-color:#1a5276;box-shadow:0 0 0 3px rgba(26,82,118,.1)}
.care-modal-field input::placeholder,.care-modal-field textarea::placeholder{color:#adb5bd}
.care-modal-field textarea{resize:vertical;min-height:100px}
.care-modal-submit-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.care-modal-submit-btn{padding:14px 40px;background:#d4a017;color:#fff;border:none;border-radius:50px;font-size:1rem;font-weight:700;font-family:'Open Sans',sans-serif;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(212,160,23,.3)}
.care-modal-submit-btn:hover{background:#b88a0e;box-shadow:0 6px 20px rgba(212,160,23,.45);transform:translateY(-1px)}
.care-modal-privacy{font-size:.78rem;color:#adb5bd}
@media(max-width:600px){.care-modal{border-radius:12px;max-height:95vh}.care-modal-header{padding:24px 20px 0}.care-modal-header h2{font-size:1.4rem}.care-modal-form{padding:0 20px 24px;grid-template-columns:1fr;gap:14px}.care-modal-close{top:16px;right:16px}}

/* ===== SERVICES SECTION HEADER ===== */
.services-section {
  padding: 80px 0;
  background-color: #f8f9fa;
}

.services-section-header {
  position: relative;
}

.services-section-badge {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.12) 0%, rgba(212, 160, 23, 0.06) 100%);
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 50px;
  border: 1px solid rgba(212, 160, 23, 0.2);
  margin-bottom: 16px;
}

.services-section-header .section-title {
  color: var(--color-primary);
}

.services-section-header .section-description {
  max-width: 680px;
  margin: 0 auto;
}

/* ===== TRUSTED ===== */
.trusted-section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-white);
}

.trusted-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
}

.trusted-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.trusted-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.trusted-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.trusted-text h2 {
  color: var(--color-primary);
  font-size: 2.25rem;
  margin-bottom: var(--spacing-md);
}

.trusted-text p {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
}

.trusted-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ===== SECTION HEADERS (shared) ===== */
.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-xxl);
}

.section-title {
  font-size: 2.5rem;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-md);
}

.section-description {
  font-size: 1.125rem;
  color: var(--color-gray-600);
  line-height: 1.7;
}

/* ===== SERVICES ===== */
.services-section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-gray-100);
}

.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
}

.services-grid .service-card {
  flex: 0 0 calc(33.333% - var(--spacing-lg) * 2 / 3);
  max-width: calc(33.333% - var(--spacing-lg) * 2 / 3);
}

.service-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-normal);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
}

.service-card:hover {
  box-shadow: 0 12px 35px rgba(30, 90, 142, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-6px);
  text-decoration: none;
  color: inherit;
  border-color: var(--color-accent);
}

.service-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-card-image {
  transform: scale(1.03);
}

.service-card-content {
  padding: var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card-title {
  font-size: 1.25rem;
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  transition: color var(--transition-normal);
}

.service-card:hover .service-card-title {
  color: var(--color-primary-dark);
}

.service-card-description {
  color: var(--color-gray-600);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
  flex: 1;
}

.service-card-link {
  color: var(--color-teal);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-normal);
  align-self: flex-start;
}

.service-card-link::after {
  content: '→';
  font-size: 1rem;
  transition: transform var(--transition-normal);
}

.service-card:hover .service-card-link {
  color: var(--color-teal-dark);
  border-bottom-color: var(--color-teal);
}

.service-card:hover .service-card-link::after {
  transform: translateX(4px);
}

/* ===== FEATURES ===== */
.features-section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-white);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.features-grid-4col {
  grid-template-columns: repeat(4, 1fr);
}

.feature-item {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(30, 90, 142, 0.02) 0%, rgba(30, 90, 142, 0.05) 100%);
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid var(--color-teal);
  transition: all var(--transition-normal);
  position: relative;
}

.feature-item:hover {
  background: linear-gradient(180deg, rgba(30, 90, 142, 0.04) 0%, rgba(30, 90, 142, 0.08) 100%);
  box-shadow: 0 8px 25px rgba(30, 90, 142, 0.12);
  transform: translateY(-4px);
  border-left-color: var(--color-accent);
}

.feature-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(30, 90, 142, 0.25);
  transition: all var(--transition-normal);
}

.feature-item:hover .feature-icon {
  background: linear-gradient(135deg, var(--color-accent) 0%, #c4922e 100%);
  box-shadow: 0 6px 18px rgba(212, 160, 23, 0.35);
  transform: scale(1.08);
}

.feature-icon svg {
  width: 32px;
  height: 32px;
}

.feature-title {
  font-size: 1.125rem;
  font-family: var(--font-heading);
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-xs);
  transition: color var(--transition-normal);
}

.feature-item:hover .feature-title {
  color: var(--color-primary);
}

.feature-description {
  font-size: 0.95rem;
  color: var(--color-gray-600);
  line-height: 1.65;
}

/* ===== NEW TO HOME CARE? START HERE! ===== */
.getting-started-section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.getting-started-section .section-title {
  color: var(--color-accent);
}

.getting-started-section .section-description {
  color: rgba(255, 255, 255, 0.9);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xxl);
}

.step-card {
  display: flex;
  gap: var(--spacing-lg);
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color var(--transition-normal);
}

.step-card:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.step-number {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

.step-content h3 {
  color: var(--color-white);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.step-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ===== GET STARTED PAGE — STEP-BY-STEP ===== */
.gs-steps-section {
  padding: 5rem 0;
}

.gs-steps-header {
  text-align: center;
  margin-bottom: 4rem;
}

.gs-steps-header .section-title {
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.gs-steps-header p {
  color: var(--color-gray-600);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

.gs-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* Horizontal connector line between steps */
.gs-steps-grid::before {
  content: '';
  position: absolute;
  top: 48px;
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 3px;
  background: linear-gradient(90deg, #d4a843 0%, #0088a8 33%, #1e5a8e 66%, #d4a843 100%);
  border-radius: 2px;
  z-index: 0;
}

.gs-step-item {
  position: relative;
  z-index: 1;
  text-align: center;
}

.gs-step-badge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gs-step-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.gs-step-badge svg {
  width: 40px;
  height: 40px;
}

.gs-step-badge::after {
  content: attr(data-step);
  position: absolute;
  bottom: -8px;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 2px solid var(--color-primary);
}

.gs-step-item h3 {
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
}

.gs-step-item p {
  color: var(--color-gray-600);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* ===== GET STARTED PAGE — EXPECTATIONS ===== */
.gs-expect-section {
  padding: 5rem 0;
  background-color: var(--color-gray-100);
}

.gs-expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.gs-expect-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gs-expect-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.gs-expect-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-expect-icon svg {
  width: 24px;
  height: 24px;
}

.gs-expect-card h3 {
  color: var(--color-primary);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.gs-expect-card p {
  color: var(--color-gray-600);
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0;
}

/* ===== GET STARTED PAGE — CTA ===== */
.gs-cta-section {
  padding: 5rem 0;
  text-align: center;
  background: linear-gradient(135deg, #0088a8 0%, #1e5a8e 100%);
  color: #fff;
}

.gs-cta-section h2 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.gs-cta-section p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.gs-cta-section p a {
  color: #fff;
  text-decoration: underline;
  opacity: 1;
}

.gs-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ===== GET STARTED PAGE — TRUST STATS ===== */
.gs-trust-section {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 3.75rem 0;
}

.gs-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.gs-trust-stat .gs-trust-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.1;
}

.gs-trust-stat .gs-trust-label {
  font-size: 0.95rem;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ===== GET STARTED PAGE — HERO ===== */
.gs-hero {
  background: linear-gradient(135deg, #1e5a8e 0%, #163f63 100%);
  color: var(--color-white);
  padding: 5rem 2rem;
  text-align: center;
}

.gs-hero h1 {
  color: var(--color-accent);
  font-size: 2.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.gs-hero p {
  font-size: 1.15rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive: Get Started page */
@media (max-width: 768px) {
  .gs-hero h1 {
    font-size: 2rem;
  }

  .gs-steps-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .gs-steps-grid::before {
    display: none;
  }

  .gs-step-badge {
    width: 80px;
    height: 80px;
  }

  .gs-expect-grid {
    grid-template-columns: 1fr;
  }

  .gs-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gs-trust-stat .gs-trust-number {
    font-size: 2.25rem;
  }
}

@media (max-width: 480px) {
  .gs-hero {
    padding: 3rem 1.5rem;
  }

  .gs-hero h1 {
    font-size: 1.65rem;
  }

  .gs-hero p {
    font-size: 1rem;
  }

  .gs-steps-section,
  .gs-expect-section,
  .gs-cta-section {
    padding: 3rem 0;
  }

  .gs-trust-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.getting-started-cta {
  text-align: center;
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.getting-started-cta .btn-outline {
  border-color: var(--color-white);
  color: var(--color-white);
}

.getting-started-cta .btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  text-decoration: none;
}

/* ===== NAVIGATING SENIOR CARE: RESOURCES ===== */
.resources-section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-gray-100);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xxl);
}

.resource-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

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

.resource-card-icon {
  width: 56px;
  height: 56px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  flex-shrink: 0;
}

.resource-card-title {
  font-size: 1.125rem;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
}

.resource-card-description {
  font-size: 0.95rem;
  color: var(--color-gray-600);
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: var(--spacing-md);
}

.resource-card-link {
  color: var(--color-teal);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.resource-card-link:hover {
  color: var(--color-teal-dark);
  text-decoration: underline;
}

.resources-cta {
  text-align: center;
}

/* ===== TESTIMONIALS SECTION ===== */
.testimonials-section {
    padding: 80px 0;
    background-color: #f8f9fa;
    scroll-margin-top: 100px;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}
.testimonial-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
}
.testimonial-quote p {
    color: #495057;
    font-size: 15px;
    line-height: 1.8;
    font-style: italic;
    flex: 1;
    margin: 0 0 20px;
}
.testimonial-quote p::before {
    content: '\201C';
    font-size: 2rem;
    color: #1e5a8e;
    font-weight: 700;
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: 4px;
}
.testimonial-quote p::after {
    content: '\201D';
    font-size: 2rem;
    color: #1e5a8e;
    font-weight: 700;
    line-height: 0;
    vertical-align: -0.3em;
    margin-left: 4px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}
.testimonial-avatar {
    width: 44px;
    height: 44px;
    background: #e8f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.testimonial-name {
    display: block;
    color: #1e5a8e;
    font-size: 15px;
    font-weight: 700;
}
.testimonial-role {
    display: block;
    color: #6c757d;
    font-size: 0.9rem;
}
@media (max-width: 768px) {
    .testimonials-section { padding: 60px 0; }
    .testimonials-grid { grid-template-columns: 1fr; }
}

/* ===== COMPACT TESTIMONIALS ===== */
.testimonials-compact {
  padding: 60px 0;
}

.testimonials-compact-header {
  text-align: center;
  margin-bottom: 32px;
}

.testimonials-compact-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  padding: 12px 28px;
  border-radius: 50px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.testimonials-compact-stars-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.testimonials-compact-label {
  margin-left: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gray-700);
  white-space: nowrap;
}

.testimonials-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.testimonial-card-compact {
  background: #fff;
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border-left: 3px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.testimonial-card-compact:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: none;
}

.testimonial-card-compact .testimonial-quote p {
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.testimonial-card-compact .testimonial-quote p::before,
.testimonial-card-compact .testimonial-quote p::after {
  font-size: 1.5rem;
}

.testimonial-card-compact .testimonial-author {
  padding-top: 0;
  border-top: none;
  gap: 8px;
  margin-top: auto;
}

.testimonial-card-compact .testimonial-author svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

.testimonial-card-compact .testimonial-name {
  font-size: 0.85rem;
}

.testimonial-card-compact .testimonial-role {
  font-size: 0.78rem;
}

@media (max-width: 768px) {
  .testimonials-compact { padding: 40px 0; }
  .testimonials-grid-compact { grid-template-columns: 1fr; }
  .testimonials-compact-stars {
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 12px;
    align-items: center;
    text-align: center;
  }
  .testimonials-compact-stars-row {
    gap: 3px;
  }
  .testimonials-compact-stars-row svg {
    width: 16px;
    height: 16px;
  }
  .testimonials-compact-label {
    margin-left: 0;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .testimonials-compact { padding: 32px 0; }
  .testimonials-compact-stars { padding: 12px 18px; }
  .testimonials-compact-stars-row svg { width: 14px; height: 14px; }
  .testimonials-compact-label { font-size: 0.78rem; }
}

/* ===== HOME CARE JOB OPPORTUNITIES ===== */
.careers-section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-white);
}

.careers-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
}

.careers-text .section-title {
  text-align: left;
  margin-bottom: var(--spacing-md);
}

.careers-text p {
  font-size: 1.05rem;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

.careers-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: var(--spacing-lg) 0;
}

.career-benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-gray-800);
}

.career-benefit-item svg {
  color: var(--color-teal);
  flex-shrink: 0;
}

.careers-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.careers-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.careers-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}

/* ===== CONTACT US ===== */
.contact-section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-gray-100);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--spacing-xxl);
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.contact-info-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-label {
  font-size: 0.8rem;
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.contact-info-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-gray-800);
  text-decoration: none;
}

a.contact-info-value:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.contact-info-note {
  font-size: 0.85rem;
  color: var(--color-gray-500);
  margin-bottom: 0;
}

.contact-form-wrapper {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
}

.contact-form-title {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 0.375rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  outline: none;
  font-family: var(--font-primary);
  color: var(--color-gray-800);
  transition: border-color var(--transition-fast);
  background-color: var(--color-white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* ===== CTA ===== */
.cta-section {
  padding: var(--spacing-xxl) 0;
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
  text-align: center;
}

.cta-title {
  font-size: 2.5rem;
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
}

.cta-description {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-lg);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn-primary {
  background-color: var(--color-white);
  color: var(--color-teal);
  padding: 1rem 2rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
  display: inline-block;
  font-family: var(--font-primary);
}

.cta-btn-primary:hover {
  background-color: var(--color-gray-100);
  text-decoration: none;
  color: var(--color-teal-dark);
}

.cta-btn-secondary {
  background-color: transparent;
  color: var(--color-white);
  padding: 1rem 2rem;
  font-weight: 600;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
  display: inline-block;
  font-family: var(--font-primary);
}

.cta-btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-teal);
  text-decoration: none;
}

/* ===== FOOTER ===== */
.site-footer {
  background-color: var(--color-gray-800);
  color: var(--color-gray-300);
  padding: var(--spacing-xxl) 0 var(--spacing-lg);
}

.footer-content {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: var(--spacing-xxl);
  margin-bottom: var(--spacing-xxl);
}

.footer-brand {
  max-width: 380px;
}

.footer-logo {
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}

.footer-name {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  font-family: var(--font-heading);
}

.footer-name-accent {
  color: var(--color-accent);
}

.footer-tagline {
  color: var(--color-gray-300);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.footer-description {
  font-size: 0.95rem;
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
}

/* Footer Contact Info */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: var(--spacing-lg);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--color-gray-300);
}

.footer-contact-item svg {
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0.85;
}

.footer-contact-item a {
  color: var(--color-gray-300);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-contact-item a:hover {
  color: var(--color-accent);
}

/* Footer Trust Badges */
.footer-badges {
  display: flex;
  gap: 0.75rem;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  background-color: rgba(212, 160, 23, 0.1);
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  letter-spacing: 0.3px;
}

.footer-badge svg {
  color: var(--color-accent);
}

.footer-social {
  display: flex;
  gap: var(--spacing-sm);
}

.footer-social a {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background-color: var(--color-accent);
  text-decoration: none;
}

.footer-column h4 {
  color: var(--color-white);
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: var(--spacing-xs);
}

.footer-column a {
  color: var(--color-gray-300);
  font-size: 0.95rem;
  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: var(--color-gray-300);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  color: var(--color-gray-300);
}

.footer-bottom a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* ===== WORDPRESS SPECIFIC ===== */
.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  text-align: center;
  padding: var(--spacing-xs);
}

.alignleft {
  float: left;
  margin-right: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.alignright {
  float: right;
  margin-left: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.aligncenter {
  display: block;
  margin: 0 auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Entry styles */
.entry-header {
  margin-bottom: var(--spacing-lg);
}

.entry-title {
  margin-bottom: 0.5rem;
}

.entry-title a {
  color: var(--color-gray-800);
}

.entry-title a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.entry-meta {
  margin-top: 0.5rem;
}

.entry-content p {
  margin-bottom: var(--spacing-md);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.posts-grid article {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-normal);
}

.posts-grid article:hover {
  box-shadow: var(--shadow-md);
}

.posts-grid .entry-content {
  padding: var(--spacing-lg);
}

/* Page entry content */
.page-entry-header {
  margin-bottom: var(--spacing-lg);
}

.page-entry-title {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.page-entry-content {
  line-height: 1.8;
}

.page-entry-content h2 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
}

.page-entry-content h3 {
  margin-top: var(--spacing-lg);
  margin-bottom: 0.75rem;
}

.page-entry-content ul,
.page-entry-content ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-xl);
}

.page-entry-content li {
  margin-bottom: 0.5rem;
}

.page-entry-content img {
  border-radius: var(--radius-md);
  margin: var(--spacing-md) 0;
}

.post-thumbnail {
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.entry-footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-gray-200);
}

.post-tags {
  font-size: 0.9rem;
  color: var(--color-gray-600);
}

.post-tags strong {
  color: var(--color-gray-800);
}

.post-categories {
  margin-left: var(--spacing-sm);
}

/* Search form */
.search-form {
  display: flex;
  gap: 0;
  max-width: 400px;
}

.search-form .search-field {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  outline: none;
  font-family: var(--font-primary);
  font-size: 1rem;
}

.search-form .search-field:focus {
  border-color: var(--color-primary);
}

.search-form .search-submit {
  padding: 0.875rem 1.5rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-form .search-submit:hover {
  background-color: var(--color-primary-dark);
}

/* ===== ELEMENTOR COMPATIBILITY ===== */
/* These rules ensure Elementor content displays correctly within the theme */

/* Remove padding/margin conflicts for Elementor pages */
.elementor-page .page-content-wrapper {
  padding: 0;
}

.elementor-page .page-content-wrapper .container {
  max-width: 100%;
  padding: 0;
}

.elementor-section-wrap {
  width: 100%;
}

/* Fix: Ensure Elementor full-width layouts work */
body.elementor-full-width-page .site-content,
body.elementor-canvas-page .site-content {
  width: 100%;
  max-width: 100%;
}

/* Fix: Elementor editor mode - prevent theme header from overlapping */
body.elementor-edit-mode .site-header {
  z-index: 9999;
}

/* Fix: Elementor sections need to be full-width within page content */
.elementor-page .site-main .elementor-section {
  width: 100%;
}

/* Fix: Ensure Elementor widgets aren't constrained by theme container */
.elementor-page .elementor-widget-wrap {
  max-width: 100%;
}

/* Fix: Remove theme heading styles from Elementor headings */
.elementor-page .page-entry-header {
  display: none;
}

.elementor-page .page-entry-title {
  display: none;
}

/* Fix: Ensure Elementor preview renders correctly */
body.elementor-preview-mode .elementor-element {
  visibility: visible !important;
}

/* Fix: Full-width page template */
body.elementor-full-width-page {
  overflow-x: hidden;
}

/* Fix: Canvas page template - remove all theme styling */
body.elementor-canvas-page .site-header,
body.elementor-canvas-page .site-footer,
body.elementor-canvas-page .top-bar {
  display: none;
}

/* Front page specific - Elementor content */
.elementor-front-page .container {
  max-width: 100%;
  padding: 0;
}

.elementor-front-page .page-content-wrapper {
  padding: 0;
}

/* ===== GUTENBERG BLOCK EDITOR STYLES ===== */

/* Block width helpers */
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.wp-block-group.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Block headings use theme font */
.wp-block-heading,
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3,
.wp-block-heading h4 {
  font-family: var(--font-heading);
  color: var(--color-gray-800);
}

/* Block paragraphs use theme font */
.wp-block-paragraph {
  font-family: var(--font-primary);
  line-height: 1.8;
  color: var(--color-gray-700);
}

/* Block buttons match theme buttons */
.wp-block-button__link {
  font-family: var(--font-primary);
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.875rem 1.5rem;
  transition: all var(--transition-normal);
}

.wp-block-button__link:hover {
  text-decoration: none !important;
}

/* Columns - no gap issues */
.wp-block-columns {
  gap: 2rem;
}

.wp-block-column {
  flex-grow: 1;
}

/* Block separator */
.wp-block-separator {
  border-color: var(--color-gray-300);
}

.wp-block-separator.is-style-wide {
  border-bottom-width: 2px;
}

/* Block quote */
.wp-block-quote {
  border-left: 4px solid var(--color-primary);
  padding: 1rem 0 1rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--color-gray-600);
}

.wp-block-quote cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-gray-500);
}

/* Block image / figure */
.wp-block-image figcaption {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  text-align: center;
}

/* Block table */
.wp-block-table {
  border-collapse: collapse;
  width: 100%;
}

.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--color-gray-300);
  padding: 0.75rem 1rem;
}

.wp-block-table th {
  background-color: var(--color-gray-100);
  font-weight: 600;
  color: var(--color-gray-800);
}

/* Block lists */
.wp-block-list li {
  margin-bottom: 0.5rem;
}

/* Block file */
.wp-block-file {
  margin-bottom: 1.5rem;
}

.wp-block-file__button {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

/* Block search */
.wp-block-search__button {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-weight: 600;
  cursor: pointer;
}

/* Block code */
.wp-block-code {
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-family: monospace;
}

/* Block media-text */
.wp-block-media-text {
  margin-bottom: 1.5rem;
}

.wp-block-media-text h2 {
  margin-top: 0;
}

/* Block pullquote */
.wp-block-pullquote {
  border-left: 4px solid var(--color-accent);
  padding: 1rem 0 1rem 1.5rem;
}

.wp-block-pullquote cite {
  color: var(--color-gray-500);
}

/* Block group (container) with background */
.wp-block-group.has-background {
  padding: 2rem;
}

/* Block cover */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3 {
  color: var(--color-white);
}

/* Block spacer */
.wp-block-spacer {
  display: block;
}

/* Block alerts */
.wp-block-alert {
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

/* ===== FRONT PAGE - GUTENBERG CONTENT ===== */
/* When the front page is built with Gutenberg, remove padding constraint */
.front-page .site-main {
  /* Full width content for Gutenberg blocks */
}

.front-page .site-main .wp-block-group.alignfull,
.front-page .site-main .wp-block-cover.alignfull {
  /* Ensure full-width blocks extend properly */
}

/* ===== HAMBURGER MENU ANIMATION ===== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  margin: 5px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Disable backdrop-filter on mobile nav overlay for performance */
@media (max-width: 768px) {
  .mobile-nav-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ===== MOBILE NAV PANEL ===== */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.mobile-nav-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 360px;
  height: 100%;
  background-color: var(--color-white);
  z-index: 2001;
  transform: translateX(0);
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
}

.mobile-nav-panel.active {
  right: 0;
}

.mobile-nav-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-gray-700);
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-close:hover {
  color: var(--color-primary);
}

.mobile-nav-header {
  padding: 2rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
}

.mobile-nav-menu {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.mobile-nav-menu li {
  border-bottom: 1px solid var(--color-gray-100);
}

.mobile-nav-menu a {
  display: block;
  padding: 1rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-gray-700);
  text-decoration: none;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.mobile-nav-menu a:hover,
.mobile-nav-menu a:active {
  color: var(--color-primary);
  background-color: var(--color-gray-100);
}

/* Mobile sub-menu */
.mobile-nav-menu .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: var(--color-gray-100);
  display: none;
}

.mobile-nav-menu .sub-menu li {
  border-bottom: 1px solid var(--color-gray-200);
}

.mobile-nav-menu .sub-menu a {
  padding-left: 2.5rem;
  font-size: 0.95rem;
}

.mobile-nav-menu .menu-item-has-children {
  position: relative;
}

.mobile-submenu-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--color-gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-submenu-toggle svg {
  transition: transform 0.2s ease;
}

.mobile-submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-nav-actions {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-mobile-call {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-mobile-contact {
  width: 100%;
  text-align: center;
}

.btn-mobile-get-started {
  width: 100%;
  text-align: center;
  justify-content: center;
  animation: none;
}

/* ===== MOBILE STICKY CTA BAR ===== */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 999;
  padding: 0;
  border-top: 2px solid var(--color-accent);
}

.mobile-sticky-cta a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-cta-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  background-color: var(--color-gray-100);
}

.mobile-cta-action {
  display: block;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-accent);
  letter-spacing: 0.02em;
}

.mobile-cta-action:hover,
.mobile-cta-action:active {
  background-color: var(--color-accent-hover);
  color: var(--color-white);
  text-decoration: none;
}

/* ===== BLOCK STYLE CUSTOMIZATIONS ===== */
/* CTA Gold button style */
.is-style-cta-gold .wp-block-button__link {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  border-color: var(--color-accent) !important;
}

/* CTA Teal button style */
.is-style-cta-teal .wp-block-button__link {
  background-color: var(--color-teal) !important;
  color: var(--color-white) !important;
  border-color: var(--color-teal) !important;
}

/* Pill shape button style */
.is-style-pill .wp-block-button__link {
  border-radius: 50px !important;
}

/* Large button style */
.is-style-large .wp-block-button__link {
  padding: 1rem 2.5rem !important;
  font-size: 1.125rem !important;
}

/* Card shadow group style */
.is-style-card-shadow {
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

/* Section padding group style */
.is-style-section-padding {
  padding: 4rem 0 !important;
}

/* Testimonial quote style */
.is-style-testimonial {
  border-left: none !important;
  background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%) !important;
  padding: 2rem !important;
  border-radius: var(--radius-lg) !important;
  text-align: center;
}

/* Cards grid column style */
.is-style-cards-grid .wp-block-column {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

/* Service card block */
.service-card-block {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-accent);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.service-card-block:hover {
  box-shadow: 0 12px 35px rgba(30, 90, 142, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

/* Team card block */
.team-card-block {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

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

/* ===== Tablet: 1024px and below ===== */
@media (max-width: 1024px) {
  .hero-section {
    padding: 80px 0 70px;
    min-height: 70vh;
  }

  .hero-headline {
    font-size: 2.75rem;
  }

  .services-grid .service-card {
    flex: 0 0 calc(50% - var(--spacing-lg) / 2);
    max-width: calc(50% - var(--spacing-lg) / 2);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-image-container {
    width: 50%;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .careers-content {
    grid-template-columns: 1fr;
  }

  .careers-image {
    order: -1;
    max-height: 300px;
  }

  .careers-image img {
    min-height: auto;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Gutenberg responsive columns */
  .wp-block-columns {
    flex-wrap: wrap;
  }

  .wp-block-columns .wp-block-column {
    flex-basis: 100% !important;
  }

  .wp-block-columns.cols-2 .wp-block-column,
  .wp-block-columns:has(> :nth-child(2):last-child) .wp-block-column {
    flex-basis: calc(50% - 1rem) !important;
  }
}

/* ===== Mobile: 768px and below ===== */
@media (max-width: 768px) {
  /* Show hamburger and hide desktop nav */
  .menu-toggle {
    display: block;
  }

  .main-navigation .nav-menu {
    display: none !important;
  }

  .nav-cta {
    display: none;
  }

  /* Top bar: stack vertically */
  .top-bar-content {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }

  .top-bar {
    padding: 0.4rem 0;
  }

  .top-bar-left {
    justify-content: center;
  }

  .top-bar-phone {
    font-size: 0.85rem;
    gap: 0.3rem;
  }

  .top-bar-phone-label {
    font-size: 0.8rem;
  }

  .top-bar-phone-number {
    font-size: 0.85rem;
  }

  .top-bar-right {
    justify-content: center;
  }

  .top-bar-social {
    gap: 0.3rem;
  }

  .top-bar-social a {
    width: 26px;
    height: 26px;
  }

  .top-bar-social a svg {
    width: 13px;
    height: 13px;
  }

  /* Header: lightweight on mobile, no GPU tricks */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    will-change: auto;
  }

  .main-header {
    padding: 0.625rem 0;
  }

  .site-title {
    font-size: 1.5rem;
    letter-spacing: 0.5px;
  }

  .site-logo img,
  .site-logo .site-logo-img {
    height: 70px;
    max-width: 250px;
  }

  .mobile-logo-img {
    height: 55px;
    max-width: 200px;
  }

  /* Hero section mobile */
  .hero-section {
    padding: 70px 0 60px;
    min-height: 55vh;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
    padding: 0 8px;
  }

  .hero-headline {
    font-size: 2.25rem;
    line-height: 1.15;
  }

  .hero-description {
    font-size: 1rem;
    margin-bottom: 28px;
    max-width: 100%;
    padding: 0 4px;
  }

  .hero-cta-group {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100%;
    max-width: 320px;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .hero-location {
    justify-content: center;
    font-size: 0.85rem;
  }

  .location-search {
    padding: var(--spacing-md);
  }

  .location-search-form {
    flex-direction: column;
  }

  .location-search-input {
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    padding: 0.875rem 1rem;
    font-size: 16px; /* Prevent iOS zoom */
  }

  .location-search-btn {
    border-radius: var(--radius-md);
    padding: 0.875rem 1.25rem;
    font-size: 16px;
  }

  .hero-note {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    opacity: 1;
  }

  /* Performance: skip rendering for off-screen sections on mobile */
  .services-section,
  .features-section,
  .getting-started-section,
  .resources-section,
  .testimonials-section,
  .careers-section,
  .contact-section,
  .cta-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }

  /* Trusted section */
  .trusted-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .trusted-images {
    order: 2;
  }

  .trusted-image img {
    height: 180px;
  }

  .trusted-text h2 {
    font-size: 1.75rem;
    text-align: center;
  }

  .trusted-text {
    text-align: center;
  }

  .trusted-text .btn {
    margin: 0 auto;
  }

  /* Section headers mobile */
  .section-header {
    margin-bottom: var(--spacing-lg);
  }

  .section-title {
    font-size: 1.75rem;
  }

  .section-description {
    font-size: 1rem;
  }

  /* Services grid mobile */
  .services-grid .service-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .service-card:hover {
    transform: none;
  }

  .service-card-content {
    padding: var(--spacing-md);
  }

  /* Features grid mobile */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .features-grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-item {
    padding: var(--spacing-md);
    border-left-width: 3px;
  }

  .feature-item:hover {
    transform: none;
  }

  .feature-icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--spacing-sm);
  }

  .feature-icon svg {
    width: 26px;
    height: 26px;
  }

  .feature-title {
    font-size: 0.95rem;
  }

  .feature-description {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* Steps grid mobile */
  .step-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .step-number {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .step-content h3 {
    font-size: 1.1rem;
  }

  /* Resources grid mobile */
  .resources-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .resource-card {
    padding: var(--spacing-lg);
  }

  /* Careers section mobile */
  .careers-benefits {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .careers-actions {
    flex-direction: column;
  }

  .careers-actions .btn {
    width: 100%;
    text-align: center;
  }

  /* Contact section mobile */
  .contact-form-wrapper {
    padding: var(--spacing-lg);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-group input,
  .form-group textarea {
    padding: 0.875rem 1rem;
    font-size: 16px; /* Prevent iOS zoom */
  }

  .form-group textarea {
    min-height: 120px;
  }

  /* CTA section mobile */
  .cta-title {
    font-size: 1.75rem;
  }

  .cta-description {
    font-size: 1.05rem;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-btn-primary,
  .cta-btn-secondary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem;
  }

  .getting-started-cta {
    flex-direction: column;
    align-items: center;
  }

  .getting-started-cta .btn {
    width: 100%;
    text-align: center;
  }

  /* Footer mobile */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }

  .footer-bottom a {
    font-size: 0.8rem;
  }

  /* Page content mobile */
  .page-content-wrapper {
    padding: var(--spacing-lg) 0;
  }

  .page-entry-title {
    font-size: 1.75rem;
  }

  .container {
    padding: 0 var(--spacing-md);
  }

  /* Buttons mobile: larger touch targets */
  .btn {
    min-height: 48px;
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }

  .btn-large {
    padding: 1.125rem 1.5rem;
    font-size: 1.05rem;
  }

  /* Links: larger tap targets */
  .service-card-link,
  .resource-card-link {
    padding: 0.5rem 0;
    display: inline-block;
  }

  /* Gutenberg blocks mobile */
  .wp-block-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .wp-block-column {
    flex-basis: 100% !important;
  }

  .wp-block-group.alignfull,
  .wp-block-cover.alignfull {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .wp-block-group.has-background {
    padding: 1.5rem;
  }

  /* Show mobile sticky CTA */
  .mobile-sticky-cta {
    display: flex;
  }

  /* Add bottom padding for sticky CTA */
  body.is-mobile .site-footer {
    padding-bottom: calc(var(--spacing-xxl) + 80px);
  }

  body.is-mobile .page-content-wrapper {
    padding-bottom: calc(var(--spacing-lg) + 80px);
  }

  body.is-mobile .front-page {
    padding-bottom: 80px;
  }

  /* Touch improvements */
  a, button, input, textarea, select {
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent horizontal scroll */
  body, html {
    overflow-x: clip;
  }

  .site-main {
    overflow-x: hidden;
  }

  /* Navigation: desktop sub-menu arrow fix */
  .main-navigation .menu-item-has-children > a::after {
    display: none;
  }

  /* Fix: Prevent text truncation in mobile nav */
  .mobile-nav-menu a {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.4;
    flex-wrap: wrap;
  }

  /* Fix: Prevent top bar text truncation */
  .top-bar-phone {
    white-space: normal;
    overflow-wrap: break-word;
    justify-content: center;
  }

  /* Fix: Ensure mobile panel doesn't clip content */
  .mobile-nav-panel {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Use clip instead of hidden — doesn't create a scroll context, better scroll perf */
  body {
    overflow-x: clip;
  }

  /* Fix: Top bar items should not overflow */
  .top-bar-content {
    overflow: hidden;
  }

  /* Fix: Hamburger button larger tap target */
  .menu-toggle {
    padding: 0.75rem;
    min-width: 44px;
    min-height: 44px;
  }

  /* Fix: Mobile nav menu items - prevent overflow */
  .mobile-nav-menu {
    overflow-x: hidden;
  }

  .mobile-nav-menu li {
    overflow: hidden;
  }

  /* Fix: mobile nav actions full visibility */
  .mobile-nav-actions {
    overflow: hidden;
  }

  .mobile-nav-actions .btn {
    white-space: normal;
    text-align: center;
    padding: 0.875rem 1rem;
  }

  /* Ensure minimum readable font sizes on mobile */
  .hero-location { font-size: 0.9rem; }
  .hero-location-diamond { font-size: 0.8rem; }
  .service-card-title { font-size: 1.15rem; }
  .service-card-description { font-size: 0.95rem; }
  .service-card-link { font-size: 0.9rem; }
  .feature-title { font-size: 1rem; }
  .feature-description { font-size: 0.9rem; }
  .testimonial-name { font-size: 1rem; }
  .testimonial-role { font-size: 0.9rem; }
  .testimonial-quote p { font-size: 0.95rem; }
  .footer-contact-item { font-size: 0.95rem; }
  .footer-tagline { font-size: 0.9rem; }
  .footer-badge { font-size: 0.85rem; }
}

/* ===== Small Mobile: 480px and below ===== */
@media (max-width: 480px) {
  .hero-section {
    padding: 56px 0 44px;
    min-height: auto;
  }

  .hero-content {
    padding: 0 4px;
  }

  .hero-headline {
    font-size: 1.85rem;
  }

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

  .hero-cta-group {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100%;
    max-width: 100%;
    text-align: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 0.95rem;
  }

  .hero-location {
    font-size: 0.8rem;
  }

  .section-title {
    font-size: 1.65rem;
  }

  .trusted-images {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .features-grid-4col {
    grid-template-columns: 1fr;
  }

  .feature-item {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
  }

  .feature-item:hover {
    transform: none;
  }

  .footer-bottom {
    font-size: 0.85rem;
  }

  .cta-title {
    font-size: 1.5rem;
  }

  .cta-description {
    font-size: 0.95rem;
  }

  /* Extra touch-friendly spacing */
  .contact-info-item {
    padding: 0.75rem 0;
  }

  .contact-info-icon {
    width: 40px;
    height: 40px;
  }

  /* Mobile nav panel: full width on small screens */
  .mobile-nav-panel {
    width: 100%;
    max-width: 100%;
  }

  /* Gutenberg headings mobile */
  .wp-block-heading {
    font-size: 1.5rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.65rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  /* Extra small screen fixes */
  .mobile-nav-menu a {
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
  }

  .mobile-nav-header {
    padding: 1.5rem 1.25rem 0.75rem;
  }

  .mobile-nav-actions {
    padding: 1.25rem;
  }

  .top-bar {
    font-size: 0.85rem;
  }

  .top-bar-phone-label {
    font-size: 0.8rem;
  }

  .top-bar-phone-number {
    font-size: 0.9rem;
  }

  .site-logo img,
  .site-logo .site-logo-img {
    height: 60px;
    max-width: 220px;
  }

  .mobile-logo-img {
    height: 48px;
    max-width: 180px;
  }
}

/* ===== Landscape mobile ===== */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-content {
    padding: 0;
  }

  .hero-headline {
    font-size: 1.75rem;
  }

  .hero-section {
    padding: 30px 0 20px;
    min-height: auto;
  }

  .mobile-sticky-cta {
    display: flex;
  }
}

/* ===== Large screens: 1400px+ ===== */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

  .hero-content {
    max-width: 650px;
  }

  .hero-headline {
    font-size: 3.75rem;
  }
}

/* ===== Print styles ===== */
@media print {
  .top-bar,
  .site-header,
  .mobile-sticky-cta,
  .mobile-nav-panel,
  .mobile-nav-overlay,
  .menu-toggle,
  .nav-cta,
  .cta-section {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-headline,
  .hero-description {
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .service-card,
  .resource-card,
  .feature-item {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}

/* ===== RESPONSIVE: TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
  /* Show hamburger menu toggle */
  .menu-toggle { display: block; }
  /* Hide desktop nav */
  .main-navigation .nav-menu { display: none; }
  .main-navigation .nav-cta { display: none; }
  /* Hero section */
  .hero-section { padding: 80px 0 70px; min-height: 70vh; }
  .hero-content { max-width: 100%; }
  .hero-headline { font-size: 2.75rem; }
  /* Services grid */
  .services-grid .service-card {
    flex: 0 0 calc(50% - var(--spacing-lg) / 2);
    max-width: calc(50% - var(--spacing-lg) / 2);
  }
  /* Features grid */
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid-4col { grid-template-columns: repeat(2, 1fr); }
  /* Service card: reduced hover on tablet */
  .service-card:hover { transform: translateY(-3px); }
  .feature-item:hover { transform: translateY(-2px); }
  /* Footer */
  .footer-content { grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); }
  .footer-brand { max-width: 100%; grid-column: 1 / -1; }
  .footer-contact-info { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  .footer-badges { justify-content: flex-start; }
}

/* ===== RESPONSIVE: MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
  /* Top bar - ensure no truncation */
  .top-bar-content { font-size: 0.8rem; }
  .top-bar-social { gap: 0.5rem; }
  .top-bar-social a { font-size: 0.9rem; }
  /* Header */
  .main-header { padding: 0.75rem 0; }
  .site-title { font-size: 1.35rem; letter-spacing: 0.3px; }
  .site-title span { font-weight: 700; }
  /* Hero */
  .hero-section { padding: 70px 0 60px; min-height: 60vh; }
  .hero-content { max-width: 100%; text-align: center; }
  .hero-headline { font-size: 2.25rem; line-height: 1.15; }
  .hero-description { font-size: 1rem; margin-bottom: 28px; max-width: 100%; }
  .hero-cta-group { justify-content: center; margin-bottom: 24px; }
  .hero-location { justify-content: center; }
  .hero-cta-primary { padding: 12px 28px; font-size: 0.95rem; }
  .hero-cta-secondary { font-size: 0.9rem; }
  .location-search { padding: var(--spacing-md); }
  .location-search-form { flex-direction: column; }
  .location-search-input { border-radius: var(--radius-md); }
  .location-search-btn { border-radius: var(--radius-md); width: 100%; margin-top: 0.5rem; }
  /* Trusted section */
  .trusted-content { grid-template-columns: 1fr; }
  .trusted-images { grid-template-columns: 1fr 1fr; }
  .trusted-text h2 { font-size: 1.75rem; }
  /* Section headers */
  .section-title { font-size: 1.75rem; }
  .section-description { font-size: 1rem; }
  /* Services */
  .services-section { padding: var(--spacing-xl) 0; }
  .services-grid .service-card { flex: 0 0 100%; max-width: 100%; }
  .service-card:hover { transform: none; }
  .service-card-content { padding: var(--spacing-md); }
  /* Features */
  .features-section { padding: var(--spacing-xl) 0; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
  .features-grid-4col { grid-template-columns: 1fr 1fr; }
  .feature-item { padding: var(--spacing-md); border-left-width: 3px; }
  .feature-item:hover { transform: none; }
  .feature-icon { width: 56px; height: 56px; margin-bottom: var(--spacing-sm); }
  .feature-icon svg { width: 26px; height: 26px; }
  .feature-title { font-size: 0.95rem; }
  .feature-description { font-size: 0.9rem; }
  /* Steps grid */
  .steps-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .step-card { flex-direction: column; align-items: flex-start; }
  .getting-started-section { padding: var(--spacing-xl) 0; }
  /* Resources */
  .resources-section { padding: var(--spacing-xl) 0; }
  .resources-grid { grid-template-columns: 1fr; }
  /* Careers */
  .careers-content { grid-template-columns: 1fr; }
  .careers-text .section-title { text-align: center; }
  .careers-benefits { grid-template-columns: 1fr; }
  .careers-actions { justify-content: center; }
  .careers-image img { min-height: 250px; }
  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrapper { padding: var(--spacing-lg); }
  /* CTA */
  .cta-section { padding: var(--spacing-xl) 0; }
  .cta-title { font-size: 1.75rem; }
  .cta-description { font-size: 1rem; }
  /* Footer */
  .footer-content { grid-template-columns: 1fr; gap: var(--spacing-xl); text-align: center; }
  .footer-brand { max-width: 100%; margin: 0 auto; }
  .footer-contact-info { flex-direction: column; align-items: center; gap: 0.65rem; }
  .footer-badges { justify-content: center; }
  .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
  /* Page content */
  .page-content-wrapper { padding: var(--spacing-xl) 0; }
  .page-entry-title { font-size: 1.75rem; }
  /* Buttons */
  .btn { padding: 0.75rem 1.25rem; font-size: 1rem; }
  .btn-large { padding: 0.875rem 1.5rem; font-size: 1rem; }
  /* Gutenberg blocks mobile */
  .wp-block-columns { flex-direction: column; }
  .wp-block-column { margin-bottom: 1rem; }
  .wp-block-group.alignfull { padding-left: 1rem; padding-right: 1rem; }
}

/* ===== RESPONSIVE: SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .hero-section { padding: 56px 0 44px; min-height: auto; }
  .hero-headline { font-size: 1.85rem; }
  .hero-description { font-size: 0.95rem; }
  .hero-cta-group { flex-direction: column; align-items: center; gap: 10px; }
  .hero-cta-primary,
  .hero-cta-secondary { width: 100%; max-width: 100%; text-align: center; justify-content: center; padding-left: 20px; padding-right: 20px; }
  /* Header brand scales down on small screens */
  .site-title { font-size: 1.2rem; letter-spacing: 0.2px; }
  .mobile-nav-header .site-title { font-size: 1.3rem; }
  .features-grid { grid-template-columns: 1fr; }
  .features-grid-4col { grid-template-columns: 1fr; }
  .feature-item { padding: var(--spacing-lg) var(--spacing-md); text-align: center; }
  .feature-item:hover { transform: none; }
  .trusted-images { grid-template-columns: 1fr; }
  .getting-started-cta { flex-direction: column; align-items: stretch; }
  .getting-started-cta .btn { text-align: center; }
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-btn-primary, .cta-btn-secondary { text-align: center; }
}

/* ===== MOBILE STICKY CTA BAR ===== */
.is-mobile .mobile-sticky-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  gap: 0.5rem;
}

.is-mobile body {
  padding-bottom: 56px;
}

.mobile-sticky-cta a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.mobile-sticky-cta .cta-phone {
  color: var(--color-primary);
}

.mobile-sticky-cta .cta-action {
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  margin-left: 0.5rem;
}

.mobile-sticky-cta .cta-action:hover {
  background-color: var(--color-accent-hover);
  text-decoration: none;
}

/* ===== BLOG / ARTICLES STYLES ===== */
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

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

.blog-card h3 a:hover {
  color: #0088a8 !important;
  text-decoration: underline;
}

/* Single article styles */
.single-post .entry-title {
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--color-gray-800);
  margin-bottom: 1rem;
}

.single-post .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--color-gray-600);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.single-post .entry-content {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--color-gray-700);
}

.single-post .entry-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.single-post .entry-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.single-post .entry-content p {
  margin-bottom: 1.25rem;
}

.single-post .entry-content img {
  border-radius: var(--radius-lg);
  margin: 2rem 0;
}

.single-post .post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-gray-200);
}

.single-post .post-navigation a {
  display: block;
  padding: 1.25rem;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s;
}

.single-post .post-navigation a:hover {
  background: var(--color-gray-200);
}

.single-post .nav-subtitle {
  display: block;
  font-size: 0.8rem;
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.single-post .nav-title {
  color: var(--color-primary);
  font-weight: 600;
}

/* Blog card responsive */
@media (max-width: 768px) {
  .single-post .entry-title {
    font-size: 1.75rem;
  }

  .single-post .entry-content {
    font-size: 1rem;
  }

  .single-post .post-navigation {
    grid-template-columns: 1fr;
  }
}

/* ===== FAQ PAGE STYLES ===== */
.faq-section { padding: var(--spacing-xxl) 0; }
.faq-category-title { color: var(--color-primary); font-size: 1.5rem; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--color-accent); font-family: var(--font-heading); }
.faq-item { background: var(--color-white); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--color-gray-200); transition: box-shadow 0.2s ease; }
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.5rem; cursor: pointer; font-weight: 600; color: var(--color-gray-800); font-size: 1rem; transition: background-color 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent; }
.faq-question:hover { background-color: var(--color-gray-100); }
.faq-question.active { color: var(--color-primary); background-color: #e8f4f8; }
.faq-question svg { transition: transform 0.3s ease; flex-shrink: 0; margin-left: 1rem; color: var(--color-primary); }
.faq-question.active svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 1.5rem; color: var(--color-gray-600); line-height: 1.8; font-size: 0.95rem; }
.faq-answer.open { max-height: 500px; padding: 0 1.5rem 1.25rem 1.5rem; }
.faq-answer p { margin-bottom: var(--spacing-sm); }

/* ===== CAREGIVER PORTAL STYLES ===== */
.portal-login-card { background: var(--color-white); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-lg); max-width: 450px; margin: 0 auto; }
.portal-quick-link { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); text-decoration: none; color: var(--color-gray-800); border: 1px solid var(--color-gray-200); }
.portal-quick-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; color: var(--color-primary); border-color: var(--color-teal); }
.portal-quick-link-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--color-primary), var(--color-teal)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-quick-link-icon svg { width: 24px; height: 24px; color: var(--color-white); }
.portal-quick-link h4 { font-size: 1rem; margin-bottom: 0.25rem; color: var(--color-gray-800); }
.portal-quick-link p { font-size: 0.85rem; color: var(--color-gray-600); margin: 0; }

/* ===== FORM SUCCESS/ERROR BANNER ===== */
.fla-form-banner { position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem 1.5rem; text-align: center; font-weight: 600; font-size: 0.95rem; z-index: 9999; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); transform: translateY(0); animation: fla-slide-up 0.4s ease; font-family: var(--font-primary); }
.fla-form-banner.success { background-color: #28a745; color: #fff; }
.fla-form-banner.error { background-color: #dc3545; color: #fff; }
.fla-form-banner .close-banner { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 1.25rem; cursor: pointer; padding: 0.25rem; line-height: 1; opacity: 0.8; }
.fla-form-banner .close-banner:hover { opacity: 1; }
@keyframes fla-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ===== BACK TO TOP BUTTON ===== */
.fla-back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: all var(--transition-normal); z-index: 998; }
.fla-back-to-top.visible { opacity: 1; visibility: visible; }
.fla-back-to-top:hover { background: var(--color-primary-dark); transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ===== ADVANCED PAGE BUILDER STYLES ===== */
.fla-hero-overlay { position: absolute; inset: 0; z-index: 1; }
.fla-custom-page-content { max-width: 1200px; margin: 0 auto; }
.fla-testimonial-section { background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: var(--spacing-xxl) 0; }
.fla-page-bg-image { position: relative; }
.fla-page-bg-image .site-main::before { content: ''; position: absolute; inset: 0; z-index: 0; }
.fla-page-bg-image .site-main > * { position: relative; z-index: 1; }

/* ===== MEDIA UPLOADER BUTTON IN ADMIN ===== */
.fla-media-upload-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 8px 16px; background: #1e5a8e; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; transition: background 0.2s; }
.fla-media-upload-btn:hover { background: #164670; }
.fla-media-preview { max-width: 300px; max-height: 150px; border-radius: 4px; margin-top: 8px; border: 1px solid #ddd; }
.fla-media-remove { color: #dc3545; cursor: pointer; font-size: 12px; margin-left: 8px; text-decoration: none; }
.fla-media-remove:hover { color: #a71d2a; }

/* ==========================================================================
   SERVICE DETAIL SECTIONS — Responsive Grid
   ========================================================================== */
@media (max-width: 768px) {
    .service-detail-grid,
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .leadership-grid {
        grid-template-columns: 1fr !important;
        max-width: 400px !important;
    }
    .service-detail-grid > div:first-child,
    .about-grid > div:first-child {
        order: -1;
    }
    .service-detail-grid h2,
    .about-grid h2 {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {
    .service-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .services-grid .service-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .service-category-grid {
        grid-template-columns: 1fr !important;
    }
    .leadership-card {
        padding: 24px 16px !important;
    }
}

/* ===== CAREERS APPLICATION FORM ===== */
.career-form-section {
  padding: 5rem 0;
  background-color: #f8f9fa;
}

.career-form-wrapper {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 40px 35px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
}

.career-form-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: #1e5a8e;
  margin: 30px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e9ecef;
}

.career-form-section-title:first-of-type {
  margin-top: 0;
}

.career-form-section-title small {
  font-weight: 400;
  font-size: 14px;
  color: #6c757d;
}

.career-form-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1e5a8e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.career-form-grid {
  display: grid;
  gap: 18px;
}

.career-form-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.career-form-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.career-form-group {
  margin-bottom: 18px;
}

.career-form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: #343a40;
}

.career-form-group input[type="text"],
.career-form-group input[type="email"],
.career-form-group input[type="tel"],
.career-form-group input[type="date"],
.career-form-group select,
.career-form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: #343a40;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.career-form-group input:focus,
.career-form-group select:focus,
.career-form-group textarea:focus {
  outline: none;
  border-color: #1e5a8e;
  box-shadow: 0 0 0 3px rgba(30, 90, 142, 0.12);
}

.career-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.career-required {
  color: #d9534f;
  font-weight: 700;
}

.career-form-hint {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: #6c757d;
  line-height: 1.5;
}

/* Checkboxes */
.career-form-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 6px;
}

.career-form-vertical {
  flex-direction: column;
  gap: 12px;
}

.career-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #343a40;
  cursor: pointer;
  line-height: 1.5;
}

.career-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #1e5a8e;
}

.career-consent-label {
  background: #f8f9fa;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

/* File Upload */
.career-file-upload {
  position: relative;
  margin-top: 4px;
}

.career-file-upload input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.career-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 20px;
  border: 2px dashed #ced4da;
  border-radius: 10px;
  text-align: center;
  color: #6c757d;
  font-size: 15px;
  transition: all 0.2s ease;
  background: #f8f9fa;
}

.career-file-label:hover,
.career-file-label.dragover {
  border-color: #1e5a8e;
  background: rgba(30, 90, 142, 0.04);
  color: #1e5a8e;
}

/* Submit Button */
.career-form-submit {
  text-align: center;
  margin-top: 30px;
}

.career-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: #d4a843;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.career-submit-btn:hover {
  background: #c49a38;
  transform: translateY(-1px);
}

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

/* Flash Messages */
.career-form-msg {
  max-width: 780px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.career-form-success {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.career-form-error {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .career-form-wrapper {
    padding: 25px 18px;
  }
  .career-form-grid-2,
  .career-form-grid-3 {
    grid-template-columns: 1fr;
  }
  .career-form-section {
    padding: 3rem 0;
  }
}

/* ===== CAREGIVER PORTAL - AUTH TABS ===== */
.auth-tab-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #6c757d;
  font-family: var(--font-primary);
  transition: all 0.2s ease;
}
.auth-tab-btn.active {
  background: #fff;
  color: #1e5a8e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== CAREGIVER PORTAL - TABS NAV ===== */
.portal-tabs {
  background: #fff;
  border-bottom: 2px solid #e9ecef;
  position: sticky;
  top: 60px;
  z-index: 100;
}
.portal-tabs-list {
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.portal-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #6c757d;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.portal-tab:hover {
  color: #1e5a8e;
  text-decoration: none;
  background: #f8f9fa;
}
.portal-tab.active {
  color: #0088a8;
  border-bottom-color: #0088a8;
}

/* ===== PORTAL LAYOUT ===== */
.portal-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: start;
}
.portal-main {
  min-width: 0;
}
.portal-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.portal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 140px;
}
.portal-sidebar-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ===== PORTAL WELCOME BANNER ===== */
.portal-welcome-banner {
  background: linear-gradient(135deg, #0088a8, #1e5a8e);
  border-radius: 16px;
  padding: 35px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.portal-welcome-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== DASHBOARD STATS ===== */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dashboard-stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.dashboard-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.dashboard-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e5a8e;
  font-family: var(--font-heading);
}
.dashboard-stat-label {
  font-size: 13px;
  color: #6c757d;
  margin-top: 4px;
}

/* ===== TODAY'S SHIFTS ===== */
.today-shifts-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.today-shift-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  flex-wrap: wrap;
}
.today-shift-time {
  text-align: center;
  min-width: 100px;
}
.shift-start {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1e5a8e;
}
.shift-separator {
  color: #adb5bd;
  font-size: 14px;
}
.shift-end {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #343a40;
}
.today-shift-divider {
  width: 3px;
  height: 50px;
  background: #0088a8;
  border-radius: 2px;
}
.today-shift-details {
  flex: 1;
  min-width: 150px;
}
.shift-type-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #e3f2fd;
  color: #1565c0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.shift-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.shift-status.upcoming {
  background: #fff3e0;
  color: #e65100;
}

/* ===== QUICK ACTIONS ===== */
.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: #f8f9fa;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.quick-action-card:hover {
  background: #e9ecef;
  text-decoration: none;
  transform: translateY(-2px);
}
.quick-action-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-action-label {
  font-size: 14px;
  font-weight: 600;
  color: #343a40;
  text-align: center;
}

/* ===== SCHEDULE GRID ===== */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  overflow-x: auto;
}
.schedule-day {
  min-width: 140px;
}
.schedule-day-header {
  background: #1e5a8e;
  color: #fff;
  padding: 10px 8px;
  text-align: center;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.schedule-date {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.8;
}
.schedule-slot {
  padding: 14px 10px;
  border: 1px solid #e9ecef;
  border-top: none;
  border-radius: 0 0 8px 8px;
  font-size: 13px;
  min-height: 80px;
}
.schedule-slot-filled {
  background: #f0fafb;
  border-left: 3px solid #0088a8;
}
.schedule-slot-time {
  font-weight: 700;
  color: #1e5a8e;
  font-size: 13px;
  margin-bottom: 4px;
}
.schedule-slot-client {
  font-weight: 600;
  color: #343a40;
  margin-bottom: 4px;
}
.schedule-slot-location {
  color: #6c757d;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 4px;
}
.schedule-slot-type {
  display: inline-block;
  padding: 2px 8px;
  background: #e3f2fd;
  color: #1565c0;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.schedule-slot-off {
  background: #fff3e0;
  border-left: 3px solid #e65100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #e65100;
  font-weight: 600;
}
.schedule-slot-empty {
  background: #f8f9fa;
  color: #adb5bd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  text-align: center;
}
.portal-nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: #343a40;
}
.portal-nav-btn:hover {
  background: #e9ecef;
}
.portal-week-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e5a8e;
}

/* ===== SCHEDULE SUMMARY ===== */
.schedule-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  text-align: center;
}
.schedule-summary-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}
.schedule-summary-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1e5a8e;
}
.schedule-summary-label {
  font-size: 13px;
  color: #6c757d;
}

/* ===== TIMESHEET STYLES ===== */
.timesheet-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.timesheet-stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.timesheet-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.timesheet-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #343a40;
}
.timesheet-stat-label {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.3;
}
.timesheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.timesheet-table th {
  background: #1e5a8e;
  color: #fff;
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
}
.timesheet-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #e9ecef;
}
.ts-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-primary);
  outline: none;
}
.ts-input:focus {
  border-color: #0088a8;
}
.timesheet-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.timesheet-history-table th {
  background: #f8f9fa;
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: #343a40;
  border-bottom: 2px solid #dee2e6;
}
.timesheet-history-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e9ecef;
  color: #495057;
}
.ts-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.ts-status-approved { background: #d4edda; color: #155724; }
.ts-status-pending { background: #fff3e0; color: #e65100; }
.ts-status-draft { background: #e3f2fd; color: #1565c0; }
.ts-status-paid { background: #d4edda; color: #155724; }
.ts-action-btn {
  padding: 5px 14px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  color: #1e5a8e;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 500;
}
.ts-action-btn:hover { background: #e3f2fd; }

/* ===== TRAINING GRID ===== */
.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.training-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}
.training-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.resource-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.resource-badge-required { background: #fdecea; color: #c62828; }
.resource-badge-elective { background: #e3f2fd; color: #1565c0; }
.resource-badge-active { background: #d4edda; color: #155724; }
.resource-badge-expiring { background: #fff3e0; color: #e65100; }

/* ===== DOCUMENTS GRID ===== */
.documents-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.document-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: background 0.2s;
}
.document-card:hover {
  background: #e9ecef;
}
.document-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}
.document-info {
  flex: 1;
  min-width: 0;
}
.document-download-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0088a8;
  transition: all 0.2s;
  flex-shrink: 0;
}
.document-download-btn:hover {
  background: #0088a8;
  color: #fff;
}

/* ===== NEWS FEED ===== */
.news-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.news-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}
.news-date {
  width: 60px;
  text-align: center;
  flex-shrink: 0;
  padding: 10px;
  background: #1e5a8e;
  border-radius: 8px;
  color: #fff;
}
.news-date-day {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.news-date-month {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.news-content {
  flex: 1;
}
.news-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.news-tag-important { background: #fdecea; color: #c62828; }
.news-tag-event { background: #d4edda; color: #155724; }
.news-tag-recognition { background: #fff3e0; color: #e65100; }
.news-tag-update { background: #e3f2fd; color: #1565c0; }

/* ===== CERTIFICATIONS ===== */
.certifications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.certification-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 10px;
}
.cert-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cert-active { background: #2e7d32; }
.cert-expiring { background: #e65100; }
.cert-complete { background: #0088a8; }
.cert-info { flex: 1; }

/* ===== PORTAL RESPONSIVE ===== */
@media (max-width: 1024px) {
  .portal-layout {
    grid-template-columns: 1fr;
  }
  .portal-sidebar {
    position: static;
  }
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .timesheet-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .schedule-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .auth-grid {
    grid-template-columns: 1fr !important;
  }
  .portal-welcome-banner {
    padding: 25px;
  }
  .dashboard-stats,
  .timesheet-stats {
    grid-template-columns: 1fr 1fr;
  }
  .schedule-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .training-grid {
    grid-template-columns: 1fr;
  }
  .news-item {
    flex-direction: column;
  }
  .today-shift-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .today-shift-divider {
    width: 50px;
    height: 3px;
  }
  .today-shift-time {
    display: flex;
    gap: 8px;
  }
  .shift-separator {
    display: none;
  }
}
@media (max-width: 480px) {
  .dashboard-stats,
  .timesheet-stats {
    grid-template-columns: 1fr;
  }
  .schedule-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .timesheet-stat-card {
    flex-direction: column;
    text-align: center;
  }
  .portal-tabs-list {
    gap: 0;
  }
  .portal-tab {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ==========================================================================
   CAREERS PAGE — Full Layout Styles
   ========================================================================== */

/* Page Hero Banner */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,90,142,0.08) 0%, rgba(0,136,168,0.08) 100%);
  pointer-events: none;
}

/* Breadcrumb on career pages */
.career-breadcrumb {
  background-color: #f8f9fa;
  padding: 14px 0;
  border-bottom: 1px solid #e9ecef;
}
.career-breadcrumb .container {
  font-size: 14px;
  color: #6c757d;
}
.career-breadcrumb a {
  color: #1e5a8e;
  text-decoration: none;
}
.career-breadcrumb a:hover {
  text-decoration: underline;
}
.career-breadcrumb .separator {
  margin: 0 8px;
  color: #adb5bd;
}

/* Why Work With Us — Intro Grid */
.careers-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.careers-intro-grid img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  object-fit: cover;
  min-height: 350px;
}
.careers-intro-grid h2 {
  color: #1e5a8e;
  font-size: 2.25rem;
  margin-bottom: 20px;
  line-height: 1.2;
}
.careers-intro-grid p {
  color: #6c757d;
  line-height: 1.8;
  font-size: 1rem;
  margin-bottom: 16px;
}

/* Benefits Grid on Careers Page */
.careers-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.careers-benefit-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.careers-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}
.careers-benefit-card .benefit-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 14px;
  color: #1e5a8e;
}
.careers-benefit-card h3 {
  color: #1e5a8e;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.careers-benefit-card p {
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Open Positions — Job Cards */
.job-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  margin-bottom: 20px;
  border-left: 4px solid #1e5a8e;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.job-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
.job-card:nth-child(even) {
  border-left-color: #0088a8;
}
.job-card.job-closed {
  background: #f8f9fa;
  border-left-color: #adb5bd;
  opacity: 0.85;
}
.job-card-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.job-card-info {
  flex: 1;
  min-width: 260px;
}
.job-card-info h3 {
  color: #1e5a8e;
  font-size: 1.35rem;
  margin-bottom: 6px;
  font-family: var(--font-primary);
  font-weight: 700;
}
.job-card-meta {
  color: #6c757d;
  font-size: 0.875rem;
  margin-bottom: 14px;
}
.job-card-meta svg {
  vertical-align: middle;
  margin-right: 4px;
}
.job-card-desc {
  color: #343a40;
  line-height: 1.75;
  font-size: 0.95rem;
}
.job-card-closed-note {
  color: #6c757d;
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 12px;
}
.job-card .career-apply-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: #d4a843;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.job-card .career-apply-link:hover {
  background: #c49a38;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.job-card .career-apply-link svg {
  width: 16px;
  height: 16px;
}
.job-card .applications-closed-badge {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background: #adb5bd;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Careers Page Section Spacing */
.careers-page-section {
  padding: 80px 0;
}
.careers-page-section-alt {
  padding: 80px 0;
  background-color: #f8f9fa;
}

/* Careers Page Section Headers (overrides for inline usage) */
.careers-page-section .section-heading,
.careers-page-section-alt .section-heading {
  text-align: center;
  margin-bottom: 50px;
}
.careers-page-section .section-heading h2,
.careers-page-section-alt .section-heading h2 {
  color: #1e5a8e;
  font-size: 2.25rem;
  margin-bottom: 12px;
}
.careers-page-section .section-heading p,
.careers-page-section-alt .section-heading p {
  color: #6c757d;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Careers CTA Section */
.careers-cta-section {
  background-color: #0088a8;
  color: #fff;
  padding: 60px 0;
  text-align: center;
}
.careers-cta-section h2 {
  color: #fff;
  font-size: 1.875rem;
  margin-bottom: 14px;
}
.careers-cta-section p {
  font-size: 1.1rem;
  margin-bottom: 28px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.careers-cta-section .btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #d4a843;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.careers-cta-section .btn-gold:hover {
  background: #c49a38;
  color: #fff;
  text-decoration: none;
}

/* Page Content (Gutenberg blocks) within Careers template */
.page-content-section {
  padding: 40px 0;
}
.page-content-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* === Careers Page — Responsive === */
@media (max-width: 1024px) {
  .careers-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .careers-intro-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .careers-intro-grid > div:first-child {
    order: -1;
  }
  .careers-intro-grid h2 {
    font-size: 1.75rem;
    text-align: center;
  }
  .careers-intro-grid p {
    text-align: center;
  }
  .careers-benefits-grid {
    grid-template-columns: 1fr;
  }
  .careers-page-section,
  .careers-page-section-alt {
    padding: 50px 0;
  }
  .job-card {
    padding: 24px 20px;
  }
  .job-card-inner {
    flex-direction: column;
  }
  .job-card-info {
    min-width: 100%;
  }
  .job-card .career-apply-link,
  .job-card .applications-closed-badge {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  
  .careers-cta-section {
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
  .careers-page-section .section-heading h2,
  .careers-page-section-alt .section-heading h2 {
    font-size: 1.6rem;
  }
  .job-card-info h3 {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   MOBILE OPTIMIZATION — Prevent Content Spillover on All Pages
   ========================================================================== */

/* --- Global: prevent horizontal scroll on any page --- */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* --- Page Hero Banners (all inner pages) --- */
@media (max-width: 768px) {
  .page-hero {
    padding: 40px 20px !important;
  }
  .page-hero h1[style*="font-size:42px"],
  .page-hero h1[style*="font-size: 42px"] {
    font-size: 30px !important;
  }
  .page-hero h1 {
    font-size: 30px !important;
  }
  .page-hero p[style*="font-size:18px"],
  .page-hero p[style*="font-size: 18px"] {
    font-size: 15px !important;
  }
}
@media (max-width: 480px) {
  .page-hero {
    padding: 28px 15px !important;
  }
  .page-hero h1[style*="font-size:42px"],
  .page-hero h1[style*="font-size: 42px"],
  .page-hero h1 {
    font-size: 24px !important;
  }
  .page-hero p {
    font-size: 14px !important;
  }
}

/* --- Section Padding Reduction (inline padding:80px 0) --- */
@media (max-width: 768px) {
  section[style*="padding:80px 0"],
  section[style*="padding: 80px 0"] {
    padding: 50px 0 !important;
  }
  section[style*="padding:80px 0;background"],
  section[style*="padding: 80px 0; background"] {
    padding: 50px 0 !important;
  }
}
@media (max-width: 480px) {
  section[style*="padding:80px 0"],
  section[style*="padding: 80px 0"],
  section[style*="padding:80px 0;background"],
  section[style*="padding: 80px 0; background"] {
    padding: 36px 0 !important;
  }
}

/* --- Grids with minmax(280px/300px/320px): force single column on small screens --- */
@media (max-width: 768px) {
  [style*="minmax(280px"],
  [style*="minmax(300px"],
  [style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Also handle the auto-fit grids that have minmax in them */
  [style*="auto-fit"][style*="minmax"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Two-column form grids: stack on mobile --- */
@media (max-width: 768px) {
  form [style*="grid-template-columns:1fr 1fr"],
  form [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* --- Heading font sizes on mobile --- */
@media (max-width: 768px) {
  section h2[style*="font-size:36px"],
  section h2[style*="font-size: 36px"] {
    font-size: 26px !important;
  }
  .section-title[style*="font-size:36px"],
  .section-title[style*="font-size: 36px"] {
    font-size: 26px !important;
  }
}
@media (max-width: 480px) {
  section h2[style*="font-size:36px"],
  section h2[style*="font-size: 36px"],
  .section-title[style*="font-size:36px"],
  .section-title[style*="font-size: 36px"] {
    font-size: 22px !important;
  }
  h2[style*="font-size:36px"],
  h2[style*="font-size: 36px"] {
    font-size: 22px !important;
  }
  h3[style*="font-size:22px"],
  h3[style*="font-size: 22px"] {
    font-size: 18px !important;
  }
  h3[style*="font-size:20px"],
  h3[style*="font-size: 20px"] {
    font-size: 17px !important;
  }
}

/* --- Form Elements: prevent overflow and iOS zoom --- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
  }
  form {
    max-width: 100% !important;
  }
  .container[style*="max-width"] {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* --- Tables: horizontal scroll wrapper --- */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    font-size: 14px;
  }
}

/* --- Images: ensure none overflow --- */
@media (max-width: 768px) {
  section img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* --- Service Detail & About Grids (already have class-based rules, reinforce) --- */
@media (max-width: 768px) {
  .service-detail-grid img,
  .about-grid img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
  }
}

/* --- FAQ Wrapper --- */
@media (max-width: 480px) {
  .faq-wrapper {
    max-width: 100% !important;
  }
  .faq-item {
    padding: 16px !important;
  }
}

/* --- Breadcrumb: smaller text on mobile --- */
@media (max-width: 480px) {
  nav[aria-label="Breadcrumb"],
  nav[aria-label="breadcrumb"] {
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --- Section Header margins on mobile --- */
@media (max-width: 480px) {
  .section-header,
  .section-heading {
    margin-bottom: 30px !important;
  }
}

/* --- Request Care & Contact Form card padding --- */
@media (max-width: 768px) {
  div[style*="background:#fff;border-radius:12px;padding:40px"],
  div[style*="background: #fff; border-radius: 12px; padding: 40px"] {
    padding: 24px 18px !important;
  }
  div[style*="background:#fff;border-radius:12px;padding:30px"] {
    padding: 20px 16px !important;
  }
}

/* --- Service Card inner padding on mobile --- */
@media (max-width: 768px) {
  .service-card[style*="border-radius:8px"],
  .service-card {
    border-radius: 8px !important;
  }
  .service-card > div[style*="padding:30px"] {
    padding: 20px 16px !important;
  }
}

/* --- Pricing Grid --- */
@media (max-width: 480px) {
  .pricing-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .pricing-card {
    padding: 24px 18px !important;
  }
}

/* --- Cost Estimator specific --- */
@media (max-width: 768px) {
  #cost-calculator {
    padding: 40px 0 !important;
  }
  #cost-calculator [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Care Quiz: already has its own 600px breakpoint, reinforce for smaller --- */
@media (max-width: 380px) {
  #cq-quiz-card {
    padding: 18px 12px !important;
  }
  .cq-option-inner {
    padding: 10px 10px !important;
    font-size: 14px !important;
  }
  .cq-btn-group {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #cq-btn-back,
  #cq-btn-next {
    width: 100% !important;
    text-align: center !important;
  }
}

/* --- Careers Apply Form --- */
@media (max-width: 768px) {
  .careers-apply-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Contact Info Cards --- */
@media (max-width: 480px) {
  div[style*="text-align:center;padding:40px 30px"] {
    padding: 24px 16px !important;
  }
  div[style*="text-align:center;padding:40px 30px"] h3[style*="font-size:22px"] {
    font-size: 18px !important;
  }
}

/* --- Referral Partners steps --- */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Get Started Page: trust stats --- */
@media (max-width: 480px) {
  .gs-trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* --- Service Areas page --- */
@media (max-width: 768px) {
  .service-areas-grid[style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Care Guides & Resources grid cards --- */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Sample Care Plan table --- */
@media (max-width: 768px) {
  .care-plan-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Footer mobile --- */
@media (max-width: 768px) {
  .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}
@media (max-width: 480px) {
  .footer-columns {
    gap: 24px !important;
  }
  .footer-contact-info {
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer-contact-item {
    font-size: 15px;
  }
  .footer-bottom-content {
    flex-direction: column !important;
    gap: 10px;
    text-align: center;
  }
}

/* --- Caregiver Portal grid --- */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:30px"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Words that could break layout: allow wrapping --- */
@media (max-width: 480px) {
  h1, h2, h3, h4, h5, h6, p, li, td, th, a, span, label {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

/* --- Buttons: prevent overflow on small screens --- */
@media (max-width: 480px) {
  .btn, .btn-primary, .btn-outline, .btn-large,
  a[style*="display:inline-block;padding:14px"],
  a[style*="display:inline-block;padding: 12px"] {
    padding: 12px 24px !important;
    font-size: 15px !important;
    white-space: normal !important;
    text-align: center;
  }
}

/* --- Family/Caregiver Resources page cards --- */
@media (max-width: 768px) {
  .resource-card-link,
  .guide-card-link {
    display: block;
  }
}

/* --- Gradient hero sections (get-started, care-quiz, careers) --- */
@media (max-width: 768px) {
  section[style*="linear-gradient"][style*="padding:80px"] {
    padding: 50px 20px !important;
  }
  section[style*="linear-gradient"][style*="padding: 80px"] {
    padding: 50px 20px !important;
  }
  section[style*="linear-gradient"] h1[style*="font-size:42px"],
  section[style*="linear-gradient"] h1[style*="font-size: 42px"] {
    font-size: 30px !important;
  }
}
@media (max-width: 480px) {
  section[style*="linear-gradient"][style*="padding:80px"] {
    padding: 36px 15px !important;
  }
  section[style*="linear-gradient"][style*="padding: 80px"] {
    padding: 36px 15px !important;
  }
  section[style*="linear-gradient"] h1[style*="font-size:42px"],
  section[style*="linear-gradient"] h1[style*="font-size: 42px"] {
    font-size: 26px !important;
  }
  section[style*="linear-gradient"] p[style*="font-size:18px"],
  section[style*="linear-gradient"] p[style*="font-size: 18px"] {
    font-size: 15px !important;
  }
}

/* --- minmax(220px) grids (service cards on get-started, request-care) --- */
@media (max-width: 480px) {
  [style*="minmax(220px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* --- max-width containers: ensure padding on mobile --- */
@media (max-width: 768px) {
  div[style*="max-width:850px;margin:0 auto"],
  div[style*="max-width:900px;margin:0 auto"],
  div[style*="max-width:960px;margin:0 auto"],
  div[style*="max-width:1000px;margin:0 auto"],
  div[style*="max-width:1100px;margin:0 auto"] {
    max-width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* --- Inner content containers with max-width --- */
@media (max-width: 480px) {
  div[style*="max-width:800px;margin:0 auto"],
  div[style*="max-width:650px;margin:0 auto"],
  div[style*="max-width:700px;margin:0 auto"],
  div[style*="max-width:600px;margin:0 auto"] {
    max-width: 100% !important;
    padding-left: 10px;
    padding-right: 10px;
  }
}