/*
Theme Name: Golden Haven
Theme URI: https://gh-caresolutions.com
Author: Golden Haven Care and Solutions
Author URI: https://gh-caresolutions.com
Description: Custom WordPress theme for Golden Haven Care and Solutions - Premier home healthcare service provider specializing in compassionate elderly care in Nigeria.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: golden-haven
Tags: healthcare, elderly-care, one-column, custom-menu, featured-images
*/

/* CSS Variables */
:root {
  --primary: #284392;
  --accent: #db9e16;
  --bg: #f7f8fa;
  --text: #222;
  --radius: 1.5rem;
  --secondaryFont: "Urbanist", sans-serif;
  --primaryFont: "Urbanist", sans-serif;
  --heroFont: "Urbanist", sans-serif;
}

/* Base Styles */
html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: var(--primaryFont);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background: var(--bg);
  color: #1b2b65;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* Main Content */
.gh-main {
  flex-grow: 1;
  padding-top: 2.5rem;
  /* Matches pt-10 */
}

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header Styles */
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.site-header .logo img {
  height: 3rem;
}

/* Navigation */
.main-navigation {
  display: none;
}

@media (min-width: 768px) {
  .main-navigation {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}

.main-navigation a {
  color: #4b5563;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation a.current-menu-item {
  color: #000;
  border-bottom: 3px solid var(--accent);
}

/* Get Started Button */
.btn-primary {
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #1e3470;
}

/* Mobile Menu Button */
.menu-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 1.875rem;
  cursor: pointer;
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
}

/* Mobile Menu (Matches Astro Slide-in) */
.mobile-menu {
  position: fixed;
  top: 3rem;
  /* Height of header approx */
  left: 0;
  width: 100%;
  height: calc(100vh - 3rem);
  background: #fff;
  padding: 2rem 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  /* Animation state */
  opacity: 0;
  transform: translateX(-100%);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 49;
}

.mobile-menu.open {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Ensure hidden overrides display */
.mobile-menu.hidden {
  display: none;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu a {
  display: block;
  padding: 0.5rem 0;
  color: #4b5563;
  text-decoration: none;
}

/* Footer Styles */
.site-footer {
  background: #000;
  color: #fff;
  padding: 3rem 0;
}

.site-footer .logo img {
  height: 5rem;
}

.site-footer p {
  color: #d1d5db; /* Improved contrast for accessibility (WCAG AA) */
  margin-top: 1rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

.footer-nav a {
  color: #d1d5db; /* Improved contrast for accessibility (WCAG AA) */
  text-decoration: none;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid #374151;
}

.copyright {
  color: #d1d5db; /* Improved contrast for accessibility (WCAG AA) */
  font-size: 0.875rem;
}

/* Medical Disclaimer */
.medical-disclaimer {
  background: #fefce8;
  border-top: 2px solid #facc15;
  padding: 1.5rem 0;
  margin-top: 2rem;
}

.medical-disclaimer p {
  font-size: 0.875rem;
  color: #111827;
  text-align: center;
  line-height: 1.625;
}

.medical-disclaimer strong {
  color: #111827;
}

/* =========================================
   SEMANTIC CSS CLASSES (gh-* prefix)
   ========================================= */

/* Container */
.gh-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Text Utilities */
.gh-text-center {
  text-align: center;
}

/* =========================================
   HERO SECTION
   ========================================= */
.gh-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 5rem 0 8rem;
  color: #fff;
  background-color: var(--primary);
}

.gh-hero--short {
  padding: 3rem 0 4rem;
}

.gh-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gh-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.gh-hero__title {
  font-family: var(--heroFont);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .gh-hero__title {
    font-size: 3.5rem;
  }
}

.gh-hero__description {
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

/* =========================================
   BADGE
   ========================================= */
.gh-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

/* =========================================
   BUTTONS
   ========================================= */
.gh-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.gh-btn--primary {
  background: var(--primary);
  color: #fff !important;
  /* Force white text to avoid link color overrides */
}

.gh-btn--primary:hover {
  background: #1e3470;
}

.gh-btn--accent {
  background: var(--accent);
  color: #fff;
}

.gh-btn--accent:hover {
  background: #c28d14;
}

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

.gh-btn--outline:hover {
  background: var(--primary);
  color: #fff;
}

.gh-btn--full {
  display: block;
  width: 100%;
}

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

/* =========================================
   SECTIONS
   ========================================= */
.gh-section {
  padding: 4rem 0;
}

.gh-section--packages {
  background: var(--bg);
}

.gh-section--faq {
  background: #fff;
}

.gh-section__title {
  font-family: var(--heroFont);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--primary);
}

/* =========================================
   PACKAGES GRID
   ========================================= */
.gh-packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .gh-packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gh-packages-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================
   PACKAGE CARD
   ========================================= */
.gh-package-card {
  background: #fff;
  border-radius: 1.5rem; /* Match staging: rounded-2xl */
  border: 2px solid #e5e7eb;
  padding: 2rem;
  position: relative;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.gh-package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.gh-package-card--gold {
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
  border-color: var(--accent);
}

.gh-package-card--blue {
  background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%);
  border-color: var(--primary);
}

.gh-package-card--featured {
  border-width: 3px;
  transform: scale(1.02);
}

.gh-package-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.gh-package-card__title {
  font-family: var(--heroFont);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
  text-align: center;
}

.gh-package-card__price {
  text-align: center;
  margin-bottom: 1.5rem;
}

.gh-package-card__amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

.gh-package-card__period {
  font-size: 0.875rem;
  color: #4b5563; /* Improved contrast for accessibility */
}

/* =========================================
   FEATURE LIST
   ========================================= */
.gh-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.gh-feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.gh-feature-list__item:last-child {
  border-bottom: none;
}

.gh-feature-list__icon {
  color: #10b981;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* =========================================
   FAQ SECTION
   ========================================= */
.gh-faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.gh-faq {
  background: #fff;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.gh-faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.2s;
}

.gh-faq__question:hover {
  background: #f9fafb;
}

.gh-faq__icon {
  font-size: 1.5rem;
  transition: transform 0.2s;
}

.gh-faq__question[aria-expanded="true"] .gh-faq__icon {
  transform: rotate(180deg);
}

.gh-faq__answer {
  padding: 0 1.5rem 1rem;
  color: #4b5563;
  line-height: 1.6;
  display: none;
}

.gh-faq__answer.open {
  display: block;
}

/* =========================================
   CTA SECTION
   ========================================= */
.gh-cta {
  background: var(--primary);
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}

.gh-cta__title {
  font-family: var(--heroFont);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.gh-cta__description {
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 2rem;
}

/* =========================================
   PRICING PAGE SPECIFIC
   ========================================= */
/* .gh-pricing-page wrapper - no specific styles needed yet */

/* Services CTA Section - matches Astro CTA component */
.gh-services-cta {
  background-color: #e6f4ff;
  background-image: url("assets/images/cta.svg");
  background-size: cover;
  background-position: center;
  padding: 4rem 1rem;
}

/* Override white text - CTA uses dark text on light blue background */
.gh-services-cta .gh-text-white,
.gh-services-cta h2 {
  color: var(--primary);
}

.gh-services-cta p {
  color: #4b5563; /* gray-600 - matches Astro muted text */
}

.gh-services-cta .gh-text-2xl {
  font-size: 1.5rem;
}

.gh-services-cta .gh-mb-4 {
  margin-bottom: 1rem;
}

.gh-services-cta .gh-mb-6 {
  margin-bottom: 1.5rem;
}

/* =========================================
   HOMEPAGE HERO CAROUSEL
   ========================================= */
.gh-hero-swiper {
  width: 100%;
  height: 100%;
}

/* Swiper fade effect - stack slides with absolute positioning */
.gh-hero-swiper .swiper-wrapper {
  position: relative;
}

.gh-hero-swiper .swiper-slide {
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0 !important;
  transition: opacity 1s ease;
}

/* Active slide needs to be relative to maintain container height */
.gh-hero-swiper .swiper-slide-active {
  position: relative !important;
  opacity: 1 !important;
}

/* Show first slide before Swiper initializes */
.gh-hero-swiper:not(.swiper-initialized) .swiper-slide {
  display: none;
}

.gh-hero-swiper:not(.swiper-initialized) .swiper-slide:first-child {
  display: block;
  position: relative !important;
  opacity: 1 !important;
}

/* =========================================
   HOMEPAGE FAQ SECTION
   ========================================= */
.gh-faq-icon {
  transition: transform 0.3s ease;
}

.gh-faq-icon.rotate-180 {
  transform: rotate(180deg);
}

.gh-faq-answer {
  transition: all 0.3s ease;
}

/* =========================================
   HOMEPAGE SECTIONS
   ========================================= */
.gh-section-title {
  font-family: var(--secondaryFont);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Service list arrows */
.gh-service-arrow {
  transform: rotate(-45deg);
}

/* Testimonial cards */
.gh-testimonial-card {
  background: var(--primary);
  color: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
}

/* =========================================
   MAIN CONTENT AREA
   ========================================= */
.gh-main {
  flex-grow: 1;
}

.gh-main--with-padding {
  padding-top: 2.5rem;
}

/* =========================================
   LAYOUT UTILITIES
   ========================================= */
.gh-flex {
  display: flex;
}

.gh-flex--col {
  flex-direction: column;
}

.gh-flex--row {
  flex-direction: row;
}

.gh-flex--center {
  align-items: center;
}

.gh-flex--start {
  align-items: flex-start;
}

.gh-flex--between {
  justify-content: space-between;
}

.gh-flex--end {
  justify-content: flex-end;
}

.gh-flex-1 {
  flex: 1;
}

.gh-gap-2 {
  gap: 0.5rem;
}

.gh-gap-3 {
  gap: 0.75rem;
}

.gh-gap-4 {
  gap: 1rem;
}

.gh-gap-8 {
  gap: 2rem;
}

.gh-gap-10 {
  gap: 2.5rem;
}

.gh-grid {
  display: grid;
  gap: 2rem;
}

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

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

@media (min-width: 768px) {
  .gh-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 1024px) {
  .gh-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================
   RESPONSIVE CONTAINER
   Matches Tailwind container with px-4 (constant 1rem padding)
   ========================================= */
/* Container padding is set to constant 1rem to match Tailwind's px-4 */
/* No progressive padding increase at breakpoints */

/* =========================================
   SECTION VARIANTS
   ========================================= */
.gh-section--primary {
  background: var(--primary);
  color: #fff;
}

.gh-section--white {
  background: #fff;
}

.gh-section--light-blue {
  background: #e6f4ff;
}

.gh-section--lg {
  padding: 4rem 0;
}

@media (min-width: 1024px) {
  .gh-section--lg {
    padding: 7rem 0;
  }
}

/* =========================================
   TYPOGRAPHY
   ========================================= */
.gh-title {
  font-family: var(--secondaryFont);
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.gh-title--sm {
  font-size: 1.5rem;
}

.gh-title--md {
  font-size: 1.5rem;
}

.gh-title--lg {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .gh-title--md {
    font-size: 1.75rem;
  }

  .gh-title--lg {
    font-size: 2.25rem;
  }
}

.gh-title--primary {
  color: var(--primary);
}

.gh-title--white {
  color: #fff;
}

.gh-title__icon {
  color: var(--accent);
  font-size: 1.25rem;
}

.gh-text {
  line-height: 1.75;
}

.gh-text--lg {
  font-size: 1.125rem;
  line-height: 2;
}

.gh-text--muted {
  color: #4b5563; /* Improved contrast for accessibility */
}

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

.gh-text--gray {
  color: #475467;
}

.gh-text--white {
  color: #fff;
}

.gh-text--gray-200 {
  color: #e5e7eb;
}

.gh-max-w-prose {
  max-width: 55ch;
}

.gh-max-w-2xl {
  max-width: 42rem;
}

/* =========================================
   HOMEPAGE HERO CAROUSEL
   ========================================= */
.gh-hero-wrapper {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  margin-bottom: 3rem;
  height: 55vh;
  min-height: 400px;
  max-height: 748px;
  background: var(--primary);
}

/* Extra small screens (iPhone SE = 320px is minimum target) */
@media (max-width: 380px) {
  .gh-hero-wrapper {
    min-height: 380px;
  }
}

@media (min-width: 640px) {
  .gh-hero-wrapper {
    height: 70vh;
  }
}

.gh-hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.gh-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Hero content - CSS Grid for fixed badge/button positions */
.gh-hero-content {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 1.25rem;
  height: 95%;
  max-height: 320px;
  min-width: 280px;
  margin: 0 0.5rem;
  border-radius: 1rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Middle section - title & description */
.gh-hero-content-middle {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}

/* Button - don't stretch in grid */
.gh-hero-content .gh-btn {
  justify-self: start;
}

/* Extra small screens (iPhone SE = 320px minimum) */
@media (max-width: 380px) {
  .gh-hero-content {
    min-width: auto;
    width: calc(100% - 1rem);
    padding: 1rem;
    gap: 0.5rem;
  }

  .gh-hero-title {
    font-size: 1.1rem;
  }

  .gh-hero-desc {
    font-size: 0.75rem;
  }

  .gh-hero-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }

  .gh-hero-content .gh-btn {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
  }
}

@media (min-width: 640px) {
  .gh-hero-content {
    height: 85%;
    max-height: 380px;
    min-width: 400px;
    padding: 1.5rem;
    margin: 0 1rem;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .gh-hero-content {
    height: auto;
    max-height: none;
    min-width: 500px;
    padding: 2rem;
    margin: 0 2rem;
  }
}

@media (min-width: 1280px) {
  .gh-hero-content {
    width: 65%;
    margin: 0 2.5rem;
  }
}

.gh-hero-badge {
  background: rgba(255, 255, 255, 0.8);
  color: var(--primary);
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
}

@media (min-width: 640px) {
  .gh-hero-badge {
    font-size: 0.875rem;
  }
}

.gh-hero-title {
  font-family: var(--heroFont);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  max-width: 42rem;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .gh-hero-title {
    font-size: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .gh-hero-title {
    font-size: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .gh-hero-title {
    font-size: 3.75rem;
  }
}

.gh-hero-desc {
  color: #fff;
  font-size: 0.875rem;
  max-width: 36rem;
  width: 100%;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .gh-hero-desc {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .gh-hero-desc {
    font-size: 1.125rem;
  }
}

/* =========================================
   BUTTON ENHANCEMENTS
   ========================================= */
.gh-btn--round {
  border-radius: 9999px;
}

.gh-btn--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* =========================================
   ABOUT SECTION
   ========================================= */
.gh-about-content {
  max-width: 55ch;
}

.gh-logo-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  height: 340px;
  width: 100%;
  max-width: 390px;
}

.gh-logo-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================
   SERVICES SECTION
   ========================================= */
.gh-services-image {
  border-radius: 1rem;
  object-fit: cover;
  width: 100%;
  max-width: 679px;
  height: 453px;
}

.gh-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 42rem;
  position: relative;
}

.gh-service-link {
  display: block;
  border-bottom: 1px solid var(--primary);
  color: var(--primary);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  text-decoration: none;
  transition: opacity 0.2s;
  position: relative;
}

.gh-service-link:hover {
  opacity: 0.8;
}

.gh-service-link__title {
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 2.5rem;
  margin-bottom: 0.5rem;
  padding-right: 2rem;
}

.gh-service-link__desc {
  color: #475467;
}

.gh-service-link__arrow {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.875rem;
  transform: rotate(-45deg);
}

/* =========================================
   TESTIMONIALS SECTION
   ========================================= */
.gh-testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gh-testimonial-stars {
  color: #facc15;
  font-size: 1.125rem;
}

.gh-testimonial-text {
  font-size: 1rem;
}

.gh-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gh-testimonial-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  overflow: hidden;
}

.gh-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gh-testimonial-name {
  font-size: 0.75rem;
}

/* =========================================
   CARERS SECTION
   ========================================= */
.gh-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gh-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.gh-checklist__icon {
  flex-shrink: 0;
}

.gh-carer-image {
  border-radius: 1rem;
  width: 100%;
  max-width: 700px;
  height: 393px;
  object-fit: cover;
}

/* =========================================
   HOMEPAGE FAQ SECTION
   ========================================= */
.gh-home-faq {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gh-faq-item {
  border: 1px solid #98a2b3;
  border-radius: 0.5rem;
  padding: 0 1rem;
  background: #fff;
}

.gh-faq-question {
  width: 100%;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #233a7d;
}

.gh-faq-question__text {
  flex: 1;
  padding-right: 1rem;
}

.gh-faq-answer-text {
  padding-bottom: 1rem;
  color: #4b5563;
  line-height: 1.6;
}

/* =========================================
   CTA SECTION
   ========================================= */
.gh-cta--lg {
  padding: 4rem 0;
}

@media (min-width: 1024px) {
  .gh-cta--lg {
    padding: 6rem 0;
  }
}

.gh-cta__title--lg {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .gh-cta__title--lg {
    font-size: 2.25rem;
  }
}

.gh-cta__desc--lg {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   RESPONSIVE UTILITIES
   ========================================= */
.gh-hidden {
  display: none;
}

.gh-hidden-mobile {
  display: none;
}

@media (min-width: 768px) {
  .gh-hidden-mobile {
    display: block;
  }

  .gh-flex-md {
    display: flex;
  }

  .gh-flex-md--row {
    flex-direction: row;
  }
}

.gh-hidden-desktop {
  display: block;
}

@media (min-width: 768px) {
  .gh-hidden-desktop {
    display: none;
  }
}

/* =========================================
   SPACING UTILITIES
   ========================================= */
.gh-mb-4 {
  margin-bottom: 1rem;
}

.gh-mb-6 {
  margin-bottom: 1.5rem;
}

.gh-mb-8 {
  margin-bottom: 2rem;
}

.gh-py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.gh-py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.gh-py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.gh-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* =========================================
   WIDTH UTILITIES
   ========================================= */
.gh-w-full {
  width: 100%;
}

.gh-w-half {
  width: 100%;
}

@media (min-width: 768px) {
  .gh-w-half {
    width: 50%;
  }
}

/* =========================================
   POSITION UTILITIES
   ========================================= */
.gh-relative {
  position: relative;
}

.gh-absolute {
  position: absolute;
}

.gh-inset-0 {
  inset: 0;
}

.gh-z-10 {
  z-index: 10;
}

/* =========================================
   PAGE HERO (Standard pages - not homepage)
   Used on: About, Services, Contact, Careers, Get Started, Package pages
   ========================================= */
.gh-page-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
}

@media (min-width: 1024px) {
  .gh-page-hero {
    padding: 8rem 0;
  }
}

.gh-page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gh-page-hero__content {
  position: relative;
  z-index: 10;
}

.gh-page-hero__badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.gh-page-hero__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  max-width: 48rem;
}

@media (min-width: 1024px) {
  .gh-page-hero__title {
    font-size: 3rem;
  }
}

.gh-page-hero__desc {
  font-size: 1.25rem;
  color: #e5e7eb;
  margin-bottom: 2rem;
  max-width: 42rem;
}

/* =========================================
   GENERIC CARD
   ========================================= */
.gh-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.gh-card--bordered {
  border: 1px solid #e5e7eb;
}

.gh-card--hover {
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.gh-card--hover:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* =========================================
   GRID ENHANCEMENTS
   ========================================= */
.gh-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gh-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gh-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gh-grid--items-start {
  align-items: flex-start;
}

.gh-grid--items-center {
  align-items: center;
}

/* =========================================
   FORM SECTIONS (Contact, Careers, Get Started)
   ========================================= */
.gh-form-section {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .gh-form-section {
    flex-direction: row;
  }
}

.gh-form-section__content {
  flex: 1;
  min-width: 280px;
}

@media (min-width: 768px) {
  .gh-form-section__content {
    flex: 0 0 35%;
    max-width: 400px;
  }
}

.gh-form-section__form {
  width: 100%;
}

@media (min-width: 1024px) {
  .gh-form-section__form {
    max-width: 500px;
  }
}

.gh-form-section__iframe {
  width: 100%;
  min-height: 700px;
  border: none;
  display: block;
  flex: 1;
}

@media (min-width: 768px) {
  .gh-form-section__iframe {
    flex: 0 0 60%;
    max-width: 600px;
  }
}

/* =========================================
   CENTERED FORM (Get Started page)
   ========================================= */
.gh-form-centered {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.gh-form-centered__iframe {
  width: 100%;
  min-height: 700px;
  border: none;
  display: block;
}

/* =========================================
   ICON CARD (Services page package cards)
   ========================================= */
.gh-icon-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.gh-icon-card__icon {
  width: 4rem;
  height: 4rem;
  background: rgba(40, 67, 146, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gh-icon-card__icon i {
  font-size: 1.875rem;
  color: var(--primary);
}

.gh-icon-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.gh-icon-card__desc {
  color: #4b5563;
  font-size: 1rem;
}

.gh-icon-card__btn {
  margin-top: auto;
}

/* =========================================
   ABOUT PAGE: Company Section
   ========================================= */
.gh-company-section {
  background-color: #fff;
  color: var(--text);
  padding: 4rem 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .gh-company-section {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .gh-company-section__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    width: 100%;
  }

  .gh-company-section__text {
    flex: 1;
    max-width: 50%;
  }
}

.gh-company-section__content {
  flex: 1;
}

.gh-company-section__logo-card {
  display: none;
}

@media (min-width: 768px) {
  .gh-company-section__logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 1rem;
    width: 100%;
    max-width: 380px;
    height: 380px;
    overflow: hidden;
  }
}

.gh-company-section__logo-card img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  padding: 2rem;
}

/* =========================================
   ABOUT PAGE: Mission Section
   ========================================= */
.gh-mission-section {
  background-color: #284392;
  color: #fff;
  padding: 4rem 0;
}

.gh-mission-section__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .gh-mission-section__content {
    flex-direction: row;
    align-items: center;
  }
}

.gh-mission-section__text {
  flex: 1;
  max-width: 60ch;
}

.gh-mission-section__image {
  border-radius: 1.5rem;
  overflow: hidden;
  height: 380px;
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: center;
  background: #fff;
}

.gh-mission-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   ABOUT PAGE: Team Section
   ========================================= */
.gh-team-section {
  padding: 1.25rem 0 2.5rem;
}

@media (min-width: 768px) {
  .gh-team-section {
    padding: 4rem 0;
  }
}

.gh-team-section__image {
  border-radius: 1.5rem;
  overflow: hidden;
  width: 100%;
  height: 426px;
}

.gh-team-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   SERVICES PAGE: Service Cards
   ========================================= */
.gh-service-card {
  background-color: #f9fafb;
  border: 1px solid #eaecf0;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gh-service-card__icon {
  margin-bottom: 0.5rem;
}

.gh-service-card__title {
  font-weight: 700;
  color: #000;
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.gh-service-card__desc {
  color: #667085;
  font-size: 1rem;
  line-height: 1.5;
}

/* =========================================
   FOOTER
   ========================================= */
.gh-footer {
  background-color: var(--primary);
  /* Dark Blue #284392 */
  color: #ffffff;
  padding: 4rem 1rem;
  margin-top: auto;
}

.gh-footer__content {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.gh-footer__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .gh-footer__main {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
}

.gh-footer__logo {
  height: 3rem;
  width: auto;
  filter: brightness(0) invert(1);
  /* Make logo white if it is an SVG */
}

.gh-footer__desc {
  color: #eaecf0;
  max-width: 30ch;
  font-size: 1rem;
  line-height: 1.5;
}

.gh-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .gh-footer__nav {
    justify-content: flex-end;
  }
}

.gh-footer__nav-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.gh-footer__nav-link:hover {
  color: var(--accent);
}

.gh-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  font-size: 0.875rem;
  color: #d0d5dd;
}

@media (min-width: 768px) {
  .gh-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.gh-disclaimer {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #d0d5dd;
  margin-top: 2rem;
}

.gh-disclaimer strong {
  color: #ffffff;
}

/* Add some space between main content and footer */
main.gh-main {
  /* Ensure this exists or matches the main tag class */
  padding-bottom: 0;
}

.gh-section--gray {
  background-color: #f9fafb;
}

.gh-section--white {
  background-color: #fff;
}

.gh-text-green {
  color: #22c55e;
}

.gh-text-gray {
  color: #4b5563;
}

.gh-text-gray-800 {
  color: #1f2937;
}

.gh-text-accent {
  color: var(--accent);
}

.gh-text-bold {
  font-weight: 700;
}

.gh-text-sm {
  font-size: 0.875rem;
}

.gh-font-medium {
  font-weight: 500;
}

.gh-rounded {
  border-radius: 1rem;
}

.gh-shadow {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.gh-border {
  border: 1px solid #e5e7eb;
}

.gh-flex {
  display: flex;
}

.gh-items-start {
  align-items: flex-start;
}

.gh-gap-3 {
  gap: 0.75rem;
}

.gh-mt-1 {
  margin-top: 0.25rem;
}

.gh-max-w-4xl {
  max-width: 56rem;
}

.gh-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   SERVICES PAGE: Package Cards
   ========================================= */
.gh-packages-intro {
  background-color: #e6f4ff;
  padding: 4rem 0;
}

.gh-section--light-blue {
  background-color: #e6f4ff;
}

/* Gradient backgrounds - no flat colors */
.gh-section--gradient-light {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
}

.gh-section--gradient-blue {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #e0f2fe 100%);
}

.gh-section--gradient-primary {
  background: linear-gradient(135deg, #1e3a5f 0%, #284392 50%, #1e40af 100%);
}

.gh-package-icon-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  height: 100%;
  border: 1px solid #f3f4f6;
}

.gh-package-icon-card__icon {
  background: #fefce8;
  /* light yellow */
  color: #f59e0b;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.gh-package-icon-card__icon i {
  font-size: 2rem;
  color: #ffb800;
  /* Matching accent */
}

.gh-package-icon-card__title {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
}

.gh-package-icon-card__subtitle {
  font-size: 0.875rem;
  font-weight: 400;
  color: #4b5563; /* Improved contrast for accessibility */
  display: block;
  margin-top: 0.25rem;
}

.gh-package-icon-card__tagline {
  font-weight: 500;
  color: #111827;
}

.gh-package-icon-card__desc {
  color: #4b5563;
  margin-bottom: auto;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* =========================================
   SERVICES PAGE: Meal Planning Section
   ========================================= */
.gh-meal-section {
  padding: 2rem 0;
}

.gh-meal-section__content {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .gh-meal-section__content {
    grid-template-columns: 1fr 1fr;
  }
}

.gh-meal-section__text {
  color: #eaecf0;
}

.gh-meal-section__image {
  display: flex;
  justify-content: center;
}

.gh-meal-section__image img {
  border-radius: 1rem;
  width: 100%;
  max-width: 420px;
  height: 380px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: #fff;
  padding: 0.5rem;
}

/* =========================================
   SERVICES PAGE: Training Section
   ========================================= */
.gh-training-section__image {
  border-radius: 1.5rem;
  overflow: hidden;
  width: 100%;
  height: 20rem;
}

@media (min-width: 1024px) {
  .gh-training-section__image {
    height: 25rem;
  }
}

.gh-training-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   CAREERS PAGE: Position Cards
   ========================================= */
.gh-position-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.gh-position-card__icon {
  width: 4rem;
  height: 4rem;
  background: rgba(40, 67, 146, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.gh-position-card__icon i {
  font-size: 1.875rem;
  color: var(--primary);
}

.gh-position-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.gh-position-card__desc {
  color: #4b5563;
  margin-bottom: 1rem;
}

.gh-position-card__requirements-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
  margin-bottom: 0.5rem;
}

.gh-position-card__requirements {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gh-position-card__requirements li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
  margin-bottom: 0.25rem;
}

.gh-position-card__requirements li i {
  color: #10b981;
  margin-top: 0.125rem;
}

/* =========================================
   CAREERS PAGE: Benefits Section
   ========================================= */
.gh-benefit-card {
  text-align: center;
}

.gh-benefit-card__icon {
  width: 5rem;
  height: 5rem;
  background: rgba(219, 158, 22, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.gh-benefit-card__icon i {
  font-size: 1.875rem;
  color: var(--accent);
}

.gh-benefit-card__title {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.gh-benefit-card__desc {
  color: #4b5563;
  font-size: 0.875rem;
}

/* =========================================
   GET STARTED PAGE: Steps Section
   ========================================= */
.gh-step-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
}

.gh-step-card__number {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.gh-step-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.gh-step-card__desc {
  color: #4b5563;
}

/* =========================================
   GET STARTED PAGE: Help Section
   ========================================= */
.gh-help-section {
  text-align: center;
  background-color: var(--primary);
  padding: 3rem 1rem;
  color: #fff;
}

.gh-help-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.gh-help-section__desc {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.gh-help-section__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

@media (min-width: 640px) {
  .gh-help-section__buttons {
    flex-direction: row;
  }
}

/* =========================================
   PACKAGE PAGES: Overview Section
   ========================================= */
.gh-package-overview {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 4rem;
}

.gh-package-overview__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .gh-package-overview__title {
    font-size: 2.25rem;
  }
}

.gh-package-overview__desc {
  font-size: 1.125rem;
  color: #4b5563;
  line-height: 1.75;
}

/* =========================================
   PACKAGE PAGES: Feature Card
   ========================================= */
.gh-feature-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  transition: box-shadow 0.2s;
}

.gh-feature-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.gh-feature-card__icon {
  width: 4rem;
  height: 4rem;
  background: rgba(219, 158, 22, 0.1);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.gh-feature-card__icon i {
  font-size: 1.5rem;
  color: var(--accent);
}

.gh-feature-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.gh-feature-card__desc {
  color: #4b5563;
}

/* =========================================
   PACKAGE PAGES: Included Section
   ========================================= */
.gh-included-section {
  max-width: 56rem;
  margin: 0 auto;
}

.gh-included-section__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .gh-included-section__title {
    font-size: 2.25rem;
  }
}

.gh-included-list {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .gh-included-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gh-included-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.gh-included-list__item i {
  color: #10b981;
  font-size: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.gh-included-list__item span {
  color: #374151;
}

/* =========================================
   PACKAGE PAGES: How It Works
   ========================================= */
.gh-how-it-works {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .gh-how-it-works {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gh-process-step {
  text-align: center;
}

.gh-process-step__number {
  width: 5rem;
  height: 5rem;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1.5rem;
}

.gh-process-step__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1rem;
}

.gh-process-step__desc {
  color: #4b5563;
}

/* =========================================
   PACKAGE PAGES: Ideal Candidates
   ========================================= */
.gh-ideal-section {
  max-width: 56rem;
  margin: 0 auto;
}

.gh-ideal-section__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 3rem;
}

.gh-ideal-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.gh-ideal-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.gh-ideal-card__list {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .gh-ideal-card__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gh-ideal-card__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}

.gh-ideal-card__item i {
  color: var(--accent);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.gh-ideal-card__item span {
  color: #374151;
}

.gh-ideal-note {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.gh-ideal-note__title {
  font-weight: 600;
  color: #1e40af;
  margin-bottom: 0.5rem;
}

.gh-ideal-note__text {
  color: #1e40af;
}

.gh-ideal-note__text a {
  text-decoration: underline;
  font-weight: 500;
}

/* =========================================
   PACKAGE PAGES: Single Testimonial
   ========================================= */
.gh-testimonial-single {
  max-width: 56rem;
  margin: 0 auto;
}

.gh-testimonial-single__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin-bottom: 3rem;
}

.gh-testimonial-single__card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .gh-testimonial-single__card {
    flex-direction: row;
    align-items: flex-start;
  }
}

.gh-testimonial-single__avatar {
  width: 4rem;
  height: 4rem;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.gh-testimonial-single__content {
  flex: 1;
}

.gh-testimonial-single__stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.gh-testimonial-single__stars i {
  color: var(--accent);
}

.gh-testimonial-single__text {
  color: #374151;
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.gh-testimonial-single__author {
  font-size: 0.875rem;
  color: #4b5563;
  font-weight: 600;
}

/* =========================================
   BLOG PAGES: Blog Grid
   ========================================= */
.gh-blog-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .gh-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gh-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================
   BLOG PAGES: Blog Card
   ========================================= */
.gh-blog-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.gh-blog-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.gh-blog-card__image {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.gh-blog-card__content {
  padding: 1.5rem;
}

.gh-blog-card__meta {
  font-size: 0.875rem;
  color: #4b5563; /* Improved contrast for accessibility */
  margin-bottom: 0.5rem;
}

.gh-blog-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
  text-decoration: none;
  display: block;
}

.gh-blog-card__title:hover {
  color: var(--accent);
}

.gh-blog-card__excerpt {
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.gh-blog-card__link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

.gh-blog-card__link:hover {
  color: var(--accent);
}

/* =========================================
   BLOG PAGES: Single Post Hero
   ========================================= */
.gh-post-hero {
  position: relative;
  height: 16rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .gh-post-hero {
    height: 24rem;
  }
}

.gh-post-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gh-post-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

/* =========================================
   BLOG PAGES: Post Content
   ========================================= */
.gh-post-content {
  max-width: 48rem;
  margin: 0 auto;
}

.gh-post-content__header {
  margin-bottom: 2rem;
}

.gh-post-content__meta {
  font-size: 0.875rem;
  color: #4b5563; /* Improved contrast for accessibility */
  margin-bottom: 0.5rem;
}

.gh-post-content__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .gh-post-content__title {
    font-size: 2.25rem;
  }
}

.gh-post-content__excerpt {
  font-size: 1.25rem;
  color: #4b5563;
  line-height: 1.75;
}

.gh-post-content__body {
  color: #374151;
  line-height: 1.75;
}

.gh-post-content__body p {
  margin-bottom: 1.5rem;
}

.gh-post-content__body h2,
.gh-post-content__body h3 {
  color: var(--primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.gh-post-content__body ul,
.gh-post-content__body ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.gh-post-content__body ul {
  list-style-type: disc;
}

.gh-post-content__body ol {
  list-style-type: decimal;
}

.gh-post-content__body li {
  margin-bottom: 0.5rem;
}

/* =========================================
   BLOG PAGES: Post Navigation
   ========================================= */
.gh-post-nav {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
}

.gh-post-nav__link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.gh-post-nav__link:hover {
  color: var(--accent);
}

/* =========================================
   BLOG PAGES: Tags
   ========================================= */
.gh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

.gh-tag {
  background: #f3f4f6;
  color: #374151;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  text-decoration: none;
}

.gh-tag:hover {
  background: var(--primary);
  color: #fff;
}

/* =========================================
   FOOTER COMPONENTS
   ========================================= */
.gh-footer {
  background: #000000;
  color: #fff;
  padding: 3rem 0;
}

.gh-footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .gh-footer__content {
    align-items: stretch;
  }
}

.gh-footer__logo {
  height: 5rem;
  margin-bottom: 2rem;
}

.gh-footer__desc {
  color: #e5e7eb; /* Accessible contrast on dark backgrounds (WCAG 2.1 AA) */
  margin-top: 1rem;
}

.gh-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .gh-footer__nav {
    display: flex;
    flex-wrap: wrap;
  }
}

.gh-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.gh-footer__nav li {
  list-style: none;
  display: inline;
}

.gh-footer__nav a {
  color: #e5e7eb; /* Accessible contrast on dark backgrounds (WCAG 2.1 AA) */
  text-decoration: none;
  transition: color 0.2s;
}

.gh-footer__nav a:hover {
  color: #fff;
}

.gh-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid #374151;
}

@media (min-width: 768px) {
  .gh-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.gh-footer__copyright {
  text-align: center;
  color: #d1d5db; /* Accessible contrast on dark backgrounds (WCAG 2.1 AA) */
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .gh-footer__copyright {
    text-align: left;
  }
}

.gh-footer__social {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .gh-footer__social {
    justify-content: flex-end;
  }
}

/* =========================================
   FOOTER: Medical Disclaimer
   ========================================= */
.gh-disclaimer {
  background: #fefce8;
  border-top: 2px solid #facc15;
  padding: 1.5rem 0;
  margin-top: 2rem;
}

.gh-disclaimer__text {
  font-size: 0.875rem;
  color: #111827;
  text-align: center;
  line-height: 1.625;
}

.gh-disclaimer__text strong {
  color: #111827;
}

/* =========================================
   EMAIL CARD (Contact page)
   ========================================= */
.gh-email-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  width: 100%;
}

@media (min-width: 1024px) {
  .gh-email-card {
    max-width: 383px;
  }
}

.gh-email-card__icon {
  margin-bottom: 1rem;
}

.gh-email-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.gh-email-card__email {
  font-size: 1.125rem;
  color: #1f2937;
  text-decoration: underline;
}

.gh-email-card__email:hover {
  color: var(--primary);
}

.gh-email-card__note {
  color: #4b5563; /* Improved contrast for accessibility */
  margin-top: 0.5rem;
}

/* =========================================
   INFO ALERT (Blue box with information)
   ========================================= */
.gh-info-alert {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
}

.gh-info-alert__text {
  color: #1e40af;
  font-size: 0.875rem;
}

/* =========================================
   SECTION TITLE (Centered with icon)
   ========================================= */
.gh-section-heading {
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .gh-section-heading {
    font-size: 2.25rem;
  }
}

.gh-section-heading--center {
  justify-content: center;
  text-align: center;
}

.gh-section-heading--primary {
  color: var(--primary);
}

.gh-section-heading--white {
  color: #fff;
}

.gh-section-heading__icon {
  color: var(--accent);
  font-size: 1.5rem;
}

/* =========================================
   LINK STYLES
   ========================================= */
.gh-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.gh-link:hover {
  color: var(--accent);
}

.gh-link--underline {
  text-decoration: underline;
}

.gh-link--white {
  color: #fff;
}

.gh-link--white:hover {
  color: var(--accent);
}

/* =========================================
   MAX WIDTH UTILITIES
   ========================================= */
.gh-max-w-3xl {
  max-width: 48rem;
}

.gh-max-w-4xl {
  max-width: 56rem;
}

.gh-max-w-xl {
  max-width: 36rem;
}

.gh-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   ADDITIONAL SPACING
   ========================================= */
.gh-mb-12 {
  margin-bottom: 3rem;
}

.gh-mb-16 {
  margin-bottom: 4rem;
}

.gh-mt-4 {
  margin-top: 1rem;
}

.gh-mt-8 {
  margin-top: 2rem;
}

.gh-mt-12 {
  margin-top: 3rem;
}

.gh-pt-8 {
  padding-top: 2rem;
}

.gh-pt-16 {
  padding-top: 4rem;
}

/* =========================================
   BORDER UTILITIES
   ========================================= */
.gh-border-t {
  border-top: 1px solid #e5e7eb;
}

.gh-border-b {
  border-bottom: 1px solid #e5e7eb;
}

/* =========================================
   SECTION GRAY VARIANT
   ========================================= */
.gh-section--gray {
  background: #f9fafb;
}

.gh-section--blue-50 {
  background: #eff6ff;
}

/* =========================================
   BLOG PAGE COMPONENTS
   ========================================= */
.gh-blog-section {
  padding: 3rem 0;
}

.gh-blog-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .gh-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gh-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gh-blog-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}

.gh-blog-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.gh-blog-card__image-link {
  display: block;
}

.gh-blog-card__image {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.gh-blog-card__content {
  padding: 1.5rem;
}

.gh-blog-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.gh-blog-card__title a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.3s;
}

.gh-blog-card__title a:hover {
  color: var(--accent);
}

.gh-blog-card__meta {
  color: #4b5563; /* Improved contrast for accessibility */
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.gh-blog-card__excerpt {
  color: #4b5563;
  line-height: 1.6;
}

.gh-blog-card__link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
}

.gh-blog-card__link:hover {
  color: var(--accent);
}

.gh-blog-pagination {
  margin-top: 2rem;
  text-align: center;
}

.gh-blog-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.gh-blog-pagination .page-numbers {
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  color: var(--primary);
  text-decoration: none;
  transition: all 0.3s;
}

.gh-blog-pagination .page-numbers.current,
.gh-blog-pagination .page-numbers:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.gh-blog-empty {
  text-align: center;
  padding: 3rem 0;
}

.gh-blog-empty__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #4b5563;
}

.gh-blog-empty__text {
  color: #4b5563; /* Improved contrast for accessibility */
  margin-top: 1rem;
}

/* =========================================
   SINGLE POST COMPONENTS
   ========================================= */
.gh-single-post {
  background: #fff;
}

.gh-post-hero {
  position: relative;
  height: 16rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .gh-post-hero {
    height: 24rem;
  }
}

.gh-post-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gh-post-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.gh-post-content {
  padding: 3rem 0;
}

.gh-post-content__wrapper {
  max-width: 48rem;
  margin: 0 auto;
}

.gh-post-content__header {
  margin-bottom: 2rem;
}

.gh-post-content__meta {
  font-size: 0.875rem;
  color: #4b5563; /* Improved contrast for accessibility */
  margin-bottom: 1rem;
}

.gh-post-content__separator {
  margin: 0 0.5rem;
}

.gh-post-content__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .gh-post-content__title {
    font-size: 2.25rem;
  }
}

.gh-post-content__excerpt {
  font-size: 1.25rem;
  color: #4b5563;
  line-height: 1.6;
}

.gh-post-content__body {
  color: #374151;
  line-height: 1.8;
}

.gh-post-content__body p {
  margin-bottom: 1.5rem;
}

.gh-post-content__body h2,
.gh-post-content__body h3,
.gh-post-content__body h4 {
  color: var(--primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.gh-post-content__body img {
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.gh-post-content__body a {
  color: var(--primary);
  text-decoration: underline;
}

.gh-post-content__tags {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gh-post-content__tags-label {
  color: #4b5563; /* Improved contrast for accessibility */
  margin-right: 0.5rem;
}

.gh-post-content__tags a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #f3f4f6;
  border-radius: 9999px;
  font-size: 0.875rem;
  color: #4b5563;
  text-decoration: none;
  transition: all 0.3s;
}

.gh-post-content__tags a:hover {
  background: var(--primary);
  color: #fff;
}

.gh-post-nav {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
}

.gh-post-nav__prev,
.gh-post-nav__next {
  max-width: 45%;
}

.gh-post-nav__next {
  text-align: right;
}

.gh-post-nav__label {
  display: block;
  font-size: 0.875rem;
  color: #4b5563; /* Improved contrast for accessibility */
  margin-bottom: 0.25rem;
}

.gh-post-nav a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.gh-post-nav a:hover {
  color: var(--accent);
}

/* =========================================
   DEFAULT PAGE COMPONENTS
   ========================================= */
.gh-page-default {
  background: #fff;
  min-height: 50vh;
}

.gh-page-article__header {
  margin-bottom: 2rem;
}

.gh-page-article__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
}

@media (min-width: 1024px) {
  .gh-page-article__title {
    font-size: 2.25rem;
  }
}

.gh-page-article__image {
  margin-bottom: 2rem;
  border-radius: 1rem;
  overflow: hidden;
}

.gh-page-article__img {
  width: 100%;
  height: auto;
}

.gh-page-article__content {
  color: #374151;
  line-height: 1.8;
}

.gh-page-article__content p {
  margin-bottom: 1.5rem;
}

.gh-page-article__content h2,
.gh-page-article__content h3,
.gh-page-article__content h4 {
  color: var(--primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.gh-page-article__content img {
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.gh-page-article__content a {
  color: var(--primary);
  text-decoration: underline;
}

.gh-page-article__content ul,
.gh-page-article__content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.gh-page-article__content li {
  margin-bottom: 0.5rem;
}

/* =========================================
   PADDING UTILITIES
   ========================================= */
.gh-py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Package Page Specifics */
.gh-shift-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  height: 100%;
}

.gh-icon-box {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}

.gh-icon-box--yellow {
  background-color: #fef9c3;
  color: var(--accent);
}

.gh-icon-box--blue {
  background-color: #dbeafe;
  color: var(--primary);
}

.gh-icon-box--primary {
  background-color: var(--primary);
  color: #fff;
}

.gh-icon-box--accent {
  background-color: rgba(219, 158, 22, 0.1);
  color: var(--accent);
}

.gh-icon-box i {
  font-size: 1.5rem;
}

.gh-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gh-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #4b5563;
}

.gh-list-check {
  color: #22c55e;
  /* green-500 */
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Utilities used in template */
/* .gh-text-center already defined in main utilities section */

.gh-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.gh-mb-12 {
  margin-bottom: 3rem;
}

.gh-mb-6 {
  margin-bottom: 1.5rem;
}

.gh-mb-4 {
  margin-bottom: 1rem;
}

.gh-p-6 {
  padding: 1.5rem;
}

.gh-p-8 {
  padding: 2rem;
}

.gh-bg-gray-50 {
  background-color: #f9fafb;
}

.gh-bg-blue-50 {
  background-color: #eff6ff;
}

.gh-bg-white {
  background-color: #fff;
}

.gh-text-lg {
  font-size: 1.125rem;
}

.gh-text-xl {
  font-size: 1.25rem;
}

.gh-font-bold {
  font-weight: 700;
}

.gh-text-gray-600 {
  color: #4b5563;
}

.gh-text-gray-700 {
  color: #374151;
}

.gh-text-blue-700 {
  color: #1d4ed8;
}

.gh-text-blue-800 {
  color: #1e40af;
}

.gh-border-blue-200 {
  border-color: #bfdbfe;
}

.gh-rounded-lg {
  border-radius: 0.5rem;
}

.gh-rounded-2xl {
  border-radius: 1rem;
}

.gh-rounded-full {
  border-radius: 9999px;
}

.gh-underline {
  text-decoration: underline;
}

.gh-flex {
  display: flex;
}

.gh-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gh-items-center {
  align-items: center;
}

.gh-items-start {
  align-items: flex-start;
}

.gh-gap-3 {
  gap: 0.75rem;
}

.gh-gap-4 {
  gap: 1rem;
}

.gh-gap-6 {
  gap: 1.5rem;
}

.gh-gap-8 {
  gap: 2rem;
}

.gh-w-16 {
  width: 4rem;
}

.gh-h-16 {
  height: 4rem;
}

.gh-transition {
  transition: all 0.3s ease;
}

.gh-hover-shadow-lg:hover {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Missing Header Utilities */
.gh-justify-between {
  justify-content: space-between;
}

/* Missing Package Utilities */
.gh-text-green-500 {
  color: #22c55e;
}

.gh-bg-accent-10 {
  background-color: rgba(219, 158, 22, 0.1);
}

.gh-space-y-3 > * + * {
  margin-top: 0.75rem;
}

.gh-mr-2 {
  margin-right: 0.5rem;
}

.gh-mt-1 {
  margin-top: 0.25rem;
}

/* =========================================
   PAGE HERO CARD (Inner Pages - Mobile First)
   Used by: About, Services, Contact, Pricing, Careers, Get Started
   ========================================= */

/* Hero card container - mobile first */
.gh-hero-card {
  position: relative;
  height: 55vh;
  min-height: 380px;
  max-height: 500px;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--primary);
}

@media (min-width: 640px) {
  .gh-hero-card {
    height: 60vh;
    max-height: 650px;
    border-radius: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .gh-hero-card {
    height: 70vh;
    max-height: 748px;
    border-radius: 1.5rem;
  }
}

/* Background image layer */
.gh-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: top center;
  z-index: 0;
}

/* Content wrapper with flexbox centering */
.gh-hero-content-wrapper {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}

@media (min-width: 640px) {
  .gh-hero-content-wrapper {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .gh-hero-content-wrapper {
    padding: 2rem;
  }
}

/* Backdrop content box */
.gh-hero-backdrop-content {
  background-size: cover;
  background-position: center;
  border-radius: 0.75rem;
  padding: 1rem;
  max-width: 100%;
  width: 100%;
  color: #fff; /* White text for contrast on blue backdrop */
}

@media (min-width: 640px) {
  .gh-hero-backdrop-content {
    padding: 1.5rem;
    border-radius: 1rem;
    max-width: 700px;
  }
}

@media (min-width: 1024px) {
  .gh-hero-backdrop-content {
    padding: 2rem;
    max-width: 800px;
  }
}

/* Hero title - responsive sizing */
.gh-hero-backdrop-content .gh-hero-title,
.gh-hero-card .gh-hero-title {
  font-family: var(--heroFont);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.5rem 0;
  color: #fff; /* White text for proper contrast on blue backdrop */
}

@media (min-width: 640px) {
  .gh-hero-backdrop-content .gh-hero-title,
  .gh-hero-card .gh-hero-title {
    font-size: 1.75rem;
    margin: 0.75rem 0;
  }
}

@media (min-width: 1024px) {
  .gh-hero-backdrop-content .gh-hero-title,
  .gh-hero-card .gh-hero-title {
    font-size: 2.25rem;
    margin: 1rem 0;
  }
}

@media (min-width: 1280px) {
  .gh-hero-backdrop-content .gh-hero-title,
  .gh-hero-card .gh-hero-title {
    font-size: 2.5rem;
  }
}

/* Hero description - responsive */
.gh-hero-backdrop-content .gh-hero-desc,
.gh-hero-card .gh-hero-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  max-width: 100%;
  color: var(--textDark);
}

@media (min-width: 640px) {
  .gh-hero-backdrop-content .gh-hero-desc,
  .gh-hero-card .gh-hero-desc {
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
    max-width: 550px;
  }
}

@media (min-width: 1024px) {
  .gh-hero-backdrop-content .gh-hero-desc,
  .gh-hero-card .gh-hero-desc {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    max-width: 600px;
  }
}

/* Badge for page hero */
.gh-badge--page-hero {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.gh-badge--page-hero i {
  color: var(--accent);
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  .gh-badge--page-hero {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    gap: 0.5rem;
  }

  .gh-badge--page-hero i {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .gh-badge--page-hero {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }

  .gh-badge--page-hero i {
    font-size: 1.25rem;
  }
}

/* Hero button - smaller on mobile */
.gh-hero-backdrop-content .gh-btn {
  font-size: 0.8125rem;
  padding: 0.625rem 1rem;
}

@media (min-width: 640px) {
  .gh-hero-backdrop-content .gh-btn {
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem;
  }
}

@media (min-width: 1024px) {
  .gh-hero-backdrop-content .gh-btn {
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
  }
}

/* =========================================
   HERO CARD VARIANTS (for single-package.php)
   ========================================= */
.gh-hero-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  /* Fallback if image fails */
  background: linear-gradient(
    to right,
    rgba(40, 67, 146, 0.9),
    rgba(40, 67, 146, 0.7)
  );
}

.gh-hero-card__content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gh-hero-card__title {
  font-family: var(--heroFont);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .gh-hero-card__title {
    font-size: 4rem;
  }
}

.gh-hero-card__desc {
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
  opacity: 0.9;
  max-width: 600px;
  line-height: 1.6;
}

/* White Button Variant for Hero */
.gh-btn--white {
  background: #fff;
  color: var(--primary) !important;
}

.gh-btn--white:hover {
  background: #f3f4f6;
  color: var(--primary);
  transform: translateY(-2px);
}

.gh-btn--round {
  border-radius: 9999px;
}

/* =========================================
   MISSING UTILITIES & HERO CARD
   (Migrated from Astro/Tailwind mappings)
   ========================================= */

/* Layout & Flexbox */
.gh-flex {
  display: flex;
}

.gh-inline-flex {
  display: inline-flex;
}

.gh-flex-1 {
  flex: 1 1 0%;
}

.gh-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gh-items-center {
  align-items: center;
}

.gh-items-start {
  align-items: flex-start;
}

.gh-justify-between {
  justify-content: space-between;
}

.gh-justify-center {
  justify-content: center;
}

/* Spacing */
.gh-gap-3 {
  gap: 0.75rem;
}

.gh-gap-4 {
  gap: 1rem;
}

.gh-gap-6 {
  gap: 1.5rem;
}

.gh-gap-8 {
  gap: 2rem;
}

.gh-p-6 {
  padding: 1.5rem;
}

.gh-p-8 {
  padding: 2rem;
}

.gh-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.gh-px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.gh-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.gh-mb-4 {
  margin-bottom: 1rem;
}

.gh-mb-6 {
  margin-bottom: 1.5rem;
}

.gh-mb-12 {
  margin-bottom: 3rem;
}

.gh-mt-1 {
  margin-top: 0.25rem;
}

.gh-mt-8 {
  margin-top: 2rem;
}

.gh-mr-2 {
  margin-right: 0.5rem;
}

.gh-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.gh-max-w-2xl {
  max-width: 42rem;
}

.gh-max-w-4xl {
  max-width: 56rem;
}

.gh-max-w-6xl {
  max-width: 72rem;
}

/* Typography */
/* .gh-text-center already defined in main utilities section */

.gh-text-left {
  text-align: left;
}

.gh-text-sm {
  font-size: 0.875rem;
}

.gh-text-lg {
  font-size: 1.125rem;
}

.gh-text-xl {
  font-size: 1.25rem;
}

.gh-text-2xl {
  font-size: 1.5rem;
}

.gh-font-bold {
  font-weight: 700;
}

.gh-underline {
  text-decoration: underline;
}

/* Colors */
.gh-text-white {
  color: #fff;
}

.gh-text-primary {
  color: var(--primary);
}

.gh-text-gray-600 {
  color: #4b5563;
}

.gh-text-gray-700 {
  color: #374151;
}

.gh-text-blue-700 {
  color: #1d4ed8;
}

.gh-text-blue-800 {
  color: #1e40af;
}

.gh-text-green-500 {
  color: #22c55e;
}

.gh-text-green-700 {
  color: #15803d;
}

.gh-text-green-800 {
  color: #166534;
}

.gh-text-accent {
  color: var(--accent);
}

.gh-bg-white {
  background-color: #fff;
}

.gh-bg-primary {
  background-color: var(--primary);
}

.gh-bg-gray-50 {
  background-color: #f9fafb;
}

.gh-bg-blue-50 {
  background-color: #eff6ff;
}

.gh-bg-green-50 {
  background-color: #f0fdf4;
}

.gh-bg-blue-100 {
  background-color: #dbeafe;
}

.gh-bg-yellow-100 {
  background-color: #fef9c3;
}

.gh-bg-accent-10 {
  background-color: rgba(219, 158, 22, 0.1);
}

/* Borders & Rounded */
.gh-border {
  border-width: 1px;
}

.gh-border-blue-200 {
  border-color: #bfdbfe;
}

.gh-border-green-200 {
  border-color: #bbf7d0;
}

.gh-rounded-lg {
  border-radius: 0.5rem;
}

.gh-rounded-2xl {
  border-radius: 1rem;
}

.gh-rounded-full {
  border-radius: 9999px;
}

.gh-w-16 {
  width: 4rem;
}

.gh-h-16 {
  height: 4rem;
}

/* Shadows & Transitions */
.gh-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
}

.gh-card--shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.gh-hover-shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.gh-transition {
  transition: all 0.3s ease;
}

/* Special Components */
.gh-shift-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.gh-icon-box {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}

.gh-icon-box i {
  font-size: 1.5rem;
}

.gh-icon-box--yellow {
  background-color: #fef9c3;
  color: var(--accent);
}

.gh-icon-box--blue {
  background-color: #dbeafe;
  color: var(--primary);
}

.gh-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gh-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #4b5563;
}

/* Systematic Audit Fixes */

/* Header & Nav Parity */
.site-header {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Container padding is defined in the main .gh-container block */

/* Grid gap defined in main .gh-grid block */

/* gap-8 (default in Astro) */

/* Card Shadows Parity */
.gh-card:hover {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* hover:shadow-xl */

/* Pricing Page Specifics */
.gh-grid--packages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.gh-absolute-top-center {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
}

.gh-bg-orange-50 {
  background-color: #fff7ed;
}

.gh-border-orange {
  border-color: #ffb800;
}

/* Meal Plan Section */
.gh-meal-section {
  background-color: #233a7d;
  padding: 4rem 0;
  color: #ffffff;
}

.gh-meal-section__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .gh-meal-section__content {
    grid-template-columns: 1fr 1fr;
  }
}

.gh-meal-section__image img {
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 0.5rem;
  width: 100%;
  max-width: 420px;
  height: 380px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.gh-text--gray-200 {
  color: #eaecf0;
}

/* Caregiver Training Section */
.gh-training-section {
  padding-top: 4rem;
}

/* =========================================
   CAREERS PAGE: Positions Section (Dark Blue Background)
   ========================================= */
.gh-positions-section {
  background-color: #233a7d;
  padding: 4rem 0;
  color: #fff;
}

.gh-positions-section h2,
.gh-positions-section .gh-title--white {
  color: #fff;
}

.gh-positions-section__image {
  border-radius: 1.5rem;
  overflow: hidden;
  width: 100%;
}

.gh-positions-section__image img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}

/* =========================================
   PRICING PAGE: FAQ Section
   ========================================= */
.gh-pricing-faq {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  border: 1px solid #e5e7eb;
  margin-bottom: 2rem;
}

.gh-pricing-faq__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2rem;
  text-align: center;
}

.gh-pricing-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .gh-pricing-faq__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gh-pricing-faq__item h4 {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.gh-pricing-faq__item p {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* =========================================
   PRICING PAGE: Next Steps Section
   ========================================= */
.gh-next-steps {
  background-color: var(--primary);
  color: #fff;
  padding: 4rem 1rem;
  text-align: center;
}

.gh-next-steps h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .gh-next-steps h2 {
    font-size: 2.25rem;
  }
}

.gh-next-steps p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.gh-next-steps__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

@media (min-width: 640px) {
  .gh-next-steps__buttons {
    flex-direction: row;
  }
}

.gh-next-steps__btn {
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.2s;
  text-decoration: none;
}

.gh-next-steps__btn--accent {
  background-color: var(--accent);
  color: #fff;
}

.gh-next-steps__btn--accent:hover {
  background-color: #ca8a04;
}

.gh-next-steps__btn--outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.gh-next-steps__btn--outline:hover {
  background: #fff;
  color: var(--primary);
}

.gh-next-steps__note {
  margin-top: 2rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

/* ========================================
   SINGLE PACKAGE PAGE STYLES
   ======================================== */

/* Feature Cards */
.gh-feature-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.gh-feature-card:hover {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.gh-feature-card__icon {
  width: 4rem;
  height: 4rem;
  background: rgba(219, 158, 22, 0.1);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.gh-feature-card__icon i {
  font-size: 1.5rem;
  color: var(--accent);
}

.gh-feature-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.gh-feature-card__desc {
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Included Services 2-Column Grid */
.gh-included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .gh-included-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}

/* How It Works Section */
.gh-how-it-works {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .gh-how-it-works {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.gh-how-it-works__step {
  text-align: center;
}

.gh-how-it-works__number {
  width: 5rem;
  height: 5rem;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1.5rem;
}

.gh-how-it-works__content {
  text-align: center;
}

.gh-how-it-works__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1rem;
}

.gh-how-it-works__desc {
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Package Excellence CTA Banner */
.gh-package-excellence {
  background: var(--primary);
  color: #fff;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto;
}

.gh-package-excellence__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.gh-package-excellence__desc {
  font-size: 1.125rem;
  line-height: 1.7;
  opacity: 0.95;
}

/* Package FAQ Section */
.gh-package-faq {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gh-package-faq__item {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.gh-package-faq__question {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.gh-package-faq__answer {
  color: #374151;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Space Y utility for consistent vertical spacing */
.gh-space-y-4 > * + * {
  margin-top: 1rem;
}

/* Flex shrink utility */
.gh-flex-shrink-0 {
  flex-shrink: 0;
}

/* Testimonials Grid for Package Pages */
.gh-testimonials-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* =========================================
   COMPREHENSIVE UTILITY SYSTEM
   Added for visual parity with Astro/Tailwind frontend
   ========================================= */

/* -----------------------------------------
   ALIGNMENT UTILITIES - COMPLETE
   ----------------------------------------- */

/* Justify Content */
.gh-justify-start {
  justify-content: flex-start;
}
.gh-justify-center {
  justify-content: center;
}
.gh-justify-end {
  justify-content: flex-end;
}
.gh-justify-between {
  justify-content: space-between;
}
.gh-justify-around {
  justify-content: space-around;
}
.gh-justify-evenly {
  justify-content: space-evenly;
}

/* Align Items */
.gh-items-start {
  align-items: flex-start;
}
.gh-items-center {
  align-items: center;
}
.gh-items-end {
  align-items: flex-end;
}
.gh-items-stretch {
  align-items: stretch;
}
.gh-items-baseline {
  align-items: baseline;
}

/* Align Self */
.gh-self-start {
  align-self: flex-start;
}
.gh-self-center {
  align-self: center;
}
.gh-self-end {
  align-self: flex-end;
}
.gh-self-stretch {
  align-self: stretch;
}

/* Text Alignment - defined earlier, adding justify only */
.gh-text-justify {
  text-align: justify;
}

/* -----------------------------------------
   SPACING UTILITIES - COMPLETE SCALE
   Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24
   ----------------------------------------- */

/* Padding - Top */
.gh-pt-0 {
  padding-top: 0;
}
.gh-pt-1 {
  padding-top: 0.25rem;
}
.gh-pt-2 {
  padding-top: 0.5rem;
}
.gh-pt-3 {
  padding-top: 0.75rem;
}
.gh-pt-4 {
  padding-top: 1rem;
}
.gh-pt-5 {
  padding-top: 1.25rem;
}
.gh-pt-6 {
  padding-top: 1.5rem;
}
.gh-pt-8 {
  padding-top: 2rem;
}
.gh-pt-10 {
  padding-top: 2.5rem;
}
.gh-pt-12 {
  padding-top: 3rem;
}
.gh-pt-16 {
  padding-top: 4rem;
}
.gh-pt-20 {
  padding-top: 5rem;
}
.gh-pt-24 {
  padding-top: 6rem;
}

/* Padding - Right */
.gh-pr-0 {
  padding-right: 0;
}
.gh-pr-1 {
  padding-right: 0.25rem;
}
.gh-pr-2 {
  padding-right: 0.5rem;
}
.gh-pr-3 {
  padding-right: 0.75rem;
}
.gh-pr-4 {
  padding-right: 1rem;
}
.gh-pr-5 {
  padding-right: 1.25rem;
}
.gh-pr-6 {
  padding-right: 1.5rem;
}
.gh-pr-8 {
  padding-right: 2rem;
}

/* Padding - Bottom */
.gh-pb-0 {
  padding-bottom: 0;
}
.gh-pb-1 {
  padding-bottom: 0.25rem;
}
.gh-pb-2 {
  padding-bottom: 0.5rem;
}
.gh-pb-3 {
  padding-bottom: 0.75rem;
}
.gh-pb-4 {
  padding-bottom: 1rem;
}
.gh-pb-5 {
  padding-bottom: 1.25rem;
}
.gh-pb-6 {
  padding-bottom: 1.5rem;
}
.gh-pb-8 {
  padding-bottom: 2rem;
}
.gh-pb-10 {
  padding-bottom: 2.5rem;
}
.gh-pb-12 {
  padding-bottom: 3rem;
}
.gh-pb-16 {
  padding-bottom: 4rem;
}

/* Padding - Left */
.gh-pl-0 {
  padding-left: 0;
}
.gh-pl-1 {
  padding-left: 0.25rem;
}
.gh-pl-2 {
  padding-left: 0.5rem;
}
.gh-pl-3 {
  padding-left: 0.75rem;
}
.gh-pl-4 {
  padding-left: 1rem;
}
.gh-pl-5 {
  padding-left: 1.25rem;
}
.gh-pl-6 {
  padding-left: 1.5rem;
}
.gh-pl-8 {
  padding-left: 2rem;
}

/* Padding - Horizontal (X) */
.gh-px-0 {
  padding-left: 0;
  padding-right: 0;
}
.gh-px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.gh-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.gh-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.gh-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.gh-px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.gh-px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.gh-px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Padding - Vertical (Y) */
.gh-py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.gh-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.gh-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.gh-py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.gh-py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.gh-py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.gh-py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.gh-py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.gh-py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.gh-py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.gh-py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.gh-py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.gh-py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Padding - All */
.gh-p-0 {
  padding: 0;
}
.gh-p-1 {
  padding: 0.25rem;
}
.gh-p-2 {
  padding: 0.5rem;
}
.gh-p-3 {
  padding: 0.75rem;
}
.gh-p-4 {
  padding: 1rem;
}
.gh-p-5 {
  padding: 1.25rem;
}
.gh-p-6 {
  padding: 1.5rem;
}
.gh-p-8 {
  padding: 2rem;
}
.gh-p-10 {
  padding: 2.5rem;
}
.gh-p-12 {
  padding: 3rem;
}

/* Margin - Top */
.gh-mt-0 {
  margin-top: 0;
}
.gh-mt-1 {
  margin-top: 0.25rem;
}
.gh-mt-2 {
  margin-top: 0.5rem;
}
.gh-mt-3 {
  margin-top: 0.75rem;
}
.gh-mt-4 {
  margin-top: 1rem;
}
.gh-mt-5 {
  margin-top: 1.25rem;
}
.gh-mt-6 {
  margin-top: 1.5rem;
}
.gh-mt-8 {
  margin-top: 2rem;
}
.gh-mt-10 {
  margin-top: 2.5rem;
}
.gh-mt-12 {
  margin-top: 3rem;
}
.gh-mt-16 {
  margin-top: 4rem;
}
.gh-mt-auto {
  margin-top: auto;
}

/* Margin - Right */
.gh-mr-0 {
  margin-right: 0;
}
.gh-mr-1 {
  margin-right: 0.25rem;
}
.gh-mr-2 {
  margin-right: 0.5rem;
}
.gh-mr-3 {
  margin-right: 0.75rem;
}
.gh-mr-4 {
  margin-right: 1rem;
}
.gh-mr-auto {
  margin-right: auto;
}

/* Margin - Bottom */
.gh-mb-0 {
  margin-bottom: 0;
}
.gh-mb-1 {
  margin-bottom: 0.25rem;
}
.gh-mb-2 {
  margin-bottom: 0.5rem;
}
.gh-mb-3 {
  margin-bottom: 0.75rem;
}
.gh-mb-4 {
  margin-bottom: 1rem;
}
.gh-mb-5 {
  margin-bottom: 1.25rem;
}
.gh-mb-6 {
  margin-bottom: 1.5rem;
}
.gh-mb-8 {
  margin-bottom: 2rem;
}
.gh-mb-10 {
  margin-bottom: 2.5rem;
}
.gh-mb-12 {
  margin-bottom: 3rem;
}
.gh-mb-16 {
  margin-bottom: 4rem;
}

/* Margin - Left */
.gh-ml-0 {
  margin-left: 0;
}
.gh-ml-1 {
  margin-left: 0.25rem;
}
.gh-ml-2 {
  margin-left: 0.5rem;
}
.gh-ml-3 {
  margin-left: 0.75rem;
}
.gh-ml-4 {
  margin-left: 1rem;
}
.gh-ml-auto {
  margin-left: auto;
}

/* Margin - Horizontal (X) */
.gh-mx-0 {
  margin-left: 0;
  margin-right: 0;
}
.gh-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.gh-mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Margin - Vertical (Y) */
.gh-my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.gh-my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.gh-my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* -----------------------------------------
   GAP UTILITIES - COMPLETE SCALE
   ----------------------------------------- */
.gh-gap-0 {
  gap: 0;
}
.gh-gap-1 {
  gap: 0.25rem;
}
.gh-gap-2 {
  gap: 0.5rem;
}
.gh-gap-3 {
  gap: 0.75rem;
}
.gh-gap-4 {
  gap: 1rem;
}
.gh-gap-5 {
  gap: 1.25rem;
}
.gh-gap-6 {
  gap: 1.5rem;
}
.gh-gap-8 {
  gap: 2rem;
}
.gh-gap-10 {
  gap: 2.5rem;
}
.gh-gap-12 {
  gap: 3rem;
}

/* -----------------------------------------
   DISPLAY UTILITIES
   ----------------------------------------- */
.gh-block {
  display: block;
}
.gh-inline-block {
  display: inline-block;
}
.gh-inline {
  display: inline;
}
.gh-flex {
  display: flex;
}
.gh-inline-flex {
  display: inline-flex;
}
/* .gh-grid defined in main grid section */
.gh-hidden {
  display: none;
}

/* Flex Direction */
.gh-flex-row {
  flex-direction: row;
}
.gh-flex-col {
  flex-direction: column;
}
.gh-flex-row-reverse {
  flex-direction: row-reverse;
}
.gh-flex-col-reverse {
  flex-direction: column-reverse;
}

/* Flex Wrap */
.gh-flex-wrap {
  flex-wrap: wrap;
}
.gh-flex-nowrap {
  flex-wrap: nowrap;
}

/* Flex Grow/Shrink */
.gh-flex-1 {
  flex: 1 1 0%;
}
.gh-flex-auto {
  flex: 1 1 auto;
}
.gh-flex-none {
  flex: none;
}
.gh-flex-grow {
  flex-grow: 1;
}
.gh-flex-grow-0 {
  flex-grow: 0;
}
.gh-flex-shrink {
  flex-shrink: 1;
}
.gh-flex-shrink-0 {
  flex-shrink: 0;
}

/* -----------------------------------------
   WIDTH UTILITIES
   ----------------------------------------- */
.gh-w-full {
  width: 100%;
}
.gh-w-auto {
  width: auto;
}
.gh-w-1\/2 {
  width: 50%;
}
.gh-w-1\/3 {
  width: 33.333333%;
}
.gh-w-2\/3 {
  width: 66.666667%;
}
.gh-w-1\/4 {
  width: 25%;
}
.gh-w-3\/4 {
  width: 75%;
}

/* Max Width */
.gh-max-w-none {
  max-width: none;
}
.gh-max-w-xs {
  max-width: 20rem;
}
.gh-max-w-sm {
  max-width: 24rem;
}
.gh-max-w-md {
  max-width: 28rem;
}
.gh-max-w-lg {
  max-width: 32rem;
}
.gh-max-w-xl {
  max-width: 36rem;
}
.gh-max-w-2xl {
  max-width: 42rem;
}
.gh-max-w-3xl {
  max-width: 48rem;
}
.gh-max-w-4xl {
  max-width: 56rem;
}
.gh-max-w-5xl {
  max-width: 64rem;
}
.gh-max-w-6xl {
  max-width: 72rem;
}
.gh-max-w-full {
  max-width: 100%;
}
.gh-max-w-prose {
  max-width: 65ch;
}

/* -----------------------------------------
   HEIGHT UTILITIES
   ----------------------------------------- */
.gh-h-full {
  height: 100%;
}
.gh-h-auto {
  height: auto;
}
.gh-h-screen {
  height: 100vh;
}
.gh-min-h-screen {
  min-height: 100vh;
}

/* -----------------------------------------
   TYPOGRAPHY UTILITIES - EXTENDED
   ----------------------------------------- */

/* Font Sizes */
.gh-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.gh-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.gh-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.gh-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.gh-text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.gh-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.gh-text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.gh-text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.gh-text-5xl {
  font-size: 3rem;
  line-height: 1;
}

/* Font Weights */
.gh-font-normal {
  font-weight: 400;
}
.gh-font-medium {
  font-weight: 500;
}
.gh-font-semibold {
  font-weight: 600;
}
.gh-font-bold {
  font-weight: 700;
}
.gh-font-extrabold {
  font-weight: 800;
}

/* Line Height */
.gh-leading-none {
  line-height: 1;
}
.gh-leading-tight {
  line-height: 1.25;
}
.gh-leading-snug {
  line-height: 1.375;
}
.gh-leading-normal {
  line-height: 1.5;
}
.gh-leading-relaxed {
  line-height: 1.625;
}
.gh-leading-loose {
  line-height: 2;
}

/* -----------------------------------------
   BORDER UTILITIES
   ----------------------------------------- */
.gh-border {
  border-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}
.gh-border-0 {
  border-width: 0;
}
.gh-border-2 {
  border-width: 2px;
}
.gh-border-t {
  border-top-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}
.gh-border-r {
  border-right-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}
.gh-border-b {
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}
.gh-border-l {
  border-left-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}

/* Border Radius */
.gh-rounded-none {
  border-radius: 0;
}
.gh-rounded-sm {
  border-radius: 0.125rem;
}
.gh-rounded {
  border-radius: 0.25rem;
}
.gh-rounded-md {
  border-radius: 0.375rem;
}
.gh-rounded-lg {
  border-radius: 0.5rem;
}
.gh-rounded-xl {
  border-radius: 0.75rem;
}
.gh-rounded-2xl {
  border-radius: 1rem;
}
.gh-rounded-3xl {
  border-radius: 1.5rem;
}
.gh-rounded-full {
  border-radius: 9999px;
}

/* -----------------------------------------
   SHADOW UTILITIES
   ----------------------------------------- */
.gh-shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.gh-shadow {
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.gh-shadow-md {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.gh-shadow-lg {
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.gh-shadow-xl {
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.gh-shadow-none {
  box-shadow: none;
}

/* -----------------------------------------
   OVERFLOW UTILITIES
   ----------------------------------------- */
.gh-overflow-auto {
  overflow: auto;
}
.gh-overflow-hidden {
  overflow: hidden;
}
.gh-overflow-visible {
  overflow: visible;
}
.gh-overflow-scroll {
  overflow: scroll;
}

/* -----------------------------------------
   POSITION UTILITIES
   ----------------------------------------- */
.gh-static {
  position: static;
}
.gh-relative {
  position: relative;
}
.gh-absolute {
  position: absolute;
}
.gh-fixed {
  position: fixed;
}
.gh-sticky {
  position: sticky;
}

.gh-inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.gh-top-0 {
  top: 0;
}
.gh-right-0 {
  right: 0;
}
.gh-bottom-0 {
  bottom: 0;
}
.gh-left-0 {
  left: 0;
}

/* -----------------------------------------
   Z-INDEX UTILITIES
   ----------------------------------------- */
.gh-z-0 {
  z-index: 0;
}
.gh-z-10 {
  z-index: 10;
}
.gh-z-20 {
  z-index: 20;
}
.gh-z-30 {
  z-index: 30;
}
.gh-z-40 {
  z-index: 40;
}
.gh-z-50 {
  z-index: 50;
}

/* -----------------------------------------
   BACKGROUND COLOR UTILITIES
   ----------------------------------------- */
.gh-bg-transparent {
  background-color: transparent;
}
.gh-bg-white {
  background-color: #fff;
}
.gh-bg-black {
  background-color: #000;
}
.gh-bg-primary {
  background-color: var(--primary);
}
.gh-bg-accent {
  background-color: var(--accent);
}
.gh-bg-gray-50 {
  background-color: #f9fafb;
}
.gh-bg-gray-100 {
  background-color: #f3f4f6;
}
.gh-bg-gray-200 {
  background-color: #e5e7eb;
}
.gh-bg-blue-50 {
  background-color: #eff6ff;
}
.gh-bg-blue-100 {
  background-color: #dbeafe;
}
.gh-bg-green-50 {
  background-color: #f0fdf4;
}
.gh-bg-yellow-50 {
  background-color: #fefce8;
}
.gh-bg-orange-50 {
  background-color: #fff7ed;
}

/* -----------------------------------------
   TEXT COLOR UTILITIES
   ----------------------------------------- */
.gh-text-transparent {
  color: transparent;
}
.gh-text-white {
  color: #fff;
}
.gh-text-black {
  color: #000;
}
.gh-text-primary {
  color: var(--primary);
}
.gh-text-accent {
  color: var(--accent);
}
.gh-text-gray-400 {
  color: #9ca3af;
}
.gh-text-gray-500 {
  color: #4b5563; /* Improved contrast for accessibility */
}
.gh-text-gray-600 {
  color: #4b5563;
}
.gh-text-gray-700 {
  color: #374151;
}
.gh-text-gray-800 {
  color: #1f2937;
}
.gh-text-gray-900 {
  color: #111827;
}
.gh-text-green-500 {
  color: #22c55e;
}
.gh-text-green-600 {
  color: #16a34a;
}
.gh-text-blue-600 {
  color: #2563eb;
}
.gh-text-blue-800 {
  color: #1e40af;
}

/* -----------------------------------------
   BORDER COLOR UTILITIES
   ----------------------------------------- */
.gh-border-transparent {
  border-color: transparent;
}
.gh-border-white {
  border-color: #fff;
}
.gh-border-gray-200 {
  border-color: #e5e7eb;
}
.gh-border-gray-300 {
  border-color: #d1d5db;
}
.gh-border-primary {
  border-color: var(--primary);
}
.gh-border-accent {
  border-color: var(--accent);
}
.gh-border-blue-200 {
  border-color: #bfdbfe;
}
.gh-border-orange {
  border-color: #fb923c;
}

/* -----------------------------------------
   OPACITY UTILITIES
   ----------------------------------------- */
.gh-opacity-0 {
  opacity: 0;
}
.gh-opacity-25 {
  opacity: 0.25;
}
.gh-opacity-50 {
  opacity: 0.5;
}
.gh-opacity-75 {
  opacity: 0.75;
}
.gh-opacity-100 {
  opacity: 1;
}
.gh-bg-opacity-50 {
  --gh-bg-opacity: 0.5;
}

/* -----------------------------------------
   TRANSITION UTILITIES
   ----------------------------------------- */
.gh-transition {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.gh-transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.gh-transition-colors {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* -----------------------------------------
   HOVER UTILITIES
   ----------------------------------------- */
.gh-hover-shadow-xl:hover {
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.gh-hover-bg-primary:hover {
  background-color: var(--primary);
}
.gh-hover-bg-accent:hover {
  background-color: var(--accent);
}
.gh-hover-text-primary:hover {
  color: var(--primary);
}
.gh-hover-text-white:hover {
  color: #fff;
}

/* =========================================
   RESPONSIVE UTILITIES
   Note: Responsive behavior is handled via component-level
   media queries (e.g., .gh-grid--packages) rather than
   Tailwind-style breakpoint prefixes (md:, lg:, xl:).
   ========================================= */

/* =========================================
   ACCESSIBILITY UTILITIES
   ========================================= */
/* Screen reader only - visually hidden but accessible */
.gh-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;
}