/* ==========================================================================
   Prime Physio Theme  Global Styles (main.css)
   Translated from Tailwind reference design to custom CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    /* Brand Colours */
    --color-primary:        #08a8d9;
    --color-primary-dark:   #0790b8;
    --color-primary-light:  rgba(8, 168, 217, 0.1);
    --color-brand-teal:     #08a8d9;
    --color-brand-teal-dark:#0790b8;
    --color-secondary:      #08a8d9;
    --color-secondary-dark: #0790b8;
    --color-accent:         #08a8d9;
    --color-accent-orange:  #08a8d9;
    --color-white:          #ffffff;
    --color-black:          #0f172a;

    /* Slate palette */
    --color-slate-50:  #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    /* Background */
    --bg-light: #f6f8f8;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 1rem;
    --line-height: 1.7;

    /* Layout */
    --container-max: 80rem; /* 1280px = max-w-7xl */
    --container-pad: 1rem;
    --container-pad-md: 2.5rem;

    /* Borders */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-base: 400ms ease;
    --transition-slow: 650ms ease;
}

/* --------------------------------------------------------------------------
   Reset / Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-slate-900);
    background-color: var(--bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-slate-900);
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
@media (min-width: 768px) {
    .container { padding-inline: var(--container-pad-md); }
}

/* --------------------------------------------------------------------------
   Section Label
   -------------------------------------------------------------------------- */
.section-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-teal);
    margin-bottom: 0.5rem;
}
.section-label--light { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Section Spacing Utilities
   -------------------------------------------------------------------------- */
.section {
    padding-block: 4rem;
}
.section--alt {
    background-color: var(--color-slate-50);
}
@media (min-width: 768px) {
    .section { padding-block: 5.5rem; }
}
@media (min-width: 1280px) {
    .section { padding-block: 6.5rem; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    line-height: 1;
    padding: 0 1rem;
    height: 2.5rem;
}
.btn--lg { height: 3rem; padding: 0 2rem; font-size: 1rem; border-radius: var(--radius-xl); }
.btn--full { width: 100%; }
.btn--primary {
    background: var(--color-brand-teal);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
    background: var(--color-brand-teal-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}
.btn--phone {
    background: var(--color-slate-100);
    color: var(--color-slate-900);
    border: 1px solid transparent;
}
.btn--phone:hover { background: var(--color-slate-200); color: var(--color-slate-900); }
.btn--phone .material-symbols-outlined { font-size: 18px; }
.btn--dark {
    background: var(--color-slate-900);
    color: var(--color-white);
    height: 3rem;
    padding: 0 1.5rem;
    font-size: 1rem;
}
.btn--dark:hover { background: var(--color-slate-800); color: var(--color-white); }
.btn--glass {
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.btn--glass:hover {
    background: rgba(255,255,255,0.2);
    color: var(--color-white);
    transform: translateY(-2px);
}
.btn--white {
    background: var(--color-white);
    color: var(--color-brand-teal);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 2rem;
    height: auto;
    font-size: 1rem;
}
.btn--white:hover { background: var(--color-slate-100); color: var(--color-brand-teal); }
.btn--outline-white {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    padding: 0.75rem 2rem;
    height: auto;
    font-size: 1rem;
}
.btn--outline-white:hover { background: rgba(255,255,255,0.1); color: var(--color-white); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-slate-200);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Admin bar offset — keep sticky header below WP admin bar */
.admin-bar .site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.site-header--scrolled {
    background: var(--color-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.75rem;
}
.site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-brand-teal);
    text-decoration: none;
    flex-shrink: 0;
}
.site-header__brand:hover { opacity: 0.85; }
.site-header__logo {
    height: 70px;
    width: auto;
    object-fit: contain;
    transition: opacity var(--transition-fast), transform 0.3s ease;
}
.site-header__brand:hover .site-header__logo {
    transform: scale(1.03);
}
.site-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: inherit;
}
.site-header .custom-logo-link { display: flex; }
.site-header .custom-logo { height: 2rem; width: auto; }

/* Navigation */
.main-navigation {
    display: none;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}
.primary-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.primary-menu li a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-slate-600);
    text-decoration: none;
    line-height: 1;
    transition: color var(--transition-fast);
}
.primary-menu li a:hover,
.primary-menu .current-menu-item > a {
    color: var(--color-brand-teal);
}

/* Dropdown Submenus */
.primary-menu .menu-item-has-children {
    position: relative;
}
.primary-menu .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.primary-menu .dropdown-arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.25s ease;
}
.primary-menu .menu-item-has-children.is-dropdown-open > a .dropdown-arrow {
    transform: rotate(180deg);
}
.primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 0.5rem 0;
    padding-top: 0.75rem;
    list-style: none;
    z-index: 100;
    opacity: 0;
    animation: dropdownFadeIn 0.2s ease forwards;
}
/* Invisible hover bridge — fills the gap between parent link and dropdown panel */
.primary-menu .sub-menu::after {
    content: '';
    position: absolute;
    top: -1rem;
    left: 0;
    width: 100%;
    height: 1rem;
}
.primary-menu .menu-item-has-children.is-dropdown-open > .sub-menu {
    display: block;
}
.primary-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
}
.primary-menu .sub-menu li {
    margin: 0;
}
.primary-menu .sub-menu li a {
    display: block;
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-slate-700);
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.primary-menu .sub-menu li a:hover {
    background: var(--color-slate-50, #f8fafc);
    color: var(--color-brand-teal);
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --------------------------------------------------------------------------
   Mega Menu (Services Dropdown)
   -------------------------------------------------------------------------- */
.mega-menu-parent {
    position: static !important;
}
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-white);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 1.5rem 0 2rem;
    z-index: 100;
    opacity: 0;
    animation: megaMenuFadeIn 0.25s ease forwards;
}
.mega-menu-parent.is-dropdown-open > .mega-menu {
    display: block;
}
@keyframes megaMenuFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mega-menu__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.mega-menu__header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-slate-100);
}
.mega-menu__label {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-slate-900);
    margin-bottom: 0.25rem;
}
.mega-menu__desc {
    font-size: 0.8125rem;
    color: var(--color-slate-500);
    margin: 0;
}
.mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.mega-menu__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-slate-700);
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.mega-menu__item:hover {
    background: var(--color-slate-50, #f8fafc);
    color: var(--color-brand-teal);
    transform: translateX(2px);
}
.mega-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: rgba(8, 168, 217, 0.08);
    color: var(--color-brand-teal);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}
.mega-menu__item:hover .mega-menu__icon {
    background: var(--color-brand-teal);
    color: var(--color-white);
}
.mega-menu__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}
.mega-menu__footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-slate-100);
    text-align: center;
}
.mega-menu__all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    text-decoration: none;
    transition: color 0.15s ease, gap 0.15s ease;
}
.mega-menu__all:hover {
    color: var(--color-brand-teal-dark, #0790b8);
    gap: 0.625rem;
}
.mega-menu__all .material-symbols-outlined {
    font-size: 1.125rem;
}

/* Mega Menu — hide default arrow on the Services parent */
.mega-menu-parent > a .dropdown-arrow {
    transition: transform 0.25s ease;
}
.mega-menu-parent.is-dropdown-open > a .dropdown-arrow {
    transform: rotate(180deg);
}

/* Mega Menu — invisible hover bridge (covers gap between nav and panel) */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 100%;
    height: 2.5rem;
    z-index: 1;
}
.mega-menu::after {
    display: none;
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Mobile toggle */
.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-slate-700);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 60;
}
.menu-toggle:hover {
    background: var(--color-slate-50, #f8fafc);
    border-color: var(--color-slate-300);
}
.menu-toggle.is-active {
    background: var(--color-brand-teal);
    border-color: var(--color-brand-teal);
    color: var(--color-white);
}
.menu-toggle__icon {
    font-size: 1.375rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle.is-active .menu-toggle__icon {
    transform: rotate(90deg);
}

/* Mobile backdrop */
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 40;
    pointer-events: none;
    transition: background 0.3s ease;
}
.mobile-nav-backdrop.is-active {
    background: rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--color-slate-900);
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15,23,42,0.9), rgba(15,23,42,0.7), rgba(15,23,42,0.3));
    z-index: 1;
}
.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero__content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-block: 6rem;
}
.hero__text {
    max-width: 42rem;
}
.hero__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background: rgba(19,200,236,0.2);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    border: 1px solid rgba(19,200,236,0.2);
    backdrop-filter: blur(4px);
}
.hero__title {
    color: var(--color-white);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
}
.hero__subtitle {
    color: var(--color-slate-200);
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 36rem;
}
.hero__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   About Section
   -------------------------------------------------------------------------- */
.about-section {
    padding-block: 5rem;
    background: var(--color-white);
}
.about-section__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}
.about-section__title {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}
.about-section__text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-slate-600);
}
.about-section__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
.about-section__badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-100);
    border-radius: var(--radius-lg);
}
.about-section__badge-icon {
    font-size: 1.5rem;
    color: var(--color-brand-teal);
}
.about-section__badge-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-slate-900);
}
.about-section__badge-sub {
    font-size: 0.75rem;
    color: var(--color-slate-500);
}
.about-section__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-weight: 700;
    color: var(--color-brand-teal);
}
.about-section__link:hover { text-decoration: underline; }
.about-section__link .material-symbols-outlined { font-size: 0.875rem; }
.about-section__media {
    position: relative;
}
.about-section__accent {
    position: absolute;
    inset: -1rem;
    background: rgba(8,168,217,0.1);
    border-radius: var(--radius-2xl);
    transform: rotate(2deg);
}
.about-section__image {
    position: relative;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Services Section
   -------------------------------------------------------------------------- */
.services-section {
    padding-block: 5rem;
    background: var(--color-slate-50);
}
.services-section__header {
    text-align: center;
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: 4rem;
}
.services-section__title {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}
.services-section__subtitle {
    color: var(--color-slate-600);
    font-size: 1rem;
}
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.service-card {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-slate-100);
    transition: box-shadow var(--transition-base);
}
.service-card:hover {
    box-shadow: var(--shadow-xl);
}
.service-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}
.service-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8,168,217,0.2);
    z-index: 1;
    transition: background var(--transition-base);
}
.service-card:hover .service-card__overlay {
    background: transparent;
}
.service-card__image,
.service-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--transition-slow);
}
.service-card:hover .service-card__image,
.service-card:hover .service-card__img {
    transform: scale(1.05);
}
.service-card__body {
    padding: 1.5rem;
}
.service-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    margin-bottom: 0.75rem;
}
.service-card__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-slate-600);
    margin-bottom: 1rem;
}
.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-slate-900);
    transition: color var(--transition-fast);
}
.service-card__link:hover { color: var(--color-brand-teal); }
.service-card__link .material-symbols-outlined { font-size: 1rem; }

/* Clickable Service Card (<a> wrapper) */
.service-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.service-card--link:hover { color: inherit; }
.service-card--link:hover .service-card__link {
    color: var(--color-brand-teal);
}

/* --------------------------------------------------------------------------
   Conditions Section
   -------------------------------------------------------------------------- */
.conditions-section {
    padding-block: 5rem;
    background: linear-gradient(135deg, rgba(8,168,217,0.06) 0%, rgba(8,168,217,0.02) 50%, rgba(8,168,217,0.08) 100%);
    position: relative;
}
.conditions-section__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}
.conditions-section__title {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}
.conditions-section__text {
    font-size: 1.0625rem;
    color: var(--color-slate-600);
    line-height: 1.6;
}
.conditions-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.conditions-card {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(8,168,217,0.15);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.conditions-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(8,168,217,0.12);
    border-color: rgba(8,168,217,0.35);
}
.conditions-card__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-slate-900);
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 2px solid rgba(8,168,217,0.15);
}
.conditions-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.conditions-card__list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-slate-700);
    padding: 0.375rem 0;
    transition: color 0.2s ease;
}
.conditions-card__list li:hover {
    color: var(--color-primary);
}
.conditions-card__check {
    font-size: 1.125rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.conditions-section__cta {
    text-align: center;
    margin-top: 2.5rem;
}
@media (min-width: 640px) {
    .conditions-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .conditions-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    .conditions-card:nth-child(4) {
        grid-column: 1 / 2;
    }
    .conditions-card:nth-child(5) {
        grid-column: 2 / 3;
    }
}

/* --------------------------------------------------------------------------
   Prime Difference Section
   -------------------------------------------------------------------------- */
.difference-section {
    padding-block: 5rem;
    background: var(--color-slate-900);
    color: var(--color-white);
}
.difference-section__header {
    text-align: center;
    margin-bottom: 4rem;
}
.difference-section__title {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-white);
}
.difference-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.difference-card {
    background: var(--color-slate-800);
    padding: 2rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-slate-700);
    position: relative;
    overflow: hidden;
}
.difference-card__bg-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2rem;
    opacity: 0.1;
    transition: opacity var(--transition-base);
}
.difference-card:hover .difference-card__bg-icon { opacity: 0.2; }
.difference-card__bg-icon .material-symbols-outlined { font-size: 7rem; color: var(--color-accent-orange); }
.difference-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251,211,141,0.2);
    color: var(--color-accent-orange);
    border-radius: var(--radius-xl);
    margin-bottom: 1.5rem;
}
.difference-card__icon .material-symbols-outlined { font-size: 1.875rem; }
.difference-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-accent-orange);
    margin-bottom: 0.75rem;
}
.difference-card__desc {
    color: var(--color-slate-400);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Care Process Section
   -------------------------------------------------------------------------- */
.process-section {
    padding-block: 5rem;
    background: var(--color-slate-50);
}
.process-section__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
}
.process-section__title {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
}
.process-section__cta-desktop { display: none; }
.process-section__cta-mobile { margin-top: 2rem; }
.process-steps { position: relative; }
.process-steps__line {
    display: none;
}
.process-steps__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    position: relative;
    z-index: 10;
}
.process-step {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-slate-100);
    text-align: center;
}
.process-step__number {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0 auto 1rem;
    border: 2px solid var(--color-brand-teal);
    color: var(--color-brand-teal);
    background: var(--color-white);
}
.process-step__number--active {
    background: var(--color-brand-teal);
    color: var(--color-white);
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(8,168,217,0.3);
}
.process-step__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin-bottom: 0.5rem;
}
.process-step__desc {
    font-size: 0.875rem;
    color: var(--color-slate-500);
}

/* --------------------------------------------------------------------------
   Why Choose Us Section
   -------------------------------------------------------------------------- */
.why-section {
    padding-block: 4rem;
    background: var(--color-white);
}
.why-section__title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin-bottom: 2.5rem;
}
.why-section__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    text-align: center;
}
.why-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.why-badge__icon {
    font-size: 2.25rem;
    color: var(--color-brand-teal);
}
.why-badge__label {
    font-weight: 700;
    color: var(--color-slate-900);
}

/* --------------------------------------------------------------------------
   CTA Banner Section
   -------------------------------------------------------------------------- */
.cta-section {
    padding-block: 5rem;
    background: var(--color-brand-teal);
}
.cta-section__inner {
    text-align: center;
    max-width: 56rem;
}
.cta-section__title {
    color: var(--color-white);
    font-size: clamp(1.875rem, 5vw, 3rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
}
.cta-section__text {
    color: rgba(255,255,255,0.9);
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    max-width: 42rem;
    margin-inline: auto;
}
.cta-section__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Location Section
   -------------------------------------------------------------------------- */
.location-section {
    display: flex;
    flex-direction: column;
}
.location-section__info {
    background: var(--color-slate-100);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.location-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin-bottom: 1.5rem;
}
.location-section__items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.location-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.location-item__icon-wrap {
    background: var(--color-white);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.location-item__icon-wrap .material-symbols-outlined {
    color: var(--color-brand-teal);
    font-size: 1.5rem;
}
.location-item__label {
    font-weight: 700;
    color: var(--color-slate-900);
    font-size: 1rem;
    margin-bottom: 0.125rem;
}
.location-item__value {
    color: var(--color-slate-600);
    font-size: 0.9375rem;
}
.location-item__value a {
    color: var(--color-slate-600);
}
.location-item__value a:hover { color: var(--color-brand-teal); }
.location-section__map {
    position: relative;
    height: 300px;
    background: var(--color-slate-300);
}
.location-section__map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.location-section__pin {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.1);
}
.location-section__pin-inner {
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-2xl);
    animation: bounce 1s infinite;
}
.location-section__pin-inner .material-symbols-outlined {
    font-size: 2.25rem;
    color: var(--color-brand-teal);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-white);
    color: var(--color-slate-600);
    padding-block: 4rem;
    border-top: 1px solid var(--color-slate-200);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
.footer__brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-slate-900);
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.footer__brand-link:hover { opacity: 0.85; }
.footer__logo {
    height: 80px;
    width: auto;
    object-fit: contain;
    transition: opacity var(--transition-fast), transform 0.3s ease;
}
.footer__brand-link:hover .footer__logo {
    transform: scale(1.03);
}
.footer__brand-name {
    font-size: 1.25rem;
    font-weight: 700;
}
.footer__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--color-slate-500);
}
.footer__social {
    display: flex;
    gap: 1rem;
}
.footer__social-link {
    color: var(--color-slate-400);
    transition: color var(--transition-fast);
}
.footer__social-link:hover { color: var(--color-primary); }
.footer__heading {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.footer-menu li a {
    font-size: 0.875rem;
    color: var(--color-slate-500);
    transition: color var(--transition-fast);
}
.footer-menu li a:hover { color: var(--color-primary); }
.footer__cert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-slate-700);
    padding-top: 1rem;
    font-size: 0.875rem;
}
.footer__cert-icon {
    color: var(--color-brand-teal);
    font-size: 1.25rem;
}
.footer__bottom {
    padding-top: 2rem;
    margin-top: 3rem;
    border-top: 1px solid var(--color-slate-200);
    text-align: center;
}
.footer__copyright {
    font-size: 0.75rem;
    color: var(--color-slate-500);
}

/* --------------------------------------------------------------------------
   Skip Link
   -------------------------------------------------------------------------- */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus {
    clip: auto;
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 100000;
    width: auto;
    height: auto;
    padding: 15px 23px 14px;
    background: var(--color-white);
    color: var(--color-slate-900);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   Mobile Menu (Open State)
   -------------------------------------------------------------------------- */
.main-navigation.toggled,
.main-navigation.is-active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-slate-200);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    padding: 0;
    gap: 0;
    z-index: 50;
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mobileMenuSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes mobileMenuSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mobile menu list */
.main-navigation.toggled .primary-menu,
.main-navigation.is-active .primary-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0.5rem 0;
}

/* Each menu item */
.main-navigation.is-active .primary-menu > li {
    width: 100%;
    border-bottom: 1px solid var(--color-slate-100);
}
.main-navigation.is-active .primary-menu > li:last-child {
    border-bottom: none;
}

/* Menu links — left-aligned with icon space */
.main-navigation.toggled .primary-menu li a,
.main-navigation.is-active .primary-menu > li > a {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-slate-700);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.main-navigation.is-active .primary-menu > li > a:hover {
    background: var(--color-slate-50, #f8fafc);
    color: var(--color-brand-teal);
}

/* Active page indicator — left accent bar */
.main-navigation.is-active .primary-menu > .current-menu-item > a,
.main-navigation.is-active .primary-menu > .current-menu-ancestor > a {
    color: var(--color-brand-teal);
    background: rgba(8, 168, 217, 0.04);
}
.main-navigation.is-active .primary-menu > .current-menu-item > a::before,
.main-navigation.is-active .primary-menu > .current-menu-ancestor > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-brand-teal);
}

/* Nav icons injected by JS */
.main-navigation.is-active .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: rgba(8, 168, 217, 0.08);
    color: var(--color-brand-teal);
    font-size: 1.125rem;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.main-navigation.is-active .primary-menu > li > a:hover .nav-icon {
    background: var(--color-brand-teal);
    color: var(--color-white);
}
.main-navigation.is-active .primary-menu > .current-menu-item > a .nav-icon,
.main-navigation.is-active .primary-menu > .current-menu-ancestor > a .nav-icon {
    background: var(--color-brand-teal);
    color: var(--color-white);
}
/* Desktop nav icons — subtle inline style */
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    color: var(--color-brand-teal);
    opacity: 0.7;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    flex-shrink: 0;
    line-height: 1;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}
.primary-menu li a:hover .nav-icon {
    color: var(--color-brand-teal);
    opacity: 1;
}

/* Services dropdown arrow in mobile */
.main-navigation.is-active .dropdown-arrow {
    margin-left: auto;
    font-size: 1.25rem;
    color: var(--color-slate-400);
    transition: transform 0.3s ease, color 0.15s ease;
}
.main-navigation.is-active .is-dropdown-open > a .dropdown-arrow {
    transform: rotate(180deg);
    color: var(--color-brand-teal);
}

/* CTA section in mobile menu */
.main-navigation.toggled .header-cta,
.main-navigation.is-active .header-cta {
    flex-direction: column;
    width: 100%;
    padding: 1rem 1.25rem 1.25rem;
    gap: 0.625rem;
    border-top: 1px solid var(--color-slate-100);
    background: var(--color-slate-50, #f8fafc);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}
.main-navigation.toggled .header-cta .btn,
.main-navigation.is-active .header-cta .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}
.main-navigation.is-active .header-cta .btn--phone {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-700);
    border-radius: var(--radius-lg);
}
.main-navigation.is-active .header-cta .btn--phone:hover {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

/* Mobile sub-menus */
.main-navigation.is-active .sub-menu {
    position: static;
    display: none;
    transform: none;
    box-shadow: none;
    background: var(--color-slate-50, #f8fafc);
    border-radius: 0;
    margin: 0;
    padding: 0.25rem 0;
    opacity: 1;
    animation: none;
    min-width: 0;
    border-top: 1px solid var(--color-slate-100);
}
.main-navigation.is-active .sub-menu::before { display: none; }
.main-navigation.is-active .sub-menu::after { display: none; }
.main-navigation.is-active .menu-item-has-children.is-dropdown-open > .sub-menu {
    display: block;
}
.main-navigation.is-active .sub-menu li a {
    padding: 0.5rem 1.25rem 0.5rem 4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-slate-600);
}
.main-navigation.is-active .sub-menu li a:hover {
    color: var(--color-brand-teal);
    background: transparent;
}

/* Mobile Mega Menu */
.main-navigation.is-active .mega-menu {
    position: static;
    display: none;
    box-shadow: none;
    border-radius: 0;
    background: var(--color-slate-50, #f8fafc);
    margin: 0;
    padding: 0.5rem 0;
    opacity: 1;
    animation: none;
    width: 100%;
    border-top: 1px solid var(--color-slate-100);
}
.main-navigation.is-active .mega-menu-parent.is-dropdown-open > .mega-menu {
    display: block;
}
.main-navigation.is-active .mega-menu__header { display: none; }
.main-navigation.is-active .mega-menu__inner { padding: 0; }
.main-navigation.is-active .mega-menu__grid {
    grid-template-columns: 1fr;
    gap: 0;
}
.main-navigation.is-active .mega-menu__item {
    padding: 0.5rem 1.25rem 0.5rem 2.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-slate-600);
    border-radius: 0;
}
.main-navigation.is-active .mega-menu__item:hover {
    background: transparent;
    color: var(--color-brand-teal);
    transform: none;
}
.main-navigation.is-active .mega-menu__icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}
.main-navigation.is-active .mega-menu__item:hover .mega-menu__icon {
    background: var(--color-brand-teal);
    color: var(--color-white);
}
.main-navigation.is-active .mega-menu__footer { display: none; }

/* --------------------------------------------------------------------------
   Responsive: Mobile logo sizing
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .site-header__logo { height: 55px; }
    .footer__logo { height: 65px; }
}

/* --------------------------------------------------------------------------
   Responsive: Tablet (640px+)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .hero__actions { flex-direction: row; }
    .hero__content { padding-block: 8rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .process-steps__grid { grid-template-columns: repeat(2, 1fr); }
    .cta-section__actions { flex-direction: row; }
}

/* --------------------------------------------------------------------------
   Responsive: Tablet Landscape (768px+)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .hero__content { padding-block: 8rem 10rem; }
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
    .process-section__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .process-section__cta-desktop { display: inline-flex; }
    .process-section__cta-mobile { display: none; }
    .difference-grid { grid-template-columns: repeat(3, 1fr); }
    .why-section__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Responsive: Desktop (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    /* Header */
    .menu-toggle { display: none; }
    .mobile-nav-backdrop { display: none; }
    .main-navigation { display: flex; }
    .btn--phone { display: none; }
    
    /* About */
    .about-section__grid { grid-template-columns: 1fr 1fr; }

    /* Services */
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    
    /* Process */
    .process-steps__grid { grid-template-columns: repeat(4, 1fr); }
    .process-steps__line {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--color-slate-200);
        transform: translateY(-50%);
        z-index: 0;
    }
    .process-step { text-align: left; }
    .process-step__number { margin-left: 0; margin-right: auto; }

    /* Location */
    .location-section { flex-direction: row; height: 500px; }
    .location-section__info { width: 50%; padding: 5rem; }
    .location-section__map { width: 50%; height: 100%; }
    
    /* Footer */
    .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Responsive: Large Desktop (1280px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    .btn--phone { display: inline-flex; }
    .hero__content { padding-block: 10rem; }
}

/* --------------------------------------------------------------------------
   Page Header (for inner pages)
   -------------------------------------------------------------------------- */
.page-header {
    background: var(--color-slate-900);
    color: var(--color-white);
    padding: 4rem 0;
    text-align: center;
}
.page-header__title {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
}

/* --------------------------------------------------------------------------
   General Content / Blog
   -------------------------------------------------------------------------- */
.entry-content {
    max-width: 48rem;
    margin-inline: auto;
    padding: 3rem 0;
}
.entry-content p { margin-bottom: 1.5rem; color: var(--color-slate-600); line-height: 1.8; }
.entry-content h2 { margin-top: 2rem; margin-bottom: 1rem; }
.entry-content h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
.entry-content ul, .entry-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.entry-content li { margin-bottom: 0.5rem; color: var(--color-slate-600); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content img { border-radius: var(--radius-lg); margin-block: 1.5rem; }
.entry-content blockquote {
    border-left: 4px solid var(--color-brand-teal);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--color-slate-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.entry-content a { color: var(--color-brand-teal); text-decoration: underline; }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 0;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-200);
    transition: all var(--transition-fast);
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--color-brand-teal);
    color: var(--color-white);
    border-color: var(--color-brand-teal);
}

/* 404 */
.error-404 { text-align: center; padding: 5rem 0; }
.error-404 h1 { font-size: 6rem; color: var(--color-brand-teal); margin-bottom: 1rem; }

/* ==========================================================================
   Page Hero (inner pages)
   ========================================================================== */
.page-hero {
    position: relative;
    background: var(--color-slate-900);
    color: var(--color-white);
    padding: 6rem 0 4rem;
    text-align: center;
    overflow: hidden;
}
.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-brand-teal-dark) 0%, var(--color-slate-900) 100%);
    opacity: 0.9;
}
.page-hero__inner {
    position: relative;
    z-index: 1;
}
.page-hero__title {
    color: var(--color-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}
.page-hero__subtitle {
    max-width: 36rem;
    margin-inline: auto;
    color: var(--color-slate-300);
    font-size: 1.125rem;
    line-height: 1.7;
}
.page-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-slate-400);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.page-hero__meta .material-symbols-outlined { font-size: 1.125rem; }

/* ==========================================================================
   About Page — Hero
   ========================================================================== */
.about-hero {
    position: relative;
    min-height: 50vh;
    min-height: max(50vh, 400px);
    display: flex;
    overflow: hidden;
}
.about-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.about-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(15,23,42,0.9), rgba(15,23,42,0.8), rgba(15,23,42,0.4));
}
.about-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: max(50vh, 400px);
}
.about-hero__content {
    max-width: 48rem;
}
.about-hero__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.9);
    color: var(--color-brand-teal-dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    border: 1px solid rgba(8,168,217,0.2);
}
.about-hero__title {
    color: var(--color-white);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
}
.about-hero__subtitle {
    color: var(--color-slate-200);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    max-width: 36rem;
}

/* ==========================================================================
   About Page — Mission Section
   ========================================================================== */
.about-mission__grid {
    display: grid;
    gap: 4rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .about-mission__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Image column */
.about-mission__image-col {
    position: relative;
    order: 2;
}
@media (min-width: 1024px) {
    .about-mission__image-col { order: 1; }
    .about-mission__text-col  { order: 2; }
}
.about-mission__blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
}
.about-mission__blur--orange {
    top: -1rem;
    left: -1rem;
    width: 6rem;
    height: 6rem;
    background: rgba(251,211,141,0.2);
}
.about-mission__blur--teal {
    bottom: -1rem;
    right: -1rem;
    width: 8rem;
    height: 8rem;
    background: rgba(8,168,217,0.2);
}
.about-mission__photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: var(--shadow-xl);
}
.about-mission__quote {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    z-index: 2;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(4px);
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--color-brand-teal);
}
.about-mission__quote p {
    color: var(--color-slate-800);
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    font-size: 0.9375rem;
}

/* Text column */
.about-mission__heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
.about-mission__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.about-mission__content p {
    color: var(--color-slate-600);
    font-size: 1.125rem;
    line-height: 1.7;
    margin: 0;
}
.about-mission__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.about-mission__stat-num {
    display: block;
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--color-brand-teal);
    line-height: 1;
}
.about-mission__stat-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin-top: 0.25rem;
    display: block;
}

/* ==========================================================================
   About Page — Our Values
   ========================================================================== */
.about-values__header {
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
    margin-bottom: 3.5rem;
}
.about-values__header h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.about-values__header p {
    color: var(--color-slate-600);
    font-size: 1.125rem;
}
.about-values__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .about-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-values__grid { grid-template-columns: repeat(4, 1fr); } }

.about-values__card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-slate-100);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-values__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.about-values__icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,168,217,0.1);
    color: var(--color-brand-teal);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
}
.about-values__icon .material-symbols-outlined {
    font-size: 1.5rem;
}
.about-values__card-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.about-values__card-desc {
    color: var(--color-slate-500);
    font-size: 0.875rem;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================================================
   About Page — Stats Bar
   ========================================================================== */
.about-stats-bar {
    background: var(--color-slate-900);
    padding: 4rem 0;
}
@media (min-width: 768px)  { .about-stats-bar { padding: 5rem 0; } }
@media (min-width: 1280px) { .about-stats-bar { padding: 5.5rem 0; } }
.about-stats-bar__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    text-align: center;
}
@media (min-width: 768px) {
    .about-stats-bar__grid { grid-template-columns: repeat(4, 1fr); }
}
.about-stats-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.about-stats-bar__number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--color-brand-teal);
    line-height: 1;
}
.about-stats-bar__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-slate-300);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

/* ==========================================================================
   About Page — Testimonials
   ========================================================================== */
.about-testimonials__header {
    text-align: center;
    max-width: 36rem;
    margin-inline: auto;
    margin-bottom: 3rem;
}
.about-testimonials__header h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.about-testimonials__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .about-testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-testimonials__grid { grid-template-columns: repeat(3, 1fr); } }

.about-testimonials__card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-slate-100);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}
.about-testimonials__card:hover {
    box-shadow: var(--shadow-lg);
}
.about-testimonials__stars {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 1rem;
}
.about-testimonials__stars .material-symbols-outlined {
    font-size: 1.125rem;
    color: #f59e0b;
}
.about-testimonials__quote {
    flex: 1;
    margin: 0 0 1.5rem;
    padding: 0;
    border: none;
}
.about-testimonials__quote p {
    color: var(--color-slate-600);
    font-size: 0.9375rem;
    line-height: 1.7;
    font-style: italic;
    margin: 0;
}
.about-testimonials__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-slate-100);
}
.about-testimonials__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(8,168,217,0.1);
    color: var(--color-brand-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.about-testimonials__avatar .material-symbols-outlined {
    font-size: 1.25rem;
}
.about-testimonials__name {
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0;
}
.about-testimonials__detail {
    font-size: 0.8125rem;
    color: var(--color-slate-500);
    margin: 0;
}

/* ==========================================================================
   About Page — Facilities Section
   ========================================================================== */
.about-facilities__grid {
    display: grid;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .about-facilities__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: center;
    }
}
.about-facilities__text h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.about-facilities__desc {
    color: var(--color-slate-600);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.about-facilities__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.about-facilities__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.about-facilities__check {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.25rem;
    background: rgba(251,211,141,0.2);
    color: var(--color-accent-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-facilities__check .material-symbols-outlined {
    font-size: 0.875rem;
    font-weight: 700;
}
.about-facilities__item h4 {
    font-weight: 700;
    margin: 0 0 0.125rem;
    font-size: 1rem;
}
.about-facilities__item p {
    font-size: 0.875rem;
    color: var(--color-slate-500);
    margin: 0;
    line-height: 1.5;
}

/* Facility photos - staggered grid */
.about-facilities__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.about-facilities__photo {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}
.about-facilities__photo:hover {
    transform: scale(1.02);
}
.about-facilities__photo--offset {
    margin-top: 2rem;
}

/* ==========================================================================
   About Page — Accreditations
   ========================================================================== */
.about-accreditations {
    padding: 4rem 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-slate-100);
    border-bottom: 1px solid var(--color-slate-100);
}
@media (min-width: 768px)  { .about-accreditations { padding: 5rem 0; } }
@media (min-width: 1280px) { .about-accreditations { padding: 5.5rem 0; } }
.about-accreditations__title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}
.about-accreditations__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    text-align: center;
}
@media (min-width: 768px) {
    .about-accreditations__grid { grid-template-columns: repeat(4, 1fr); }
}
.about-accreditations__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.about-accreditations__item .material-symbols-outlined {
    font-size: 2.5rem;
    color: var(--color-brand-teal);
}
.about-accreditations__item p {
    font-weight: 700;
    margin: 0;
}

/* ==========================================================================
   About Page — CTA
   ========================================================================== */
.about-cta {
    padding: 4rem 0;
    background: var(--color-brand-teal);
}
@media (min-width: 768px)  { .about-cta { padding: 5.5rem 0; } }
@media (min-width: 1280px) { .about-cta { padding: 6.5rem 0; } }
.about-cta__inner {
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
}
.about-cta__title {
    color: var(--color-white);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
}
.about-cta__desc {
    color: rgba(255,255,255,0.9);
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    max-width: 36rem;
    margin-inline: auto;
}
.about-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
@media (min-width: 640px) {
    .about-cta__buttons { flex-direction: row; }
}

/* Shared badge utility (kept for backward compat) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
}
.badge--teal {
    background: rgba(8,168,217,0.1);
    color: var(--color-brand-teal);
}
.badge--teal .material-symbols-outlined { font-size: 1.125rem; }

/* ==========================================================================
   Contact Page
   ========================================================================== */
.contact-cards__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .contact-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-cards__grid { grid-template-columns: repeat(4, 1fr); } }

.contact-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.contact-card--emergency { border-left: 4px solid #ef4444; }
.contact-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,168,217,0.1);
    color: var(--color-brand-teal);
    border-radius: var(--radius-full);
    margin: 0 auto 1rem;
}
.contact-card--emergency .contact-card__icon {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}
.contact-card__icon .material-symbols-outlined { font-size: 1.5rem; }
.contact-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
}
.contact-card__text {
    color: var(--color-slate-600);
    font-size: 0.9375rem;
}
.contact-card__text a { color: var(--color-brand-teal); font-weight: 600; }

/* Contact Main Grid */
.contact-main__grid {
    display: grid;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .contact-main__grid { grid-template-columns: 1.5fr 1fr; }
}

.contact-main__form h2 { margin-bottom: 0.5rem; }
.contact-main__form-desc { color: var(--color-slate-500); margin-bottom: 2rem; }

/* Contact Sidebar Cards */
.contact-hours-card,
.contact-info-card {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}
.contact-hours-card h3,
.contact-info-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.contact-hours-card h3 .material-symbols-outlined,
.contact-info-card h3 .material-symbols-outlined {
    color: var(--color-brand-teal);
    font-size: 1.25rem;
}
.contact-info-card ul { list-style: none; padding: 0; }
.contact-info-card li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--color-slate-600);
    font-size: 0.9375rem;
}
.contact-info-card li .material-symbols-outlined {
    color: var(--color-brand-teal);
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Opening Hours Table */
.opening-hours {
    width: 100%;
    border-collapse: collapse;
}
.opening-hours td {
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--color-slate-100);
}
.opening-hours__day { font-weight: 600; color: var(--color-slate-700); }
.opening-hours__time { text-align: right; color: var(--color-slate-500); }

/* Contact Map */
.contact-map__wrapper {
    width: 100%;
    height: 400px;
    background: var(--color-slate-100);
    border-radius: 0;
}
.contact-map__wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   Services Page / Grid (shared with homepage)
   ========================================================================== */
.services-intro__content {
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
}
.services-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .services-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.related-services__header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.related-services__header h2 { margin-top: 0.5rem; }

/* ==========================================================================
   Single Service
   ========================================================================== */
.service-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: flex-end;
}
.service-hero__bg {
    position: absolute;
    inset: 0;
}
.service-hero__bg--fallback {
    background: linear-gradient(135deg, var(--color-brand-teal-dark), var(--color-slate-900));
}
.service-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.3) 100%);
}
.service-hero__inner {
    position: relative;
    z-index: 1;
    padding: 3rem 0;
    color: var(--color-white);
}
.service-hero__title {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.service-hero__subtitle {
    color: var(--color-slate-300);
    font-size: 1.125rem;
    max-width: 40rem;
}

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    flex-wrap: wrap;
}
.breadcrumb a {
    color: var(--color-slate-300);
    transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: var(--color-white); }
.breadcrumb__sep {
    font-size: 1rem;
    color: var(--color-slate-500);
}
.breadcrumb__current {
    color: var(--color-brand-teal);
    font-weight: 600;
}

/* Service Content Grid */
.service-content__grid {
    display: grid;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .service-content__grid { grid-template-columns: 1fr 22rem; }
}

.service-content__main .entry-content { max-width: none; padding: 0; }

/* Service Sidebar Cards */
.service-sidebar-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
}
.service-sidebar-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.service-sidebar-card h3 .material-symbols-outlined {
    color: var(--color-brand-teal);
}
.service-sidebar-card p {
    color: var(--color-slate-500);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}
.service-sidebar-card--cta {
    background: var(--color-slate-900);
    color: var(--color-white);
}
.service-sidebar-card--cta h3 { color: var(--color-white); }
.service-sidebar-card--cta h3 .material-symbols-outlined { color: var(--color-accent-orange); }
.service-sidebar-card--cta p { color: var(--color-slate-300); }
.service-sidebar-card--cta .btn { margin-bottom: 0.75rem; }
.service-sidebar-card--cta .btn:last-child { margin-bottom: 0; }

.service-sidebar-card__list {
    list-style: none;
    padding: 0;
}
.service-sidebar-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-slate-100);
}
.service-sidebar-card__list li:last-child { border-bottom: 0; }
.service-sidebar-card__list .material-symbols-outlined {
    color: var(--color-brand-teal);
    font-size: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.service-sidebar-card__list strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-slate-700);
}
.service-sidebar-card__list span {
    font-size: 0.8125rem;
    color: var(--color-slate-500);
}

/* ==========================================================================
   Appointment / Booking Page
   ========================================================================== */
.booking-trust {
    background: var(--color-white);
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-slate-100);
}
.booking-trust__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 3rem;
}
.booking-trust__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-slate-600);
}
.booking-trust__item .material-symbols-outlined {
    color: var(--color-brand-teal);
    font-size: 1.25rem;
}

/* Booking Form + Sidebar Grid */
.booking-main__grid {
    display: grid;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .booking-main__grid { grid-template-columns: 1.5fr 1fr; }
}

.booking-form-card {
    background: var(--color-white);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}
.booking-form-card h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.booking-form-card h2 .material-symbols-outlined {
    color: var(--color-brand-teal);
}
.booking-form-card__desc {
    color: var(--color-slate-500);
    margin-bottom: 2rem;
}

/* Booking Form */
.booking-form__row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 640px) { .booking-form__row { grid-template-columns: 1fr 1fr; } }

.booking-form__field {
    margin-bottom: 1rem;
}
.booking-form__field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-slate-700);
    margin-bottom: 0.375rem;
}
.booking-form__field input,
.booking-form__field select,
.booking-form__field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    color: var(--color-slate-700);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.booking-form__field input:focus,
.booking-form__field select:focus,
.booking-form__field textarea:focus {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(8,168,217,0.15);
}
.booking-form__field textarea { resize: vertical; }

/* Booking Sidebar Cards */
.booking-sidebar-card {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}
.booking-sidebar-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.booking-sidebar-card h3 .material-symbols-outlined {
    color: var(--color-brand-teal);
    font-size: 1.25rem;
}
.booking-sidebar-card p {
    color: var(--color-slate-500);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}
.booking-sidebar-card .btn { margin-bottom: 0.75rem; }
.booking-sidebar-card .btn:last-child { margin-bottom: 0; }

.booking-sidebar-card__checklist {
    list-style: none;
    padding: 0;
}
.booking-sidebar-card__checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--color-slate-600);
}
.booking-sidebar-card__checklist .material-symbols-outlined {
    color: var(--color-brand-teal);
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Legal Pages (Terms, Privacy, Refund)
   ========================================================================== */
.page-hero--legal {
    padding: 5rem 0 3rem;
}
.page-hero--legal .page-hero__overlay {
    background: linear-gradient(135deg, var(--color-slate-800) 0%, var(--color-slate-900) 100%);
}
.legal-page__content {
    max-width: 48rem;
    margin-inline: auto;
}
.legal-page__content h2 {
    font-size: 1.375rem;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-slate-100);
}
.legal-page__content h2:first-child { margin-top: 0; }

/* ==========================================================================
   Footer Certs (updated)
   ========================================================================== */
.footer__certs {
    margin-top: 1rem;
}
.footer__cert {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-slate-400);
    margin-bottom: 0.5rem;
}
.footer__cert-icon {
    font-size: 1rem;
    color: var(--color-brand-teal);
}

/* ==========================================================================
   Shared Form Styles (pp-form)
   ========================================================================== */
.pp-form__row {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.pp-form__row--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .pp-form__row--2 { grid-template-columns: 1fr 1fr; } }

.pp-form__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}
.pp-form__row .pp-form__field { margin-bottom: 0; }

.pp-form__field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate-700);
    margin-bottom: 0.375rem;
}
.pp-form__field label span { color: #ef4444; }

.pp-form__field input,
.pp-form__field select,
.pp-form__field textarea {
    width: 100%;
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--color-slate-900);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.pp-form__field input:focus,
.pp-form__field select:focus,
.pp-form__field textarea:focus {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(8,168,217,0.1);
}
.pp-form__field input::placeholder,
.pp-form__field textarea::placeholder { color: var(--color-slate-400); }
.pp-form__field textarea { resize: vertical; }

/* Error state */
.pp-form__field--error input,
.pp-form__field--error select,
.pp-form__field--error textarea {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}

/* Form status */
.pp-form__status {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}
.pp-form__status:empty { display: none; }
.pp-form__status--success {
    display: block;
    padding: 1rem 1.25rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}
.pp-form__status--error {
    display: block;
    padding: 1rem 1.25rem;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.pp-form__error {
    font-size: 0.8125rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

/* Consent */
.pp-form__consent {
    margin-bottom: 1.25rem;
}
.pp-form__consent label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-slate-600);
    line-height: 1.5;
    cursor: pointer;
}
.pp-form__consent input[type="checkbox"] {
    margin-top: 0.125rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand-teal);
}

/* Spinner for submit buttons */
@keyframes ppSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.spin { animation: ppSpin 0.8s linear infinite; }

/* ==========================================================================
   Why Choose Us Section (Homepage)
   ========================================================================== */
.choose-section {
    padding-block: 5rem 6rem;
    background: var(--bg-light);
}
.choose-section__header {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    margin-bottom: 3.5rem;
}
.choose-section__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-brand-teal);
    background: rgba(19,200,236,0.1);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}
.choose-section__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    color: var(--color-slate-900);
    margin-bottom: 0.75rem;
    line-height: 1.15;
}
.choose-section__subtitle {
    color: var(--color-slate-500);
    font-size: 1.0625rem;
    line-height: 1.7;
}
.choose-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 640px) {
    .choose-section__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .choose-section__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Feature card */
.choose-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.choose-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}
.choose-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-lg);
    background: rgba(19,200,236,0.1);
    color: var(--color-brand-teal);
    margin-bottom: 1.25rem;
}
.choose-card__icon-wrap .material-symbols-outlined {
    font-size: 1.5rem;
}
.choose-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.choose-card__desc {
    color: var(--color-slate-500);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ==========================================================================
   Recovery Journey Section (Homepage)
   ========================================================================== */
.recovery-journey {
    padding-block: 5rem;
    background: var(--color-white);
}
.recovery-journey__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .recovery-journey__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}
.recovery-journey__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--color-slate-900);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.recovery-journey__text {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-slate-600);
    margin-bottom: 2rem;
}
.recovery-journey__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.recovery-journey__step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.recovery-journey__step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-brand-teal);
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.875rem;
}
.recovery-journey__step strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin-bottom: 0.125rem;
}
.recovery-journey__step p {
    font-size: 0.875rem;
    color: var(--color-slate-500);
    line-height: 1.5;
    margin: 0;
}
.recovery-journey__media {
    position: relative;
}
.recovery-journey__accent {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-2xl);
    background: var(--color-slate-100);
    z-index: 0;
}
.recovery-journey__image {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: var(--radius-2xl);
    object-fit: cover;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Testimonials Section (Homepage)
   ========================================================================== */
.testimonials-section {
    position: relative;
    padding-block: 5rem;
    background: var(--color-slate-50);
    overflow: hidden;
}
.testimonials-section__header {
    text-align: center;
    margin-bottom: 3rem;
}
.testimonials-section__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    color: var(--color-slate-900);
    margin-bottom: 0.5rem;
}
.testimonials-section__sub {
    color: var(--color-slate-500);
    font-size: 1.0625rem;
    max-width: 32rem;
    margin-inline: auto;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-slate-100);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}
.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.testimonial-card__stars {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 1rem;
}
.testimonial-card__stars .material-symbols-outlined {
    font-size: 1.125rem;
    color: #f59e0b;
    font-variation-settings: 'FILL' 1;
}
.testimonial-card__text {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-slate-600);
    font-style: italic;
    margin-bottom: 1.5rem;
}
.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-slate-100);
}
.testimonial-card__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--color-brand-teal);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.testimonial-card__name {
    font-weight: 700;
    color: var(--color-slate-900);
    font-size: 0.9375rem;
}
.testimonial-card__role {
    font-size: 0.8125rem;
    color: var(--color-slate-500);
}

/* ==========================================================================
   Latest Blog Posts Section (Homepage)
   ========================================================================== */
.latest-posts {
    padding-block: 5rem;
    background: var(--color-white);
}
.latest-posts__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) {
    .latest-posts__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}
.latest-posts__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    color: var(--color-slate-900);
    margin-bottom: 0;
}
.latest-posts__all-btn {
    flex-shrink: 0;
}
.latest-posts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .latest-posts__grid { grid-template-columns: repeat(3, 1fr); }
}
.post-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-slate-100);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.post-card__image {
    display: block;
    height: 13rem;
    overflow: hidden;
}
.post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover .post-card__image img {
    transform: scale(1.06);
}
.post-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.post-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-slate-500);
    margin-bottom: 0.75rem;
}
.post-card__meta time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.post-card__meta .material-symbols-outlined { font-size: 1rem; }
.post-card__cat {
    background: rgba(8,168,217,0.08);
    color: var(--color-brand-teal);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
}
.post-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.post-card__title a { color: inherit; transition: color var(--transition-fast); }
.post-card__title a:hover { color: var(--color-brand-teal); }
.post-card__excerpt {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-slate-600);
    margin-bottom: 1rem;
}
.post-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    transition: gap var(--transition-fast);
}
.post-card__link:hover { gap: 0.5rem; }
.post-card__link .material-symbols-outlined { font-size: 1rem; }

/* ==========================================================================
   Blog Archive / Index
   ========================================================================== */
.blog-archive {
    padding-block: 4rem;
    background: var(--bg-light);
}
@media (min-width: 768px) {
    .blog-archive { padding-block: 5rem; }
}
.blog-archive__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 640px) {
    .blog-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .blog-archive__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Single Post — Enhanced
   ========================================================================== */
.single-hero {
    position: relative;
    min-height: 28rem;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-slate-900);
}
.single-hero__bg {
    position: absolute;
    inset: 0;
}
.single-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.single-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.4) 50%, rgba(15,23,42,0.2) 100%);
    z-index: 1;
}
.single-hero__inner {
    position: relative;
    z-index: 2;
    padding: 3rem 0;
    width: 100%;
}
.single-hero__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--color-slate-300);
    flex-wrap: wrap;
}
.single-hero__meta time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.single-hero__meta .material-symbols-outlined { font-size: 1rem; }
.single-hero__cat {
    background: var(--color-brand-teal);
    color: var(--color-white);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.single-hero__title {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.15;
    max-width: 42rem;
}
.single-article {
    padding-block: 3.5rem;
    background: var(--bg-light);
}
.single-article__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .single-article__layout { grid-template-columns: 1fr 20rem; }
}
.single-article__main { min-width: 0; }
.single-article__content {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-slate-100);
}
.single-article__content > p { margin-bottom: 1.5rem; color: var(--color-slate-700); line-height: 1.85; font-size: 1.0625rem; }
.single-article__content > h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 800; color: var(--color-slate-900); }
.single-article__content > h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 700; color: var(--color-slate-900); }
.single-article__content ul, .single-article__content ol { margin-bottom: 1.5rem; padding-left: 1.25rem; }
.single-article__content li { margin-bottom: 0.5rem; color: var(--color-slate-600); line-height: 1.75; }
.single-article__content ul { list-style: disc; }
.single-article__content ol { list-style: decimal; }
.single-article__content img { border-radius: var(--radius-lg); margin-block: 1.5rem; max-width: 100%; height: auto; }
.single-article__content blockquote {
    border-left: 4px solid var(--color-brand-teal);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    background: var(--color-slate-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-slate-600);
}
.single-article__content a { color: var(--color-brand-teal); text-decoration: underline; }

/* -- Tags -- */
.single-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--color-slate-200);
}
.single-post__tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate-600);
    transition: all var(--transition-fast);
}
.single-post__tag:hover {
    background: var(--color-brand-teal);
    color: var(--color-white);
    border-color: var(--color-brand-teal);
}

/* -- Author Box -- */
.single-author-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    margin-top: 2.5rem;
    background: var(--color-slate-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-slate-200);
}
.single-author-box__avatar {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    overflow: hidden;
}
.single-author-box__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.single-author-box__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-400);
    font-weight: 700;
}
.single-author-box__name {
    font-weight: 800;
    color: var(--color-slate-900);
    font-size: 1rem;
}
.single-author-box__bio {
    font-size: 0.875rem;
    color: var(--color-slate-600);
    line-height: 1.5;
}

/* -- Post Navigation -- */
.single-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}
.single-post-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.single-post-nav__link:hover {
    border-color: var(--color-brand-teal);
    box-shadow: var(--shadow-md);
}
.single-post-nav__link--next { justify-content: flex-end; text-align: right; }
.single-post-nav__direction {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-400);
    font-weight: 700;
}
.single-post-nav__title {
    font-weight: 700;
    color: var(--color-slate-900);
    font-size: 0.9375rem;
    line-height: 1.3;
}

/* -- Sidebar -- */
.single-sidebar__widget {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-slate-100);
    margin-bottom: 1.5rem;
}
.single-sidebar__widget-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-slate-900);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-brand-teal);
}
.single-sidebar__services-list {
    list-style: none;
    padding: 0;
}
.single-sidebar__services-list li {
    margin-bottom: 0.5rem;
}
.single-sidebar__services-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-slate-700);
    transition: all var(--transition-fast);
}
.single-sidebar__services-list a:hover {
    background: rgba(8,168,217,0.06);
    color: var(--color-brand-teal);
}
.single-sidebar__services-list .material-symbols-outlined { font-size: 1.125rem; color: var(--color-brand-teal); }

.single-sidebar__cta {
    background: linear-gradient(135deg, var(--color-brand-teal) 0%, var(--color-brand-teal-dark) 100%);
    color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
}
.single-sidebar__cta h3 {
    color: var(--color-white);
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.single-sidebar__cta p {
    color: rgba(255,255,255,0.85);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}
.single-sidebar__cta .btn {
    background: var(--color-white);
    color: var(--color-brand-teal);
    font-weight: 800;
}
.single-sidebar__cta .btn:hover {
    background: var(--color-slate-50);
}

/* -- Related Posts -- */
.related-posts {
    padding-block: 4rem;
    background: var(--color-white);
}
.related-posts__title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-slate-900);
    margin-bottom: 2rem;
    text-align: center;
}
.related-posts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .related-posts__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* JS-based animate-on-scroll (cards, items) */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* CSS-based scroll-reveal (.sr) */
    .sr {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sr--visible {
        opacity: 1;
        transform: translateY(0);
    }
    /* Slide-from-left variant */
    .about-mission__image-col.sr,
    .about-facilities__text.sr {
        transform: translateX(-40px);
    }
    .about-mission__image-col.sr--visible,
    .about-facilities__text.sr--visible {
        transform: translateX(0);
    }
    /* Slide-from-right variant */
    .about-mission__text-col.sr,
    .about-facilities__photos.sr {
        transform: translateX(40px);
    }
    .about-mission__text-col.sr--visible,
    .about-facilities__photos.sr--visible {
        transform: translateX(0);
    }
    /* Scale-in variant for small items */
    .about-accreditations__item.sr,
    .about-stats-bar__item.sr,
    .why-badge.sr {
        transform: scale(0.85);
    }
    .about-accreditations__item.sr--visible,
    .about-stats-bar__item.sr--visible,
    .why-badge.sr--visible {
        transform: scale(1);
    }
    /* Choose cards staggered fade-up */
    .choose-card.sr {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.5s ease var(--delay, 0s), transform 0.5s ease var(--delay, 0s);
    }
    .choose-card.sr--visible {
        opacity: 1;
        transform: translateY(0);
    }
    /* Page load fade */
    body:not(.page-loaded) main {
        opacity: 0;
    }
    body.page-loaded main {
        opacity: 1;
        transition: opacity 0.6s ease;
    }
}