/* Kriti360 Color Palette */
:root {
    --cream-50: #fef9f5;
    --cream-100: #fdf4eb;
    --cream-200: #fbe4d1;
    --mauve-200: #e8d5e0;
    --mauve-300: #d4a5b8;
    --mauve-400: #a8838f;
    --mauve-500: #8f6b7a;
    --primary-text: #2d2d2d;
    --secondary-text: #6b7280;
}

/* Kriti360 2026 - Custom Theme Styles */
/* These styles complement the Tailwind CSS CDN */

/* Font Import */
body {
    font-family: 'Poppins', sans-serif;
}

.font-serif {
    font-family: 'DM Serif Display', serif;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'DM Serif Display', serif;
}

.hero-title {
    font-family: 'DM Serif Display', serif;
    color: var(--primary-text);
}

/* --- Header: fixed sticky pill everywhere ------------ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    border: none;
    box-shadow: none;
    padding-top: 16px;
    transition: padding-top 0.3s ease;
}

/* Shrink top padding slightly once page is scrolled */
.site-header.is-scrolled {
    padding-top: 8px;
}

/* Account for WP admin bar */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* The pill � used on every page */
.navbar-inner-floating {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50px;
    padding: 10px 16px 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0px 11px 19px -19px #000;
    transition: box-shadow 0.3s ease;
}

/* Subtle shadow only after the user starts scrolling */
.site-header.is-scrolled .navbar-inner-floating {
    box-shadow: 0px 11px 19px -19px #000;
}

/* Offset fixed header on inner pages so content isn't hidden */
.site-content {
    padding-top: 90px;
}

/* Front page hero is full-viewport � no extra offset needed */
/* WordPress appends -php to template body classes for files in subdirectories,
   so we cover both patterns. The :has() rule acts as a universal fallback. */
body.home .site-content,
body.page-template-default .site-content,
body.page-template-services .site-content,
body.page-template-services-php .site-content,
body.page-template-treatment-detail .site-content,
body.page-template-treatment-detail-php .site-content,
body.page-template-single-service .site-content,
body.page-template-single-service-php .site-content,
body.page-template-blog .site-content,
body.page-template-blog-php .site-content,
body.page-template-blog-single .site-content,
body.page-template-blog-single-php .site-content,
body.page-template-blog-single-custom .site-content,
body.page-template-blog-single-custom-php .site-content,
body.page-template-contact-us .site-content,
body.page-template-contact-us-php .site-content,
.site-content:has(> .site-main > .trt-hero-section:first-child),
.site-content:has(> .site-main > .hero-section:first-child) {
    padding-top: 0;
}

/* --- Site Branding ------------------------------------- */
.site-branding {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Constrain header logo image (custom logo or uploaded) */
.site-branding img,
.site-branding .custom-logo {
    max-height: 52px;
    width: auto;
    display: block;
}

.site-title-link {
    font-family: 'DM Serif Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-text);
    text-decoration: none;
    display: block;
    line-height: 1.2;
}

.site-desc-text {
    font-size: 0.7rem;
    color: var(--secondary-text);
    display: block;
}

/* --- Primary Menu ------------------------------------- */
.primary-menu-wrapper {
    display: none;
}

@media (min-width: 768px) {
    .primary-menu-wrapper {
        display: flex;
        align-items: center;
    }
}

.primary-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 32px;
}

.primary-menu-list a {
    text-decoration: none;
}

/* --- Nav Link styles ----------------------------------- */
.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text);
    position: relative;
    padding-bottom: 2px;
    transition: color 0.25s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--mauve-400);
    border-radius: 2px;
    transition: width 0.25s ease;
}

.nav-link:hover,
.current-menu-item .nav-link {
    color: var(--mauve-400);
}

.current-menu-item .nav-link::after {
    width: 60%;
}

.nav-link:hover::after {
    width: 60%;
}

/* --- Top-level nav: underline on <a> not on span -----
   The .nav-link span only covers the text, so its ::after
   is off-centre when a chevron sits beside it.
   We kill the span underline for top-level items and draw
   a fresh one on the <a> via ::before instead.           */
.primary-menu-list>li>a {
    position: relative;
}

/* kill span underline at this level */
.primary-menu-list>li>a .nav-link::after {
    display: none;
}

/* underline centred across the whole <a> (text + chevron) */
.primary-menu-list>li>a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--mauve-400);
    border-radius: 2px;
    transition: width 0.25s ease;
}

.primary-menu-list>li:hover>a::before,
.primary-menu-list>li.current-menu-item>a::before {
    width: 70%;
}

/* --- Dropdown: parent item positioning --------------- */
.primary-menu-list>li {
    position: relative;
}

/* Chevron on items that have children */
.primary-menu-list>li.menu-item-has-children>a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.primary-menu-list>li.menu-item-has-children>a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.55;
    margin-top: 1px;
    transition: transform 0.25s ease;
}

.primary-menu-list>li.menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* --- Dropdown panel ----------------------------------- */
.primary-menu-list .sub-menu {
    position: absolute;
    top: 100%;
    /* touches the li � no gap */
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 250px;
    background: transparent;
    /* transparent until the panel */
    border-radius: 14px;
    padding: 14px 0 0 0;
    /* 14px invisible bridge above the panel */
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    z-index: 9999;
}

/* The visible white panel sits inside the padding */
.primary-menu-list .sub-menu::after {
    content: '';
    position: absolute;
    inset: 14px 0 0 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
    z-index: -1;
}

/* Small arrow tip pointing upward */
.primary-menu-list .sub-menu::before {
    content: '';
    position: absolute;
    top: 9px;
    /* sits in the padding bridge */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 2px 0 0 0;
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
    z-index: 1;
}

/* Show on hover */
.primary-menu-list>li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Sub-menu items */
.primary-menu-list .sub-menu li {
    display: block;
}

.primary-menu-list .sub-menu li:first-child a {
    padding-top: 14px;
    /* extra space below the arrow */
}

.primary-menu-list .sub-menu li:last-child a {
    padding-bottom: 14px;
    border-radius: 0 0 14px 14px;
}

.primary-menu-list .sub-menu a {
    display: block;
    padding: 10px 22px;
    text-decoration: none;
    transition: background 0.18s ease;
    border-radius: 0;
}

.primary-menu-list .sub-menu a:hover,
.primary-menu-list .sub-menu .current-menu-item>a {
    background: #faf4f6;
}

.primary-menu-list .sub-menu .nav-link {
    font-size: 0.85rem;
    font-weight: 400;
    white-space: nowrap;
}

/* No underline animation on sub-menu items */
.primary-menu-list .sub-menu .nav-link::after {
    display: none;
}

/* Divider between sub-items */
.primary-menu-list .sub-menu li+li {
    border-top: 1px solid #f3edf0;
}

/* --- Navbar Right (location icon + CTA) ------------- */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.navbar-location-icon {
    color: var(--secondary-text);
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}

@media (min-width: 768px) {
    .navbar-location-icon {
        display: inline-flex;
        align-items: center;
    }
}

.navbar-location-icon:hover {
    color: var(--mauve-400);
}

/* --- Mobile toggle ------------------------------------- */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
}

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

.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--primary-text);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* -- Hamburger ? ? when menu is open ------------------- */
.mobile-menu-toggle.is-active span:nth-child(1),
#menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.is-active span:nth-child(2),
#menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.is-active span:nth-child(3),
#menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Hero Section (full-viewport cover) ---------------- */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Soft white wash on the left � creates contrast for dark text without darkening photo */
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0.38) 38%,
            rgba(255, 255, 255, 0.08) 62%,
            transparent 100%);
    z-index: 1;
}

.hero-content {
    animation: slideInUp 0.8s ease-out;
    position: relative;
    z-index: 2;
    padding-top: 100px;
    padding-bottom: 120px;
    /* leave room for stats bar */
    max-width: 560px;
}

/* Eyebrow label */
.hero-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mauve-500);
    margin-bottom: 16px;
}

.hero-title {
    font-family: 'DM Serif Display', serif;
    color: var(--primary-text);
    line-height: 1.08;
    font-size: clamp(2.8rem, 4.8vw, 4.2rem);
    margin-bottom: 22px;
}

.hero-title-italic {
    font-style: italic;
    color: var(--mauve-400);
    display: block;
    font-family: 'DM Serif Display', serif;
}

.hero-subtitle {
    color: var(--secondary-text);
    font-weight: 400;
    max-width: 400px;
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 38px;
}

/* CTA row: primary button + ghost link */
.hero-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.hero-ghost-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-text);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s, gap 0.25s;
}

.hero-ghost-cta span {
    display: inline-block;
    transition: transform 0.25s;
}

.hero-ghost-cta:hover {
    color: var(--mauve-500);
    gap: 14px;
}

.hero-ghost-cta:hover span {
    transform: translateX(4px);
}

/* --- Bottom frosted stats bar -------------------------- */
.hero-stats-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.hero-stats-inner {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 20px;
}

.hero-stat-num {
    font-family: 'DM Serif Display', serif;
    font-size: 1.35rem;
    color: var(--primary-text);
    line-height: 1.2;
    white-space: nowrap;
}

.hero-stat-label {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--secondary-text);
    text-align: center;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hero-stat-divider {
    width: 1px;
    height: 44px;
    background: rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .hero-content {
        max-width: 100%;
        padding-bottom: 68px;
        /* just clears the fixed stats bar */
    }

    .hero-cta-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero-stats-inner {
        padding: 14px 0;
        flex-wrap: wrap;
        gap: 0;
    }

    .hero-stat {
        flex: 1;
        min-width: 100px;
        padding: 8px 12px;
    }

    .hero-stat-divider {
        display: none;
    }

    .hero-stat-num {
        font-size: 1.1rem;
    }

    .hero-eyebrow {
        font-size: 0.70rem;
    }
}

/* --- Stat cards (kept for backward-compat, hidden in new hero) -- */
.stat-card-dark,
.stat-card-light,
.stat-card-light-icon {
    display: none;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Button Styles */
.btn-connect,
.btn-primary-main {
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-connect {
    background-color: var(--mauve-400);
    color: white;
    font-size: 0.95rem;
}

.btn-connect:hover {
    background-color: var(--mauve-500);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(168, 131, 143, 0.3);
}

.btn-primary-main {
    background-color: var(--mauve-400);
    color: white;
    font-size: 1rem;
    padding: 14px 32px;
}

.btn-primary-main:hover {
    background-color: var(--mauve-500);
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(168, 131, 143, 0.35);
}

/* Navigation Links */
.nav-link {
    color: var(--primary-text);
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--mauve-400);
    transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--mauve-400);
}

.nav-link:hover::after,
.nav-link:focus::after {
    width: 100%;
}

/* Utility classes */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

.slide-in-up {
    animation: slideInUp 0.5s ease-out;
}

/* Typography enhancements */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Link styles */
a {
    transition: color 0.3s ease;
}

a:hover {
    text-decoration: none;
}

/* Form styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* Button hover effects */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    transition: all 0.3s ease;
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Table styles */
table {
    width: 100%;
    border-collapse: collapse;
}

table td,
table th {
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    text-align: left;
}

table th {
    background-color: #f9fafb;
    font-weight: 700;
}

/* Navigation enhancements */
.navbar {
    transition: all 0.3s ease;
}

/* Mobile menu toggle */
#menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

#menu-toggle span {
    display: block;
    width: 1.25rem;
    height: 0.125rem;
    background-color: currentColor;
    transition: all 0.3s ease;
}

/* Hide hamburger on tablet/desktop */
@media (min-width: 768px) {
    #menu-toggle {
        display: none;
    }
}

/* Card hover effects */
.card {
    transition: all 0.3s ease;
}

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

/* Sidebar */
.sidebar {
    transition: all 0.3s ease;
}

.widget {
    margin-bottom: 1.5rem;
}

.widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #2563eb;
}

/* --- About Section ------------------------------------------- */
.about-section {
    background: var(--cream-50);
    padding: 100px 0;
    overflow: visible;
}

.about-inner {
    display: flex;
    align-items: stretch;
    /* both columns always same height */
    gap: 72px;
}

/* -- Image column ---------------------------------------- */
.about-image-col {
    flex: 0 0 auto;
    width: 420px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Decorative warm-mauve backdrop behind the photo */
.about-image-col::before {
    content: '';
    position: absolute;
    inset: -20px -28px -20px -28px;
    background: var(--mauve-200);
    border-radius: 32px;
    z-index: 0;
    opacity: 0.5;
}

.about-image-wrap {
    border-radius: 24px;
    overflow: hidden;
    flex: 1;
    /* fills the column height */
    position: relative;
    z-index: 1;
    line-height: 0;
    min-height: 480px;
    box-shadow: 0 20px 60px rgba(45, 45, 45, 0.13);
}

.about-doctor-img {
    width: 100%;
    height: 100%;
    /* fills the wrap � matches content height */
    display: block;
    object-fit: cover;
    object-position: top center;
    border-radius: 24px;
}

/* Floating credential badge */
.about-image-badge {
    position: absolute;
    bottom: 28px;
    right: -24px;
    z-index: 2;
    background: #fff;
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 0 8px 32px rgba(45, 45, 45, 0.13);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
}

.about-image-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mauve-200), var(--mauve-300));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.about-image-badge-text strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-text);
    line-height: 1.1;
}

.about-image-badge-text span {
    font-size: 0.72rem;
    color: var(--secondary-text);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* -- Content column -------------------------------------- */
.about-content-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mauve-400);
    margin-bottom: 16px;
}

.about-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0 0 24px;
}

.about-lead {
    font-size: 1rem;
    color: var(--primary-text);
    line-height: 1.7;
    margin-bottom: 16px;
}

.about-lead a,
.about-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s;
}

.about-lead a:hover,
.about-body a:hover {
    opacity: 0.75;
}

.about-body {
    font-size: 0.925rem;
    color: var(--secondary-text);
    line-height: 1.8;
    margin-bottom: 32px;
}

/* -- 2�2 Feature cards � horizontal layout --------------- */
.about-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 36px;
}

.about-card {
    background: #fff;
    border: 1px solid var(--cream-200);
    border-radius: 16px;
    padding: 18px 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.about-card:hover {
    box-shadow: 0 6px 24px rgba(168, 131, 143, 0.13);
    transform: translateY(-2px);
}

.about-card-img-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cream-200);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.about-card-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.about-card-body {
    flex: 1;
    min-width: 0;
}

.about-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-text);
    margin: 0 0 4px;
    font-family: inherit;
    line-height: 1.3;
}

.about-card-desc {
    font-size: 0.77rem;
    color: var(--secondary-text);
    line-height: 1.55;
    margin: 0;
}

/* Learn More link */
.about-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mauve-400);
    text-decoration: none;
    transition: color 0.25s, gap 0.25s;
    margin-top: auto;
}

.about-learn-more span {
    display: inline-block;
    transition: transform 0.25s;
}

.about-learn-more:hover {
    color: var(--mauve-500);
    gap: 14px;
}

.about-learn-more:hover span {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .about-inner {
        flex-direction: column;
        gap: 56px;
    }

    .about-image-col {
        width: 100%;
    }

    .about-image-col::before {
        display: none;
    }

    .about-image-wrap {
        min-height: 420px;
    }

    .about-image-badge {
        right: 12px;
        bottom: 20px;
    }

    .about-heading {
        font-size: 2rem;
    }
}

/* --- Services Section --------------------------------------- */
.services-section {
    background-color: #f9f3f1;
    padding: 72px 0 100px;
}

.services-header {
    text-align: center;
    margin-bottom: 56px;
}

.services-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--primary-text);
    margin: 10px 0 16px;
    line-height: 1.15;
}

.services-subheading {
    font-size: 0.975rem;
    color: var(--secondary-text);
    margin: 0;
}

/* 4-column grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Card � full-bleed image + overlay */
.service-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: 0 4px 24px rgba(100, 50, 65, 0.14);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.service-card:hover {
    box-shadow: 0 12px 40px rgba(100, 50, 65, 0.28);
    transform: translateY(-4px);
}

.service-card-inner {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

/* Image fills the whole card */
.service-card-img-wrap {
    position: absolute;
    inset: 0;
}

.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.service-card:hover .service-card-img {
    transform: scale(1.07);
}

/* Gradient overlay � always partially visible, more on hover */
.service-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(60, 20, 35, 0.88) 0%,
        rgba(60, 20, 35, 0.45) 45%,
        rgba(60, 20, 35, 0.08) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 24px;
    transition: background 0.35s ease;
}

.service-card:hover .service-card-overlay {
    background: linear-gradient(
        to top,
        rgba(60, 20, 35, 0.95) 0%,
        rgba(60, 20, 35, 0.6) 55%,
        rgba(60, 20, 35, 0.1) 100%
    );
}

.service-card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.35rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
}

.service-card-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
    margin: 0 0 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease;
}

.service-card:hover .service-card-desc {
    max-height: 120px;
    opacity: 1;
    margin-bottom: 16px;
}

.service-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mauve-200);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.service-card:hover .service-card-cta {
    opacity: 1;
    transform: translateY(0);
}

/* --- Services Listing Page � Horizontal Stack Cards -------- */
.svc-listing-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.svc-listing-card {
    display: flex;
    min-height: 460px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(94, 53, 66, 0.1);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.svc-listing-card:hover {
    box-shadow: 0 24px 72px rgba(94, 53, 66, 0.18);
    transform: translateY(-3px);
}

.svc-listing-card--reverse {
    flex-direction: row-reverse;
}

/* -- Image column � flush, no radius, fills full card height -- */
.svc-listing-img-col {
    flex: 0 0 40%;
    display: block;
    overflow: hidden;
    line-height: 0;
    position: relative;
}

.svc-listing-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s ease;
}

.svc-listing-card:hover .svc-listing-img {
    transform: scale(1.07);
}

/* -- Text panel � warm blush gradient with ghost letter -- */
.svc-listing-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 52px 56px;
    background: linear-gradient(145deg, #fdf5f8 0%, #f5eaef 100%);
    position: relative;
    overflow: hidden;
}

/* Giant watermark letter in the background */
.svc-listing-body::before {
    content: attr(data-letter);
    position: absolute;
    right: -0.06em;
    top: -0.18em;
    font-family: 'DM Serif Display', serif;
    font-size: 22rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(168, 131, 143, 0.12);
    pointer-events: none;
    user-select: none;
    transition: -webkit-text-stroke-color 0.4s ease;
}

.svc-listing-card--reverse .svc-listing-body::before {
    right: auto;
    left: -0.06em;
}

.svc-listing-card:hover .svc-listing-body::before {
    -webkit-text-stroke-color: rgba(168, 131, 143, 0.2);
}

/* Title */
.svc-listing-title {
    margin: 0;
    position: relative;
    z-index: 1;
}

.svc-listing-title a {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.8rem, 2.5vw, 2.45rem);
    font-weight: 400;
    color: var(--primary-text);
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.22s ease;
}

.svc-listing-title a:hover {
    color: var(--mauve-500);
}

/* Short mauve rule that grows on hover */
.svc-listing-title::after {
    content: '';
    display: block;
    height: 2px;
    width: 40px;
    background: linear-gradient(to right, var(--mauve-400), var(--mauve-200));
    border-radius: 2px;
    margin-top: 16px;
    transition: width 0.4s ease;
}

.svc-listing-card:hover .svc-listing-title::after {
    width: 80px;
}

/* Desc */
.svc-listing-desc {
    font-size: 0.95rem;
    color: var(--secondary-text);
    line-height: 1.85;
    margin: 0;
    max-width: 460px;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Features � 2-column grid */
.svc-listing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 28px;
    position: relative;
    z-index: 1;
}

.svc-listing-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.845rem;
    font-weight: 500;
    color: var(--primary-text);
}

.svc-listing-feature svg {
    flex-shrink: 0;
    color: var(--mauve-400);
}

/* Ghost/outline CTA */
.svc-listing-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
    border-radius: 50px;
    border: 2px solid var(--mauve-400);
    background: transparent;
    color: var(--mauve-500);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    width: fit-content;
    margin-top: 6px;
    position: relative;
    z-index: 1;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.svc-listing-cta:hover {
    background: var(--mauve-500);
    color: #fff;
    border-color: var(--mauve-500);
    box-shadow: 0 8px 28px rgba(143, 107, 122, 0.35);
    transform: none;
}

.svc-listing-cta svg {
    transition: transform 0.22s ease;
}

.svc-listing-cta:hover svg {
    transform: translateX(4px);
}

@media (max-width: 960px) {
    .svc-listing-card,
    .svc-listing-card--reverse {
        flex-direction: column;
        min-height: unset;
    }
    .svc-listing-img-col {
        flex: 0 0 auto;
        aspect-ratio: 16 / 8;
    }
    .svc-listing-body {
        padding: 36px 32px 40px;
    }
    .svc-listing-body::before {
        font-size: 14rem;
    }
    .svc-listing-card--reverse .svc-listing-body::before {
        right: auto;
        left: -0.06em;
    }
}

@media (max-width: 560px) {
    .svc-listing-body {
        padding: 28px 24px 32px;
    }
    .svc-listing-features {
        grid-template-columns: 1fr;
    }
    .svc-listing-body::before {
        font-size: 9rem;
    }
}

/* --- Single Service Page Template ------------------------- */

/* Hero header � full-viewport, featured-image background */
.svc-page-hero {
    position: relative;
    isolation: isolate;
    background-color: #faeae6;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: auto;
    display: flex;
    align-items: center;
    padding: 0;
    margin-top: 0;
    text-align: center;
}

.svc-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 165, 184, 0.28) 0%, transparent 65%),
        radial-gradient(ellipse at 10% 80%, rgba(212, 165, 184, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 80%, rgba(212, 165, 184, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(254, 245, 242, 0.82) 0%, rgba(250, 234, 230, 0.90) 100%);
    pointer-events: none;
}

.svc-page-hero>* {
    position: relative;
    z-index: 1;
}

.svc-page-hero>.container {
    width: 100%;
}

/* Admin bar offset */
.admin-bar .svc-page-hero {
    margin-top: -32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .svc-page-hero {
        margin-top: -46px;
    }
}

/* Breadcrumb � pinned just below the fixed header inside hero */
.svc-page-hero .svc-breadcrumb {
    position: absolute;
    top: 96px;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
}

.admin-bar .svc-page-hero .svc-breadcrumb {
    top: 130px;
}

@media screen and (max-width: 782px) {
    .admin-bar .svc-page-hero .svc-breadcrumb {
        top: 144px;
    }
}

/* Breadcrumb */
.svc-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--secondary-text);
    margin-bottom: 20px;
}

.svc-breadcrumb a {
    color: var(--secondary-text);
    text-decoration: none;
    transition: color 0.2s;
}

.svc-breadcrumb a:hover {
    color: var(--mauve-400);
}

.svc-breadcrumb-sep {
    opacity: 0.5;
}

.svc-breadcrumb-current {
    color: var(--primary-text);
    font-weight: 500;
}

/* Hero inner � centred column */
.svc-page-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Page title */
.svc-page-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--primary-text);
    margin: 0 0 4px;
    line-height: 1.12;
}

/* Subtitle */
.svc-page-subtitle {
    font-size: 1.05rem;
    color: var(--secondary-text);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Children grid section */
.svc-children-section {
    background-color: #fdf6f3;
    padding: 16px 0 96px;
}

/* 3-column grid, collapses on smaller screens */
.svc-children-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 1024px) {
    .svc-children-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .svc-children-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual card */
.svc-child-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(212, 165, 184, 0.2);
    padding: 12px 12px 0;
    /* inset image from card edges */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.svc-child-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(168, 131, 143, 0.18);
    border-color: rgba(212, 165, 184, 0.55);
}

/* Card image � inset with its own rounded corners */
.svc-child-card-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: #f3e8ee;
    flex-shrink: 0;
}

.svc-child-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

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

/* Card body */
.svc-child-card-body {
    padding: 24px 16px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Thin mauve accent rule between image and body */
.svc-child-card-body::before {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: var(--mauve-300);
    border-radius: 2px;
    margin-bottom: 16px;
    transition: width 0.3s ease;
}

.svc-child-card:hover .svc-child-card-body::before {
    width: 56px;
}

.svc-child-card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--primary-text);
    margin: 0 0 12px;
    line-height: 1.3;
}

.svc-child-card-desc {
    font-size: 0.875rem;
    color: var(--secondary-text);
    line-height: 1.75;
    margin: 0 0 22px;
    flex: 1;
}

/* "Book Now" pill button */
.svc-child-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mauve-500);
    text-decoration: none;
    background: #fdf0f3;
    border: 1px solid rgba(168, 131, 143, 0.25);
    padding: 8px 18px;
    border-radius: 50px;
    transition: background 0.22s ease, color 0.22s ease,
        border-color 0.22s ease, gap 0.22s ease;
}

.svc-child-card-link:hover {
    background: var(--mauve-400);
    color: #fff;
    border-color: var(--mauve-400);
    gap: 10px;
}

/* --- Single Service: CTA Band ----------------------------- */
.svc-cta-section {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(168, 131, 143, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(168, 131, 143, 0.35) 0%, transparent 60%),
        linear-gradient(135deg, #c4909e 0%, #b07a88 40%, #c49098 100%);
    padding: 100px 24px;
    text-align: center;
}

.svc-cta-inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.svc-cta-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 2.8rem;
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.svc-cta-sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.7;
    margin: 0;
}

.svc-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 16px 40px;
    border-radius: 50px;
    background: #fff;
    color: var(--mauve-500);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, gap 0.25s ease;
}

.svc-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    gap: 12px;
}

/* --- Default Page Template (page.php) ---------------------- */

.page-content-section {
    padding: 80px 0 100px;
    background: #fff;
}

.page-content-wrap {
    max-width: 800px;
    margin: 0 auto;
}

/* Prose typography � headings, paragraphs, lists, etc. */
.page-prose h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 2.2rem 0 0.85rem;
}

.page-prose h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.25;
    margin: 1.8rem 0 0.75rem;
}

.page-prose h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 1.5rem 0 0.6rem;
}

.page-prose p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--secondary-text);
    margin: 0 0 1.25rem;
}

.page-prose ul,
.page-prose ol {
    padding-left: 1.5rem;
    margin: 0 0 1.25rem;
    color: var(--secondary-text);
    line-height: 1.85;
}

.page-prose ul li {
    list-style: disc;
    margin-bottom: 0.4rem;
}

.page-prose ol li {
    list-style: decimal;
    margin-bottom: 0.4rem;
}

.page-prose a {
    color: var(--mauve-400);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.page-prose a:hover {
    color: var(--mauve-500);
}

.page-prose blockquote {
    border-left: 3px solid var(--mauve-400);
    padding: 12px 0 12px 24px;
    margin: 1.8rem 0;
    font-style: italic;
    color: var(--secondary-text);
    font-size: 1.05rem;
    line-height: 1.75;
}

.page-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    margin: 1.8rem 0;
}

.page-prose hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    margin: 2.4rem 0;
}

/* Page navigation (paginated content) */
.page-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--secondary-text);
}

/* Compact hero � ~1/3 viewport height (used on Contact Us, etc.) */
.trt-hero-section.trt-hero-section--compact {
    min-height: auto !important;
    align-items: flex-start;
    padding-bottom: 52px;
}

.trt-hero-section.trt-hero-section--compact .trt-hero-inner {
    padding-top: 40px;
}

.trt-hero-section.trt-hero-section--compact .trt-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
}

.trt-hero-section.trt-hero-section--compact .trt-hero-actions {
    display: none;
}

@media (max-width: 767px) {
    .trt-hero-section.trt-hero-section--compact {
        min-height: 36vh !important;
        padding-bottom: 36px;
    }
}

/* --- Contact Us Template (.ctc-) -------------------------- */

.ctc-section {
    padding: 72px 0 100px;
    background: #fff;
}

.ctc-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: stretch;
}

/* - Info items - */
.ctc-info-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 28px;
}

.ctc-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ctc-info-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f9f0f4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mauve-500);
}

.ctc-info-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}

.ctc-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary-text);
}

.ctc-info-value {
    font-size: 0.95rem;
    color: var(--secondary-text);
    line-height: 1.55;
}

.ctc-info-link {
    color: var(--mauve-500);
    text-decoration: none;
    transition: color 0.2s;
}

.ctc-info-link:hover {
    color: var(--mauve-400);
}

/* - Social - */
.ctc-social {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
}

.ctc-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f9f0f4;
    color: var(--mauve-500);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.ctc-social-link:hover {
    background: var(--mauve-500);
    color: #fff;
}

/* - Divider - */
.ctc-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0 0 36px;
}

/* - Form block - */
.ctc-form-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0 0 8px;
}

.ctc-form-sub {
    font-size: 0.95rem;
    color: var(--secondary-text);
    margin: 0 0 28px;
    line-height: 1.6;
}

/* - Formly form inside contact template - */
.ctc-form-block .formly-field-wrap {
    margin-bottom: 20px;
}

.ctc-form-block .formly-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 6px;
}

.ctc-form-block .formly-required {
    color: var(--mauve-500);
    margin-left: 2px;
}

.ctc-form-block .formly-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--primary-text);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.ctc-form-block .formly-input:focus {
    border-color: var(--mauve-400);
    box-shadow: 0 0 0 3px rgba(168, 131, 143, 0.12);
}

.ctc-form-block textarea.formly-input {
    resize: vertical;
    min-height: 120px;
}

.ctc-form-block .formly-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 36px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 50px;
    background: var(--mauve-500);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 8px;
}

.ctc-form-block .formly-submit:hover {
    background: var(--mauve-400);
    transform: translateY(-1px);
}

.ctc-form-block .formly-response {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ctc-form-block .formly-response.formly-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.ctc-form-block .formly-response.formly-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* - Formly form inside maintenance modal - */
.maint-modal-body .formly-field-wrap {
    margin-bottom: 20px;
}

.maint-modal-body .formly-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d2d2d;
    margin-bottom: 6px;
}

.maint-modal-body .formly-required {
    color: #8f6b7a;
    margin-left: 2px;
}

.maint-modal-body .formly-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: 0.95rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: #2d2d2d;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.maint-modal-body .formly-input:focus {
    border-color: #a8838f;
    box-shadow: 0 0 0 3px rgba(168, 131, 143, 0.12);
}

.maint-modal-body textarea.formly-input {
    resize: vertical;
    min-height: 120px;
}

.maint-modal-body .formly-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 36px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
    border: none;
    border-radius: 50px;
    background: #8f6b7a;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 8px;
}

.maint-modal-body .formly-submit:hover {
    background: #7a5a69;
    transform: translateY(-1px);
}

.maint-modal-body .formly-response {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.maint-modal-body .formly-response.formly-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.maint-modal-body .formly-response.formly-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* - Map - */
.ctc-right {
    display: flex;
    flex-direction: column;
}

.ctc-map-wrap {
    flex: 1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    min-height: 500px;
}

.ctc-map-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: 0;
}

/* - Responsive - */
@media (max-width: 960px) {
    .ctc-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .ctc-right {
        order: -1;
    }

    .ctc-map-wrap {
        position: static;
    }

    .ctc-map-frame {
        height: 320px;
    }
}

@media (max-width: 600px) {
    .ctc-section {
        padding: 48px 0 64px;
    }

    .ctc-container {
        padding: 0 20px;
    }

    .ctc-form-heading {
        font-size: 1.4rem;
    }
}

/* --- Maintenance Mode Page -------------------------------- */

.maint-body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, sans-serif;
    background: #fdf6f3;
}

.maint-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 48px 24px;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(212, 165, 184, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 30%, rgba(212, 165, 184, 0.16) 0%, transparent 55%),
        #fdf6f3;
}

.maint-inner {
    position: relative;
    z-index: 1;
    max-width: 560px;
    width: 100%;
    text-align: center;
}

.maint-logo {
    margin-bottom: 32px;
}

.maint-logo img {
    display: inline-block;
}

.maint-inner .trt-eyebrow-badge {
    margin-bottom: 24px;
}

.maint-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 400;
    color: #2d2d2d;
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}

.maint-message {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.8;
    margin: 0 auto 36px;
    max-width: 440px;
}

.maint-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #a8838f, #d4a5b8);
    border-radius: 2px;
    margin: 0 auto 20px;
}

.maint-brand {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a8838f;
    margin: 0;
}

.maint-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.55;
    filter: blur(60px);
}

.maint-blob--tl {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(212, 165, 184, 0.45), transparent 70%);
    top: -120px;
    left: -120px;
}

.maint-blob--br {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(212, 165, 184, 0.35), transparent 70%);
    bottom: -100px;
    right: -100px;
}

/* Contact row */
.maint-contact-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin-bottom: 32px;
}

.maint-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #2d2d2d;
    text-decoration: none;
    transition: color 0.2s;
}

.maint-contact-item:hover {
    color: #8f6b7a;
}

.maint-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(143, 107, 122, 0.1);
    color: #8f6b7a;
    flex-shrink: 0;
    transition: background 0.2s;
}

.maint-contact-item:hover .maint-contact-icon {
    background: rgba(143, 107, 122, 0.18);
}

/* CTA button */
.maint-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #8f6b7a;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 28px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-bottom: 36px;
}

.maint-cta-btn:hover {
    background: #7a5a69;
    transform: translateY(-1px);
}

.maint-cta-btn:active {
    transform: translateY(0);
}

/* Modal */
.maint-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.maint-modal[hidden] {
    display: none;
}

.maint-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(45, 45, 45, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.maint-modal-box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(45, 45, 45, 0.18);
    animation: maint-modal-in 0.25s ease;
}

@keyframes maint-modal-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.maint-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 0;
}

.maint-modal-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #2d2d2d;
    margin: 0;
}

.maint-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.maint-modal-close:hover {
    background: rgba(143, 107, 122, 0.12);
    color: #8f6b7a;
}

.maint-modal-body {
    padding: 20px 24px 28px;
}

/* Scrollbar in modal */
.maint-modal-box::-webkit-scrollbar {
    width: 4px;
}

.maint-modal-box::-webkit-scrollbar-track {
    background: transparent;
}

.maint-modal-box::-webkit-scrollbar-thumb {
    background: rgba(143, 107, 122, 0.3);
    border-radius: 4px;
}

@media (max-width: 480px) {
    .maint-contact-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .maint-modal-box {
        border-radius: 12px;
    }

    .maint-modal-body {
        padding: 16px 16px 24px;
    }

    .maint-modal-header {
        padding: 18px 16px 0;
    }
}

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

.e404-section {
    min-height: calc(100vh - 90px);
    background: #fdf6f3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}

.e404-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(212, 165, 184, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(212, 165, 184, 0.14) 0%, transparent 55%);
    pointer-events: none;
}

.e404-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.e404-number {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(7rem, 20vw, 14rem);
    font-weight: 400;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(143, 107, 122, 0.18);
    letter-spacing: -0.02em;
    margin-bottom: -24px;
    user-select: none;
    pointer-events: none;
}

.e404-container .trt-eyebrow-badge {
    margin-bottom: 20px;
}

.e404-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0 0 20px;
}

.e404-sub {
    font-size: 1rem;
    color: var(--secondary-text);
    line-height: 1.75;
    margin: 0 0 40px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.e404-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.e404-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 13px 32px;
    background: var(--mauve-500);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.e404-btn-primary:hover {
    background: var(--mauve-400);
    transform: translateY(-1px);
    color: #fff;
}

.e404-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 12px 32px;
    border: 1.5px solid rgba(143, 107, 122, 0.4);
    color: var(--mauve-500);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.e404-btn-outline:hover {
    background: rgba(143, 107, 122, 0.06);
    border-color: var(--mauve-500);
    transform: translateY(-1px);
}

.e404-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.875rem;
}

.e404-links-label {
    color: var(--secondary-text);
}

.e404-links a {
    color: var(--mauve-500);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.e404-links a:hover {
    color: var(--mauve-400);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Blog Listing Page Template --------------------------- */

.blog-listing-section {
    background: #fdf6f3;
    padding: 72px 0 96px;
}

/* Category filter tabs */
.blog-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 52px;
}

.blog-filter-tab {
    display: inline-block;
    padding: 7px 20px;
    border-radius: 50px;
    border: 1.5px solid rgba(168, 131, 143, 0.35);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--secondary-text);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.blog-filter-tab:hover,
.blog-filter-tab.is-active {
    background: var(--mauve-500);
    border-color: var(--mauve-500);
    color: #fff;
}

/* 3-column grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 56px;
}

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

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* Blog card */
.blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 18px rgba(94, 53, 66, 0.07);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    position: relative;
}

/* Left accent bar � slides down on hover */
.blog-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--mauve-400), var(--mauve-300));
    border-radius: 20px 0 0 20px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s ease;
    z-index: 1;
}

.blog-card:hover::before {
    transform: scaleY(1);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 52px rgba(94, 53, 66, 0.15);
}

/* Image */
.blog-card-img-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    position: relative;
    line-height: 0;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

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

/* Frosted date badge overlaid on image */
.blog-card-date-badge {
    position: absolute;
    bottom: 12px;
    left: 14px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--mauve-500);
    pointer-events: none;
    line-height: 1;
}

/* Body */
.blog-card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}

.blog-card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
}

.blog-card-title a {
    color: var(--primary-text);
    text-decoration: none;
    transition: color 0.22s;
}

.blog-card-title a:hover {
    color: var(--mauve-500);
}

.blog-card-excerpt {
    font-size: 0.875rem;
    color: var(--secondary-text);
    line-height: 1.7;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mauve-500);
    text-decoration: none;
    margin-top: auto;
    padding-top: 2px;
    transition: gap 0.22s ease, color 0.22s ease;
}

.blog-card-link svg {
    transition: transform 0.22s ease;
}

.blog-card-link:hover {
    gap: 10px;
    color: var(--mauve-400);
}

.blog-card-link:hover svg {
    transform: translateX(3px);
}

/* Pagination */
.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding-top: 16px;
}

.blog-page-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 50px;
    border: 1.5px solid rgba(168, 131, 143, 0.35);
    background: #fff;
    color: var(--secondary-text);
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.blog-page-btn:hover,
.blog-page-btn.is-active {
    background: var(--mauve-500);
    border-color: var(--mauve-500);
    color: #fff;
}

/* Empty state */
.blog-empty {
    text-align: center;
    padding: 60px 0;
    color: var(--secondary-text);
    font-size: 1rem;
}

/* --- Blog Article (Single) Page Template ------------------- */

/* Hero � compact height for article pages */
.trt-hero-section.bsa-hero {
    min-height: 68vh;
    align-items: flex-end;
    padding-bottom: 64px;
}

.bsa-hero-inner {
    align-items: flex-start;
    text-align: left;
    max-width: 860px;
}

.bsa-hero-title {
    font-size: clamp(1.8rem, 3.8vw, 3rem) !important;
}

/* Date + read-time badge row */
.bsa-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.bsa-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mauve-500);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(168, 131, 143, 0.25);
    border-radius: 50px;
    padding: 5px 14px;
    backdrop-filter: blur(4px);
}

.bsa-meta-sep {
    color: rgba(168, 131, 143, 0.5);
    font-size: 1rem;
    line-height: 1;
}

/* -- Body section -- */
.bsa-body-section {
    background: #fff;
    padding: 72px 0 96px;
}

/* 8 / 4 column grid */
.bsa-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
    align-items: start;
}

/* -- Article (8 col) -- */
.bsa-article {
    min-width: 0;
}

.bsa-content {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--primary-text);
}

.bsa-content h2 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.45rem, 2.5vw, 1.9rem);
    font-weight: 400;
    color: var(--primary-text);
    margin: 2.4em 0 0.6em;
    line-height: 1.25;
}

.bsa-content h3 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 400;
    color: var(--primary-text);
    margin: 2em 0 0.5em;
    line-height: 1.3;
}

.bsa-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text);
    margin: 1.8em 0 0.4em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bsa-content p {
    margin: 0 0 1.4em;
}

.bsa-content ul,
.bsa-content ol {
    margin: 0 0 1.4em 1.5em;
}

.bsa-content li {
    margin-bottom: 0.45em;
}

.bsa-content a {
    color: var(--mauve-500);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bsa-content a:hover {
    color: var(--mauve-400);
}

.bsa-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5em 0;
}

.bsa-content blockquote {
    border-left: 3px solid var(--mauve-400);
    margin: 2em 0;
    padding: 16px 28px;
    background: #fdf6f4;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: var(--secondary-text);
}

.bsa-content blockquote p {
    margin: 0;
}

.bsa-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.93rem;
}

.bsa-content th,
.bsa-content td {
    border: 1px solid rgba(168, 131, 143, 0.2);
    padding: 10px 14px;
    text-align: left;
}

.bsa-content th {
    background: #fdf0ed;
    font-weight: 600;
}

/* Article footer */
.bsa-article-footer {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(168, 131, 143, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.bsa-updated {
    font-size: 0.82rem;
    color: var(--secondary-text);
    margin: 0;
}

.bsa-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mauve-500);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.bsa-back-link:hover {
    gap: 11px;
}

/* -- Sidebar (4 col) -- */
.bsa-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Recent articles widget */
.bsa-recent-widget {
    background: #fdf6f4;
    border: 1px solid rgba(168, 131, 143, 0.15);
    border-radius: 16px;
    padding: 28px 24px;
}

.bsa-widget-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--primary-text);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(168, 131, 143, 0.18);
}

.bsa-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bsa-recent-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.bsa-recent-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

.bsa-recent-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bsa-recent-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bsa-recent-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-text);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bsa-recent-title:hover {
    color: var(--mauve-500);
}

.bsa-recent-date {
    font-size: 0.78rem;
    color: var(--secondary-text);
}

/* Sidebar CTA card */
.bsa-sidebar-cta {
    background: linear-gradient(135deg, #faeae6 0%, #f3e8ee 100%);
    border: 1px solid rgba(168, 131, 143, 0.2);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.bsa-sidebar-cta-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0;
}

.bsa-cta-btn {
    padding: 12px 24px;
    font-size: 0.88rem;
    width: 100%;
    justify-content: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .bsa-layout {
        grid-template-columns: 1fr 320px;
        gap: 40px;
    }
}

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

    .bsa-sidebar {
        position: static;
    }

    .trt-hero-section.bsa-hero {
        min-height: 60vh;
        padding-bottom: 48px;
    }

    .bsa-hero-inner {
        align-items: center;
        text-align: center;
    }

    .bsa-hero-meta {
        justify-content: center;
    }
}

/* --- Blog Article � Custom HTML (BSC) Page Template ------- */

/* -- Body section -- */
.bsc-body-section {
    background: #fff;
    padding: 72px 0 96px;
}

.bsc-content-wrap {
    max-width: 860px;
    margin: 0 auto;
}

.bsc-article {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--primary-text);
}

/* Placeholder when no content entered */
.bsc-empty-notice {
    text-align: center;
    padding: 80px 24px;
    color: var(--secondary-text);
    font-size: 1rem;
    font-style: italic;
}

/* Back-to-blog bar */
.bsc-back-bar {
    background: #fdf6f4;
    border-top: 1px solid rgba(168, 131, 143, 0.15);
    padding: 20px 0;
}

.bsc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mauve-500);
    text-decoration: none;
    transition: gap 0.2s;
}

.bsc-back-link:hover {
    gap: 10px;
}

/* -- Recent Articles section -- */
.bsc-recent-section {
    background: #fdf6f4;
    padding: 72px 0 80px;
    border-top: 1px solid rgba(168, 131, 143, 0.15);
}

.bsc-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 12px;
}

.bsc-recent-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--primary-text);
    margin: 0;
}

.bsc-recent-all {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mauve-500);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}

.bsc-recent-all:hover {
    gap: 10px;
}

.bsc-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.bsc-recent-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(168, 131, 143, 0.15);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
}

.bsc-recent-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(168, 131, 143, 0.18);
}

.bsc-recent-card-img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.bsc-recent-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.bsc-recent-card:hover .bsc-recent-card-thumb {
    transform: scale(1.04);
}

.bsc-recent-card-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.bsc-recent-card-date {
    font-size: 0.75rem;
    color: var(--secondary-text);
}

.bsc-recent-card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.35;
    margin: 0;
}

.bsc-recent-card-excerpt {
    font-size: 0.85rem;
    color: var(--secondary-text);
    line-height: 1.65;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bsc-recent-card-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mauve-500);
    margin-top: 4px;
}

@media (max-width: 1024px) {
    .bsc-recent-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* --- Treatment Detail Page Template ----------------------- */

/* Hero section � soft blush radial gradient */
.trt-hero-section {
    /* Fallback solid gradient (no featured image) */
    background-color: #faeae6;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Pull flush to viewport top � same technique as the home page hero */
    padding: 200px 0 80px;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    /* Negate any margin-top WordPress adds to the page wrapper */
    margin-top: 0;
    position: relative;
    isolation: isolate;
}

/* When admin bar is visible WP adds margin-top:32px to <html>.
   Counter it so the hero still starts at the physical top of the viewport. */
.admin-bar .trt-hero-section {
    margin-top: -32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .trt-hero-section {
        margin-top: -46px;
    }
}

/* Gradient colour overlay � sits on top of the featured image */
.trt-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 165, 184, 0.28) 0%, transparent 65%),
        radial-gradient(ellipse at 10% 80%, rgba(212, 165, 184, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 80%, rgba(212, 165, 184, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(254, 245, 242, 0.82) 0%, rgba(250, 234, 230, 0.90) 100%);
    pointer-events: none;
}

/* Keep all children above the overlay */
.trt-hero-section>* {
    position: relative;
    z-index: 1;
}

/* Breadcrumb � pinned just below the fixed header */
.trt-hero-section .svc-breadcrumb {
    position: absolute;
    top: 112px;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
}

.admin-bar .trt-hero-section .svc-breadcrumb {
    top: 146px;
}

@media screen and (max-width: 782px) {
    .admin-bar .trt-hero-section .svc-breadcrumb {
        top: 160px;
    }
}

/* Centred content column */
.trt-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

/* Eyebrow badge pill */
.trt-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 22px;
    border-radius: 50px;
    border: 1.5px solid rgba(168, 131, 143, 0.4);
    background: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mauve-500);
    backdrop-filter: blur(4px);
}

/* Main title */
.trt-hero-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.15;
    margin: 0;
}

/* Subtitle */
.trt-hero-subtitle {
    font-size: 1rem;
    color: var(--secondary-text);
    line-height: 1.75;
    max-width: 680px;
    margin: 0;
}

/* Feature check-pills row */
.trt-feature-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.trt-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 22px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(168, 131, 143, 0.2);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.trt-feature-pill::before {
    content: "\2713";
    color: var(--mauve-500);
    font-weight: 700;
    font-size: 0.9rem;
}

/* CTA buttons row */
.trt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}

/* Filled mauve pill */
.trt-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    border-radius: 50px;
    background: var(--mauve-400);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease,
        box-shadow 0.25s ease, gap 0.25s ease;
}

.trt-btn-primary:hover {
    background: var(--mauve-500);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 131, 143, 0.35);
    gap: 12px;
}

/* White outline pill */
.trt-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.8);
    border: 1.5px solid rgba(168, 131, 143, 0.35);
    color: var(--mauve-500);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: border-color 0.25s ease, background 0.25s ease,
        transform 0.25s ease, gap 0.25s ease;
}

.trt-btn-outline:hover {
    border-color: var(--mauve-400);
    background: #fff;
    transform: translateY(-2px);
    gap: 12px;
}

@media (max-width: 640px) {
    .trt-hero-section {
        padding: 110px 0 80px;
        min-height: auto;
    }

    .trt-hero-title {
        font-size: 2rem;
    }

    .trt-btn-primary,
    .trt-btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* --- Treatment: Overview / "What is" section -------------- */
.trt-overview-section {
    background: #fff;
    padding: 60px 0;
}

.trt-overview-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Eyebrow � mauve uppercase small text */
.trt-section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mauve-400);
}

.trt-overview-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0;
}

.trt-overview-sub {
    font-size: 0.975rem;
    color: var(--secondary-text);
    line-height: 1.75;
    margin: 0;
}

/* 2-column grid */
.trt-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 680px) {
    .trt-overview-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual card */
.trt-overview-card {
    background: #fafafa;
    border: 1px solid rgba(168, 131, 143, 0.1);
    border-radius: 20px;
    padding: 36px 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.trt-overview-card:hover {
    box-shadow: 0 12px 36px rgba(168, 131, 143, 0.12);
    transform: translateY(-3px);
    border-color: rgba(168, 131, 143, 0.28);
}

/* SVG icon in overview cards */
.trt-card-icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(168, 131, 143, 0.1);
    border-radius: 12px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.trt-card-icon {
    display: block;
    width: 26px;
    height: 26px;
    color: var(--mauve-500);
}

.trt-overview-card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--primary-text);
    margin: 0 0 10px;
}

.trt-overview-card-desc {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.8;
    margin: 0;
}

/* --- Treatment: Benefits section (split-sticky redesign) - */
.trt-benefits-section {
    background: #fff;
    padding: 60px 0;
    border-top: 1px solid #f0eaed;
}

/* Two-column split: sticky left heading + scrollable right list */
.trt-benefits-inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 80px;
    align-items: start;
}

/* -- Left: sticky heading -- */
.trt-benefits-left {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.trt-benefits-left .trt-section-eyebrow {
    margin-bottom: 18px;
}

.trt-benefits-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0 0 20px;
}

.trt-benefits-tagline {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.75;
    margin: 0 0 28px;
}

/* Short mauve accent bar */
.trt-benefits-accent {
    width: 40px;
    height: 3px;
    background: var(--mauve-400);
    border-radius: 2px;
    margin-bottom: 28px;
}

/* Ghost CTA button */
.trt-benefits-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mauve-500);
    text-decoration: none;
    border: 1.5px solid var(--mauve-400);
    border-radius: 50px;
    padding: 10px 22px;
    transition: background 0.22s ease, color 0.22s ease;
}

.trt-benefits-cta:hover {
    background: var(--mauve-400);
    color: #fff;
}

/* -- Right: benefit rows -- */
.trt-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0 0 80px;
}

/* Each row: large decorative number + divider + content */
.trt-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 36px 0;
    border-bottom: 1px solid #f0eaed;
    transition: background 0.2s;
}

.trt-benefit-item:first-child {
    border-top: 1px solid #f0eaed;
}

/* Large decorative serif number */
.trt-benefit-num {
    font-family: 'DM Serif Display', serif;
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1;
    color: var(--mauve-400);
    opacity: 0.35;
    min-width: 58px;
    padding-top: 2px;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.trt-benefit-item:hover .trt-benefit-num {
    opacity: 0.75;
}

.trt-benefit-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.trt-benefit-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0;
    line-height: 1.4;
}

.trt-benefit-desc {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.8;
    margin: 0;
}

/* Responsive: stack columns */
@media (max-width: 820px) {
    .trt-benefits-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .trt-benefits-left {
        position: static;
    }
}

/* --- Section 4: How It Works ---------------------- */
/* Dark cinematic full-bleed panel */
.trt-how-section {
    background: #231920;
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

/* Subtle grain overlay via SVG data-URI */
.trt-how-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.45;
    pointer-events: none;
}

.trt-how-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.trt-how-header {
    position: sticky;
    top: 120px;
}

.trt-how-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c4929f;
    margin-bottom: 18px;
}

.trt-how-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    color: #f5ede9;
    line-height: 1.2;
    margin: 0;
}

.trt-how-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.trt-how-body p {
    font-size: 0.975rem;
    color: rgba(245, 237, 233, 0.75);
    line-height: 1.85;
    margin: 0;
}

@media (max-width: 820px) {
    .trt-how-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .trt-how-header {
        position: static;
    }
}

/* --- Section 5: Ideal Candidate ----------------- */
.trt-candidate-section {
    background: #fff;
    padding: 60px 0;
    border-top: 1px solid #f0eaed;
}

.trt-candidate-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.trt-candidate-left {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trt-candidate-left .trt-section-eyebrow {
    margin-bottom: 2px;
}

.trt-candidate-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.25;
    margin: 0;
}

.trt-candidate-intro {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.75;
    margin: 0;
}

/* Checklist */
.trt-candidate-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.trt-candidate-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid #f3edf0;
    font-size: 0.925rem;
    color: var(--primary-text);
    line-height: 1.5;
    transition: color 0.2s;
}

.trt-candidate-item:first-child {
    border-top: 1px solid #f3edf0;
}

.trt-candidate-item:hover {
    color: var(--mauve-500);
}

/* SVG checkmark icon */
.trt-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mauve-400);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.trt-check::after {
    content: '';
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
    display: block;
}

@media (max-width: 820px) {
    .trt-candidate-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .trt-candidate-left {
        position: static;
    }
}

/* --- Section 6: What to Expect ------------------ */
.trt-expect-section {
    background: #fdf7f5;
    padding: 60px 0;
}

.trt-expect-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 52px;
}

.trt-expect-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0;
}

/* Three phase cards */
.trt-expect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 64px;
}

.trt-expect-card {
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px 40px;
    border: 1px solid rgba(168, 131, 143, 0.12);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.trt-expect-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mauve-400), transparent);
    border-radius: 18px 18px 0 0;
}

.trt-expect-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(168, 131, 143, 0.13);
}

.trt-expect-phase {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mauve-400);
}

.trt-expect-text {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 860px) {
    .trt-expect-grid {
        grid-template-columns: 1fr;
    }
}

/* Protocol sub-section */
.trt-protocol-wrap {
    border-top: 1px solid #ede6e9;
    padding-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trt-protocol-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    color: var(--primary-text);
    margin: 0;
}

.trt-protocol-intro {
    font-size: 0.9rem;
    color: var(--secondary-text);
    margin: 0;
}

.trt-protocol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 4px 0;
}

.trt-protocol-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(168, 131, 143, 0.15);
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trt-protocol-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mauve-400);
}

.trt-protocol-value {
    font-family: 'DM Serif Display', serif;
    font-size: 1.55rem;
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
}

.trt-protocol-freq {
    font-size: 0.82rem;
    color: var(--secondary-text);
}

.trt-protocol-note {
    font-size: 0.875rem;
    color: var(--secondary-text);
    line-height: 1.75;
    margin: 0;
    font-style: italic;
}

@media (max-width: 720px) {
    .trt-protocol-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Section 7: Why Choose Krity 360 --------- */
.trt-why-section {
    background: #2a1920;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.trt-why-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 131, 143, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.trt-why-inner {
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 1;
}

.trt-why-eyebrow {
    color: #c4929f;
    margin-bottom: 18px;
}

.trt-why-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.9rem, 3.5vw, 2.9rem);
    font-weight: 400;
    color: #f5ede9;
    line-height: 1.25;
    margin: 0 0 32px;
}

/* Decorative centre rule */
.trt-why-rule {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.trt-why-rule span {
    width: 48px;
    height: 2px;
    background: var(--mauve-400);
    border-radius: 2px;
    display: block;
    position: relative;
}

.trt-why-rule span::before,
.trt-why-rule span::after {
    content: '';
    position: absolute;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mauve-400);
    top: -2px;
}

.trt-why-rule span::before {
    left: -12px;
}

.trt-why-rule span::after {
    right: -12px;
}

.trt-why-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 40px;
}

.trt-why-body p {
    font-size: 0.975rem;
    color: rgba(245, 237, 233, 0.72);
    line-height: 1.85;
    margin: 0;
}

.trt-why-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5ede9;
    text-decoration: none;
    border: 1.5px solid rgba(196, 146, 159, 0.5);
    border-radius: 50px;
    padding: 12px 28px;
    transition: background 0.22s ease, border-color 0.22s ease;
}

.trt-why-cta:hover {
    background: rgba(168, 131, 143, 0.25);
    border-color: rgba(196, 146, 159, 0.9);
}

/* --- Concern-Based Treatment Spotlight ------------------- */
.cbt-spotlight-section {
    padding: 100px 0;
    background: linear-gradient(150deg, #fdf6f8 0%, #f5ecf0 100%);
    position: relative;
    overflow: hidden;
}

.cbt-spotlight-section::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -100px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 184, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.cbt-spotlight-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Image column */
.cbt-spotlight-img-col {
    position: relative;
}

.cbt-spotlight-img-col::before {
    content: '';
    position: absolute;
    inset: 20px -20px -20px 20px;
    background: linear-gradient(145deg, var(--mauve-300), var(--mauve-200));
    border-radius: 24px;
    z-index: 0;
    opacity: 0.55;
}

.cbt-spotlight-img-wrap {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(94, 53, 66, 0.18);
    line-height: 0;
}

.cbt-spotlight-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.cbt-spotlight-img-wrap:hover .cbt-spotlight-img {
    transform: scale(1.04);
}

/* Text column */
.cbt-spotlight-text-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cbt-spotlight-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0;
}

.cbt-spotlight-desc {
    font-size: 1rem;
    color: var(--secondary-text);
    line-height: 1.8;
    margin: 0;
    max-width: 480px;
}

.cbt-spotlight-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.cbt-spotlight-feature {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-text);
}

.cbt-spotlight-feature svg {
    flex-shrink: 0;
    color: var(--mauve-400);
}

.cbt-spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--mauve-500), var(--mauve-400));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    width: fit-content;
    margin-top: 6px;
    box-shadow: 0 6px 24px rgba(143, 107, 122, 0.35);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cbt-spotlight-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(143, 107, 122, 0.5);
}

.cbt-spotlight-cta svg {
    transition: transform 0.22s ease;
}

.cbt-spotlight-cta:hover svg {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .cbt-spotlight-inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .cbt-spotlight-img-col::before {
        display: none;
    }

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

@media (max-width: 560px) {
    .cbt-spotlight-section {
        padding: 64px 0;
    }

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

/* --- Stats Bar --------------------------------------------- */
.stats-bar-section {
    background-color: #f0e8e4;
    padding: 52px 0;
}

.stats-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

.stat-item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.stat-number {
    font-family: 'DM Serif Display', serif;
    font-size: 2.6rem;
    color: var(--mauve-400);
    line-height: 1;
    font-weight: 400;
}

.stat-number sup {
    font-size: 1.2rem;
    vertical-align: super;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--secondary-text);
    letter-spacing: 0.02em;
}

.stat-divider {
    width: 1px;
    height: 52px;
    background-color: #d4bfbb;
    flex-shrink: 0;
}

/* --- Testimonials Section -------------------------------- */
.testimonials-section {
    background: #fff;
    padding: 100px 0;
}

.testimonials-header {
    margin-bottom: 52px;
}

.testimonials-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--primary-text);
    margin: 10px 0 0;
    line-height: 1.2;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.testi-card {
    background: #faf7f8;
    border: 1px solid #ede6e9;
    border-radius: 20px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testi-card--accent {
    background: linear-gradient(135deg, #f5ecee 0%, #fdf4f7 100%);
    border-color: #e0cdd2;
}

.testi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(168, 131, 143, 0.13);
}

.testi-quote-icon {
    font-family: 'DM Serif Display', serif;
    font-size: 4rem;
    line-height: 0.5;
    color: var(--mauve-400);
    opacity: 0.35;
    margin-bottom: 4px;
}

.testi-text {
    font-size: 0.875rem;
    color: #4a4a4a;
    line-height: 1.75;
    margin: 0;
    flex: 1;
}

.testi-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #e8dde0;
}

.testi-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.testi-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0 0 4px;
}

.testi-stars {
    color: #e8a838;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* --- About Page: Mission / Quote Banner --------------------- */
/* --- Mission split banner ----------------------------------- */
.about-mission-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
}

/* Left � soft petal-mauve panel */
.about-mission-left {
    position: relative;
    background: linear-gradient(145deg, #f2e0e6 0%, #e8d0d9 50%, #edd8df 100%);
    padding: 72px 60px 72px 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    overflow: hidden;
}

/* Subtle circle blob for depth */
.about-mission-left::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 131, 143, 0.14) 0%, transparent 70%);
    top: -120px;
    right: -120px;
    pointer-events: none;
}

/* Giant decorative quotation mark */
.about-mission-deco-quote {
    position: absolute;
    top: -20px;
    left: 32px;
    font-family: 'DM Serif Display', serif;
    font-size: 18rem;
    line-height: 1;
    color: rgba(139, 90, 110, 0.1);
    pointer-events: none;
    user-select: none;
}

.about-mission-quote {
    position: relative;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 400;
    font-style: italic;
    color: #3d2530;
    line-height: 1.45;
    margin: 0;
}

/* Short horizontal rule accent */
.about-mission-rule {
    display: block;
    width: 52px;
    height: 2px;
    background: var(--mauve-400);
    opacity: 0.5;
    border-radius: 2px;
}

/* Right � pure white panel */
.about-mission-right {
    background: #fff;
    padding: 72px 72px 72px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    border-left: 1px solid rgba(168, 131, 143, 0.12);
}

.about-mission-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mauve-400);
    margin: 0;
}

.about-mission-body {
    font-size: 0.975rem;
    color: var(--secondary-text);
    line-height: 1.85;
    margin: 0;
    max-width: 480px;
}

.about-mission-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: 50px;
    background: transparent;
    border: 1.5px solid var(--mauve-400);
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mauve-500);
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.about-mission-btn span {
    display: inline-block;
    transition: transform 0.22s;
}

.about-mission-btn:hover {
    background: var(--mauve-400);
    color: #fff;
    box-shadow: 0 8px 24px rgba(168, 131, 143, 0.3);
    transform: translateY(-2px);
}

.about-mission-btn:hover span {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .about-mission-section {
        grid-template-columns: 1fr;
    }

    .about-mission-left {
        padding: 56px 32px;
    }

    .about-mission-right {
        padding: 48px 32px;
        border-left: none;
        border-top: 1px solid rgba(168, 131, 143, 0.12);
    }

    .about-mission-deco-quote {
        font-size: 10rem;
    }
}

/* --- About Page: Clinic Gallery ----------------------------- */
.clinic-gallery-section {
    background: #faf6f4;
    padding: 100px 0;
}

.clinic-gallery-header {
    text-align: center;
    margin-bottom: 56px;
}

.clinic-gallery-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--primary-text);
    margin: 10px 0 14px;
    line-height: 1.2;
}

.clinic-gallery-sub {
    font-size: 0.925rem;
    color: var(--secondary-text);
    margin: 0;
}

/* Editorial masonry-style grid:
   Row 1: hero (spans 2 rows) + 2 regular
   Row 2: hero continues  + 3 regular */
/* Bento layout � exactly 6 images, no orphan:
   [ hero ] [ a ] [ b ]
   [ hero ] [ c ] [ d ]
   [   e � full width   ] */
.clinic-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 12px;
}

@media (max-width: 900px) {
    .clinic-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 260px);
    }
}

@media (max-width: 560px) {
    .clinic-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .clinic-gallery-item {
        height: 240px;
    }
}

/* Each item is a <button> */
.clinic-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    background: none;
    display: block;
    width: 100%;
    height: 100%;
}

.clinic-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.clinic-gallery-item:hover .clinic-gallery-img,
.clinic-gallery-item:focus-visible .clinic-gallery-img {
    transform: scale(1.06);
}

/* Hover overlay */
.clinic-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(45, 20, 30, 0.72) 0%,
            transparent 55%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px 20px;
    opacity: 0;
    transition: opacity 0.35s ease;
    border-radius: 16px;
    gap: 8px;
}

.clinic-gallery-item:hover .clinic-gallery-overlay,
.clinic-gallery-item:focus-visible .clinic-gallery-overlay {
    opacity: 1;
}

.clinic-gallery-overlay-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.03em;
    transform: translateY(6px);
    transition: transform 0.35s ease;
}

.clinic-gallery-zoom {
    color: rgba(255, 255, 255, 0.7);
    transform: translateY(6px);
    transition: transform 0.35s ease 0.04s;
    display: flex;
}

.clinic-gallery-item:hover .clinic-gallery-overlay-label,
.clinic-gallery-item:hover .clinic-gallery-zoom {
    transform: translateY(0);
}

.clinic-gallery-item:focus-visible {
    outline: 3px solid var(--mauve-400);
    outline-offset: 3px;
}

/* --- Lightbox ------------------------------------------------- */
.kriti-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kriti-lightbox[hidden] {
    display: none;
}

.kriti-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 8, 12, 0.92);
    backdrop-filter: blur(6px);
}

.kriti-lightbox-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: min(88vw, 1100px);
    max-height: 90vh;
    padding: 0 60px;
}

.kriti-lightbox-img {
    max-width: 100%;
    max-height: 74vh;
    border-radius: 12px;
    object-fit: contain;
    display: block;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

.kriti-lightbox-caption {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    margin: 0;
    text-align: center;
}

.kriti-lightbox-counter {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    letter-spacing: 0.08em;
}

.kriti-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.kriti-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.kriti-lightbox-nav {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.kriti-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.kriti-lightbox-prev {
    left: 20px;
}

.kriti-lightbox-next {
    right: 20px;
}

@media (max-width: 600px) {
    .kriti-lightbox-stage {
        padding: 0 48px;
    }

    .kriti-lightbox-prev {
        left: 8px;
    }

    .kriti-lightbox-next {
        right: 8px;
    }
}

/* --- About Page: CTA section --------------------------------- */
.about-cta-section {
    background: #fff;
    padding: 60px 24px 80px;
    display: flex;
    justify-content: center;
}

/* --- Footer ------------------------------------------------- */
.site-footer {
    background: linear-gradient(160deg, #7a4d58 0%, #6b3f4a 60%, #5e3542 100%);
    color: #f0e4e8;
    padding: 80px 0 0;
}

/* Top grid */
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.6fr;
    gap: 48px;
    padding-bottom: 60px;
}

@media (max-width: 960px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
}

/* Brand column */
.footer-logo {
    margin-bottom: 20px;
}

/* Constrain any <img> (custom logo or uploaded) to a sensible height */
.footer-logo img,
.footer-logo .custom-logo {
    max-height: 72px;
    width: auto;
    display: block;
}

.footer-logo-text {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1;
}

.footer-logo-icon {
    font-size: 1.6rem;
    color: #d4a5b8;
    line-height: 1;
    margin-bottom: 2px;
}

.footer-logo-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.8rem;
    color: #fff;
    letter-spacing: 0.02em;
}

.footer-logo-sub {
    font-size: 0.72rem;
    color: #a08898;
    letter-spacing: 0.1em;
    margin-top: 2px;
}

.footer-tagline {
    font-size: 0.85rem;
    line-height: 1.75;
    color: #e8d0d6;
    margin: 0 0 24px;
    max-width: 320px;
}

/* Social icons */
.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f0e4e8;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.footer-social-icon:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* Column titles */
.footer-col-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255,255,255,0.25);
    display: inline-block;
}

/* Nav link list */
.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link-list a {
    font-size: 0.875rem;
    color: #f0e4e8;
    text-decoration: none;
    transition: color 0.2s;
}

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

/* Contact list */
.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: #f0e4e8;
    line-height: 1.55;
}

.footer-contact-list svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #f3d0d8;
}

.footer-contact-list a {
    color: #f0e4e8;
    text-decoration: none;
    transition: color 0.2s;
}

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

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-copy {
    font-size: 0.8rem;
    color: #f3e0d1;
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    font-size: 0.8rem;
    color: #f3e0d1;
    text-decoration: none;
    transition: color 0.2s;
}

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

/* Archive and search */
.archive-description {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Posts grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

/* Post card */
.post {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.post:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
}

.post-thumbnail {
    overflow: hidden;
    height: 200px;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post:hover .post-thumbnail img {
    transform: scale(1.05);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.pagination a,
.pagination span {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.pagination a:hover,
.pagination .current {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

/* Comments */
.comments-area {
    margin: 2rem 0;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.375rem;
}

.comment-content {
    margin-top: 0.5rem;
}

.comment-meta {
    font-size: 0.875rem;
    color: #6b7280;
}

/* 404 page */
.error-404 {
    text-align: center;
    padding: 3rem 0;
}

/* Search form */
.search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-input {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

/* ---------------------------------------------------------------
   PROCEDURE STEPS SECTION
   --------------------------------------------------------------- */
.trt-proc-section {
    background: #fff;
    padding: 60px 0;
    border-top: 1px solid #f0eaed;
}

/* Two-column split: sticky left heading + scrollable right steps */
.trt-proc-inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 80px;
    align-items: start;
}

/* -- Left: sticky heading -- */
.trt-proc-left {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.trt-proc-left .trt-section-eyebrow {
    margin-bottom: 18px;
}

.trt-proc-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0 0 20px;
}

.trt-proc-intro {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.75;
    margin: 0;
}

/* Short mauve accent bar */
.trt-proc-accent {
    width: 40px;
    height: 3px;
    background: var(--mauve-400);
    border-radius: 2px;
    margin: 24px 0 0;
}

/* -- Right: step list -- */
/* Step list */
.trt-proc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: proc-step;
}

.trt-proc-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 28px;
    padding: 40px 0;
    border-bottom: 1px solid #f0eaed;
    counter-increment: proc-step;
    align-items: start;
    position: relative;
}

.trt-proc-item:first-child {
    border-top: 1px solid #f0eaed;
}

/* Step number bubble */
.trt-proc-item::before {
    content: counter(proc-step);
    grid-row: 1 / 99;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mauve-200);
    color: var(--mauve-500);
    font-family: 'DM Serif Display', serif;
    font-size: 1.15rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.trt-proc-step-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mauve-500);
    margin: 0 0 8px;
    line-height: 1.3;
}

.trt-proc-step-body {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.8;
    margin: 0 0 10px;
}

/* Sub-bullets inside a step */
.trt-proc-subbullets {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trt-proc-subbullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--secondary-text);
    line-height: 1.7;
}

.trt-proc-subbullets li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mauve-400);
    margin-top: 7px;
}

.trt-proc-tagline {
    margin-top: 52px;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.7;
    border-left: 3px solid var(--mauve-300);
    padding-left: 18px;
}

@media (max-width: 820px) {
    .trt-proc-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .trt-proc-left {
        position: static;
    }
}

@media (max-width: 640px) {
    .trt-proc-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .trt-proc-item::before {
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------------
   RESULTS GROUPS SECTION
   --------------------------------------------------------------- */
.trt-results-section {
    background: var(--cream-50);
    padding: 60px 0;
    border-top: 1px solid #f0eaed;
}

.trt-results-header {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}

.trt-results-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 14px 0 18px;
}

.trt-results-intro {
    font-size: 0.92rem;
    color: var(--secondary-text);
    line-height: 1.8;
    margin: 0;
}

.trt-results-header .trt-section-eyebrow {
    display: block;
    text-align: center;
}

/* Groups container � CSS columns for even distribution */
.trt-results-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px 60px;
}

.trt-results-group {
    background: #fff;
    border-radius: 10px;
    padding: 30px 28px 28px;
    box-shadow: 0 2px 12px rgba(143, 107, 122, 0.07);
    border-top: 3px solid var(--mauve-300);
}

.trt-results-group-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--mauve-500);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mauve-200);
}

.trt-results-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trt-results-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.65;
}

.trt-results-bullets li::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mauve-400);
    margin-top: 6px;
}

.trt-results-tagline {
    margin-top: 52px;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.7;
    border-left: 3px solid var(--mauve-300);
    padding-left: 18px;
}

/* ---------------------------------------------------------------
   COMPARISON TABLE SECTION
   --------------------------------------------------------------- */
.trt-compare-section {
    background: #fff;
    padding: 60px 0;
    border-top: 1px solid #f0eaed;
}

.trt-compare-header {
    text-align: left;
}

.trt-compare-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.25;
    margin: 14px 0 0;
}

.trt-compare-intro {
    margin: 32px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: var(--secondary-text);
    line-height: 1.8;
}

.trt-compare-intro p {
    margin: 0 0 1em;
}

.trt-compare-intro p:last-child {
    margin-bottom: 0;
}

/* -- Table -- */
.trt-compare-table-wrap {
    margin: 40px auto 0;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e2d8dc;
}

.trt-compare-table {
    width: auto;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    min-width: 500px;
}

/* Header row */
.trt-compare-table thead tr {
    background: #6b4c5c;
}

.trt-compare-table thead th,
.trt-compare-table thead th:first-child,
.trt-compare-table thead th:last-child {
    padding: 15px 20px;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff !important;
    background: #6b4c5c !important;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.trt-compare-table thead th:last-child {
    border-right: none;
}

/* Body rows */
.trt-compare-table tbody tr {
    border-bottom: 1px solid #e2d8dc;
}

.trt-compare-table tbody tr:last-child {
    border-bottom: none;
}

.trt-compare-table tbody tr:hover {
    background: #fdf0f5;
}

.trt-compare-table tbody td {
    padding: 14px 20px;
    color: #2d2d2d;
    border-right: 1px solid #e2d8dc;
    vertical-align: middle;
    line-height: 1.6;
    background: #fff;
}

.trt-compare-table tbody td:last-child {
    border-right: none;
}

/* First column � feature label */
.trt-compare-td-feature {
    font-weight: 400;
    color: #2d2d2d;
    background: #fff !important;
}

/* Last column � our treatment */
.trt-compare-td-ours {
    background: #fff !important;
    font-weight: 400;
    color: #2d2d2d;
}

.trt-compare-tagline {
    margin-top: 36px;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.7;
    border-left: 3px solid #d4a5b8;
    padding-left: 18px;
}

.trt-candidate-tagline {
    margin-top: 36px;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.7;
    border-left: 3px solid var(--mauve-300);
    padding-left: 18px;
}

.search-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-submit {
    padding: 0.5rem 1.5rem;
    background-color: #2563eb;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.search-submit:hover {
    background-color: #1d4ed8;
}

/* -- Mobile menu slide-down animation -------------------- */
@keyframes mobileMenuIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: 1fr;
    }

    /* -- Mobile menu dropdown card ------------------------- */
    .primary-menu-wrapper {
        position: absolute;
        top: calc(100% + 10px);
        left: 8px;
        right: 8px;
        background: var(--cream-50);
        border-radius: 20px;
        box-shadow:
            0 8px 32px rgba(45, 45, 45, 0.10),
            0 2px 8px rgba(168, 131, 143, 0.14);
        display: none;
        z-index: 999;
        overflow: hidden;
        transform-origin: top center;
    }

    /* Mauve accent strip at top of card */
    .primary-menu-wrapper::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, var(--mauve-300), var(--mauve-500));
    }

    .primary-menu-wrapper.is-open {
        display: block;
        animation: mobileMenuIn 0.22s ease forwards;
    }

    /* -- Nav list ------------------------------------------ */
    .primary-menu-list {
        flex-direction: column;
        width: 100%;
        padding: 0.5rem 0.75rem 0.75rem;
        gap: 0;
    }

    .primary-menu-list>li {
        width: 100%;
        border-bottom: 1px solid var(--cream-200);
    }

    .primary-menu-list>li:last-child {
        border-bottom: none;
    }

    /* -- Top-level links ----------------------------------- */
    .primary-menu-list>li>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.8rem 0.5rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--primary-text);
        border-radius: 10px;
        transition: background 0.18s, color 0.18s;
        text-decoration: none;
    }

    /* Override desktop underline animation on mobile */
    .primary-menu-list>li>a::before {
        display: none !important;
    }

    .primary-menu-list>li>a:hover,
    .primary-menu-list>li.current-menu-item>a {
        background: var(--cream-200);
        color: var(--mauve-500);
    }

    .primary-menu-list>li.current-menu-item>a {
        font-weight: 600;
    }

    /* -- Sub-menu chevron arrow ---------------------------- */
    .primary-menu-list>li.menu-item-has-children>a::after {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        border-right: 2px solid var(--mauve-400);
        border-bottom: 2px solid var(--mauve-400);
        transform: rotate(45deg);
        transition: transform 0.25s ease;
        flex-shrink: 0;
        margin-left: auto;
        margin-right: 4px;
    }

    .primary-menu-list>li.menu-item-has-children.is-submenu-open>a::after {
        transform: rotate(-135deg);
    }

    /* -- Sub-menu panel ------------------------------------ */
    .primary-menu-list .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        background: var(--cream-100);
        border-radius: 12px;
        margin: 0 0 0.5rem;
        padding: 0.25rem 0;
        display: none;
        min-width: unset;
        width: auto;
        transform: none !important;
    }

    .primary-menu-list>li.is-submenu-open>.sub-menu {
        display: block;
        animation: mobileMenuIn 0.18s ease forwards;
    }

    .primary-menu-list .sub-menu li {
        border: none;
        padding: 0;
    }

    .primary-menu-list .sub-menu a {
        display: block;
        padding: 0.55rem 1rem;
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--secondary-text);
        border-radius: 8px;
        margin: 0 0.25rem;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }

    .primary-menu-list .sub-menu a:hover,
    .primary-menu-list .sub-menu .current-menu-item>a {
        background: var(--mauve-200);
        color: var(--mauve-500);
    }

    /* Suppress desktop pseudo-elements on sub-menu links */
    .primary-menu-list .sub-menu a::before,
    .primary-menu-list .sub-menu a::after {
        display: none !important;
    }

    #menu-toggle {
        cursor: pointer;
    }
}

/* --- Concern Based Treatment: Concerns Grid ------------------------------- */
.cbt-concerns-section {
    position: relative;
    overflow: hidden;
    padding: 104px 0 120px;
    background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
}

.cbt-concerns-section > .container {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Decorative soft radial blobs */
.cbt-bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.cbt-bg-circle {
    position: absolute;
    border-radius: 50%;
}

.cbt-bg-circle--1 {
    width: 720px;
    height: 720px;
    top: -240px;
    right: -200px;
    background: radial-gradient(circle, rgba(212, 165, 184, 0.22) 0%, transparent 65%);
}

.cbt-bg-circle--2 {
    width: 600px;
    height: 600px;
    bottom: -140px;
    left: -180px;
    background: radial-gradient(circle, rgba(212, 165, 184, 0.16) 0%, transparent 65%);
}

/* All direct children above the bg decor */
.cbt-concerns-section > * {
    position: relative;
    z-index: 1;
}

/* -- Section header -- */
.cbt-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 640px;
    margin: 0 auto 64px;
}

.cbt-section-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 400;
    color: var(--primary-text);
    margin: 0;
    line-height: 1.15;
}

.cbt-section-sub {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--secondary-text);
    margin: 0;
    max-width: 560px;
}

/* -- Tab navigation -- */
.cbt-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 64px;
}

.cbt-tab-btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 34px;
    border-radius: 50px;
    border: 1.5px solid rgba(168, 131, 143, 0.4);
    background: rgba(255, 255, 255, 0.7);
    color: var(--mauve-500);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.cbt-tab-btn:hover {
    transform: translateY(-2px);
    border-color: var(--mauve-300);
    box-shadow: 0 4px 16px rgba(168, 131, 143, 0.15);
}

.cbt-tab-btn.is-active {
    background: var(--mauve-400);
    color: #fff;
    border-color: var(--mauve-400);
    box-shadow: 0 8px 28px rgba(168, 131, 143, 0.38);
    transform: translateY(-1px);
}

/* -- Tab panels -- */
/* --- card filter animation --- */
.cbt-card--enter {
    animation: cbtCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms) both;
}
.cbt-card--exit {
    animation: cbtCardOut 0.32s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}
.cbt-card--hidden {
    display: none;
}
@keyframes cbtCardIn {
    from { opacity: 0; transform: scale(0.88) translateY(18px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cbtCardOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.88) translateY(12px); }
}

/* Solo group title (single group, no tabs) */
.cbt-group-title-solo {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 400;
    color: var(--primary-text);
    text-align: center;
    margin: 0 0 48px;
}

/* -- Cards row --
   justify-content:center: any incomplete last row floats to the
   centre -- balanced whitespace on both sides, no right-side void.
   calc(25% - 15px) = (100% - 3 gaps x 20px) / 4
-- */
.cbt-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* -- Individual card -- */
.cbt-card {
    position: relative;
    flex: 0 0 calc(25% - 15px);
    min-width: 210px;
    max-width: 300px;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    cursor: pointer;
    outline: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
    transition: transform 0.38s cubic-bezier(0.33, 1, 0.68, 1),
                box-shadow 0.38s cubic-bezier(0.33, 1, 0.68, 1);
}

.cbt-card:hover,
.cbt-card:focus-visible {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18);
}

/* Inset border ring */
.cbt-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    z-index: 4;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

.cbt-card:hover::after,
.cbt-card:focus-visible::after {
    border-color: rgba(212, 165, 184, 0.55);
}

/* -- Card image -- */
.cbt-card-figure {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    z-index: 0;
}

.cbt-card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}

.cbt-card:hover .cbt-card-figure img,
.cbt-card:focus-visible .cbt-card-figure img {
    transform: scale(1.08);
}

/* -- Number badge (top-right) -- */
.cbt-card-num {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3px 9px;
    border-radius: 50px;
    backdrop-filter: blur(6px);
    line-height: 1.6;
}

/* -- Gradient overlay -- always visible at bottom, expands on hover -- */
.cbt-card-glass {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 44px 20px 24px;
    background: linear-gradient(
        to top,
        rgba(16, 5, 10, 0.94)  0%,
        rgba(16, 5, 10, 0.58) 52%,
        transparent           100%
    );
    transition: padding-top 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

.cbt-card:hover .cbt-card-glass,
.cbt-card:focus-visible .cbt-card-glass {
    padding-top: 72px;
}

.cbt-card-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.08rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
}

/* Description: hidden until hover */
.cbt-card-desc {
    font-size: 0.77rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.42s cubic-bezier(0.33, 1, 0.68, 1),
                opacity    0.30s ease 0.06s,
                margin     0.30s ease;
}

.cbt-card:hover .cbt-card-desc,
.cbt-card:focus-visible .cbt-card-desc {
    max-height: 80px;
    opacity: 1;
    margin-bottom: 14px;
}

/* Treatment links: hidden until hover */
.cbt-card-treat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.42s cubic-bezier(0.33, 1, 0.68, 1) 0.04s,
                opacity    0.30s ease 0.14s;
}

.cbt-card:hover .cbt-card-treat-list,
.cbt-card:focus-visible .cbt-card-treat-list {
    max-height: 200px;
    opacity: 1;
}

.cbt-card-treat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cbt-card-treat-link:hover {
    background: rgba(212, 165, 184, 0.35);
    border-color: rgba(212, 165, 184, 0.55);
}

/* -- Responsive -- */
@media (max-width: 1100px) {
    .cbt-card {
        flex: 0 0 calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .cbt-concerns-section {
        padding: 72px 0 80px;
    }

    .cbt-section-header {
        margin-bottom: 48px;
    }

    .cbt-tabs-nav {
        margin-bottom: 48px;
    }

    .cbt-card {
        flex: 0 0 calc(50% - 10px);
        max-width: none;
    }
}

@media (max-width: 480px) {
    .cbt-cards-row {
        gap: 12px;
    }

    .cbt-card {
        flex: 0 0 calc(50% - 6px);
        min-width: 140px;
        border-radius: 16px;
    }

    .cbt-card:hover,
    .cbt-card:focus-visible {
        transform: none;
    }

    .cbt-card-name {
        font-size: 0.95rem;
    }
}
/* Print styles */
@media print {
    body {
        background-color: white;
    }

    .no-print,
    .site-header,
    .site-footer {
        display: none;
    }

    a {
        text-decoration: underline;
    }
}

/* --------------------------------------------------------------
   RESPONSIVE OVERRIDES � TABLET & MOBILE
   Tablet  : 768px � 1023px
   Mobile  : = 767px
   Desktop styles are intentionally untouched.
   -------------------------------------------------------------- */

/* -- Tablet (768px � 1023px) ----------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Hero � home page */
    .hero-section {
        min-height: 82vh;
    }

    .hero-content {
        max-width: 75%;
        padding-top: 90px;
        padding-bottom: 160px;
    }

    .hero-title {
        font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    }

    /* Hero � service page & treatment detail */
    .svc-page-hero,
    .trt-hero-section {
        min-height: 82svh;
    }

    /* Section paddings: shrink from 96�110px ? 72px */
    .about-section,
    .services-section,
    .testimonials-section,
    .trt-overview-section,
    .trt-benefits-section,
    .trt-how-section,
    .trt-candidate-section,
    .trt-expect-section,
    .trt-why-section {
        padding-top: 50px; padding-bottom: 50px;
    }

    .svc-cta-section {
        padding: 72px 24px;
    }

    .svc-children-section {
        padding-bottom: 72px;
    }

    .bsa-body-section,
    .bsc-body-section,
    .blog-listing-section {
        padding-top: 56px;
        padding-bottom: 72px;
    }

    .bsc-recent-section {
        padding: 60px 0;
    }

    .stats-bar-section {
        padding: 44px 0;
    }

    .site-footer {
        padding-top: 64px;
    }

    /* Headings � tablet scale-down */
    .services-heading {
        font-size: 2.3rem;
    }

    .testimonials-heading {
        font-size: 2rem;
    }

    .svc-cta-heading {
        font-size: 2.2rem;
    }

    .stat-number {
        font-size: 2.1rem;
    }

    /* About inner gap */
    .about-inner {
        gap: 48px;
    }

    /* Footer columns collapse to 2-up */
    .footer-top {
        gap: 36px;
    }
}

/* -- Mobile (= 767px) ------------------------------------------ */
@media (max-width: 767px) {

    /* - Hide Connect Now button � only hamburger shows ---------- */
    .navbar-right .btn-connect {
        display: none;
    }

    /* - Header logo -------------------------------------------- */
    .site-branding img,
    .site-branding .custom-logo {
        max-height: 36px;
    }

    /* - Container horizontal padding --------------------------- */
    /* Override Tailwind's px-8 (2rem) to a mobile-friendly 1.25rem */
    .container.px-8 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* - Home page hero ----------------------------------------- */
    .hero-section {
        min-height: 64svh;
        /* photo breathes, no large void below CTAs */
        background-position: center top;
    }

    .hero-content {
        max-width: 100%;
        padding-top: 90px;
        /* clears fixed navbar */
        padding-bottom: 68px;
        /* clears stats bar */
    }

    .hero-title {
        font-size: clamp(2rem, 9.5vw, 2.8rem);
        line-height: 1.1;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        max-width: 100%;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .hero-eyebrow {
        font-size: 0.67rem;
        margin-bottom: 10px;
    }

    /* CTA row � both buttons side-by-side on one line */
    .hero-cta-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
    }

    /* Primary CTA button � compact on mobile */
    .hero-cta-row .btn-primary-main {
        padding: 11px 20px;
        font-size: 0.875rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Ghost 'See Services' � outline pill on bright background */
    .hero-ghost-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 50px;
        border: 1.5px solid rgba(45, 45, 45, 0.35);
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--primary-text);
        white-space: nowrap;
        flex-shrink: 0;
        transition: border-color 0.25s, color 0.25s, background 0.25s;
    }

    .hero-ghost-cta:hover {
        border-color: var(--mauve-500);
        color: var(--mauve-500);
        background: rgba(168, 131, 143, 0.08);
        gap: 6px;
    }

    /* Stats bar � compact single row, 3 equal columns */
    .hero-stats-bar {
        /* position:absolute bottom:0 is already set globally */
    }

    .hero-stats-inner {
        flex-wrap: nowrap;
        /* force single row */
        padding: 12px 0;
        gap: 0;
    }

    /* ALL dividers hidden on mobile � 3 stats sit side-by-side cleanly */
    .hero-stat-divider {
        display: none;
    }

    .hero-stat {
        flex: 1;
        /* equal width, all 3 in one row */
        min-width: 0;
        padding: 6px 8px;
        border-right: 1px solid rgba(255, 255, 255, 0.14);
    }

    .hero-stat:last-child {
        border-right: none;
    }

    .hero-stat-num {
        font-size: 1rem;
        white-space: nowrap;
    }

    .hero-stat-label {
        font-size: 0.58rem;
        letter-spacing: 0.02em;
    }

    /* - Service page hero -------------------------------------- */
    .svc-page-hero {
        min-height: 72svh;
        padding-top: 156px;
        /* 96 breadcrumb-top + 24 breadcrumb-height + 36 gap */
        padding-bottom: 48px;
        align-items: center;
    }

    .svc-page-hero .svc-breadcrumb {
        top: 96px;
        /* navbar bottom (~76px) + 20px gap */
    }

    .admin-bar .svc-page-hero .svc-breadcrumb {
        top: 142px;
        /* + 46px mobile admin bar */
    }

    /* - Breadcrumb ellipsis (shared) -------------------------- */
    .svc-breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
        max-width: 100%;
    }

    .svc-breadcrumb>a:first-child {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .svc-breadcrumb-sep {
        flex-shrink: 0;
    }

    .svc-breadcrumb>a:not(:first-child) {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 5rem;
    }

    .svc-breadcrumb-current {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 9rem;
    }

    .svc-page-title {
        font-size: clamp(1.75rem, 7vw, 2.4rem);
    }

    .svc-page-subtitle {
        font-size: 0.92rem;
    }

    /* - Treatment detail hero ---------------------------------- */
    .trt-hero-section {
        min-height: 72svh;
        padding: 0 0 56px;
    }

    .trt-hero-section>.container {
        padding-top: 156px;
        /* navbar(76) + gap(20) + breadcrumb(24) + gap(36) */
    }

    .admin-bar .trt-hero-section>.container {
        padding-top: 202px;
        /* + 46px mobile admin bar */
    }

    .trt-hero-section .svc-breadcrumb {
        top: 96px;
        /* navbar bottom (~76px) + 20px gap */
    }

    .admin-bar .trt-hero-section .svc-breadcrumb {
        top: 142px;
        /* + 46px mobile admin bar */
    }

    .trt-hero-title {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .trt-hero-subtitle {
        font-size: 0.92rem;
        max-width: 100%;
    }

    .trt-eyebrow-badge {
        font-size: 0.65rem;
        padding: 6px 16px;
    }

    .trt-feature-pill {
        font-size: 0.78rem;
        padding: 7px 16px;
    }

    .trt-feature-pills {
        gap: 8px;
    }

    .trt-btn-primary,
    .trt-btn-outline {
        padding: 14px 24px;
        font-size: 0.875rem;
    }

    .trt-hero-actions {
        gap: 12px;
    }

    /* Blog article hero (bsa) */
    .trt-hero-section.bsa-hero {
        min-height: 52svh;
        padding-bottom: 36px;
    }

    /* - Section paddings --------------------------------------- */
    .about-section {
        padding: 56px 0;
    }

    .services-section {
        padding: 56px 0;
    }

    .testimonials-section {
        padding: 56px 0;
    }

    .trt-overview-section {
        padding: 56px 0;
    }

    .trt-benefits-section {
        padding: 56px 0;
    }

    .trt-how-section {
        padding: 56px 0;
    }

    .trt-candidate-section {
        padding: 56px 0;
    }

    .trt-expect-section {
        padding: 56px 0;
    }

    .trt-why-section {
        padding: 56px 0;
    }

    .svc-children-section {
        padding: 60px 0;
    }

    .svc-cta-section {
        padding: 56px 20px;
    }

    .bsa-body-section {
        padding: 60px 0;
    }

    .bsc-body-section {
        padding: 60px 0;
    }

    .bsc-recent-section {
        padding: 60px 0;
    }

    .blog-listing-section {
        padding: 60px 0;
    }

    .stats-bar-section {
        padding: 36px 0;
    }

    .site-footer {
        padding-top: 48px;
    }

    /* - Section headings --------------------------------------- */
    .services-heading {
        font-size: 1.9rem;
    }

    .services-header {
        margin-bottom: 32px;
    }

    .services-subheading {
        font-size: 0.9rem;
    }

    .testimonials-heading {
        font-size: 1.85rem;
    }

    .about-heading {
        font-size: 1.75rem;
    }

    .svc-cta-heading {
        font-size: 1.85rem;
    }

    .svc-cta-sub {
        font-size: 0.9rem;
    }

    .svc-cta-btn {
        padding: 14px 28px;
        font-size: 0.875rem;
    }

    .trt-overview-title {
        font-size: 1.85rem;
    }

    .trt-expect-heading {
        font-size: 1.85rem;
    }

    .trt-benefits-heading {
        font-size: 1.85rem;
    }

    .trt-candidate-heading {
        font-size: 1.85rem;
    }

    .trt-how-heading {
        font-size: 1.85rem;
    }

    .trt-why-heading {
        font-size: 1.85rem;
    }

    /* - Global stats bar --------------------------------------- */
    .stats-bar-section {
        padding: 0;
        /* cell padding carries the spacing */
    }

    .stats-bar-inner {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Hide the flex divider elements � borders drawn via nth-child instead */
    .stat-divider {
        display: none;
    }

    /* Each stat occupies exactly half the row ? 2�2 grid */
    .stat-item {
        flex: 0 0 50%;
        padding: 28px 16px;
        box-sizing: border-box;
    }

    /* Cross lines:
       top-left  (child 1): right border + bottom border
       top-right (child 3): bottom border only
       bot-left  (child 5): right border only
       bot-right (child 7): no extra borders                */
    .stats-bar-inner>.stat-item:nth-child(1),
    .stats-bar-inner>.stat-item:nth-child(5) {
        border-right: 1px solid #d4bfbb;
    }

    .stats-bar-inner>.stat-item:nth-child(1),
    .stats-bar-inner>.stat-item:nth-child(3) {
        border-bottom: 1px solid #d4bfbb;
    }

    .stat-number {
        font-size: 1.9rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    /* - About section ------------------------------------------ */
    .about-inner {
        gap: 32px;
    }

    .about-image-wrap {
        min-height: 280px;
    }

    .about-image-badge {
        right: 10px;
        bottom: 14px;
        min-width: 150px;
        padding: 10px 14px;
    }

    .about-cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* - Testimonials ------------------------------------------- */
    .testimonials-header {
        margin-bottom: 28px;
    }

    /* - Treatment sections ------------------------------------- */
    .trt-benefit-item {
        gap: 20px;
        padding: 24px 0;
    }

    .trt-benefit-num {
        font-size: 2.2rem;
        min-width: 40px;
    }

    .trt-overview-card {
        padding: 24px 22px 28px;
    }

    .trt-expect-card {
        padding: 24px 22px 28px;
    }

    .trt-protocol-card {
        padding: 20px 18px 24px;
    }

    /* - Blog listing ------------------------------------------- */
    .blog-filter-tabs {
        margin-bottom: 28px;
    }

    .blog-grid {
        margin-bottom: 36px;
    }

    /* - Blog single (BSC) -------------------------------------- */
    .bsc-recent-header {
        margin-bottom: 24px;
    }

    /* - Footer ------------------------------------------------- */
    .footer-top {
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 18px 0;
    }

    .footer-bottom-links {
        gap: 16px;
    }

    .footer-logo-name {
        font-size: 1.5rem;
    }
}
/* --- Treatment: FAQ Section (redesign) ------------------ */
.trt-faq-section {
    background: #fff;
    padding: 60px 0;
    border-top: 1px solid #f0eaed;
}

.trt-faq-inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 80px;
    align-items: start;
}

.trt-faq-left {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.trt-faq-left .trt-section-eyebrow {
    margin-bottom: 18px;
}

.trt-faq-heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 400;
    color: var(--primary-text);
    line-height: 1.2;
    margin: 0 0 20px;
}

.trt-faq-tagline {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.75;
    margin: 0 0 28px;
}

.trt-faq-accent {
    width: 40px;
    height: 3px;
    background: var(--mauve-400);
    border-radius: 2px;
    margin-bottom: 28px;
}

/* Nova FAQ / Accordion styling */
.nova-faq-display {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nova-faq-entry {
    border-bottom: 1px solid #f0eaed;
    transition: background 0.2s;
}

.nova-faq-entry:first-child {
    border-top: 1px solid #f0eaed;
}

.nova-faq-question {
    list-style: none;
    padding: 32px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-text);
    cursor: pointer;
    position: relative;
    padding-right: 40px;
    display: block;
}

/* Custom indicator icon */
.nova-faq-question::after {
    content: "+";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--mauve-400);
    transition: transform 0.3s ease;
}

.nova-faq-entry[open] .nova-faq-question::after {
    content: "-";
    transform: translateY(-50%) rotate(180deg);
}

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

.nova-faq-answer {
    padding: 0 0 32px;
}

.nova-faq-answer p {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.8;
    margin: 0;
}

.nova-faq-entry:hover .nova-faq-question {
    color: var(--mauve-500);
}

@media (max-width: 820px) {
    .trt-faq-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .trt-faq-left {
        position: static;
    }
}

/* Unified Subtitle/Intro Paragraph Spacing */
.trt-overview-sub p,
.trt-benefits-tagline p,
.trt-how-body p,
.trt-candidate-intro p,
.trt-proc-intro p,
.trt-results-intro p,
.trt-results-tagline p,
.trt-compare-intro p,
.trt-compare-tagline p,
.trt-candidate-tagline p,
.trt-faq-tagline p,
.trt-expect-text p,
.trt-why-body p,
.trt-para-wrap p {
    margin-bottom: 0.8em !important;
}

.trt-overview-sub p:last-child,
.trt-benefits-tagline p:last-child,
.trt-how-body p:last-child,
.trt-candidate-intro p:last-child,
.trt-proc-intro p:last-child,
.trt-results-intro p:last-child,
.trt-results-tagline p:last-child,
.trt-compare-intro p:last-child,
.trt-compare-tagline p:last-child,
.trt-candidate-tagline p:last-child,
.trt-faq-tagline p:last-child,
.trt-expect-text p:last-child,
.trt-why-body p:last-child,
.trt-para-wrap p:last-child {
    margin-bottom: 0 !important;
}