/* =================================================================

   Complete Pilates — Components

   Cards, buttons, forms, hero, and page-specific styles

   ================================================================= */



/* --- Admin bar offset -------------------------------------------- */

.admin-bar .site-header {

    top: calc(32px + var(--space-md));

}

@media screen and (max-width: 782px) {

    .admin-bar .site-header { top: calc(46px + var(--space-sm)); }

}

.admin-bar .site-main {

    padding-top: calc(var(--header-height) + var(--space-2xl) + 32px);

}

@media screen and (max-width: 782px) {

    .admin-bar .site-main { padding-top: calc(var(--header-height) + var(--space-2xl) + 46px); }

}

.admin-bar .hero {

    margin-top: 0;

}



/* Pages with full-bleed heroes: remove site-main padding so hero extends behind navbar */

.admin-bar.home .site-main,

.admin-bar.front-page .site-main,

.home .site-main,

.front-page .site-main,

.single-service .site-main,

.single-location .site-main,

.single-team_member .site-main,

.archive-team_member .site-main,

.page-template-page-press .site-main,

.post-type-archive-press_item .site-main {

    padding-top: 0;

}



.admin-bar.single-service .site-main,

.admin-bar.single-location .site-main,

.admin-bar.single-team_member .site-main,

.admin-bar.archive-team_member .site-main,

.admin-bar.page-template-page-press .site-main,

.admin-bar.post-type-archive-press_item .site-main {

    padding-top: 0;

}



/* --- Buttons ----------------------------------------------------- */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-sm);

    padding: 12px 24px;

    font-family: var(--font-sans);

    font-size: 0.875rem;

    font-weight: 600;

    border-radius: var(--radius-md);

    border: 2px solid transparent;

    cursor: pointer;

    transition: all var(--transition);

    text-decoration: none;

    line-height: 1;

    white-space: nowrap;

}



.btn-primary {

    background: var(--color-primary);

    color: var(--color-white);

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

}

.btn-primary:hover {

    background: var(--color-primary-dark);

    border-color: var(--color-primary-dark);

    color: var(--color-white);

}



.btn-outline {

    background: transparent;

    color: var(--color-primary);

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

}

.btn-outline:hover {

    background: var(--color-primary);

    color: var(--color-white);

}



.btn-white {

    background: var(--color-white);

    color: var(--color-dark);

    border-color: var(--color-white);

}

.btn-white:hover {

    background: transparent;

    color: var(--color-white);

}



.btn-dark {

    background: var(--color-dark);

    color: var(--color-white);

    border-color: var(--color-dark);

}

.btn-dark:hover {

    background: var(--color-gray-800);

    border-color: var(--color-gray-800);

    color: var(--color-white);

}



.btn-sm { padding: 8px 16px; font-size: 0.8125rem; }

.btn-lg { padding: 16px 32px; font-size: 1rem; }



.btn-block { width: 100%; }



/* --- Cards ------------------------------------------------------- */

.card {

    display: flex;

    flex-direction: column;

    background: var(--color-white);

    border-radius: var(--radius-lg);

    overflow: hidden;

    transition: transform var(--transition), box-shadow var(--transition);

    border: 1px solid var(--color-gray-200);

    color: var(--color-gray-700);

    text-decoration: none;

}



a.card {

    color: inherit;

}

a.card:hover {

    color: inherit;

    transform: translateY(-4px);

    box-shadow: var(--shadow-xl);

    border-color: var(--color-gray-300);

}



.card-image {

    aspect-ratio: 3/2;

    overflow: hidden;

    background: var(--color-gray-100);

}



.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform var(--transition-slow);

}



a.card:hover .card-image img {

    transform: scale(1.05);

}



/* Placeholder for cards without images */

.card-image--placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-gray-100) 100%);

}



.card-icon {

    width: 48px;

    height: 48px;

    border-radius: var(--radius-full);

    background: var(--color-primary);

    color: var(--color-white);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    font-weight: 700;

}



/* Team placeholder avatar */

.placeholder-avatar {

    width: 80px;

    height: 80px;

    border-radius: var(--radius-full);

    background: var(--color-primary);

    color: var(--color-white);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    font-weight: 700;

}



.card-body {

    padding: var(--space-lg);

    flex: 1;

}



.card-label {

    display: inline-block;

    font-size: 0.6875rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--color-primary);

    margin-bottom: var(--space-sm);

}



.card-title {

    font-size: 1.125rem;

    font-weight: 600;

    color: var(--color-dark);

    margin-bottom: var(--space-sm);

    line-height: 1.3;

}



a.card .card-title { color: var(--color-dark); }



.card-text {

    font-size: 0.875rem;

    color: var(--color-gray-600);

    line-height: 1.6;

    margin-bottom: 0;

}



.card-meta {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    margin-top: var(--space-md);

    padding-top: var(--space-md);

    border-top: 1px solid var(--color-gray-100);

    font-size: 0.75rem;

    color: var(--color-gray-500);

}



.card-price {

    font-size: 0.8125rem;

    color: var(--color-gray-500);

    margin-top: auto;

    padding-top: var(--space-md);

}

.card-price strong {

    color: var(--color-dark);

    font-size: 1rem;

}



/* --- Team Card --------------------------------------------------- */

.team-card {

    text-align: center;

}



.team-card .card-image {

    aspect-ratio: 1/1;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 8%;

    border-radius: var(--radius-lg);

    overflow: hidden;

}



.team-card .card-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: var(--radius-md);

}



.team-card .card-image--placeholder {

    aspect-ratio: 1/1;

}



.team-card .card-body {

    padding: var(--space-md) var(--space-lg) var(--space-lg);

}



.team-card .card-title {

    margin-bottom: var(--space-xs);

    font-size: 1rem;

}



.team-role {

    font-size: 0.8125rem;

    color: var(--color-primary);

    font-weight: 500;

    margin-bottom: 0;

}



.team-card-photo {

    display: flex;

    justify-content: center;

    align-items: center;

    aspect-ratio: 1/1;

    background: var(--color-gray-50);

    overflow: hidden;

    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

}



.team-card-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.team-card-photo .placeholder-avatar {

    width: 120px;

    height: 120px;

    font-size: 2.5rem;

}



.team-locations {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: var(--space-xs);

    margin-top: var(--space-sm);

}



.location-tag {

    font-size: 0.625rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    padding: 3px 10px;

    background: var(--color-gray-100);

    border-radius: var(--radius-full);

    color: var(--color-gray-600);

    line-height: 1.4;

}



/* --- Service Card ------------------------------------------------ */

.service-card .card-body {

    display: flex;

    flex-direction: column;

}



.service-card .card-icon-area {

    width: 48px;

    height: 48px;

    border-radius: var(--radius-md);

    background: var(--color-primary-light);

    color: var(--color-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: var(--space-md);

    font-size: 1.25rem;

}



/* --- Location Card ----------------------------------------------- */

.location-card {

    height: 100%;

}



.location-card .card-body {

    flex: 1;

    display: flex;

    flex-direction: column;

}



.location-card .location-address {

    font-size: 0.8125rem;

    color: var(--color-gray-500);

    margin-bottom: var(--space-md);

}



.location-card .location-actions {

    margin-top: auto;

    display: flex;

    gap: var(--space-sm);

}



.location-card .location-transport {

    display: flex;

    align-items: flex-start;

    gap: var(--space-sm);

    font-size: 0.75rem;

    color: var(--color-gray-500);

    margin-bottom: var(--space-md);

    line-height: 1.4;

}



.location-card .location-transport svg {

    flex-shrink: 0;

    margin-top: 1px;

    color: var(--color-primary);

}



/* --- Hero Section ------------------------------------------------ */

.hero {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 75vh;

    padding: var(--space-3xl) 0;

    padding-bottom: calc(var(--space-3xl) + 100px);

    overflow: hidden;

    padding-top: calc(var(--header-height) + var(--space-md) + var(--space-3xl));

}



.hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

}



.hero-bg > * {

    width: 100%;

    height: 100%;

}



.hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.hero-bg::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(110, 193, 228, 0.25) 50%, rgba(255, 255, 255, 0.45) 100%);

    z-index: 2;

}



/* Hero Slideshow — crossfade between images */

.hero-slideshow .hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    animation: heroFade 30s ease-in-out infinite;

}



.hero-slideshow .hero-slide:nth-child(1) { animation-delay: 0s; }

.hero-slideshow .hero-slide:nth-child(2) { animation-delay: 6s; }

.hero-slideshow .hero-slide:nth-child(3) { animation-delay: 12s; }

.hero-slideshow .hero-slide:nth-child(4) { animation-delay: 18s; }

.hero-slideshow .hero-slide:nth-child(5) { animation-delay: 24s; }



@keyframes heroFade {

    0%   { opacity: 0; }

    5%   { opacity: 1; }

    20%  { opacity: 1; }

    25%  { opacity: 0; }

    100% { opacity: 0; }

}



@media (prefers-reduced-motion: reduce) {

    .hero-slideshow .hero-slide { animation: none; }

    .hero-slideshow .hero-slide:first-child { opacity: 1; }

}



.hero-content {

    position: relative;

    z-index: 1;

    max-width: var(--container-max);

    margin: 0 auto;

    padding: 0;

    color: var(--color-dark);

}



/* Frosted glass panel behind hero text */

.hero-content-panel {

    display: grid;

    grid-template-columns: 1fr 320px;

    gap: var(--space-2xl);

    align-items: center;

    background: rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(110, 193, 228, 0.2);

    border-radius: var(--radius-lg);

    padding: var(--space-2xl) var(--space-2xl);

    width: 100%;

    box-sizing: border-box;

}



/* Hero review card (right column) */

.hero-review-card {

    background: rgba(110, 193, 228, 0.08);

    border: 1px solid rgba(110, 193, 228, 0.15);

    border-radius: var(--radius-md);

    padding: var(--space-xl);

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

}



.hero-review-card .hero-review-header {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

}



.hero-review-card .hero-review-rating {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--color-dark);

    line-height: 1;

}



.hero-review-card .hero-review-stars {

    color: #fbbf24;

    font-size: 1.25rem;

    letter-spacing: 2px;

}



.hero-review-card .hero-review-count {

    font-size: 0.8125rem;

    color: var(--color-gray-500);

}



.hero-review-card .hero-review-quote {

    font-size: 0.8125rem;

    color: var(--color-gray-600);

    line-height: 1.5;

    font-style: italic;

    border-top: 1px solid rgba(110, 193, 228, 0.2);

    padding-top: var(--space-md);

}



.hero-review-card .hero-review-author {

    font-size: 0.75rem;

    color: var(--color-gray-400);

    margin-top: calc(-1 * var(--space-sm));

}



.hero-review-card .hero-review-google {

    display: flex;

    align-items: center;

    gap: var(--space-xs);

    font-size: 0.75rem;

    color: var(--color-gray-400);

    margin-top: auto;

}



@media (max-width: 768px) {

    .hero-content {

        padding: 0 var(--space-md);

    }

    .hero-content-panel {

        grid-template-columns: 1fr;

        gap: var(--space-lg);

        padding: var(--space-lg);

    }

    .hero-content-panel > div:first-child {

        text-align: center;

    }

    .hero h1 {

        max-width: none;

    }

    .hero p {

        max-width: none;

    }

    .hero-actions {

        justify-content: center;

    }

    .hero-review-card {

        padding: var(--space-md);

    }

}



.hero h1 {

    color: var(--color-dark);

    margin-bottom: var(--space-md);

    font-size: clamp(2.25rem, 5vw, 3.5rem);

    line-height: 1.15;

    max-width: 700px;

}



.hero p {

    font-size: 1.25rem;

    color: var(--color-gray-600);

    max-width: 560px;

    margin-bottom: var(--space-xl);

    line-height: 1.6;

}



.hero-actions {

    display: flex;

    gap: var(--space-md);

    flex-wrap: wrap;

}



/* Stats strip on homepage */

.hero-stats {

    display: flex;

    gap: var(--space-2xl);

    margin-top: var(--space-3xl);

    padding-top: var(--space-xl);

    border-top: 1px solid rgba(17, 35, 55, 0.12);

}



.hero-stat {

    text-align: left;

}



.hero-stat-number {

    font-size: 1.75rem;

    font-weight: 700;

    color: var(--color-dark);

    line-height: 1;

}



.hero-stat-label {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--color-gray-500);

    margin-top: 4px;

}



@media (max-width: 640px) {

    .hero { min-height: auto; padding-bottom: calc(var(--space-2xl) + 60px); }

    .hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }

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

    .hero-stats { gap: var(--space-lg); flex-wrap: wrap; }

    .hero-stat-number { font-size: 1.25rem; }

}



/* Page hero (inner pages) */

.page-hero {

    background: var(--color-gray-50, #f8f9fa);

    padding: 0 0 var(--space-2xl);

    padding-top: calc(var(--header-height) + var(--space-2xl));

    margin-top: calc(-1 * (var(--header-height) + var(--space-2xl)));

    color: var(--color-dark);

    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);

}



.admin-bar .page-hero {

    margin-top: calc(-1 * (var(--header-height) + var(--space-2xl) + 32px));

    padding-top: calc(var(--header-height) + var(--space-2xl) + 32px);

}



@media screen and (max-width: 782px) {

    .admin-bar .page-hero {

        margin-top: calc(-1 * (var(--header-height) + var(--space-2xl) + 46px));

        padding-top: calc(var(--header-height) + var(--space-2xl) + 46px);

    }

}



@media (max-width: 768px) {

    .page-hero {

        padding-top: calc(var(--header-height) + var(--space-lg));

        margin-top: calc(-1 * (var(--header-height) + var(--space-lg)));

        padding-bottom: var(--space-lg);

    }

    .page-hero .breadcrumbs {

        font-size: 0.6875rem;

        margin-bottom: var(--space-xs);

    }

    .page-hero .post-meta {

        font-size: 0.75rem;

        gap: var(--space-xs);

        margin-bottom: var(--space-xs);

    }

    .page-hero h1 {

        font-size: 1.75rem;

    }

}



.page-hero .container {

    max-width: var(--container-max);

    margin: 0 auto;

    padding: 0 var(--space-lg);

}



.page-hero h1 {

    color: var(--color-dark);

    margin-bottom: var(--space-sm);

}



.page-hero p {

    color: var(--color-gray-600);

    max-width: 600px;

}



.page-hero .breadcrumbs {

    margin-bottom: var(--space-md);

}



.page-hero .breadcrumbs, .page-hero .breadcrumbs a, .page-hero .breadcrumbs li::after {

    color: var(--color-gray-500);

}

.page-hero .breadcrumbs a:hover {

    color: var(--color-dark);

}

.page-hero .breadcrumbs [aria-current] {

    color: var(--color-gray-700, #374151);

}



/* --- Stats Bar --------------------------------------------------- */

.stats-bar {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: var(--space-lg);

    padding: var(--space-xl) 0;

}



.stat-item { text-align: center; }



.stat-number {

    font-size: 2rem;

    font-weight: 700;

    color: var(--color-primary);

    line-height: 1;

    margin-bottom: var(--space-xs);

}



.stat-label {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--color-gray-500);

}



@media (max-width: 640px) {

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

}



/* --- Pricing Table ----------------------------------------------- */

.pricing-table {

    width: 100%;

    border-collapse: collapse;

}



.pricing-table th {

    text-align: left;

    padding: var(--space-md);

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--color-gray-500);

    border-bottom: 2px solid var(--color-gray-200);

}



.pricing-table td {

    padding: var(--space-md);

    border-bottom: 1px solid var(--color-gray-100);

}



.pricing-table .price {

    font-weight: 600;

    color: var(--color-dark);

}



/* --- Testimonials ------------------------------------------------ */

.testimonial-scroll {

    display: flex;

    gap: var(--space-lg);

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    padding-bottom: var(--space-md);

    scrollbar-width: thin;

    scrollbar-color: var(--color-gray-300) transparent;

}



.testimonial-scroll::-webkit-scrollbar {

    height: 6px;

}



.testimonial-scroll::-webkit-scrollbar-track {

    background: transparent;

}



.testimonial-scroll::-webkit-scrollbar-thumb {

    background: var(--color-gray-300);

    border-radius: var(--radius-full);

}



.testimonial-scroll .testimonial {

    min-width: 340px;

    max-width: 400px;

    flex-shrink: 0;

    scroll-snap-align: start;

}



@media (max-width: 640px) {

    .testimonial-scroll .testimonial {

        min-width: 280px;

    }

}



.testimonial {

    background: var(--color-gray-50);

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

}



.testimonial-quote {

    font-size: 1.0625rem;

    line-height: 1.7;

    color: var(--color-gray-700);

    font-style: italic;

    margin-bottom: var(--space-md);

}



.testimonial-author {

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--color-dark);

}



.testimonial-source {

    font-size: 0.75rem;

    color: var(--color-gray-500);

}



.testimonial-stars {

    color: #fbbf24;

    margin-bottom: var(--space-sm);

    letter-spacing: 2px;

}



/* --- CTA Block --------------------------------------------------- */

.cta-block {

    background: linear-gradient(135deg, #6EC1E4 0%, #4BA8D1 100%);

    border-radius: var(--radius-xl);

    padding: var(--space-3xl) var(--space-2xl);

    text-align: center;

    color: var(--color-white);

    position: relative;

    overflow: hidden;

}



.cta-block::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -20%;

    width: 400px;

    height: 400px;

    background: white;

    opacity: 0.08;

    border-radius: 50%;

}



.cta-block h2 {

    color: var(--color-white);

    margin-bottom: var(--space-md);

    position: relative;

}



.cta-block p {

    color: rgba(255, 255, 255, 0.8);

    max-width: 500px;

    margin: 0 auto var(--space-xl);

    position: relative;

}



.cta-actions {

    display: flex;

    justify-content: center;

    gap: var(--space-md);

    flex-wrap: wrap;

    position: relative;

}



/* --- Reading Progress Bar ----------------------------------------- */

.reading-progress-container {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    z-index: 1100;

    background: transparent;

}



.reading-progress {

    height: 100%;

    width: 0;

    background: var(--color-primary);

    transition: width 0.1s linear;

}



/* --- Blog / Post Styles ------------------------------------------ */

.post-content {

    max-width: var(--container-narrow);

    margin: 0 auto;

    padding: var(--space-2xl) var(--space-lg);

}

.post-content--wide {

    max-width: 100%;

    padding: 0;

}



.post-content h2 {

    margin-top: var(--space-2xl);

    margin-bottom: var(--space-md);

}



.post-content h3 {

    margin-top: var(--space-xl);

    margin-bottom: var(--space-md);

}



.post-content p { margin-bottom: var(--space-md); }



.post-content ul,

.post-content ol {

    margin-bottom: var(--space-md);

    padding-left: var(--space-xl);

}



.post-content ul { list-style: disc; }

.post-content ol { list-style: decimal; }

.post-content li { margin-bottom: var(--space-sm); }



.post-content img {

    border-radius: var(--radius-md);

    margin: var(--space-xl) 0;

}



.post-content blockquote {

    border-left: 4px solid var(--color-primary);

    padding: var(--space-md) var(--space-lg);

    margin: var(--space-xl) 0;

    background: var(--color-gray-50);

    border-radius: 0 var(--radius-md) var(--radius-md) 0;

}



.post-content blockquote p {

    margin-bottom: 0;

    font-style: italic;

    color: var(--color-gray-700);

}



.post-content a {

    color: var(--color-primary);

    text-decoration: underline;

    text-underline-offset: 2px;

}



.post-content a:hover {

    color: var(--color-primary-dark);

}



.post-content table {

    width: 100%;

    border-collapse: collapse;

    margin: var(--space-xl) 0;

    font-size: 0.9375rem;

}



.post-content th,

.post-content td {

    padding: var(--space-sm) var(--space-md);

    border-bottom: 1px solid var(--color-gray-200);

    text-align: left;

}



.post-content th {

    font-weight: 600;

    color: var(--color-dark);

    background: var(--color-gray-50);

}



.post-content tr:hover td {

    background: var(--color-gray-50);

}



.post-content hr {

    border: none;

    border-top: 1px solid var(--color-gray-200);

    margin: var(--space-2xl) 0;

}



.post-content h4 {

    margin-top: var(--space-lg);

    margin-bottom: var(--space-sm);

    font-size: 1.0625rem;

}



.post-content strong {

    font-weight: 600;

    color: var(--color-dark);

}



/* (TOC styles moved to collapsible dropdown section below) */



.post-meta {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-md);

    font-size: 0.8125rem;

    color: var(--color-gray-500);

    margin-bottom: var(--space-lg);

}



.post-tags {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-sm);

    margin-top: var(--space-xl);

}



.post-tag {

    display: inline-block;

    padding: 4px 12px;

    background: var(--color-gray-100);

    border-radius: var(--radius-full);

    font-size: 0.75rem;

    color: var(--color-gray-600);

    text-decoration: none;

}



.post-tag:hover {

    background: var(--color-primary-light);

    color: var(--color-primary);

}



/* --- Forms ------------------------------------------------------- */

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



.form-label {

    display: block;

    font-size: 0.8125rem;

    font-weight: 500;

    color: var(--color-gray-700);

    margin-bottom: var(--space-xs);

}



.form-input,

.form-textarea,

.form-select {

    width: 100%;

    padding: 12px 16px;

    font-family: var(--font-sans);

    font-size: 0.9375rem;

    color: var(--color-dark);

    background: var(--color-white);

    border: 1px solid var(--color-gray-300);

    border-radius: var(--radius-md);

    transition: border-color var(--transition), box-shadow var(--transition);

}



.form-input:focus,

.form-textarea:focus,

.form-select:focus {

    outline: none;

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

    box-shadow: 0 0 0 3px rgba(16, 181, 219, 0.15);

}



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



/* Form messages */

.form-message {

    margin-top: var(--space-md);

    padding: var(--space-md) var(--space-lg);

    border-radius: var(--radius-md);

    font-size: 0.875rem;

    font-weight: 500;

}

.form-message-success {

    background: #f0fdf4;

    color: #166534;

    border: 1px solid #bbf7d0;

}

.form-message-error {

    background: #fef2f2;

    color: #991b1b;

    border: 1px solid #fecaca;

}



/* Contact page info cards */

.contact-info-card {

    background: var(--color-gray-50);

    border-radius: var(--radius-lg);

    padding: var(--space-lg);

}



.contact-info-icon {

    width: 44px;

    height: 44px;

    border-radius: var(--radius-md);

    background: var(--color-primary-light);

    color: var(--color-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: var(--space-md);

}



@media (max-width: 480px) {

    .enquiry-form [style*="grid-template-columns: 1fr 1fr"] {

        grid-template-columns: 1fr !important;

    }

}



/* --- FAQ Accordion ----------------------------------------------- */

.faq-list {
    border-top: 1px solid var(--color-gray-200);
}

.faq-item {
    border-bottom: 1px solid var(--color-gray-200);
    position: relative;
}

.faq-question {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: var(--space-lg) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-dark);
    text-align: left;
    line-height: 1.45;
    transition: color 0.3s ease;
}

.faq-question:hover { color: var(--color-primary); }

.faq-question::after {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gray-300);
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cline x1='5.5' y1='1' x2='5.5' y2='10' stroke='%23545f68' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='1' y1='5.5' x2='10' y2='5.5' stroke='%23545f68' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.3s ease, background-color 0.3s ease;
    margin-top: 2px;
}

.faq-item.is-open .faq-question { color: var(--color-primary); }

.faq-item.is-open .faq-question::after {
    transform: rotate(45deg);
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cline x1='5.5' y1='1' x2='5.5' y2='10' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='1' y1='5.5' x2='10' y2='5.5' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
}

.faq-item.is-open .faq-answer { max-height: 2000px; }

.faq-answer-inner {
    padding-bottom: var(--space-xl);
    padding-right: 48px;
    color: var(--color-gray-600);
    line-height: 1.8;
    font-size: 0.9375rem;
}

.faq-answer-inner p { margin-bottom: var(--space-sm); }
.faq-answer-inner p:last-child { margin-bottom: 0; }

.faq-answer-inner ul {
    margin: var(--space-xs) 0 var(--space-md);
    padding-left: 0;
    list-style: none;
}

.faq-answer-inner ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: var(--space-xs);
    line-height: 1.65;
}

.faq-answer-inner ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .faq-question { font-size: 0.9375rem; gap: 14px; }
    .faq-question::after { width: 24px; height: 24px; }
    .faq-answer-inner { padding-right: 0; font-size: 0.875rem; }
}



/* --- Location / Service / Team Single Layout --------------------- */

.location-info-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: var(--space-2xl);

    margin-bottom: var(--space-2xl);

}



@media (max-width: 768px) {

    .location-info-grid { grid-template-columns: 1fr; }

}



.sidebar-card {

    background: var(--color-gray-50);

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

}



.admin-bar .sidebar-card {

    top: calc(var(--header-height) + 32px + var(--space-2xl) + var(--space-md));

}



.info-block { margin-bottom: var(--space-lg); }



.info-block-label {

    font-size: 0.6875rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    color: var(--color-gray-500);

    font-weight: 600;

    margin-bottom: var(--space-xs);

}



.info-block-value {

    font-size: 1rem;

    color: var(--color-dark);

}



.info-block-value a {

    color: var(--color-primary);

}



/* --- Pagination -------------------------------------------------- */

.pagination {

    display: flex;

    justify-content: center;

    gap: var(--space-sm);

    padding: var(--space-2xl) 0;

}



.pagination a,

.pagination span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: var(--radius-md);

    font-size: 0.875rem;

    font-weight: 500;

    transition: all var(--transition);

}



.pagination a {

    color: var(--color-gray-600);

    border: 1px solid var(--color-gray-200);

    text-decoration: none;

}



.pagination a:hover {

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

    color: var(--color-primary);

}



.pagination .current {

    background: var(--color-primary);

    color: var(--color-white);

    border: 1px solid var(--color-primary);

}



.pagination .prev,

.pagination .next {

    width: auto;

    padding: 0 var(--space-md);

}



/* --- Featured Post (blog archive) -------------------------------- */

.featured-post > div {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    min-height: 300px;

}



@media (max-width: 768px) {

    .featured-post > div {

        grid-template-columns: 1fr;

    }

    .featured-post .card-image {

        aspect-ratio: 16/9;

    }

}



/* --- 404 Page ---------------------------------------------------- */

.page-404 {

    text-align: center;

    padding: var(--space-4xl) var(--space-lg);

}



.page-404-graphic {

    margin-bottom: var(--space-xl);

    opacity: 0.8;

}



.page-404 h1 {

    font-size: 6rem;

    color: var(--color-primary);

    line-height: 1;

    margin-bottom: var(--space-md);

}



.page-404 h2 {

    margin-bottom: var(--space-md);

}



.page-404 p {

    color: var(--color-gray-500);

    margin-bottom: var(--space-xl);

    max-width: 480px;

    margin-left: auto;

    margin-right: auto;

}



.page-404-links {

    max-width: 600px;

    margin: var(--space-3xl) auto 0;

}



.page-404-links h3 {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    color: var(--color-gray-500);

    margin-bottom: var(--space-lg);

}



.page-404-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-md);

}



@media (max-width: 480px) {

    .page-404-grid { grid-template-columns: 1fr; }

}



.page-404-link {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    padding: var(--space-md) var(--space-lg);

    background: var(--color-gray-50);

    border-radius: var(--radius-md);

    text-decoration: none;

    color: var(--color-gray-700);

    transition: all var(--transition);

    text-align: left;

}



.page-404-link:hover {

    background: var(--color-primary-light);

    color: var(--color-primary);

}



.page-404-link svg {

    flex-shrink: 0;

    color: var(--color-primary);

}



.page-404-link span {

    font-size: 0.875rem;

    font-weight: 500;

}



/* --- Insurance Logos --------------------------------------------- */

.insurance-strip {

    display: flex;

    align-items: center;

    gap: var(--space-lg);

    justify-content: center;

    padding: var(--space-lg) 0;

    flex-wrap: wrap;

}



.insurance-strip span {

    font-size: 0.8125rem;

    font-weight: 600;

    color: var(--color-gray-400);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



/* --- Quick Actions Bar ------------------------------------------- */

.quick-actions {

    display: flex;

    gap: var(--space-md);

    flex-wrap: wrap;

    margin-bottom: var(--space-2xl);

}



/* --- Related Posts ------------------------------------------------ */

.related-section {

    background: var(--color-gray-50);

    padding: var(--space-3xl) 0;

    margin-top: var(--space-2xl);

}



.related-section h2 {

    text-align: center;

    margin-bottom: var(--space-xl);

}



/* --- Post Meta (in page-hero) ------------------------------------- */

.page-hero .post-meta {

    color: var(--color-gray-600);

}



.page-hero .post-meta span + span::before {

    content: '\00b7';

    margin: 0 var(--space-sm);

    color: var(--color-gray-400);

}



/* --- Featured Blog Card (archive first post) --------------------- */

@media (max-width: 768px) {

    .card > div[style*="grid-template-columns"] {

        display: flex !important;

        flex-direction: column;

    }

}



/* --- Location Card Full (archive) -------------------------------- */

.location-card-image {

    aspect-ratio: 16/9;

    overflow: hidden;

    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

}



.location-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform var(--transition-slow);

}



a.card:hover .location-card-image img {

    transform: scale(1.05);

}



.location-card-full .card-body {

    display: flex;

    flex-direction: column;

    padding: var(--space-xl);

}



.location-card-full .btn {

    margin-top: auto;

    align-self: flex-start;

}



/* --- Clinic Finder ------------------------------------------------ */

.clinic-finder {

    display: flex;

    align-items: center;

    gap: var(--space-lg);

    padding: var(--space-md) var(--space-xl);

    background: var(--color-gray-50, #f8f9fa);

    border-radius: var(--radius-lg);

    border: 1px solid var(--color-gray-200, #e5e7eb);

    margin-bottom: var(--space-xl);

}



.clinic-finder-search {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    flex: 1;

}



.clinic-finder-label {

    font-size: 0.8125rem;

    font-weight: 500;

    color: var(--color-gray-700, #374151);

    white-space: nowrap;

    letter-spacing: 0.01em;

}



.clinic-finder-input-wrap {

    display: flex;

    align-items: center;

    gap: 0;

    background: #fff;

    border: 1px solid var(--color-gray-200, #e5e7eb);

    border-radius: 100px;

    overflow: hidden;

    transition: border-color 0.2s, box-shadow 0.2s;

}



.clinic-finder-input-wrap:focus-within {

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

    box-shadow: 0 0 0 3px rgba(16, 181, 219, 0.08);

}



.clinic-finder-input-wrap input {

    padding: 0.5rem 1rem;

    border: none;

    font-size: 0.8125rem;

    width: 150px;

    outline: none;

    background: transparent;

    color: var(--color-dark);

}



.clinic-finder-input-wrap input::placeholder {

    color: var(--color-gray-400, #9ca3af);

}



.clinic-finder-input-wrap .btn {

    border-radius: 100px;

    padding: 0.45rem 1.1rem;

    font-size: 0.75rem;

    border: none;

    margin: 3px;

    letter-spacing: 0.02em;

}



.clinic-finder-status {

    font-size: 0.8125rem;

    color: var(--color-gray-600);

    margin: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.clinic-finder-map-toggle {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 0.45rem 0.9rem;

    background: #fff;

    border: 1px solid var(--color-gray-200, #e5e7eb);

    border-radius: 100px;

    font-size: 0.75rem;

    color: var(--color-gray-500);

    cursor: pointer;

    transition: all 0.2s;

    white-space: nowrap;

    margin-left: auto;

}



.clinic-finder-map-toggle:hover {

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

    color: var(--color-primary);

}



/* Collapsible map */

.clinic-map-container {

    margin-bottom: var(--space-md);

}



.clinic-map {

    height: 320px;

    border-radius: var(--radius-lg);

    margin-bottom: var(--space-sm);

    border: 1px solid var(--color-gray-200, #e5e7eb);

}



/* Distance badge */

.clinic-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: var(--space-sm);

}



.clinic-distance-badge {

    flex-shrink: 0;

    font-size: 0.6875rem;

    font-weight: 600;

    color: var(--color-primary);

    background: rgba(16, 181, 219, 0.08);

    padding: 0.2em 0.6em;

    border-radius: var(--radius-sm);

    white-space: nowrap;

}



/* Nearest clinic highlight */

.nearest-clinic {

    border-color: var(--color-primary) !important;

    box-shadow: 0 0 0 2px rgba(16, 181, 219, 0.15);

}



@media (max-width: 768px) {

    .clinic-finder {

        flex-direction: column;

        align-items: stretch;

        gap: var(--space-sm);

        padding: var(--space-md);

    }

    .clinic-finder-search {

        flex-direction: column;

        align-items: stretch;

        gap: var(--space-sm);

    }

    .clinic-finder-label {

        font-size: 0.875rem;

    }

    .clinic-finder-input-wrap {

        width: 100%;

    }

    .clinic-finder-input-wrap input {

        width: 100%;

        flex: 1;

    }

    .clinic-finder-status {

        white-space: normal;

        font-size: 0.8125rem;

    }

    .clinic-map-container {

        display: none !important;

    }

    .clinic-finder-map-toggle {

        display: none !important;

    }

}



/* --- Studio About Split (single-location) -------------------- */

.studio-split {

    display: grid;

    grid-template-columns: 1fr 360px;

    gap: var(--space-2xl);

    align-items: start;

}



.studio-split-content h2 {

    font-size: 1.75rem;

    font-weight: 700;

    margin-bottom: var(--space-lg);

    color: var(--color-dark);

}



.studio-copy {

    color: var(--color-gray-600);

    line-height: 1.8;

    font-size: 0.9375rem;

}



.studio-copy p {

    margin-bottom: var(--space-md);

}



.studio-copy p:last-child {

    margin-bottom: 0;

}



.studio-copy-extra {

    margin-top: var(--space-xl);

    padding-top: var(--space-lg);

    border-top: 1px solid var(--color-gray-200);

}



.studio-copy-extra h3 {

    font-size: 1.0625rem;

    font-weight: 600;

    margin-bottom: var(--space-sm);

    color: var(--color-dark);

}



.studio-copy-extra p {

    color: var(--color-gray-600);

    line-height: 1.7;

}



/* Right: Tabbed studio card */

.studio-card {

    background: white;

    border: 1px solid var(--color-gray-200);

    border-radius: var(--radius-lg);

    overflow: hidden;

    position: sticky;

    top: calc(var(--header-height, 80px) + var(--space-lg));

    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.04);

}



.studio-card-tabs {

    display: flex;

    border-bottom: 2px solid var(--color-gray-100);

    background: var(--color-gray-50);

}



.studio-card-tab {

    flex: 1;

    padding: 14px 16px;

    font-size: 0.8125rem;

    font-weight: 600;

    color: var(--color-gray-500);

    background: none;

    border: none;

    border-bottom: 2px solid transparent;

    margin-bottom: -2px;

    cursor: pointer;

    transition: color 0.2s, border-color 0.2s;

    text-align: center;

}



.studio-card-tab:hover {

    color: var(--color-dark);

}



.studio-card-tab.is-active {

    color: #6EC1E4;

    border-bottom-color: #6EC1E4;

    background: white;

}



.studio-card-panel {

    display: none;

    padding: var(--space-lg);

}



.studio-card-panel.is-active {

    display: block;

}



/* Detail rows inside card */

.sc-row {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    padding: 12px 0;

    border-bottom: 1px solid var(--color-gray-100);

}



.sc-row:first-child {

    padding-top: 0;

}



.sc-row:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.sc-icon {

    flex-shrink: 0;

    width: 32px;

    height: 32px;

    border-radius: 8px;

    background: rgba(110, 193, 228, 0.1);

    color: #6EC1E4;

    display: flex;

    align-items: center;

    justify-content: center;

}



.sc-label {

    font-size: 0.6875rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--color-gray-400);

    font-weight: 600;

    margin-bottom: 2px;

}



.sc-value {

    font-size: 0.875rem;

    color: var(--color-dark);

    line-height: 1.5;

}



.sc-value a {

    color: var(--color-dark);

    text-decoration: none;

    transition: color 0.15s;

}



.sc-value a:hover {

    color: #6EC1E4;

}



ul.sc-hours-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



ul.sc-hours-list li {

    padding: 0;

    margin: 0 0 2px 0;

}



ul.sc-hours-list li:last-child {

    margin-bottom: 0;

}



/* Pricing panel */

.sc-pricing-intro {

    font-size: 0.8125rem;

    color: var(--color-gray-500);

    margin-bottom: var(--space-md);

}



.sc-pricing-link {

    display: block;

    text-align: center;

    font-size: 0.8125rem;

    font-weight: 500;

    color: #6EC1E4;

    text-decoration: none;

    margin-top: var(--space-md);

    padding-top: var(--space-sm);

    border-top: 1px solid var(--color-gray-100);

}



.sc-pricing-link:hover {

    color: var(--color-dark);

}



/* CTA footer */

.studio-card-cta {

    padding: 0 var(--space-lg) var(--space-lg);

}



@media (max-width: 960px) {

    .studio-split {

        grid-template-columns: 1fr;

        gap: var(--space-xl);

    }



    .studio-card {

        position: static;

    }

}



.location-detail-grid {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

    margin-bottom: var(--space-md);

}



.location-detail-item {

    display: flex;

    align-items: flex-start;

    gap: var(--space-sm);

    font-size: 0.8125rem;

    color: var(--color-gray-600);

    line-height: 1.4;

}



.location-detail-item svg {

    flex-shrink: 0;

    margin-top: 1px;

}



/* --- Service Hero (featured image background) ------------------- */

.service-hero {

    position: relative;

    display: flex;

    align-items: flex-end;

    min-height: 480px;

    padding: var(--space-3xl) 0 var(--space-2xl);

    margin-top: calc(-1 * var(--header-height));

    padding-top: calc(var(--header-height) + 100px);

    overflow: hidden;

}



.service-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

}



.service-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.service-hero-bg::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(17, 35, 55, 0.88) 0%, rgba(17, 35, 55, 0.65) 40%, rgba(16, 181, 219, 0.25) 100%);

    z-index: 1;

}



.service-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

}



.service-hero h1 {

    color: var(--color-white);

    margin-bottom: var(--space-sm);

    font-size: clamp(1.75rem, 4vw, 2.5rem);

    max-width: 700px;

}



.service-hero p {

    color: rgba(255, 255, 255, 0.9);

    max-width: 560px;

    margin-bottom: var(--space-lg);

    font-size: 1.125rem;

    line-height: 1.6;

}



.service-hero .breadcrumbs,

.service-hero .breadcrumbs a,

.service-hero .breadcrumbs li::after {

    color: rgba(255, 255, 255, 0.6);

}

.service-hero .breadcrumbs a:hover { color: var(--color-white); }

.service-hero .breadcrumbs [aria-current] { color: rgba(255, 255, 255, 0.9); }

.service-hero .breadcrumbs { margin-bottom: var(--space-md); }



.service-hero .hero-actions {

    margin-bottom: var(--space-lg);

}



.service-hero .hero-reviews {

    margin-bottom: 0;

}



/* Handle missing featured image — show gradient bg */

.service-hero-bg:empty::before {

    content: '';

    display: block;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, var(--color-dark) 0%, #1a2744 60%, var(--color-primary) 100%);

}



.admin-bar .service-hero {

    margin-top: calc(-1 * (var(--header-height) + 32px));

    padding-top: calc(var(--header-height) + var(--space-3xl) + 32px);

}



@media screen and (max-width: 782px) {

    .admin-bar .service-hero {

        padding-top: calc(var(--header-height) + var(--space-3xl) + 46px);

    }

}



@media (max-width: 640px) {

    .service-hero {

        min-height: auto;

        padding-bottom: var(--space-xl);

    }

    .service-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); }

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

}



/* --- Offer Bar --------------------------------------------------- */

.offer-bar {

    background: var(--color-primary);

    color: var(--color-white);

    padding: var(--space-md) 0;

}



.offer-bar-inner {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-lg);

    flex-wrap: wrap;

}



.offer-bar p {

    margin: 0;

    font-size: 0.9375rem;

}



.offer-bar .btn-white {

    flex-shrink: 0;

}



@media (max-width: 640px) {

    .offer-bar-inner {

        flex-direction: column;

        gap: var(--space-sm);

        text-align: center;

    }

    .offer-bar p { font-size: 0.875rem; }

}



/* --- Testimonial Feature (single large quote) -------------------- */

.testimonial-feature {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

}



.testimonial-feature-quote {

    padding: var(--space-2xl);

    background: var(--color-white);

    border-radius: var(--radius-xl);

    border: 1px solid var(--color-gray-200);

}



.testimonial-feature .testimonial-stars {

    display: block;

    margin-bottom: var(--space-md);

    font-size: 1.25rem;

}



.testimonial-feature blockquote {

    font-size: 1.125rem;

    line-height: 1.8;

    color: var(--color-gray-700);

    font-style: italic;

    margin: 0 0 var(--space-lg);

    border: none;

    padding: 0;

    background: none;

    border-radius: 0;

}



.testimonial-feature cite {

    font-style: normal;

    display: block;

}



.testimonial-feature cite strong {

    font-size: 0.9375rem;

    color: var(--color-dark);

    display: block;

}



.testimonial-feature cite span {

    font-size: 0.8125rem;

    color: var(--color-gray-500);

}



/* --- Page Hero description styling ------------------------------- */

.page-hero .post-meta + h1 {

    margin-top: var(--space-sm);

}



/* --- Mobile CTA in header ---------------------------------------- */

@media (max-width: 1024px) {

    .main-nav .mobile-cta {

        margin-top: var(--space-lg);

        padding-top: var(--space-lg);

        border-top: 1px solid var(--color-gray-200);

    }

}



/* --- Skip to content --------------------------------------------- */

.skip-link {

    position: absolute;

    left: -9999px;

    top: var(--space-md);

    z-index: 9999;

    padding: var(--space-sm) var(--space-md);

    background: var(--color-primary);

    color: var(--color-white);

    border-radius: var(--radius-md);

    font-size: 0.875rem;

}



.skip-link:focus {

    left: var(--space-md);

}



/* --- Mobile Sticky Booking Bar ----------------------------------- */

.mobile-booking-bar {

    display: none;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 999;

    background: var(--color-white);

    border-top: 1px solid var(--color-gray-200);

    padding: var(--space-sm) var(--space-md);

    gap: var(--space-sm);

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);

}



@media (max-width: 768px) {

    .mobile-booking-bar { display: flex; }

    .site-footer { padding-bottom: 80px; }

}



.mobile-booking-btn {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-sm);

    padding: 14px;

    border-radius: var(--radius-md);

    font-size: 0.875rem;

    font-weight: 600;

    text-decoration: none;

    transition: all var(--transition);

}



.mobile-booking-call {

    background: var(--color-white);

    color: var(--color-dark);

    border: 1px solid var(--color-gray-300);

}



.mobile-booking-book {

    background: var(--color-primary);

    color: var(--color-white);

    border: 1px solid var(--color-primary);

}



.mobile-booking-book:hover {

    background: var(--color-primary-dark);

    color: var(--color-white);

}



/* --- Pricing Tables ---------------------------------------------- */

.pricing-table {

    width: 100%;

}

.pricing-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: var(--space-sm) 0;

    border-bottom: 1px solid var(--color-gray-100);

}

.pricing-row:last-child {

    border-bottom: none;

}

.pricing-service {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.pricing-label {

    font-weight: 500;

    font-size: 0.875rem;

    color: var(--color-dark);

}

.pricing-duration {

    font-size: 0.75rem;

    color: var(--color-gray-500);

}

.pricing-amount {

    font-weight: 700;

    font-size: 1rem;

    color: var(--color-primary);

    white-space: nowrap;

}



/* Full-width pricing section (used on service pages) */

.pricing-section-full {

    background: var(--color-surface);

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

    margin-top: var(--space-2xl);

}

.pricing-section-full h2 {

    margin-bottom: var(--space-lg);

}

/* Pricing tabs */

.pricing-tabs {

    display: flex;

    gap: var(--space-xs);

    margin-bottom: var(--space-2xl);

    border-bottom: 2px solid var(--color-gray-200);

    padding-bottom: 0;

}



.pricing-tab {

    padding: var(--space-sm) var(--space-lg);

    font-family: var(--font-sans);

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--color-gray-500);

    background: none;

    border: none;

    border-bottom: 2px solid transparent;

    margin-bottom: -2px;

    cursor: pointer;

    transition: color 0.15s ease, border-color 0.15s ease;

}



.pricing-tab:hover {

    color: var(--color-dark);

}



.pricing-tab.is-active {

    color: #6EC1E4;

    border-bottom-color: #6EC1E4;

}



.pricing-panel {

    display: none;

}



.pricing-panel.is-active {

    display: block;

}



/* Pricing highlight (New Client Offer) */

.pricing-highlight {

    background: var(--color-gray-50);

    border: 1px solid var(--color-gray-200);

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

    text-align: center;

    margin-bottom: var(--space-2xl);

}



.pricing-highlight h2 {

    margin-bottom: var(--space-sm);

}



.pricing-highlight p {

    color: var(--color-gray-600);

    max-width: 500px;

    margin: 0 auto var(--space-md);

}



.pricing-highlight-price {

    font-size: 2.5rem;

    font-weight: 700;

    color: #6EC1E4;

    margin-bottom: var(--space-xs);

}



.pricing-highlight-note {

    font-size: 0.8125rem;

    color: var(--color-gray-500);

    margin-bottom: var(--space-lg);

}



.pricing-highlight .btn-primary {

    margin-top: var(--space-sm);

}



.pricing-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: var(--space-lg);

}

.pricing-card {

    background: var(--color-white);

    border: 1px solid var(--color-gray-200);

    border-radius: var(--radius-md);

    padding: var(--space-lg);

}

.pricing-card h3 {

    font-size: 0.875rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-gray-500);

    margin-bottom: var(--space-md);

}



@media (max-width: 768px) {

    .pricing-info-grid {

        grid-template-columns: 1fr !important;

    }

}



@media (max-width: 480px) {

    .pricing-tabs {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }

    .pricing-tab {

        white-space: nowrap;

        padding: var(--space-sm) var(--space-md);

    }

}



/* Inline price tag (from shortcode) */

.cpl-price {

    font-weight: 600;

    color: var(--color-primary);

}



/* --- Filter Bar -------------------------------------------------- */

.filter-bar {

    display: flex;

    gap: var(--space-sm);

    flex-wrap: wrap;

}



.filter-btn {

    padding: 8px 20px;

    font-family: var(--font-sans);

    font-size: 0.8125rem;

    font-weight: 500;

    border: 1px solid var(--color-gray-200);

    border-radius: var(--radius-full);

    background: var(--color-white);

    color: var(--color-gray-600);

    cursor: pointer;

    transition: all var(--transition);

}



.filter-btn:hover {

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

    color: var(--color-primary);

}



.filter-btn.is-active {

    background: var(--color-primary);

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

    color: var(--color-white);

}



/* Filtered cards */

.card.is-hidden {

    display: none;

}



/* --- Scroll Reveal Animations ------------------------------------ */

.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}



.reveal-delay-1 { transition-delay: 0.1s; }

.reveal-delay-2 { transition-delay: 0.2s; }

.reveal-delay-3 { transition-delay: 0.3s; }



/* GSAP handles all data-animate visibility via JS — no CSS opacity rules. */



/* --- Google Reviews Infinite Scroll Carousel ---------------------- */

.google-reviews-section {

    overflow: hidden;

}



.reviews-carousel {

    position: relative;

    overflow: hidden;

    mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);

}



.reviews-track {

    display: flex;

    gap: var(--space-md);

    width: max-content;

    animation: reviewsScroll 40s linear infinite;

}

.reviews-track:hover {

    animation-play-state: paused;

}



@keyframes reviewsScroll {

    0% { transform: translateX(0); }

    100% { transform: translateX(-50%); }

}



.review-card {

    flex: 0 0 240px;

    background: var(--color-white);

    border-radius: var(--radius-lg);

    padding: var(--space-lg);

    border: 1px solid var(--color-gray-200);

    display: flex;

    flex-direction: column;

    min-height: 220px;

}



.review-card-header {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

    margin-bottom: var(--space-sm);

}



.review-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-weight: 600;

    font-size: 1rem;

    flex-shrink: 0;

}



.review-meta {

    display: flex;

    flex-direction: column;

    min-width: 0;

}



.review-name {

    font-weight: 600;

    font-size: 0.875rem;

    color: var(--color-gray-800);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    display: flex;

    align-items: center;

    gap: 4px;

}



.review-verified {

    flex-shrink: 0;

}



.review-date {

    font-size: 0.75rem;

    color: var(--color-gray-500);

}



.review-stars {

    color: #FBBC05;

    font-size: 1rem;

    letter-spacing: 1px;

    margin-bottom: var(--space-sm);

}



.review-text {

    font-size: 0.8125rem;

    line-height: 1.5;

    color: var(--color-gray-700);

    flex: 1;

    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.review-google-logo {

    margin-top: var(--space-md);

    opacity: 0.8;

}



/* Arrow overlay on right side */

.reviews-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: var(--color-white);

    border: 1px solid var(--color-gray-300);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 2;

    color: var(--color-gray-600);

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    transition: background var(--transition), box-shadow var(--transition);

}

.reviews-arrow:hover {

    background: var(--color-gray-50);

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}

.reviews-arrow-right {

    right: var(--space-md);

}



/* Dots */

.reviews-dots {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: var(--space-lg);

}

.reviews-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--color-gray-400);

    border: none;

    cursor: pointer;

    padding: 0;

    transition: background var(--transition);

}

.reviews-dot.is-active {

    background: var(--color-gray-800);

}



@media (max-width: 768px) {

    .review-card {

        flex: 0 0 220px;

        padding: var(--space-md);

    }

    .reviews-track {

        animation-duration: 30s;

    }

}



@media (max-width: 480px) {

    .review-card {

        flex: 0 0 200px;

    }

    .reviews-track {

        animation-duration: 25s;

    }

}



@media (prefers-reduced-motion: reduce) {

    .reveal,

    [data-animate],

    [data-animate="stagger"] > * {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}



/* --- Back to Top ------------------------------------------------- */

.back-to-top {

    position: fixed;

    bottom: var(--space-xl);

    right: var(--space-xl);

    z-index: 900;

    width: 44px;

    height: 44px;

    border-radius: var(--radius-full);

    background: var(--color-dark);

    color: var(--color-white);

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all var(--transition);

    box-shadow: var(--shadow-md);

}



.back-to-top.is-visible {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.back-to-top:hover {

    background: var(--color-primary);

}



@media (max-width: 768px) {

    .back-to-top {

        bottom: 90px;

        right: var(--space-md);

    }

}



/* --- Studio Gallery Carousel ------------------------------------- */

.studio-gallery {

    padding: var(--space-xl) 0;

    background: var(--color-white);

}

.gallery-carousel {

    position: relative;

    overflow: hidden;

    border-radius: var(--radius-lg);

}

.gallery-track {

    display: flex;

    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}

.gallery-slide {

    flex: 0 0 100%;

    min-width: 0;

}

.gallery-slide img {

    width: 100%;

    height: 480px;

    object-fit: cover;

    display: block;

    border-radius: var(--radius-lg);

}

.gallery-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: rgba(255,255,255,0.9);

    border: 1px solid var(--color-gray-200);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

    transition: all 0.2s ease;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}

.gallery-arrow:hover {

    background: var(--color-white);

    box-shadow: 0 4px 16px rgba(0,0,0,0.15);

}

.gallery-arrow--prev { left: var(--space-md); }

.gallery-arrow--next { right: var(--space-md); }

.gallery-dots {

    position: absolute;

    bottom: var(--space-md);

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 8px;

    z-index: 2;

}

.gallery-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    border: 2px solid rgba(255,255,255,0.8);

    background: transparent;

    cursor: pointer;

    transition: all 0.2s ease;

    padding: 0;

}

.gallery-dot.is-active {

    background: var(--color-white);

    border-color: var(--color-white);

}

.gallery-dot:hover {

    background: rgba(255,255,255,0.6);

}

@media (max-width: 768px) {

    .gallery-slide img {

        height: 280px;

    }

    .gallery-arrow {

        width: 36px;

        height: 36px;

    }

    .gallery-arrow--prev { left: var(--space-sm); }

    .gallery-arrow--next { right: var(--space-sm); }

}



/* --- Team Profile: Hero ------------------------------------------ */

.team-hero {

    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50, #f8f9fa) 100%);

    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-3xl);

    color: var(--color-dark);

    position: relative;

    overflow: hidden;

    border-bottom: 1px solid var(--color-gray-200);

}



.team-hero::before {

    content: '';

    position: absolute;

    top: -200px;

    right: -100px;

    width: 500px;

    height: 500px;

    background: var(--color-primary);

    opacity: 0.04;

    border-radius: 50%;

    pointer-events: none;

}



.team-hero::after {

    content: '';

    position: absolute;

    bottom: -150px;

    left: -80px;

    width: 400px;

    height: 400px;

    background: var(--color-primary);

    opacity: 0.03;

    border-radius: 50%;

    pointer-events: none;

}



.admin-bar .team-hero {

    padding-top: calc(var(--header-height) + 32px + var(--space-2xl));

}



/* Breadcrumbs (within hero) */

.team-hero .breadcrumbs {

    margin-bottom: var(--space-xl);

}



.team-hero .breadcrumbs ol {

    display: flex;

    align-items: center;

    gap: var(--space-xs);

    list-style: none;

    padding: 0;

    margin: 0;

    font-size: 0.75rem;

}



.team-hero .breadcrumbs li {

    display: flex;

    align-items: center;

    gap: var(--space-xs);

}



.team-hero .breadcrumbs li + li::before {

    content: '/';

    color: var(--color-gray-400);

    font-size: 0.6875rem;

}



.team-hero .breadcrumbs a {

    color: var(--color-gray-500);

    text-decoration: none;

    transition: color var(--transition);

}



.team-hero .breadcrumbs a:hover {

    color: var(--color-primary);

}



.team-hero .breadcrumbs span[aria-current] {

    color: var(--color-gray-400);

}



/* Hero inner grid */

.team-hero-inner {

    display: grid;

    grid-template-columns: 340px 1fr;

    gap: var(--space-2xl);

    align-items: center;

}



/* Hero photo */

.team-hero-photo {

    position: relative;

}



.team-hero-photo img {

    width: 100%;

    height: auto;

    border-radius: var(--radius-xl);

    display: block;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);

    aspect-ratio: 4/5;

    object-fit: cover;

}



.team-hero-avatar {

    width: 200px;

    height: 200px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--color-primary), #0d8fa8);

    color: var(--color-white);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 4rem;

    font-weight: 700;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);

    margin: var(--space-xl) auto;

}



/* Hero info */

.team-hero-info h1 {

    color: var(--color-dark);

    font-size: clamp(2rem, 4vw, 2.75rem);

    line-height: 1.15;

    margin-bottom: var(--space-sm);

}



.team-hero-role {

    font-size: 1.125rem;

    color: var(--color-primary);

    font-weight: 500;

    margin-bottom: var(--space-sm);

}



.team-hero-tagline {

    font-size: 1rem;

    color: var(--color-gray-600);

    line-height: 1.6;

    max-width: 500px;

    margin-bottom: var(--space-lg);

}



/* Meta groups (location, specialities, registration) */

.team-hero-meta {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

    margin-bottom: var(--space-lg);

}



.team-hero-meta-group {

    display: flex;

    flex-direction: column;

    gap: var(--space-xs);

}



.team-hero-meta-label {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.6875rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--color-gray-500);

}



.team-hero-meta-label svg {

    opacity: 0.5;

}



.team-hero-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.team-hero-tags .location-tag {

    background: var(--color-gray-100);

    color: var(--color-gray-700);

    border: 1px solid var(--color-gray-200);

    font-size: 0.6875rem;

    padding: 4px 12px;

    border-radius: var(--radius-full);

    transition: all var(--transition);

}



.team-hero-tags a.location-tag:hover {

    background: var(--color-primary-light, rgba(16, 181, 219, 0.08));

    color: var(--color-primary);

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

    text-decoration: none;

}



.team-hero-registration {

    font-size: 0.8125rem;

    color: var(--color-gray-600);

}



/* Trust signal */

.team-hero-trust {

    margin-bottom: var(--space-lg);

}



.team-hero-google-badge {

    display: inline-flex;

    align-items: center;

    gap: var(--space-sm);

    background: var(--color-white);

    border: 1px solid var(--color-gray-200);

    border-radius: var(--radius-full);

    padding: 8px 16px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

}



.team-hero-google-stars {

    color: #fbbf24;

    font-size: 0.875rem;

    letter-spacing: 1px;

}



.team-hero-google-text {

    font-size: 0.75rem;

    color: var(--color-gray-600);

    font-weight: 500;

}



.team-hero-google-badge svg {

    flex-shrink: 0;

}



/* Hero CTAs */

.team-hero-actions {

    display: flex;

    gap: var(--space-md);

    flex-wrap: wrap;

}



.team-hero-actions .btn-primary {

    font-size: 0.9375rem;

}



.team-hero-actions .btn-outline {

    color: var(--color-gray-700);

    border-color: var(--color-gray-300);

}



.team-hero-actions .btn-outline:hover {

    background: var(--color-primary);

    color: var(--color-white);

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

}



@media (max-width: 960px) {

    .team-hero-inner {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .team-hero-photo {

        max-width: 280px;

        margin: 0 auto;

    }

    .team-hero-photo img {

        aspect-ratio: 1/1;

        border-radius: 50%;

    }

    .team-hero-avatar {

        width: 160px;

        height: 160px;

        font-size: 3.5rem;

    }

    .team-hero-tagline {

        margin-left: auto;

        margin-right: auto;

    }

    .team-hero-meta {

        align-items: center;

    }

    .team-hero-meta-group {

        align-items: center;

    }

    .team-hero-tags {

        justify-content: center;

    }

    .team-hero-trust {

        display: flex;

        justify-content: center;

    }

    .team-hero-actions {

        justify-content: center;

    }

}



@media (max-width: 480px) {

    .team-hero {

        padding-bottom: var(--space-2xl);

    }

    .team-hero-photo {

        max-width: 200px;

    }

    .team-hero-actions {

        flex-direction: column;

    }

    .team-hero-actions .btn {

        width: 100%;

    }

}



/* --- Team Profile: Bio Grid -------------------------------------- */

.team-bio-grid {

    display: grid;

    grid-template-columns: 1fr 320px;

    gap: var(--space-2xl);

}



.team-bio-main {

    min-width: 0;

}



.team-bio-main h2 {

    font-size: 1.75rem;

    margin-bottom: var(--space-lg);

    color: var(--color-dark);

}



.team-bio-sidebar {

    align-self: start;

}



.admin-bar .team-bio-sidebar {

    top: calc(var(--header-height) + 32px + var(--space-lg));

}



.team-qualifications {

    margin-top: var(--space-2xl);

    padding-top: var(--space-xl);

    border-top: 1px solid var(--color-gray-200);

}



.team-qualifications h3 {

    font-size: 1.25rem;

    margin-bottom: var(--space-lg);

    color: var(--color-dark);

}



@media (max-width: 960px) {

    .team-bio-grid {

        grid-template-columns: 1fr;

    }

    .team-bio-sidebar {

        position: static;

    }

}



/* --- Team Profile: Location Card --------------------------------- */

.location-card .card-body {

    display: flex;

    flex-direction: column;

}



/* Qualifications list */

.qualifications-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-sm);

}



@media (max-width: 640px) {

    .qualifications-list {

        grid-template-columns: 1fr;

    }

}



.qualification-item {

    display: flex;

    align-items: flex-start;

    gap: var(--space-sm);

    font-size: 0.875rem;

    color: var(--color-gray-700);

    line-height: 1.5;

}



.qualification-item svg {

    flex-shrink: 0;

    margin-top: 2px;

}



/* --- Social Sharing ---------------------------------------------- */

.post-share {

    margin-top: var(--space-2xl);

    padding-top: var(--space-xl);

    border-top: 1px solid var(--color-gray-200);

    display: flex;

    align-items: center;

    gap: var(--space-lg);

}



.post-share-label {

    font-size: 0.8125rem;

    font-weight: 500;

    color: var(--color-gray-500);

    white-space: nowrap;

}



.post-share-buttons {

    display: flex;

    gap: var(--space-sm);

}



.share-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: var(--radius-full);

    background: var(--color-gray-100);

    color: var(--color-gray-500);

    text-decoration: none;

    transition: all var(--transition);

}



.share-btn:hover {

    color: var(--color-white);

}



.share-twitter:hover { background: #1da1f2; }

.share-facebook:hover { background: #1877f2; }

.share-linkedin:hover { background: #0a66c2; }

.share-email:hover { background: var(--color-primary); }



/* --- About Page -------------------------------------------------- */

.about-stat {

    text-align: center;

    padding: var(--space-xl);

}



.about-stat-number {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--color-primary);

    line-height: 1;

    margin-bottom: var(--space-xs);

}



.about-stat-label {

    font-size: 0.8125rem;

    font-weight: 500;

    color: var(--color-gray-500);

    text-transform: uppercase;

    letter-spacing: 0.1em;

}



.about-feature {

    padding: var(--space-xl);

    background: var(--color-gray-50);

    border-radius: var(--radius-lg);

}



.about-feature-icon {

    width: 56px;

    height: 56px;

    border-radius: var(--radius-lg);

    background: var(--color-primary-light);

    color: var(--color-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: var(--space-md);

}



.about-feature h3 {

    font-size: 1.0625rem;

    margin-bottom: var(--space-sm);

}



.about-feature p {

    font-size: 0.875rem;

    color: var(--color-gray-500);

    line-height: 1.7;

    margin: 0;

}



/* --- Blog Layout (two-column with sidebar) ----------------------- */

.blog-layout-inner {

    display: grid;

    grid-template-columns: 1fr 320px;

    gap: var(--space-2xl);

    padding-top: var(--space-2xl);

    padding-bottom: var(--space-2xl);

}



@media (max-width: 960px) {

    .blog-layout-inner {

        grid-template-columns: 1fr;

    }

}



.blog-main {

    min-width: 0;

}



.blog-sidebar {

    /* height matches article column via CSS grid stretch */

}

.blog-sidebar-inner {

    display: flex;

    flex-direction: column;

    gap: var(--space-lg);

    will-change: transform; /* GPU compositor layer — makes JS translateY smooth */

}



@media (max-width: 960px) {

    .blog-sidebar {

        position: static;

    }

}



/* Blog sidebar contributor card */

.sidebar-contributor-header {

    display: flex;

    align-items: center;

    gap: var(--space-md);

}



.sidebar-contributor h3 {

    font-size: 1.125rem;

    margin-bottom: var(--space-sm);

}



.sidebar-contributor-photo {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.sidebar-contributor-avatar {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: var(--color-primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 0.75rem;

    flex-shrink: 0;

}



.sidebar-contributor-name {

    font-weight: 600;

    font-size: 0.9375rem;

    color: var(--color-dark);

    text-decoration: none;

    display: block;

    line-height: 1.3;

}

.sidebar-contributor-name:hover {

    color: var(--color-primary);

}



.sidebar-contributor-role {

    font-size: 0.75rem;

    color: var(--color-gray-500);

    margin: 2px 0 0;

    line-height: 1.4;

}



.sidebar-contributor-details {

    margin-top: var(--space-md);

    border-top: 1px solid var(--color-gray-200);

    padding-top: var(--space-sm);

}



.sidebar-contributor-details summary {

    font-size: 0.8125rem;

    font-weight: 600;

    color: var(--color-primary);

    cursor: pointer;

    padding: var(--space-xs) 0;

    list-style: none;

}

.sidebar-contributor-details summary::-webkit-details-marker { display: none; }

.sidebar-contributor-details summary::after {

    content: '+';

    float: right;

    font-weight: 400;

    color: var(--color-gray-400);

    transition: transform 0.2s;

}

.sidebar-contributor-details[open] summary::after {

    content: '\2212';

}



.sidebar-contributor-details p {

    font-size: 0.8125rem;

    color: var(--color-gray-600);

    line-height: 1.6;

    margin: var(--space-sm) 0;

}



.sidebar-contributor-link {

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--color-primary);

    text-decoration: none;

}

.sidebar-contributor-link:hover {

    text-decoration: underline;

}



/* Blog sidebar CTA card */

.blog-sidebar-cta h3 {

    font-size: 1.125rem;

    margin-bottom: var(--space-sm);

}



.blog-sidebar-cta p {

    font-size: 0.8125rem;

    color: var(--color-gray-600);

    line-height: 1.6;

    margin-bottom: var(--space-md);

}



.blog-sidebar-highlight {

    background: var(--color-primary);

    color: white;

    border-radius: var(--radius-md);

    padding: var(--space-md);

    text-align: center;

    margin-bottom: var(--space-md);

}



.blog-sidebar-label {

    display: block;

    font-size: 0.6875rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    opacity: 0.8;

    margin-bottom: 2px;

}



.blog-sidebar-price {

    font-size: 1.25rem;

    font-weight: 700;

}



.blog-sidebar-includes {

    list-style: none;

    padding: 0;

    margin: 0 0 var(--space-md);

}



.blog-sidebar-includes li {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

    font-size: 0.8125rem;

    color: var(--color-gray-600);

    padding: var(--space-xs) 0;

}



.blog-sidebar-btns {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

}



.blog-sidebar-btns .btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-xs);

    font-size: 0.8125rem;

}



/* Blog sidebar newsletter */

.blog-sidebar-newsletter h3 {

    font-size: 1.125rem;

    margin-bottom: var(--space-sm);

}



.blog-sidebar-newsletter p {

    font-size: 0.8125rem;

    color: var(--color-gray-600);

    line-height: 1.6;

    margin-bottom: var(--space-md);

}



.newsletter-form-fields {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

}



.newsletter-input {

    width: 100%;

    padding: 10px 14px;

    border: 1px solid var(--color-gray-300);

    border-radius: var(--radius-md);

    font-size: 0.875rem;

    font-family: var(--font-sans);

    color: var(--color-dark);

    background: white;

    transition: border-color var(--transition);

}



.newsletter-input:focus {

    outline: none;

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

    box-shadow: 0 0 0 3px rgba(16, 181, 219, 0.1);

}



.newsletter-submit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-xs);

}



.newsletter-msg {

    font-size: 0.8125rem;

    margin-top: var(--space-sm);

    padding: var(--space-sm) var(--space-md);

    border-radius: var(--radius-md);

}



.newsletter-msg.success {

    background: #ecfdf5;

    color: #065f46;

}



.newsletter-msg.error {

    background: #fef2f2;

    color: #991b1b;

}



.newsletter-privacy {

    font-size: 0.6875rem;

    color: var(--color-gray-400);

    margin-top: var(--space-sm);

    margin-bottom: 0;

}



/* --- Contributor Label (blog hero) ------------------------------- */

.post-contributor {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    margin-bottom: var(--space-lg);

    padding: var(--space-md) var(--space-lg);

    background: rgba(16, 181, 219, 0.06);

    border-radius: var(--radius-lg);

    border-left: 3px solid var(--color-primary);

}



.contributor-photo {

    width: 48px;

    height: 48px;

    border-radius: var(--radius-full);

    object-fit: cover;

}



.contributor-avatar {

    width: 48px;

    height: 48px;

    border-radius: var(--radius-full);

    background: var(--color-primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 1.125rem;

    flex-shrink: 0;

}



.contributor-info {

    display: flex;

    flex-direction: column;

    gap: 1px;

}



.contributor-label {

    font-size: 0.6875rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--color-gray-500);

    font-weight: 600;

}



.contributor-name {

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--color-dark);

    text-decoration: none;

}



.contributor-name:hover {

    color: var(--color-primary);

}



.contributor-role {

    font-size: 0.75rem;

    color: var(--color-gray-500);

}



/* --- Author Bio Card (bottom of post) ---------------------------- */

.author-bio-card {

    margin-top: var(--space-2xl);

    padding: var(--space-xl);

    background: var(--color-gray-50);

    border-radius: var(--radius-lg);

    border-left: 3px solid var(--color-primary);

}



.author-bio-header {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    margin-bottom: var(--space-md);

}



.author-bio-photo {

    width: 64px;

    height: 64px;

    border-radius: var(--radius-full);

    object-fit: cover;

    flex-shrink: 0;

}



.author-bio-avatar {

    width: 64px;

    height: 64px;

    border-radius: var(--radius-full);

    background: var(--color-primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1.25rem;

    flex-shrink: 0;

}



.author-bio-name {

    font-size: 1.0625rem;

    font-weight: 600;

    color: var(--color-dark);

    text-decoration: none;

    display: block;

}



a.author-bio-name:hover {

    color: var(--color-primary);

}



.author-bio-role {

    font-size: 0.8125rem;

    color: var(--color-primary);

    margin: 2px 0 0;

}



.author-bio-quals {

    font-size: 0.75rem;

    color: var(--color-gray-500);

    margin: 2px 0 0;

}



.author-bio-text {

    font-size: 0.875rem;

    color: var(--color-gray-600);

    line-height: 1.7;

    margin-bottom: var(--space-md);

}



.author-bio-link {

    font-size: 0.8125rem;

    color: var(--color-primary);

    text-decoration: none;

    font-weight: 500;

}



.author-bio-link:hover {

    text-decoration: underline;

}



.author-bio-meta {

    font-size: 0.75rem;

    color: var(--color-gray-400);

    margin-top: var(--space-sm);

}



/* --- Table of Contents (collapsible dropdown) -------------------- */

.toc {

    background: var(--color-gray-50);

    border-radius: var(--radius-lg);

    padding: 0;

    margin-bottom: var(--space-xl);

    overflow: hidden;

}



.toc-toggle {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: var(--space-md) var(--space-xl);

    background: none;

    border: none;

    cursor: pointer;

    font-family: var(--font-sans);

}



.toc-toggle-title {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    color: var(--color-gray-500);

    font-weight: 600;

}



.toc-toggle-icon {

    transition: transform 0.2s ease;

    color: var(--color-gray-400);

}



.toc--open .toc-toggle-icon {

    transform: rotate(180deg);

}



.toc-list {

    list-style: none;

    padding: 0 var(--space-xl) var(--space-lg);

    margin: 0;

    display: none;

}



.toc--open .toc-list {

    display: block;

}



.toc-list li {

    margin-bottom: var(--space-xs);

}



.toc-list a {

    font-size: 0.875rem;

    color: var(--color-gray-600);

    text-decoration: none;

    transition: color var(--transition);

    display: flex;

    align-items: center;

    gap: var(--space-sm);

    padding: var(--space-xs) 0;

}



.toc-list a::before {

    content: '';

    width: 4px;

    height: 4px;

    border-radius: var(--radius-full);

    background: var(--color-gray-300);

    flex-shrink: 0;

}



.toc-list a:hover {

    color: var(--color-primary);

}



.toc-list a:hover::before {

    background: var(--color-primary);

}



/* --- FAQ Accordion (details/summary variant) --------------------- */

.faq-accordion {
    margin: var(--space-lg) 0 var(--space-2xl);
    border-top: 1px solid var(--color-gray-200);
}

details.faq-item {
    border-bottom: 1px solid var(--color-gray-200);
    position: relative;
}

details.faq-item > summary.faq-question,
summary.faq-question {
    box-sizing: border-box;
    list-style: none;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: var(--space-lg) 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.45;
    transition: color 0.3s ease;
}

summary.faq-question::-webkit-details-marker { display: none; }

summary.faq-question::after {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gray-300);
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cline x1='5.5' y1='1' x2='5.5' y2='10' stroke='%23545f68' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='1' y1='5.5' x2='10' y2='5.5' stroke='%23545f68' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.3s ease, background-color 0.3s ease;
    margin-top: 2px;
}

details.faq-item[open] > summary.faq-question { color: var(--color-primary); }

details.faq-item[open] > summary.faq-question::after {
    transform: rotate(45deg);
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cline x1='5.5' y1='1' x2='5.5' y2='10' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='1' y1='5.5' x2='10' y2='5.5' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

summary.faq-question:hover { color: var(--color-primary); }

.faq-answer {
    padding: 0 0 var(--space-xl) 0;
    padding-right: 48px;
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.8;
}

.faq-answer p { margin-bottom: var(--space-sm); }
.faq-answer p:last-child { margin-bottom: 0; }

.faq-answer ul {
    margin: var(--space-xs) 0 var(--space-md);
    padding-left: 0;
    list-style: none;
}

.faq-answer ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: var(--space-xs);
    line-height: 1.65;
}

.faq-answer ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
}



/* --- Testimonials Page -------------------------------------------- */

.testimonials-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

    gap: var(--space-lg);

}



@media (max-width: 480px) {

    .testimonials-grid {

        grid-template-columns: 1fr;

    }

}



.testimonial-card {

    background: var(--color-white);

    border: 1px solid var(--color-gray-200);

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

    transition: transform var(--transition), box-shadow var(--transition);

}



.testimonial-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-lg);

}



.testimonial-quote-full {

    font-size: 0.9375rem;

    line-height: 1.7;

    color: var(--color-gray-700);

    margin: 0 0 var(--space-lg);

    border: none;

    padding: 0;

}



.testimonial-quote-full p {

    margin-bottom: var(--space-sm);

}



.testimonial-quote-full p:last-child {

    margin-bottom: 0;

}



.testimonial-footer {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding-top: var(--space-md);

    border-top: 1px solid var(--color-gray-100);

}



.testimonial-footer svg {

    flex-shrink: 0;

    opacity: 0.5;

}



/* --- Sitemap Page ------------------------------------------------ */

.sitemap-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: var(--space-2xl);

}



@media (max-width: 640px) {

    .sitemap-grid {

        grid-template-columns: 1fr;

    }

}



.sitemap-heading {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    color: var(--color-gray-500);

    font-weight: 600;

    padding-bottom: var(--space-md);

    border-bottom: 2px solid var(--color-gray-200);

    margin-bottom: var(--space-md);

}



.sitemap-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.sitemap-list li {

    margin-bottom: var(--space-xs);

}



.sitemap-list a {

    font-size: 0.9375rem;

    color: var(--color-gray-600);

    text-decoration: none;

    padding: var(--space-xs) 0;

    display: inline-block;

    transition: color var(--transition);

}



.sitemap-list a:hover {

    color: var(--color-primary);

}



.sitemap-list ul {

    list-style: none;

    padding-left: var(--space-lg);

    margin-top: var(--space-xs);

}



.sitemap-list--compact {

    column-count: 2;

    column-gap: var(--space-lg);

}



@media (max-width: 480px) {

    .sitemap-list--compact {

        column-count: 1;

    }

}



/* --- Legal Pages (Privacy, Terms) -------------------------------- */

.legal-content {

    display: grid;

    grid-template-columns: 1fr 280px;

    gap: var(--space-2xl);

    align-items: start;

}



@media (max-width: 768px) {

    .legal-content {

        grid-template-columns: 1fr;

    }



    .legal-sidebar {

        order: -1;

    }

}



.legal-nav {

    display: flex;

    flex-direction: column;

    gap: var(--space-xs);

}



.legal-nav-link {

    display: block;

    padding: var(--space-sm) var(--space-md);

    border-radius: var(--radius-md);

    font-size: 0.875rem;

    color: var(--color-gray-600);

    text-decoration: none;

    transition: all var(--transition);

}



.legal-nav-link:hover {

    background: var(--color-gray-100);

    color: var(--color-dark);

}



.legal-nav-link.is-active {

    background: var(--color-primary-light);

    color: var(--color-primary);

    font-weight: 500;

}



/* --- Hero Reviews Badge ------------------------------------------ */

.hero-reviews {

    display: inline-flex;

    align-items: center;

    gap: var(--space-sm);

    background: rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-radius: var(--radius-full);

    padding: 8px 18px;

    font-size: 0.8125rem;

    color: rgba(255, 255, 255, 0.9);

    margin-bottom: var(--space-lg);

}



.hero-reviews-stars {

    color: #fbbf24;

    letter-spacing: 2px;

}



/* --- Feature Boxes (bridge overlay) ------------------------------ */

.feature-boxes {

    position: relative;

    z-index: 2;

    margin-top: -80px;

    background: transparent;

    padding: 0 0 var(--space-2xl);

}



.feature-box {

    text-align: center;

    padding: var(--space-lg);

    background: var(--color-white);

    border-radius: 12px;

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

    border-top: 3px solid #6EC1E4;

}



.feature-box-icon {

    width: 56px;

    height: 56px;

    border-radius: var(--radius-full);

    background: var(--color-primary-light);

    color: var(--color-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto var(--space-md);

}



.feature-box h3 {

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: var(--space-sm);

}



.feature-box p {

    font-size: 0.875rem;

    color: var(--color-gray-500);

    line-height: 1.6;

    margin: 0;

}



@media (max-width: 640px) {

    .feature-boxes { margin-top: -50px; padding: 0 0 var(--space-xl); }

    .feature-box { padding: var(--space-md); }

}



/* --- "Pilates in London" Split Layout Section -------------------- */

.pilates-london-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-2xl);

    align-items: center;

}



.pilates-london-text {

    border-left: 3px solid #6EC1E4;

    padding-left: var(--space-lg);

}



.pilates-london-text h2 {

    font-size: 2rem;

    margin-bottom: var(--space-md);

}



.pilates-london-text p {

    color: var(--color-gray-600);

    line-height: 1.8;

}



.pilates-london-image img {

    width: 100%;

    height: auto;

    border-radius: var(--radius-lg);

    object-fit: cover;

}



@media (max-width: 768px) {

    .pilates-london-grid {

        grid-template-columns: 1fr;

        gap: var(--space-xl);

    }

    .pilates-london-text {

        order: 1;

    }

    .pilates-london-image {

        order: 0;

    }

}



/* --- Location Tagline ------------------------------------------- */

.location-tagline {

    font-size: 0.8125rem;

    color: var(--color-primary);

    font-weight: 500;

    margin-bottom: var(--space-xs);

}



/* --- Testimonial Header / Avatar --------------------------------- */

.testimonial-header {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    margin-bottom: var(--space-md);

}



.testimonial-avatar {

    width: 40px;

    height: 40px;

    border-radius: var(--radius-full);

    background: var(--color-primary);

    color: var(--color-white);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1rem;

    flex-shrink: 0;

}



.testimonial-header .testimonial-author {

    margin-bottom: 0;

}



.testimonial-header .testimonial-stars {

    margin-bottom: 0;

    font-size: 0.75rem;

}



.testimonial-source {

    display: flex;

    align-items: center;

    gap: var(--space-xs);

    margin-top: var(--space-md);

}



.testimonial-source svg {

    flex-shrink: 0;

}



/* --- FAQ with native <details> ----------------------------------- */

details.faq-item {

    border-bottom: 1px solid var(--color-gray-200);

}



details.faq-item summary.faq-question {

    list-style: none;

}



details.faq-item summary.faq-question::-webkit-details-marker {

    display: none;

}



details.faq-item summary.faq-question::marker {

    display: none;

    content: '';

}



details.faq-item .faq-answer {

    max-height: none;

    overflow: visible;

}



details.faq-item[open] .faq-question::after {

    transform: rotate(45deg);

}



details.faq-item .faq-answer p {

    padding-bottom: var(--space-lg);

    color: var(--color-gray-600);

    line-height: 1.7;

}



/* --- Mobile Polish (2026-04-02) ---------------------------------- */

@media (max-width: 640px) {

    /* CTA block — reduce padding on mobile */
    .cta-block { padding: var(--space-2xl) var(--space-lg); }

    /* Pricing grid — allow horizontal scroll if table overflows */
    .pricing-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Pricing table — prevent overflow */
    .pricing-table { min-width: 320px; }

    /* Team cards — tighten card body padding */
    .team-card .card-body { padding: var(--space-sm) var(--space-md); }

}

@media (max-width: 480px) {

    /* Modal padding — reduce on very small screens */
    .cpl-modal__body { padding: var(--space-md); }

    /* CTA actions — stack vertically */
    .cta-actions { flex-direction: column; gap: var(--space-sm); }
    .cta-actions .btn { width: 100%; }

}



/* --- Print Styles ------------------------------------------------ */

@media print {

    .site-header, .site-footer, .cta-block,

    .hero-actions, .quick-actions, .btn {

        display: none !important;

    }

    .site-main { padding-top: 0 !important; }

    .page-hero { background: white !important; color: black !important; }

    .page-hero h1 { color: black !important; }

}

/* ============================================================
   Responsive embeds inside blog post content (.post-content)
   Handles Gutenberg wp-block-embed and classic raw iframes
   ============================================================ */

.post-content .wp-block-embed { max-width: 100%; margin: 2rem 0; }

.post-content .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
}

.post-content .wp-block-embed__wrapper iframe,
.post-content .wp-block-embed__wrapper video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Raw iframes (classic editor / pasted embeds) */
.post-content iframe {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    margin: 1.5rem 0;
    display: block;
}

/* ============================================================
   Blog search form (appears in page-hero on /blogs/)
   Hero background is light (#f8f9fa) so use dark text
   ============================================================ */

.blog-search-form { width: 100%; }

.blog-search-inner {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #8a9ab0;
    border-radius: var(--radius-full);
    padding: 4px 4px 4px 14px;
    gap: var(--space-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-search-inner:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13,150,182,0.12);
}

.blog-search-icon {
    flex-shrink: 0;
    color: #8a9ab0;
}

.blog-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    color: #0b1d2f;
    padding: 6px 0;
}

.blog-search-input::placeholder { color: #a0aab8; }

.blog-search-btn {
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-full);
    padding: 8px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.blog-search-btn:hover { opacity: 0.88; }

@media (max-width: 480px) {
    .blog-search-form { max-width: 100% !important; }
    .blog-search-btn { padding: 8px 14px; }
}


/* ─── Expert Say Section ──────────────────────────────────── */
/* Expert Quote — sidebar widget */
.sidebar-expert-bq {
    margin: 0;
    padding: 0;
    border: none;
    border-left: 3px solid var(--color-primary);
    padding-left: 12px;
}

.sidebar-expert-bq p {
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 12px;
}

.sidebar-expert-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.sidebar-expert-photo {
    display: block;
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    flex-shrink: 0;
}

.sidebar-expert-name {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text);
    text-decoration: none;
}

.sidebar-expert-name:hover {
    color: var(--color-primary);
}

.sidebar-expert-role {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
    margin-top: 1px;
}