:root {
    /* Brand Colors */
    --primary: #2a5f6e; /* Deep Teal */
    --primary-light: #3d8699;
    --primary-dark: #1d4249;
    --secondary: #02866d; /* Sea Green */
    --secondary-light: #3aad6d;
    --secondary-dark: #216b41;
    --accent: #ffb347; /* Warm Orange */
    --accent-light: #ffd580;
    --notice: #e95159; /* Warm Red */
    --notice-light: #f08080;

    /* Neutral Colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Typography */
    --font-primary: 'Noto Sans Arabic', sans-serif;
    --font-secondary: 'IBM Plex Sans Arabic', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-vs: 0.15rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-xxl: 0 20px 48px rgba(0, 0, 0, 0.18);

    /* Transitions */
    --transition-base: all 0.3s ease;

    /* RGB vars for overlays */
    --primary-rgb: 41, 128, 185;
    --secondary-rgb: 46, 204, 113;
    --accent-rgb: 255, 179, 71;
    --notice-rgb: 233, 81, 89;
    --success-rgb: 76, 175, 80;

    /* Highlights */
    --highlight-icon-size: 56px;
    --highlight-icon-gap: var(--spacing-xs);
    --highlight-text-shift: 14px;
    --highlight-title-gap: var(--spacing-sm);
    --highlight-separator-gap: 0.5rem;
    --highlight-separator-color: rgba(255,255,255,0.12);
}

/* Base Styles */
body {
    font-family: var(--font-primary);
    color: var(--gray-900);
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Typography Utilities */
.text-muted { color: var(--gray-500); }
.text-center { text-align: center; }

/* Background Utilities */
.bg-light { background-color: var(--gray-50); }


/* Layout Utilities */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); }

/* Breadcrumb Styles */
.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style: none;
    margin: -30px 0 var(--spacing-md);
    padding: 0;
}
.breadcrumb-item {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}
.breadcrumb-item:not(:last-child)::after {
    content: '›';
    margin-left: 1rem;
    color: var(--gray-400);
    font-size: 1.2rem;
    line-height: 1;
}
.breadcrumb-item a {
    color: var(--gray-600);
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}
.breadcrumb-item.active {
    color: #fff;
    background: var(--primary);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
}

/* Page Header */
.page-header {
    position: relative;
    z-index: 1;
    padding: 60px 0 120px;
    background: linear-gradient(135deg,var(--primary-light) 0%,var(--primary-dark) 100%);
    overflow: visible;
    margin: 0;
}
#particles-js { position: absolute; inset: 0; z-index: 1; }
.page-header__content { position: relative; z-index: 2; }
.page-header__lead {
    font-size: clamp(1rem, 1rem + .6vw, 1.1rem);
    line-height: 1.5;
    color: #fff;
    font-weight: 400;
    margin-top: var(--spacing-sm);
    margin-bottom: 10px;
}
.page-header .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;
}


.page-header .breadcrumb-list { gap: 0.75rem; }
.page-header .breadcrumb-item {
    color: rgba(255,255,255,0.75);
    font-size: var(--font-size-xs);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
}
.page-header .breadcrumb-item a {
    color: rgba(255,255,255,0.85);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    transition: background .25s ease, color .25s ease;
}
.page-header .breadcrumb-item a:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.page-header .breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin-left: 0.75rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    transform: translateY(1px);
}
.page-header .breadcrumb-item.active {
    color: #fff;
    background: rgba(255,255,255,0.18);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.55rem;
}

/* Features Overlap Grid + Cards */
.features-overlap {
    position: relative;
    max-width: 1200px;
    margin: -90px auto 40px;
    z-index: 999;
    padding: 0 var(--spacing-lg);
}
.features-grid__wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--spacing-lg);
    position: relative;
    z-index: 1000;
}
.features-overlap .feature-card {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1001;
}
.features-overlap .feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
    z-index: 1002;
}
.feature-card__icon-bg {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 120px;
    color: var(--primary);
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}
.feature-card__content {
    position: relative;
    z-index: 10;
}
.feature-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 1rem;
    position: relative;
    z-index: 11;
}
.feature-card__text {
    color: var(--gray-700);
    line-height: 1.6;
    position: relative;
    z-index: 11;
}

/* About Highlights */
.about-highlights {
    position: relative;
    max-width: 1200px;
    margin: -70px auto 50px;
    padding: 0 var(--spacing-lg);
    z-index: 20;
}
.about-highlights__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: var(--spacing-lg);
}
.highlight-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.25);
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
    padding-left: calc(var(--spacing-lg) + var(--highlight-icon-size) + var(--highlight-icon-gap));
    transition: transform .35s, box-shadow .35s, border-color .35s;
}
.highlight-card::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,0.08), transparent 60%),
        radial-gradient(circle at 80% 85%, rgba(255,255,255,0.05), transparent 65%);
    mix-blend-mode: overlay;
    pointer-events: none;
}
.highlight-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 38px -6px rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.18);
}
.highlight-card__icon {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-lg);
    width: var(--highlight-icon-size);
    height: var(--highlight-icon-size);
    display: flex; align-items: center; justify-content: center;
    opacity: 0.9;
}
.highlight-card__title {
    margin-top: 0;                        /* remove any extra top spacing */
    margin-bottom: 20px;                 /* space below title */
    line-height: 1.7;
    text-transform: uppercase;       /* make all caps */
    color: var(--gray-200);      /* dark primary color */
    font-weight: 700;                /* optional: keep it bold for emphasis */
}
.highlight-card__text {
    margin-top: var(--spacing-xs);
    margin-left: calc(-5 * var(--highlight-text-shift));
}
.highlight-card__more {
    display: inline-block;
    margin-left: .35rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: color .25s;
}
.highlight-card__more:hover { color: var(--accent-light); text-decoration: underline; }

/* Responsive Adjustments */
@media (max-width: 992px) {
    .features-overlap .features-grid__wrapper { grid-template-columns: repeat(2,1fr); }
    .features-overlap { margin: -70px auto 40px; }
}
@media (max-width: 768px) {
    .breadcrumb-nav { padding: 0.5rem var(--spacing-sm); margin-bottom: var(--spacing-lg); }
    .breadcrumb-item { font-size: var(--font-size-xs); }
    .page-header { padding: 32px 0 60px; }
    .page-header__lead { font-size: 1rem; line-height: 1.45; margin-top: var(--spacing-xs); }
    .page-header .breadcrumb-item { font-size: 0.65rem; letter-spacing: 0.4px; }
    .page-header .breadcrumb-item a { padding: 0.15rem 0.55rem; }
    .features-overlap { margin: 20px auto 30px; padding:0 var(--spacing-md); }
    .features-overlap .features-grid__wrapper { grid-template-columns:1fr; gap: var(--spacing-md); }
    .feature-card {
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) calc(var(--spacing-sm) + 36px);
    }
    .feature-card__icon { top: var(--spacing-sm); left: var(--spacing-sm); width: 28px; height: 28px; font-size: 1.05rem; }
    .feature-card__title { font-size: 0.9rem; }
    .feature-card__text { font-size: 0.7rem; line-height: 1.32; }
    :root {
        --highlight-icon-size: 48px;
        --highlight-icon-gap: 0.2rem;
        --highlight-text-shift: 10px;
        --highlight-separator-gap: 0.25rem;
    }
}
@media (max-width: 480px) {
    .page-header { padding: 24px 0 48px; }
    .page-header__lead { font-size: 0.9rem; }
    .feature-card { padding: var(--spacing-sm); }
}
/* === Alternating Sections === */


/* Add spacing between consecutive sections */
.content-section + .content-section {
    margin-top: 0.25rem;
}


.bg-light {
    background: var(--gray-50);
}

.bg-white {
    background: #fff;
}

/* === Section Titles with Leaf === */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs); /* spacing between icon/text if needed */
    
    font-size: clamp(1.25rem, 2vw + 0.5rem, var(--font-size-xl)); 
    font-weight: 700;
    line-height: 1.3; /* better readability */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* improves uppercase legibility */
    
    margin: var(--spacing-md) 0 var(--spacing-sm) 0; /* balanced vertical rhythm */
    padding-left: var(--spacing-md);

    color: var(--primary-dark);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    
    /* Accessibility: better contrast handling */
    background-color: var(--background-light, transparent);
}

/* RTL overrides for section titles */
html[dir="rtl"] .section-title { 
  margin-right: var(--spacing-sm); margin-left: 0; 
  border-right: 5px solid var(--accent); border-left: 0; 
  padding-right: var(--spacing-sm); padding-left: 0; 
}
html[dir="rtl"] .contact-page .section-title { 
  border-right: 6px solid var(--primary-light); border-left: 0; 
  padding-right: .75rem; padding-left: 0; 
  background: linear-gradient(270deg, rgba(var(--primary-rgb),.12), transparent 70%); 
}
html[dir="rtl"] .service-detail .section-title { 
  border-right: 6px solid var(--primary-light); border-left: 0; 
  padding-right: .75rem; padding-left: 0; 
  background: linear-gradient(270deg, rgba(var(--primary-rgb),.10), transparent 70%); 
}

/* === Rich Content Block === */
.rich-content p {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    background: #fff;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    margin: 0;
}

/* === Values List === */
.values-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 0;
    display: grid;
    gap: var(--spacing-sm);
    padding-left: var(--spacing-lg); /* shift list to the right */
}

.value-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: 500;
    background: #fff;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.value-item i {
    color: var(--primary-light);
    margin-right: var(--spacing-sm);
    font-size: 1.1rem;
}

.value-item:hover {
    background: var(--gray-100);
    border-left-color: var(--accent);
    transform: translateX(4px);
}

/* === CTA Section === */
.cta-section {
    text-align: center;
    padding: var(--spacing-xl) 0;
}
.goals-section {
    padding: 2rem 1rem;
    text-align: center;
}
.goals-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: 0.5rem;
}
.goal-card {
    background: var(--gray-50);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease;
}
.goal-card:hover {
    transform: translateY(-5px);
}
.goal-card__icon {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1rem;
}
.goal-card__title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
}
.goal-card__text {
    font-size: 1rem;
    color: var(--secondary-dark);
}

/* === Mobile Fix === */
@media (max-width: 768px) {
    .section-title {
        font-size: var(--font-size-xl);
    }
    .rich-content p {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
}

/* === Timeline Section === */
.timeline-section {
    margin-top: var(--spacing-xl);
}
.timeline {
    list-style: none;
    margin: var(--spacing-lg) 0 0;
    padding: 0;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary-light), var(--primary-dark));
    left: 42px;
    border-radius: 2px;
}
.timeline-item {
    position: relative;
    display: flex;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-marker {
    position: relative;
    width: 84px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;      /* Center horizontally */
    justify-content: flex-start;
}
.timeline-marker .timeline-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.timeline-marker .timeline-icon {
    font-size: 1.15em;
    color: var(--accent, #ffb347);
    background: none;
    box-shadow: none;
    line-height: 1;
    margin: 0;
    transition: color 0.2s;
}
.timeline-marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: #fff;
    border: 4px solid var(--primary-light);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
    z-index: 1;
    transition: border-color 0.2s;
}
.timeline-marker .timeline-year {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 8px;
    margin-left: 0;
    font-size: 1.05rem;
    color: var(--primary-dark);
    font-weight: 500;
    letter-spacing: 0.5px;
    background: #fff;
    border-radius: 1.5rem;
    padding: 2px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: relative;
    z-index: 3;
    border: 3px solid var(--primary-light); /* Same color and thickness as timeline point */
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    left: 0;
}

.timeline-marker .timeline-icon-wrapper,
.timeline-marker::after {
    margin-top: 12px;
}

.timeline-item:hover .timeline-marker .timeline-year {
    background: var(--accent-light);
    color: var(--primary);
    border-color: var(--accent); /* Match hover border to point */
}

.timeline-content {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 5px solid var(--primary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    flex: 1;
    transition: box-shadow .3s, transform .3s, border-color .3s, max-height .4s cubic-bezier(.4,1.4,.6,1), background .3s;
    cursor: pointer;
    position: relative;
    max-height: 180px;
    overflow: hidden;
}
.timeline-content.expanded {
    background: var(--accent-light);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
    max-height: 2000px; /* or max-height: none; */
    overflow: visible;
    z-index: 2;
    transition: max-height 0.5s cubic-bezier(.4,1.4,.6,1), background .3s, box-shadow .3s, border-color .3s;
}
.timeline-content:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.timeline-more {
    margin-top: 16px;
    font-size: 0.97rem;
    color: var(--gray-800);
    min-height: 24px;
    transition: all 0.3s;
}
.timeline-content .typing {
    white-space: pre-line;
}
.timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}
.timeline-heading {
    margin: 0 0 var(--spacing-xs);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--primary-dark);
    font-weight: 600;
}
.timeline-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.5;
}

/* Responsive Timeline */
@media (max-width: 768px) {
    .timeline {
        padding-left: 0;
        padding-right: 0;
    }
    .timeline::before {
        left: 18px;
        right: auto;
        width: 3px;
        border-radius: 2px;
    }
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--spacing-lg, 24px);
        position: relative;
    }
    .timeline-marker {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 0;
        margin-top: 0;
        text-align: left;
        position: relative;
        min-height: 36px;
        z-index: 2;
        background: transparent;
    }
    .timeline-marker .timeline-year {
        margin: 0 10px 0 0;
        font-size: 0.95rem;
        padding: 2px 10px;
        min-width: 48px;
        text-align: center;
        order: 1;
    }
    .timeline-marker .timeline-icon-wrapper {
        position: static;
        transform: none;
        width: 24px;
        height: 24px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        order: 2;
    }
    .timeline-marker::after {
        width: 24px;
        height: 24px;
        left: 0;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
    }
    .timeline-content {
        padding: var(--spacing-md, 16px) var(--spacing-sm, 12px);
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-top: 8px;
        text-align: left;
    }
    .timeline-content.expanded {
        max-height: 2000px;
    }
}
/* Trust Indicator Section */
.trust-indicator-section {
    margin: 48px 0 32px 0;
    padding: 32px 0;
    text-align: center;
}
.trust-indicator-stats-grid {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}
.trust-indicator-stat {
    background: #fff;
    border-radius: var(--radius-lg, 18px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.07));
    padding: 28px 24px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
    max-width: 220px;
    flex: 1 1 160px;
    margin-bottom: 16px;
}
.trust-indicator-value {
    font-size: 2.2em;
    font-weight: 800;
    color: var(--accent, #ffb347);
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.trust-indicator-label {
    font-size: 1.08em;
    color: var(--primary-dark, #222);
    font-weight: 500;
}

/* Reveal on Scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(.4,1.4,.6,1);
    will-change: opacity, transform;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: none;
}

/* --- Visual Cards (Organization Overview) --- */
.visual-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* Card */
.visual-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow .3s, transform .3s;
    position: relative;
    min-height: 260px; 
    border: 1px solid rgba(0,0,0,0.05);
}

/* Hover Effect */
.visual-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    transform: translateY(-6px);
}

/* Icon */
.visual-icon {
    margin-bottom: var(--spacing-md);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    color: #fff;
    font-size: 2rem;
    transition: transform .3s, box-shadow .3s;
}

/* Icon Hover */
.visual-card:hover .visual-icon {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Responsive Layout */
@media (max-width: 1200px) {
  .visual-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .visual-cards-grid {
    grid-template-columns: 1fr; 
  }
}


.visual-card:hover .visual-icon {

    color: var(--accent);
    border-color: var(--primary);
}

.visual-card h4 {
    font-size: 1.25rem;
    color: var(--primary-dark);
    margin: 0 0 var(--spacing-xs) 0;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
}

.visual-card p {
    color: var(--gray-700);
    font-size: 1.08rem;
    text-align: center;
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .visual-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    .visual-card {
        min-height: 0;
        padding: var(--spacing-lg);
    }
    .visual-icon {
        width: 54px;
        height: 54px;
        font-size: 1.5rem;
    }
}
/* --- Organizational Pillars Section --- */
.organizational-pillars {
    padding: var(--spacing-xxl) 0;
    background: var(--gray-50);
}

.pillars-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.pillars-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

.pillars-subtitle {
    font-size: 1.1rem;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

/* Grid Layout */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

/* Card */
.pillar-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform .3s ease, box-shadow .3s ease;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
}

.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* Icon */
.pillar-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    color: #fff;
    transition: transform .3s, box-shadow .3s;
}

.pillar-card:hover .pillar-icon {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Title & Description */
.pillar-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
}

.pillar-description {
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

/* Features List */
.pillar-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.pillar-features li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: .5rem;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.pillar-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* Responsive */
@media (max-width: 1200px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }
}
.cta-section {
    background: linear-gradient(135deg, #6a82fb, #fc5c7d);
    padding: 5rem 2rem;
    position: relative;
    text-align: center;
    color: #333;
    overflow: hidden;
    font-family: sans-serif;
}

/* Torn SVG edges */
.cta-torn-top,
.cta-torn-bottom {
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0;
}

.cta-torn-top { top: 0; }
.cta-torn-bottom { bottom: 0; }

/* Optional subtle paper texture */
.cta-section {
    background-image:
        url('https://www.transparenttextures.com/patterns/paper-fibers.png'),
        linear-gradient(135deg, #fc5c7d, var(--primary-light));
    background-blend-mode: overlay;
}

/* Content container */
.cta-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Text */
.cta-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.cta-description {
    font-size: 1.15rem;
    margin-bottom: 2.5rem;
    line-height: 1.7;
    color: #fff;
}

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

/* Button styling */
.cta-buttons .btn {
    padding: 0.9rem 1.8rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    text-decoration: none;
}

/* Primary button */
.cta-buttons .btn-primary {
    background: #fff;
    color: #fc5c7d;
}
.cta-buttons .btn-primary:hover {
    background: #f8f8f8;
    transform: translateY(-2px) scale(1.03);
}

/* Secondary button */
.cta-buttons .btn-secondary {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}
.cta-buttons .btn-secondary:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px) scale(1.03);
}

/* Responsive */
@media (max-width: 768px) {
    .cta-title { font-size: 1.8rem; }
    .cta-description { font-size: 1rem; }
    .cta-buttons { flex-direction: column; gap: 0.75rem; }
}
.services-overview {
    padding: 80px 0;
    background: var(--bg-light);
}

.services-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.services-subtitle {
    font-size: 1.1rem;
    color: #666;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.service-category {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.category-header {
    text-align: center;
    margin-bottom: 25px;
}

.category-icon {
    margin-bottom: 15px;
}

.category-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.category-description {
    color: #666;
    font-size: 0.95rem;
}

.service-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.service-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: 10px;
    transition: background 0.3s;
}

.service-item:hover {
    background: #f0f4f8;
}

.service-icon {
    font-size: 2rem;
    color: var(--primary);
    flex-shrink: 0;
}

.service-content h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.service-content p {
    font-size: 0.9rem;
    color: #555;
}

.service-features {
    margin-top: 8px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.feature-tag {
    background: var(--accent-light);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 5px;
}

/* =========================
   Treatment Modalities
========================= */
.treatment-modalities {
    padding: 80px 0;
}

.modalities-header {
    text-align: center;
    margin-bottom: 60px;
}

.modalities-title {
    font-size: 2rem;
    margin-bottom: 10px;
}

.modalities-subtitle {
    font-size: 1.05rem;
    color: #666;
}

.modalities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.modality-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modality-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.modality-icon {
    margin-bottom: 15px;
}

.modality-card h3 {
    margin-bottom: 10px;
}

.modality-card p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 10px;
}

.modality-features span {
    display: block;
    font-size: 0.85rem;
    color: var(--primary);
}

/* =========================
   Impact Metrics
========================= */
.impact-metrics {
    padding: 80px 0;
    background: #f9f9f9;
}

.metrics-header {
    text-align: center;
    margin-bottom: 60px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    text-align: center;
}

.metric-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-5px);
}

.metric-icon {
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 10px;
}

.metric-number {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.metric-label {
    font-weight: 600;
    margin-bottom: 5px;
}

.metric-description {
    font-size: 0.85rem;
    color: #666;
}

/* =========================
   Partnerships
========================= */
.partnerships {
    padding: 80px 0;
}

.partnerships-content {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
}

.partnerships-text {
    flex: 1 1 400px;
}

.partnership-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

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

/* =========================
   Contact Page Styles
========================= */
.contact-page .container { position: relative; z-index: 5; }

.contact-page .emergency-contact-banner {
  background: linear-gradient(90deg, var(--notice) 0%, var(--accent) 100%);
  color: #fff;
  padding: 1.1rem 1.5rem;
  border-radius: 1.2rem;
  box-shadow: var(--shadow-lg);
  margin-top: -70px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact-page .emergency-contact-banner::before,
.contact-page .emergency-contact-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.contact-page .emergency-contact-banner::before { background: radial-gradient(circle at 15% 30%, rgba(255,255,255,0.25), transparent 60%); mix-blend-mode: overlay; }
.contact-page .emergency-contact-banner::after { background: linear-gradient(45deg, rgba(255,255,255,0.06), transparent 70%); }
.contact-page .emergency-banner-content { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; }
.contact-page .emergency-icon { font-size:2.4rem; display:flex; align-items:center; justify-content:center; animation: pulse-alert 2.5s infinite; }
@keyframes pulse-alert { 0%,100% { transform: scale(1); opacity:1 } 50% { transform: scale(1.15); opacity:.85 } }
.contact-page .emergency-text h3 { margin:.25rem 0 .35rem; font-size:1.25rem; letter-spacing:.5px; }
.contact-page .emergency-text p { margin:0; font-size:.9rem; line-height:1.4; max-width:420px; }
.contact-page .emergency-btn { background:#fff; color:var(--notice); padding:.85rem 1.25rem; border-radius: .85rem; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; text-decoration:none; box-shadow:0 4px 10px -2px rgba(0,0,0,.15); transition:background .3s,color .3s, transform .3s; }
.contact-page .emergency-btn:hover { background: var(--gray-100); transform: translateY(-2px); }

/* Grid Layout */
.contact-page .contact-grid { display:grid; gap:2rem; grid-template-columns: minmax(0,2fr) minmax(0,1fr); margin-top:2.5rem; }
@media (max-width: 980px){ .contact-page .contact-grid { grid-template-columns:1fr; } }

/* Form Section */
.contact-page .contact-form-section { background:#fff; border:1px solid var(--gray-200); border-radius:1.25rem; padding:2rem clamp(1.25rem, 1vw + .5rem, 2.5rem); box-shadow: var(--shadow-xl); position:relative; overflow:hidden; }
.contact-page .contact-form-section::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(var(--primary-rgb),0.08), rgba(var(--accent-rgb),0.08)); opacity:.55; pointer-events:none; }
.contact-page .contact-form-section h2 { margin-top:0; font-size:1.65rem; letter-spacing:.5px; color:var(--primary-dark); }
.contact-page .contact-form { position:relative; z-index:2; }
.contact-page .form-row { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.contact-page .form-group { display:flex; flex-direction:column; gap:.4rem; margin-top:1.1rem; }
.contact-page .form-group label { font-size:.8rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--gray-600); }
.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea { border:1px solid var(--gray-300); background:#fff; border-radius:.9rem; padding:.85rem 1rem; font:inherit; resize:vertical; transition:.25s border-color,.25s box-shadow,.25s background; }
.contact-page .contact-form input:focus,
.contact-page .contact-form select:focus,
.contact-page .contact-form textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.25); background:#fff; }
.contact-page .contact-form select { appearance:none; background-image: linear-gradient(45deg,transparent 50%, var(--primary-dark) 50%), linear-gradient(135deg, var(--primary-dark) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.contact-page .contact-form textarea { min-height:140px; }
.contact-page .radio-group { display:flex; gap:1rem; flex-wrap:wrap; }
.contact-page .radio-label { position:relative; padding:.55rem .95rem .55rem 2.25rem; border:1px solid var(--gray-300); border-radius: 2rem; font-size:.75rem; letter-spacing:.5px; font-weight:600; cursor:pointer; user-select:none; transition:.3s; background:#fff; }
.contact-page .radio-label input { position:absolute; opacity:0; pointer-events:none; }
.contact-page .radio-label .radio-custom { position:absolute; top:50%; left:.75rem; transform:translateY(-50%); width:16px; height:16px; border:2px solid var(--primary); border-radius:50%; display:inline-block; box-sizing:border-box; }
.contact-page .radio-label .radio-custom::after { content:""; position:absolute; inset:3px; background:var(--primary); border-radius:50%; transform:scale(0); opacity:0; transition:.25s; }
.contact-page .radio-label input:checked + .radio-custom::after { transform:scale(1); opacity:1; }
.contact-page .radio-label:hover { border-color:var(--primary-light); }

.contact-page .checkbox-label { position:relative; display:flex; align-items:flex-start; gap:.65rem; cursor:pointer; font-size:.75rem; line-height:1.3; font-weight:500; }
.contact-page .checkbox-label input { position:absolute; opacity:0; }
.contact-page .checkbox-label .checkbox-custom { width:18px; height:18px; border:2px solid var(--primary); border-radius:6px; position:relative; margin-top:2px; transition:.25s; }
.contact-page .checkbox-label .checkbox-custom::after { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.7rem; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--primary); border-radius:4px; transform:scale(0); opacity:0; transition:.25s; }
.contact-page .checkbox-label input:checked + .checkbox-custom { background:var(--primary); border-color:var(--primary); }
.contact-page .checkbox-label input:checked + .checkbox-custom::after { transform:scale(1); opacity:1; }

.contact-page .form-submit-btn { margin-top:1.5rem; display:inline-flex; align-items:center; gap:.6rem; background:linear-gradient(135deg,var(--primary) 0%, var(--secondary) 70%); border:none; color:#fff; font-weight:600; letter-spacing:.5px; padding:1rem 1.75rem; border-radius:1rem; cursor:pointer; font-size:.9rem; box-shadow:0 8px 20px -6px rgba(0,0,0,.3); transition:.35s background,.35s transform, .35s box-shadow; }
.contact-page .form-submit-btn:hover { transform:translateY(-3px); box-shadow:0 12px 28px -4px rgba(0,0,0,.35); }
.contact-page .form-submit-btn:active { transform:translateY(-1px) scale(.97); }
.contact-page .form-submit-btn.shake { animation: btn-shake .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes btn-shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px);} }

/* Invalid state */
.contact-page .contact-form .is-invalid { border-color: var(--notice); background: rgba(var(--notice-rgb),0.05); }
.contact-page .contact-form .is-invalid:focus { box-shadow:0 0 0 3px rgba(var(--notice-rgb),.35); }

/* Info Section & Cards */
.contact-page .contact-info-section { display:flex; flex-direction:column; gap:1.75rem; }
.contact-page .contact-info-section h2 { margin:0 0 .25rem; font-size:1.4rem; letter-spacing:.5px; color:var(--primary-dark); }
.contact-page .contact-info-card { background:#fff; border:1px solid var(--gray-200); border-radius:1.1rem; padding:1.25rem 1.35rem 1rem; box-shadow: var(--shadow-md); position:relative; overflow:hidden; }
.contact-page .contact-info-card h3 { margin:.2rem 0 .9rem; font-size:.9rem; letter-spacing:.6px; text-transform:uppercase; color:var(--gray-500); font-weight:700; }
.contact-page .contact-item { display:flex; gap:.9rem; align-items:flex-start; padding:.55rem .55rem; border-radius:.75rem; position:relative; }
.contact-page .contact-item i { width:34px; height:34px; font-size:1rem; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary-light),var(--primary-dark)); color:#fff; border-radius:10px; box-shadow:0 4px 12px -3px rgba(0,0,0,.35); }
.contact-page .contact-item.emergency i { background:linear-gradient(135deg,var(--notice),var(--accent)); }
.contact-page .contact-details strong { display:block; font-size:.75rem; letter-spacing:.5px; font-weight:700; text-transform:uppercase; color:var(--gray-600); margin-bottom:2px; }
.contact-page .contact-details span { font-size:.85rem; font-weight:600; color:var(--primary-dark); }
.contact-page .contact-details small { font-size:.65rem; letter-spacing:.4px; color:var(--gray-500); display:block; margin-top:2px; }

/* Scheduling Section */
.contact-page .appointment-scheduling { margin-top:3.5rem; }
.contact-page .scheduling-grid { display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:1.5rem; }
.contact-page .scheduling-option { background:#fff; border:1px solid var(--gray-200); border-radius:1.2rem; padding:1.4rem 1.5rem 1.35rem; box-shadow:var(--shadow-md); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.6rem; transition:.35s box-shadow,.35s transform; }
.contact-page .scheduling-option::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(var(--primary-rgb),0.1),rgba(var(--accent-rgb),0.1)); opacity:.45; pointer-events:none; }
.contact-page .scheduling-option:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.contact-page .scheduling-icon { width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#fff; font-size:1.2rem; box-shadow:0 6px 18px -5px rgba(0,0,0,.35); }
.contact-page .scheduling-option h4 { margin:0; font-size:1.05rem; letter-spacing:.4px; color:var(--primary-dark); }
.contact-page .scheduling-option p { margin:0; font-size:.75rem; line-height:1.3; color:var(--gray-600); }
.contact-page .scheduling-details { list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; font-size:.7rem; letter-spacing:.3px; font-weight:500; color:var(--gray-600); }
.contact-page .scheduling-details li { position:relative; padding-left:14px; }
.contact-page .scheduling-details li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:3px; font-size:.55rem; color:var(--secondary); }
.contact-page .scheduling-btn { margin-top:auto; align-self:flex-start; background:var(--primary-dark); color:#fff; padding:.6rem .95rem; font-size:.7rem; border-radius:.7rem; text-decoration:none; font-weight:600; letter-spacing:.4px; display:inline-flex; gap:.4rem; align-items:center; box-shadow:0 4px 12px -4px rgba(0,0,0,.4); transition:.35s background,.35s transform; }
.contact-page .scheduling-btn:hover { background:var(--primary-light); transform:translateY(-3px); }

/* FAQ Section */
.contact-page .contact-faq { margin-top:3.2rem; }
.contact-page .faq-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:1.4rem; }
.contact-page .faq-item { background:#fff; border:1px solid var(--gray-200); border-radius:1.2rem; padding:1.1rem 1.15rem .95rem; box-shadow:var(--shadow-md); position:relative; font-size:.75rem; line-height:1.38; color:var(--gray-600); overflow:hidden; transition:.35s box-shadow,.35s transform; }
.contact-page .faq-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.contact-page .faq-item h4 { margin:.1rem 0 .55rem; font-size:0.85rem; letter-spacing:.4px; color:var(--primary-dark); }

/* Map Section */
.contact-page .location-map { margin-top:3.2rem; }
.contact-page .map-container { display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:1.5rem; }
.contact-page .map-placeholder { background:#fff; border:2px dashed var(--primary-light); border-radius:1.4rem; min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.65rem; padding:1.25rem; text-align:center; color:var(--primary-dark); font-size:.8rem; }
.contact-page .map-placeholder i { font-size:2rem; color:var(--primary-dark); opacity:.6; }
.contact-page .map-placeholder small { font-size:.65rem; color:var(--gray-500); letter-spacing:.3px; }
.contact-page .location-details { background:#fff; border:1px solid var(--gray-200); border-radius:1.2rem; padding:1.35rem 1.4rem 1.25rem; box-shadow:var(--shadow-md); font-size:.75rem; color:var(--gray-600); display:flex; flex-direction:column; gap:.65rem; }
.contact-page .location-details h4 { margin:.2rem 0 .55rem; font-size:.95rem; letter-spacing:.5px; color:var(--primary-dark); }
.contact-page .location-info { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.contact-page .location-info li { display:flex; gap:.5rem; align-items:flex-start; font-size:.7rem; letter-spacing:.4px; color:var(--gray-600); }
.contact-page .location-info i { width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:var(--primary-dark); color:#fff; border-radius:.75rem; font-size:.75rem; box-shadow:0 4px 10px -4px rgba(0,0,0,.35); }
.contact-page .directions-btn { align-self:flex-start; margin-top:auto; background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#fff; padding:.65rem 1rem; border-radius:.8rem; text-decoration:none; font-size:.7rem; font-weight:600; letter-spacing:.4px; display:inline-flex; gap:.4rem; align-items:center; box-shadow:0 6px 18px -6px rgba(0,0,0,.4); transition:.35s background,.35s transform; }
.contact-page .directions-btn:hover { transform:translateY(-4px); }

/* Section Title override inside contact page */
.contact-page .section-title { font-size:1.4rem; letter-spacing:.6px; border-left:6px solid var(--primary-light); padding-left:.75rem; background:linear-gradient(90deg, rgba(var(--primary-rgb),.12), transparent 70%); border-radius:.75rem; }

/* Reveal Animation Base
.contact-page .reveal-on-scroll { opacity:0; transform:translateY(30px) scale(.98); filter:blur(4px); transition: .9s cubic-bezier(.19,1,.22,1); }
.contact-page .reveal-on-scroll.is-visible { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
 */
/* Mobile fine-tuning */
@media (max-width:640px){
  .contact-page .contact-form-section { padding:1.4rem 1.1rem 1.6rem; }
  .contact-page .form-row { gap:.85rem; }
  .contact-page .contact-grid { gap:1.4rem; }
  .contact-page .emergency-contact-banner { margin-top:-40px; padding:1rem 1.1rem; }
  .contact-page .emergency-text p { max-width:100%; }
  .contact-page .radio-group { gap:.6rem; }
}

/* =========================
   Services Page Styles
========================= */
.services-page .services-overview {
  margin-top:-95px;
  position:relative;
  z-index:10;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),0.10), rgba(var(--accent-rgb),0.14));
  border:1px solid var(--gray-200);
  border-radius:1.6rem;
  padding:2.4rem 2.1rem 2rem;
  box-shadow:0 22px 46px -18px rgba(0,0,0,.35),
             0 8px 22px -6px rgba(0,0,0,.18);
  overflow:hidden;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.services-page .services-overview .section-header {
  position:relative;
  z-index:2;
  text-align:center;
}

.services-page .services-overview::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 25%, rgba(var(--primary-rgb),0.25), transparent 60%),
    radial-gradient(circle at 82% 78%, rgba(var(--accent-rgb),0.28), transparent 65%);
  mix-blend-mode:overlay;
  pointer-events:none;
}

.services-page .section-subtitle {
  font-size:clamp(.85rem, .7rem + .45vw, 1rem);
  line-height:1.55;
  max-width:860px;
  margin:.9rem auto 0;
  color:var(--gray-500);
  font-weight:500;
  letter-spacing:.3px;
}

@media (max-width:640px){
  .services-page .section-subtitle {
    font-size:.85rem;
    line-height:1.5;
    padding:0 .25rem;
  }
}

/* Services Grid */
.services-page .services-grid { margin-top:2.75rem; display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.services-page .service-card { background:#fff; border:1px solid var(--gray-200); border-radius:1.25rem; padding:1.4rem 1.35rem 1.3rem; display:flex; flex-direction:column; gap:1rem; position:relative; overflow:hidden; box-shadow:var(--shadow-md); transition:.45s box-shadow,.45s transform; }
.services-page .service-card::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg, rgba(var(--primary-rgb),0.1), rgba(var(--accent-rgb),0.1)); opacity:.45; pointer-events:none; }
.services-page .service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); }
.services-page .service-card__header { display:flex; flex-direction:column; gap:.4rem; }
.services-page .service-icon { width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#fff; font-size:1.35rem; box-shadow:0 8px 18px -6px rgba(0,0,0,.35); }
.services-page .service-title { margin:0; font-size:1rem; letter-spacing:.5px; font-weight:700; color:var(--primary-dark); }
.services-page .service-subtitle { margin:0; font-size:.7rem; text-transform:uppercase; letter-spacing:.6px; font-weight:600; color:var(--gray-500); }
.services-page .service-description { margin:0; font-size:.75rem; line-height:1.4; color:var(--gray-600); }
.services-page .service-features { list-style:none; margin:.55rem 0 0; padding:0; display:flex; flex-direction:column; gap:.45rem; font-size:.68rem; letter-spacing:.35px; font-weight:500; }
.services-page .service-features li { position:relative; padding-left:18px; }
.services-page .service-features li i { position:absolute; left:0; top:3px; font-size:.55rem; color:var(--secondary); background:var(--gray-100); width:14px; height:14px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.services-page .service-card__footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.services-page .service-btn { background:var(--primary-dark); color:#fff; text-decoration:none; font-size:.65rem; letter-spacing:.5px; font-weight:600; padding:.55rem .9rem; border-radius:.7rem; display:inline-flex; align-items:center; gap:.4rem; box-shadow:0 5px 14px -5px rgba(0,0,0,.45); transition:.4s background,.4s transform; }
.services-page .service-btn:hover { background:var(--primary-light); transform:translateY(-3px); }
.services-page .service-availability { font-size:.55rem; letter-spacing:.4px; font-weight:600; color:var(--gray-500); text-transform:uppercase; }

/* Emergency Card */
.services-page .emergency-services { margin-top:3.5rem; }
.services-page .emergency-card { background:linear-gradient(135deg,var(--notice) 0%, var(--accent) 100%); color:#fff; border-radius:1.4rem; padding:1.8rem 1.7rem 1.6rem; display:flex; flex-direction:column; gap:1rem; box-shadow:0 18px 42px -12px rgba(0,0,0,.45); position:relative; overflow:hidden; }
.services-page .emergency-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 25%, rgba(255,255,255,0.35), transparent 60%), radial-gradient(circle at 80% 75%, rgba(255,255,255,0.25), transparent 65%); mix-blend-mode:overlay; }
.services-page .emergency-header { display:flex; align-items:center; gap:1rem; }
.services-page .emergency-icon { width:54px; height:54px; background:#fff; border-radius:18px; display:flex; align-items:center; justify-content:center; color:var(--notice); font-size:1.5rem; box-shadow:0 8px 24px -6px rgba(0,0,0,.4); animation:pulse-alert 2.5s infinite; }
.services-page .emergency-card h3 { margin:0; font-size:1.15rem; letter-spacing:.6px; }
.services-page .emergency-content { font-size:.8rem; line-height:1.45; }
.services-page .emergency-contact { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.services-page .emergency-btn { background:#fff; color:var(--notice); padding:.85rem 1.2rem; border-radius:.9rem; text-decoration:none; font-weight:700; font-size:.8rem; display:inline-flex; align-items:center; gap:.5rem; letter-spacing:.5px; box-shadow:0 10px 26px -10px rgba(0,0,0,.55); transition:.4s background,.4s transform; }
.services-page .emergency-btn:hover { background:var(--gray-100); transform:translateY(-3px); }
.services-page .emergency-note { font-size:.6rem; letter-spacing:.45px; font-weight:600; opacity:.85; }

/* Process Section */
.services-page .service-process { margin-top:3.75rem; }
.services-page .process-steps { margin-top:1.9rem; display:grid; gap:1.65rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.services-page .process-step { background:#fff; border:1px solid var(--gray-200); border-radius:1.25rem; padding:1.2rem 1.1rem 1rem; box-shadow:var(--shadow-md); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.5rem; transition:.45s transform,.45s box-shadow; }
.services-page .process-step::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg, rgba(var(--secondary-rgb),0.12), rgba(var(--accent-rgb),0.1)); opacity:.4; pointer-events:none; }
.services-page .process-step:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.services-page .step-number { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#fff; font-weight:700; font-size:.85rem; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }
.services-page .process-step h4 { margin:.2rem 0 .25rem; font-size:.85rem; letter-spacing:.5px; font-weight:700; color:var(--primary-dark); }
.services-page .process-step p { margin:0; font-size:.68rem; line-height:1.35; color:var(--gray-600); }

/* Contact CTA */
.services-page .services-contact { margin-top:4rem; }
.services-page .contact-card { background:linear-gradient(135deg,var(--primary-dark),var(--secondary)); border-radius:1.5rem; padding:2rem 1.75rem 1.9rem; color:#fff; display:flex; flex-direction:column; gap:1rem; box-shadow:0 28px 60px -20px rgba(0,0,0,.6); position:relative; overflow:hidden; }
.services-page .contact-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 25%, rgba(255,255,255,0.15), transparent 60%), radial-gradient(circle at 80% 75%, rgba(255,255,255,0.25), transparent 65%); mix-blend-mode:overlay; }
.services-page .contact-card h3 { margin:0; font-size:1.3rem; letter-spacing:.65px; }
.services-page .contact-card p { margin:0; font-size:.85rem; line-height:1.45; max-width:640px; }
.services-page .contact-actions { display:flex; flex-wrap:wrap; gap:.9rem; }
.services-page .contact-actions a { text-decoration:none; font-size:.65rem; font-weight:700; letter-spacing:.55px; padding:.85rem 1.25rem; border-radius:.95rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; transition:.4s background,.4s transform; }
.services-page .contact-actions .btn-primary { background:#fff; color:var(--primary-dark); }
.services-page .contact-actions .btn-primary:hover { background:var(--gray-100); transform:translateY(-3px); }
.services-page .contact-actions .btn-secondary { background:rgba(255,255,255,0.15); color:#fff; border: 2px solid rgba(255,255,255,0.5); }
.services-page .contact-actions .btn-secondary:hover { background:rgba(255,255,255,0.3); transform:translateY(-3px); }

/* Reveal Animation 
.services-page .reveal-on-scroll { opacity:0; transform:translateY(32px) scale(.985); filter:blur(4px); transition:1s cubic-bezier(.19,1,.22,1); }
.services-page .reveal-on-scroll.visible { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
*/
/* Mobile */
@media (max-width:640px){
  .services-page .services-overview { margin-top:-40px; padding:1.6rem 1.2rem 1.4rem; }
  .services-page .services-grid { gap:1.35rem; }
  .services-page .service-card { padding:1.2rem 1.05rem 1.05rem; }
  .services-page .service-icon { width:46px; height:46px; font-size:1.15rem; }
  .services-page .contact-card { padding:1.6rem 1.25rem 1.4rem; }
  .services-page .process-steps { gap:1.1rem; }
  .services-page .process-step { padding:1rem .95rem .85rem; }
}

/* =========================
   Service Detail Pages (Consulting, Group Support, Workshops, Wellness)
========================= 
.service-detail .reveal-on-scroll { opacity:0; transform:translateY(34px) scale(.985); filter:blur(4px); transition: .9s cubic-bezier(.19,1,.22,1); }
.service-detail .reveal-on-scroll.visible { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
*/
.service-detail .section-title { font-size:1.35rem; letter-spacing:.55px; border-left:6px solid var(--primary-light); padding-left:.75rem; background:linear-gradient(90deg, rgba(var(--primary-rgb),.10), transparent 70%); border-radius:.75rem; display:inline-block; }

/* Overview / Program Overview */
.service-detail .overview-content { display:grid; gap: 2rem 4rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start; }
.service-detail .overview-text h2 { margin:0 0 .75rem; font-size:1.0rem; letter-spacing:.4px; color:var(--primary-dark); }
.service-detail .overview-text p { margin:.6rem 0 0; font-size:1rem; line-height:1.55; color:var(--gray-700); }
.service-detail .overview-stats { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.service-detail .stat-item { background:#fff; border:1px solid var(--gray-200); border-radius:1rem; padding:.9rem .75rem .8rem; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-md); }
.service-detail .stat-item::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg, rgba(var(--secondary-rgb),0.12), rgba(var(--accent-rgb),0.1)); opacity:.5; pointer-events:none; }
.service-detail .stat-number { font-size:1.1rem; font-weight:800; letter-spacing:.6px; color:var(--primary-dark); }
.service-detail .stat-label { font-size:.58rem; letter-spacing:.45px; font-weight:600; margin-top:.25rem; color:var(--gray-600); text-transform:uppercase; }

.service-detail .overview-image {
    grid-column: 1 / -1;        /* span full grid width */
    display: flex;
    justify-content: center;    /* center horizontally */
    margin-top: 1.5rem;
}

.service-detail .overview-image img {
    object-fit: cover;
    max-width: 380px;           /* limit max size on large screens */
    height: auto;

    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M43.6,-69.6C56.9,-63,69.1,-54.6,74.8,-42.6C80.4,-30.6,79.4,-15.3,77.4,-0.9C75.4,13.6,72.5,27.2,64.8,37.4C57.2,47.6,44.8,54.5,32.1,61.3C19.5,68.1,6.7,74.8,-8,79.1C-22.8,83.4,-45.6,85.4,-60.9,75.5C-76.3,65.5,-84.2,43.7,-86.8,22.2C-89.4,0.7,-86.6,-20.4,-75.8,-34.6C-65,-48.8,-46.1,-56.9,-29.1,-64.7C-12.1,-72.5,2.9,-80,17.8,-80.1C32.8,-80.3,47.7,-73.1,43.6,-69.6Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 447.87 447.87'%3E%3Cpath d='m408.88481 344.16996-49.76234 49.93213c-38.5952 38.72581-95.07089 55.40468-149.37845 44.11999l-68.04771-14.13198c-65.2396-13.54424-115.067243-64.73022-125.254809-128.65066L3.6939835 215.50623C-6.0756305 154.23717 22.527918 93.17708 76.548137 59.989126l48.168903-29.596183C159.36782 9.1035434 201.11072 1.4498084 241.39078 9.0121166l88.82773 16.6658124C388.57498 36.623031 432.2509 83.929905 437.03122 141.35904l8.60719 103.28624c3.06933 36.7536-10.31818 73.01088-36.7536 99.52468z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    /* Optional: Add soft shadow outside the masked shape */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.service-consulting-page .service-overview,
.wellness-page .service-overview,
.service-group-support-page .service-overview {
  margin-top: -125px;
  position: relative;
  z-index: 40;

  /* Warm natural gradient */
background: linear-gradient(135deg, rgba(240, 244, 249, 0.9), rgba(209, 230, 240, 0.85));
border: 1px solid rgba(172, 180, 192, 0.6);

  border-radius: 1.8rem;
  padding: 3rem 2.5rem 2.5rem;

  /* Gentle shadow for coziness */
  box-shadow:
    0 16px 36px -18px rgba(0, 0, 0, 0.2),
    0 6px 14px -8px rgba(0, 0, 0, 0.12);

  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  overflow: hidden;

  /* Soft edge highlight */
  border: 1px solid rgba(210, 200, 190, 0.5);
}


.service-consulting-page .service-overview .overview-text h2,
.wellness-page .service-overview .overview-text h2,
.service-group-support-page .service-overview .overview-text h2 {
  font-size:clamp(1.5rem,2.4vw,1.2rem);
  margin-bottom:1.05rem;
}




@media (max-width:900px){
  .service-consulting-page .service-overview,
  .wellness-page .service-overview,
  .service-group-support-page .service-overview {
    margin-top:-82px;
    padding:2.5rem 1.8rem 2.1rem;
  }
}

@media (max-width:600px){
  .service-consulting-page .service-overview,
  .wellness-page .service-overview,
  .service-group-support-page .service-overview {
    margin-top:-56px;
    padding:2rem 1.25rem 1.75rem;
    border-radius:1.4rem;
  }
}


/* Treatment / Approaches / Tracks shared card pattern */
.service-detail .approaches-grid,
.service-detail .tracks-grid,
.service-detail .methods-grid,
.service-detail .outcomes-grid,
.service-detail .groups-grid,
.service-detail .pillars-grid,
.service-detail .formats-grid,
.service-detail .benefits-grid,
.service-detail .conditions-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:1.6rem; }
.service-detail .approach-card,
.service-detail .track-card,
.service-detail .method-card,
.service-detail .outcome-card,
.service-detail .group-card,
.service-detail .pillar-card,
.service-detail .format-card,
.service-detail .benefit-card,
.service-detail .conditions-grid,
.service-detail .condition-category { background:#fff; border:1px solid var(--gray-200); border-radius:1.25rem; padding:1.15rem 1rem .95rem; display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:.45s transform,.45s box-shadow; font-size:.75rem; line-height:1.42; color:var(--gray-600); }
.service-detail .approach-card::before,
.service-detail .track-card::before,
.service-detail .method-card::before,
.service-detail .outcome-card::before,
.service-detail .group-card::before,
.service-detail .pillar-card::before,
.service-detail .format-card::before,
.service-detail .benefit-card::before,
.service-detail .condition-category::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg, rgba(var(--primary-rgb),0.08), rgba(var(--accent-rgb),0.08)); opacity:.55; pointer-events:none; }
.service-detail .approach-card:hover,
.service-detail .track-card:hover,
.service-detail .method-card:hover,
.service-detail .outcome-card:hover,
.service-detail .group-card:hover,
.service-detail .pillar-card:hover,
.service-detail .format-card:hover,
.service-detail .benefit-card:hover,
.service-detail .condition-category:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.service-detail .approach-icon,
.service-detail .track-icon,
.service-detail .group-icon,
.service-detail .pillar-icon { width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#fff; font-size:1.25rem; box-shadow:0 8px 20px -6px rgba(0,0,0,.4); }
.service-detail .approach-benefits,
.service-detail .track-points,
.service-detail .pillar-points,
.service-detail .group-topics ul,
.service-detail .benefit-card ul { list-style:none; margin:.35rem 0 0; padding:0; display:flex; flex-direction:column; gap:.35rem; font-size:.62rem; line-height:1.45; letter-spacing:.35px; font-weight:500; color:var(--gray-700); }
.service-detail .approach-benefits li,
.service-detail .track-points li,
.service-detail .pillar-points li,
.service-detail .group-topics li { position:relative; padding-left:14px; }
.service-detail .approach-benefits li::before,
.service-detail .track-points li::before,
.service-detail .pillar-points li::before,
.service-detail .group-topics li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:3px; font-size:.55rem; color:var(--secondary); }
.service-detail h3 { margin:.2rem 0 .15rem; font-size:.95rem; letter-spacing:.5px; font-weight:700; color:var(--primary-dark); }
.service-detail .group-type { font-size:.6rem; font-weight:700; letter-spacing:.4px; color:var(--gray-500); text-transform:uppercase; }

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 1rem;
    display: grid;

}

    .benefits-list li {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.benefits-list li i {
    margin-right: 0.6rem;
    color: var(--primary-dark);
    font-size: 1rem;
}
/* Conditions grid */
.service-detail .conditions-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:1.6rem; }
.service-detail .condition-category h3 { margin:0 0 .4rem; font-size:.8rem; letter-spacing:.45px; color:var(--primary-dark); }
.service-detail .condition-category ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; font-size:.6rem; letter-spacing:.35px; font-weight:500; }

/* Timeline / Process */
.service-detail .process-timeline { margin-top:1.6rem; display:flex; flex-direction:column; gap:1.1rem; position:relative; }
.service-detail .timeline-item { display:flex; gap:.9rem; background:#fff; border:1px solid var(--gray-200); border-radius:1rem; padding:1rem .95rem .85rem; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:.4s box-shadow,.4s transform; }
.service-detail .timeline-item::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg, rgba(var(--secondary-rgb),0.12), rgba(var(--accent-rgb),0.1)); opacity:.5; pointer-events:none; }
.service-detail .timeline-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.service-detail .timeline-marker { width:40px; height:40px; flex-shrink:0; border-radius:14px; background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#fff; font-weight:700; font-size:.9rem; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(0,0,0,.45); }
.service-detail .timeline-content h4 { margin:.2rem 0 .35rem; font-size:.8rem; letter-spacing:.45px; color:var(--primary-dark); }
.service-detail .timeline-content p { margin:0; font-size:.65rem; line-height:1.35; color:var(--gray-600); }

/* Team Highlights / Highlight items */
.service-detail .team-highlights,
.service-detail .getting-started-options,
.service-detail .join-options { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-top:1.4rem; }
.service-detail .highlight-item { background:#fff; border:1px solid var(--gray-200); border-radius:.9rem; padding:.75rem .7rem .6rem; display:flex; gap:.55rem; align-items:flex-start; font-size:.65rem; line-height:1.3; font-weight:500; color:var(--gray-600); position:relative; overflow:hidden; }
.service-detail .highlight-item i { width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:.85rem; border-radius:10px; background:linear-gradient(135deg,var(--primary-light),var(--primary-dark)); color:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }

/* Getting Started / Join Cards */
.service-detail .getting-started-card,
.service-detail .join-group-card { background:linear-gradient(135deg,var(--primary-dark),var(--secondary)); border-radius:1.5rem; padding:2rem 1.75rem 1.85rem; color:#fff; position:relative; overflow:hidden; box-shadow:0 30px 60px -25px rgba(0,0,0,.55); }
.service-detail .getting-started-card::before,
.service-detail .join-group-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 22% 25%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(circle at 78% 75%, rgba(255,255,255,0.22), transparent 70%); mix-blend-mode:overlay; }
.service-detail .getting-started-card h2,
.service-detail .join-group-card h2 { margin:0 0 .7rem; font-size:1.3rem; letter-spacing:.65px; }
.service-detail .getting-started-card p,
.service-detail .join-group-card p { margin:0 0 1.1rem; font-size:.8rem; line-height:1.5; max-width:720px; }
.service-detail .option-card { background:#fff; color:var(--gray-700); border:1px solid var(--gray-200); border-radius:.9rem; padding:1rem .95rem .85rem; display:flex; flex-direction:column; gap:.45rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; font-size:.7rem; line-height:1.4; }
.service-detail .option-card::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg, rgba(var(--primary-rgb),.1), rgba(var(--accent-rgb),.1)); opacity:.5; pointer-events:none; }
.service-detail .option-card h4 { margin:.1rem 0 .2rem; font-size:.8rem; letter-spacing:.45px; font-weight:700; color:var(--primary-dark); }
.service-detail .option-card a { align-self:flex-start; background:var(--primary-dark); color:#fff; text-decoration:none; padding:.55rem .85rem; border-radius:.7rem; font-size:.6rem; letter-spacing:.45px; font-weight:600; box-shadow:0 6px 16px -6px rgba(0,0,0,.45); transition:.35s background,.35s transform; }
.service-detail .option-card a:hover { background:var(--primary-light); transform:translateY(-3px); }
.service-detail .btn-emergency { background:linear-gradient(135deg,var(--notice),var(--accent)); }
.service-detail .btn-emergency:hover { background:linear-gradient(135deg,var(--notice-light),var(--accent)); }
.service-detail .btn-secondary { background:rgba(0,0,0,.08); }
.service-detail .btn-secondary:hover { background:rgba(0,0,0,.15); }
.service-detail .btn-outline { background:transparent; border:2px solid rgba(255,255,255,.6); }
.service-detail .btn-outline:hover { background:rgba(255,255,255,.15); }

/* Schedule Table */
.service-detail .schedule-table { margin-top:1.6rem; background:#fff; border:1px solid var(--gray-200); border-radius:1.2rem; overflow:hidden; box-shadow:var(--shadow-md); font-size:.65rem; }
.service-detail .schedule-header, .service-detail .schedule-row { display:grid; grid-template-columns:120px 140px 1fr 90px; gap:.5rem; align-items:center; padding:.75rem .9rem; }
.service-detail .schedule-header { background:linear-gradient(90deg,var(--primary-light),var(--primary-dark)); color:#fff; font-weight:700; letter-spacing:.5px; text-transform:uppercase; font-size:.58rem; }
.service-detail .schedule-row { border-top:1px solid var(--gray-200); background:#fff; position:relative; }
.service-detail .schedule-row:nth-child(even) { background:var(--gray-50); }
.service-detail .schedule-status { font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.service-detail .schedule-status.open { color:var(--secondary); }
.service-detail .schedule-status.waitlist { color:var(--notice); }

/* Group details & topics */
.service-detail .group-details { display:flex; flex-wrap:wrap; gap:.55rem .9rem; margin:.4rem 0 .4rem; font-size:.55rem; letter-spacing:.4px; font-weight:600; }
.service-detail .group-details .detail-item { display:inline-flex; gap:.35rem; align-items:center; padding:.35rem .55rem; background:var(--gray-100); border-radius:.6rem; }
.service-detail .group-topics h4 { margin:.4rem 0 .3rem; font-size:.65rem; letter-spacing:.4px; font-weight:700; color:var(--primary-dark); }
.service-detail .group-topics ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.service-detail .group-topics li { font-size:.6rem; line-height:1.3; color:var(--gray-600); }

/* Pillars / Benefits cards already covered by shared card styles */

/* FAQ lists (workshops & wellness pages) */
.service-detail .faq-list { margin-top:1.4rem; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.service-detail .faq-item { background:#fff; border:1px solid var(--gray-200); border-radius:1rem; padding:.95rem .85rem .8rem; box-shadow:var(--shadow-sm); font-size:.68rem; line-height:1.4; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.4rem; }
.service-detail .faq-item h4 { margin:.05rem 0 .2rem; font-size:.75rem; letter-spacing:.45px; font-weight:700; color:var(--primary-dark); }

/* Responsive */
@media (max-width:860px){
  .service-detail .schedule-header, .service-detail .schedule-row { grid-template-columns:90px 120px 1fr 70px; }
}
@media (max-width:640px){
  .service-detail .overview-content { grid-template-columns:1fr; }
  .service-detail .overview-stats { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }
  .service-detail .timeline-item { flex-direction:row; }
  .service-detail .schedule-header { display:none; }
  .service-detail .schedule-row { grid-template-columns:1fr 1fr; grid-auto-rows:auto; gap:.4rem .6rem; }
  .service-detail .schedule-day { font-weight:700; }
}

/* RTL Adjustments */
html[dir="rtl"] .service-detail .approach-benefits li,
html[dir="rtl"] .service-detail .track-points li,
html[dir="rtl"] .service-detail .pillar-points li,
html[dir="rtl"] .service-detail .group-topics li { padding-left:0; padding-right:14px; }
html[dir="rtl"] .service-detail .approach-benefits li::before,
html[dir="rtl"] .service-detail .track-points li::before,
html[dir="rtl"] .service-detail .pillar-points li::before,
html[dir="rtl"] .service-detail .group-topics li::before { left:auto; right:0; }
html[dir="rtl"] .service-detail .timeline-item { direction:rtl; }
html[dir="rtl"] .service-detail .timeline-content p { direction:rtl; }

/* How to Join Process Enhancements */
.service-group-support-page .how-to-join .join-process {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  position: relative;
  counter-reset: joinStep;
}
.service-group-support-page .how-to-join .process-step {
  position: relative;
  background: linear-gradient(145deg, rgba(var(--card-bg-rgb),0.75), rgba(var(--primary-rgb),0.06));
  border: 1px solid var(--gray-200);
  padding: 1.35rem 1.15rem 1.3rem;
  border-radius: 1.2rem;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.45), 0 4px 14px -4px rgba(0,0,0,.14);
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  transition: transform .45s var(--ease-out-quart, cubic-bezier(.16,.8,.24,1)), box-shadow .45s;
  overflow: hidden;
}
.service-group-support-page .how-to-join .process-step::before {
  counter-increment: joinStep;
  content: counter(joinStep);
  position: absolute;
  top: -18px; left: 14px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: #fff;
  font: 600 1.22rem/54px var(--font-stack, 'Poppins', system-ui, sans-serif);
  text-align: center;
  box-shadow: 0 6px 18px -4px rgba(var(--primary-rgb),.5);
  z-index: 2;
}
.service-group-support-page .how-to-join .process-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(var(--accent-rgb),0.25), transparent 65%);
  mix-blend-mode: overlay;
  opacity: .55;
  pointer-events: none;
}
.service-group-support-page .how-to-join .process-step h4 { margin-top: 1.9rem; font-size: 1.05rem; letter-spacing: .5px; }
.service-group-support-page .how-to-join .process-step p { font-size: .92rem; line-height: 1.45; }
.service-group-support-page .how-to-join .process-step:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.45), 0 8px 24px -10px rgba(0,0,0,.24);
}
.service-group-support-page .how-to-join .process-step:active { transform: translateY(-4px) scale(1.01); }
@media (min-width:900px){
  html[dir="rtl"] .service-group-support-page .how-to-join .process-step::before { left:50%; right:auto; }
}
@media (max-width:600px){
  .service-group-support-page .how-to-join .join-process { gap: 1.4rem; }
  .service-group-support-page .how-to-join .process-step { padding: 1.15rem 1rem 1.1rem; }
  .service-group-support-page .how-to-join .process-step::before { width:46px; height:46px; line-height:46px; font-size:1rem; top:-14px; left:12px; }
  .service-group-support-page .how-to-join .process-step h4 { margin-top:1.6rem; }
}
@media (prefers-color-scheme: dark){
  .service-group-support-page .how-to-join .process-step { background: linear-gradient(145deg, rgba(var(--primary-rgb),0.40), rgba(var(--accent-rgb),0.32)); border-color:#2c3942; }
  .service-group-support-page .how-to-join .join-process::before { opacity:.55; }
}

/* Join Group CTA refinement */
.service-group-support-page .join-group .join-group-card {
  background: linear-gradient(135deg, rgba(var(--primary-rgb),0.12), rgba(var(--accent-rgb),0.16));
  border: 1px solid var(--gray-200);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  position: relative;
  overflow: hidden;
}
.service-group-support-page .join-group .join-group-card::before {
  content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 25%, rgba(var(--primary-rgb),0.25), transparent 65%), radial-gradient(circle at 85% 75%, rgba(var(--accent-rgb),0.30), transparent 70%); mix-blend-mode: overlay; }
@media (prefers-color-scheme: dark){
  .service-group-support-page .join-group .join-group-card { background: linear-gradient(135deg, rgba(var(--primary-rgb),0.32), rgba(var(--accent-rgb),0.34)); border-color:#2c3942; }
}

/* RTL overrides: values list & highlight cards */
html[dir="rtl"] .values-list { padding-right: var(--spacing-lg); padding-left: 0; }
html[dir="rtl"] .value-item { border-right: 4px solid var(--primary-light); border-left: 0; }
html[dir="rtl"] .value-item i { margin-left: var(--spacing-sm); margin-right: 0; }
html[dir="rtl"] .value-item:hover { transform: translateX(-4px); border-right-color: var(--accent); }

html[dir="rtl"] .highlight-card { padding-right: calc(var(--spacing-lg) + var(--highlight-icon-size) + var(--highlight-icon-gap)); padding-left: var(--spacing-lg); }
html[dir="rtl"] .highlight-card__icon { right: var(--spacing-lg); left: auto; }
html[dir="rtl"] .highlight-card__text { margin-right: calc(-5 * var(--highlight-text-shift)); margin-left: 0; }
html[dir="rtl"] .highlight-card__more { margin-right: .35rem; margin-left: 0; }

/* War Trauma Section Styles */
.war-trauma-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.war-trauma-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.subsection-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.subsection-title i {
    color: var(--accent);
    font-size: 1.5rem;
}

.subsection-description {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-style: italic;
}

.approach-section {
    margin-bottom: 4rem;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.approach-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e5e5;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.approach-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--accent);
}

.approach-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
}

.approach-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dark);
}

.programs-section {
    margin-bottom: 2rem;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.program-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.program-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.program-card:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.program-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.program-content h4 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

.program-content p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .war-trauma-section {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .subsection-title {
        font-size: 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .approach-grid {
        grid-template-columns: 1fr;
    }
    
    .programs-grid {
        grid-template-columns: 1fr;
    }
    
    .approach-card,
    .program-card {
        text-align: center;
    }
    
    .approach-card {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .approach-card,
    .program-card {
        padding: 1.25rem;
    }
    
    .section-header {
        margin-bottom: 2rem;
    }
    
    .approach-section {
        margin-bottom: 3rem;
    }
}