/* ===================================
   Естетична Клиника - Sirpi-Inspired Design
   =================================== */

/* CSS Variables - Interior Palette (Taupe / Champagne / Cocoa) */
:root {
    --primary: #C6A47E;
    --primary-dark: #A88560;
    --primary-light: #D9BE9B;
    --primary-hover: #B08F6B;
    --cream: #E8DED3;
    --cream-dark: #CBB8A6;
    --gray-light: #F5F1EC;
    --gray: #E0D6CB;
    --white: #FFFFFF;
    --black: #2B2B2B;
    --text: #7A5C4D;
    --text-light: #9B7F6B;
    --text-muted: #B09A89;

    --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50px;

    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

ul, ol {
    list-style: none;
}

/* Typography - Sirpi Style */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
    color: var(--black);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.125rem; }

p {
    margin-bottom: 1rem;
}

/* Section Title - Sirpi Style */
.section-subtitle {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.section-desc {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-light);
    font-size: 0.9375rem;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-wide {
    max-width: 1400px;
}

/* Buttons - Rounded Pill Style */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    color: var(--black);
    border-color: var(--black);
}

.btn-outline:hover {
    background-color: var(--black);
    color: var(--white);
}

.btn-white {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--white);
}

.btn-white:hover {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

/* Utility Classes */
.mobile-only { display: none !important; }

@media (max-width: 768px) {
    .mobile-only { display: block !important; }
}

/* ===================================
   Header - Two Row Modern Style
   =================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--white);
    transition: var(--transition);
}

.header.scrolled {
    box-shadow: var(--shadow-md);
}

/* Top Bar */
.header-top {
    background: var(--black);
    color: var(--white);
}

.header-top-inner {
    display: flex;
    align-items: center;
    min-height: 100px;
    padding: 0.75rem 0;
    gap: 1rem;
}

/* Push search + actions to the right */
.header-top-inner .header-search {
    margin-left: auto;
}

/* Logo */
.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    letter-spacing: 1px;
    flex-shrink: 0;
}

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

/* Header Search */
.header-search {
    flex: 0 1 240px;
    max-width: 240px;
}

.header-search form {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    transition: var(--transition);
}

.header-search form:focus-within {
    background: rgba(255,255,255,0.2);
}

.header-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    color: var(--white);
    outline: none;
}

.header-search input::placeholder {
    color: rgba(255,255,255,0.6);
}

.header-search button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.header-search button:hover {
    color: var(--primary);
}

/* Top Actions */
.header-top-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.header-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    color: rgba(247, 243, 239, 0.85);
    background: transparent;
    flex-shrink: 0;
    transition: var(--transition);
}

/* hide visible labels — use tooltip on hover instead */
.header-action-btn > span:not(.cart-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Tooltip below the icon on hover */
.header-action-btn::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--black);
    color: #F7F3EF;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(198, 164, 126, 0.3);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 100;
}

.header-action-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.header-action-btn:hover,
.header-action-btn.active {
    color: var(--primary);
    background: rgba(255,255,255,0.08);
}

.header-action-btn i {
    font-size: 1rem;
}

.header-action-promo {
    color: #ff8585 !important;
}

.header-action-promo:hover {
    color: #ff6b6b !important;
}

/* Shop button - golden color */
.header-top-actions .header-action-btn:first-child {
    color: var(--primary);
}

.header-top-actions .header-action-btn:first-child:hover {
    color: var(--primary-dark);
    background: rgba(196, 164, 132, 0.15);
}

.header-action-cart {
    position: relative;
}

.header-action-cart .cart-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--black);
    box-sizing: content-box;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* CTA Button */
.header-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 0.5rem;
    background: var(--primary);
    color: var(--white);
    padding: 0.65rem 1.35rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 999px;
    border: 1px solid var(--primary);
    transition: var(--transition);
    white-space: nowrap;
}

.header-cta-btn:hover {
    background: transparent;
    color: var(--primary);
    transform: none;
}

.header-cta-btn i {
    font-size: 0.8rem;
}

/* Navigation Bar */
.header-nav {
    background: var(--white);
    border-bottom: 1px solid var(--gray);
    position: relative;
}

.header-nav .container {
    display: flex;
    justify-content: center;
    position: relative;
}

/* dropdowns that contain a mega menu position the popup relative to the whole nav bar (not the toggle) */
.nav-dropdown:has(.nav-mega-menu) {
    position: static;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-menu > a,
.nav-dropdown-toggle {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
    position: relative;
    padding: 1rem 1.25rem;
    white-space: nowrap;
    transition: var(--transition);
}

.nav-menu > a:hover,
.nav-menu > a.active,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
    color: var(--primary);
    background: var(--cream);
}

.nav-menu > a,
.nav-dropdown {
    position: relative;
}

/* Nav dividers */
.nav-menu > a:not(:last-child)::after,
.nav-dropdown:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--gray);
}

/* Navigation Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.nav-dropdown-toggle i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle i {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background-color: var(--white);
    box-shadow: var(--shadow-lg);
    border-radius: 0;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    transition: all 0.2s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
    background-color: var(--cream);
    color: var(--primary);
}

/* Mega Menu */
.nav-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 1180px;
    max-width: calc(100vw - 2rem);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    padding: 2rem 2.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
    display: grid;
    grid-template-columns: 0.8fr 1.4fr 1.5fr 1.3fr;
    gap: 0.5rem 2rem;
}

/* Label for item groups (non-clickable header within a column) */
.nav-mega-menu .mega-menu-group {
    display: block;
    padding: 0.75rem 0.75rem 0.35rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.2px;
    border-top: 1px solid rgba(198, 164, 126, 0.2);
    margin-top: 0.35rem;
    cursor: default;
}

/* Sub-items (indented under a group label) */
.nav-mega-menu .mega-menu-sub {
    padding-left: 1.75rem;
    position: relative;
}

.nav-mega-menu .mega-menu-sub::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--primary);
    opacity: 0.5;
}

.nav-dropdown:hover .nav-mega-menu {
    opacity: 1;
    visibility: visible;
}

.nav-mega-menu .mega-menu-column {
    display: flex;
    flex-direction: column;
}

.nav-mega-menu .mega-menu-title {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    padding: 0 0.75rem 0.5rem;
    margin: 0 0 0.5rem;
    border-bottom: 1px solid var(--cream);
}

.nav-mega-menu .mega-menu-item {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text);
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
}

.nav-mega-menu .mega-menu-item:hover {
    background-color: var(--cream);
    color: var(--primary);
}

.nav-mega-menu .mega-menu-item.has-sub {
    font-weight: 500;
    color: var(--black);
}

.nav-mega-menu .mega-menu-sub {
    padding-left: 1rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

.nav-mega-menu .mega-menu-sub:hover {
    color: var(--primary);
    background-color: var(--cream);
}

.nav-mega-menu .mega-menu-placeholder {
    font-style: italic;
    color: var(--text-muted);
}

/* Prevent dropdown overflow on right side */
.nav-dropdown:nth-last-child(-n+4) .nav-dropdown-menu,
.nav-dropdown:nth-last-child(-n+4) .nav-mega-menu {
    left: auto;
    right: 0;
}

/* Hide mobile extras on desktop */
.mobile-menu-extras {
    display: none;
}

    /* Mobile Menu Toggle - Hidden on desktop */
    .menu-toggle {
        display: none;
        width: 24px; /* Reduced from 28px */
        height: 18px; /* Reduced from 20px */
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10000; /* Above mobile menu */
    }
.menu-toggle span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--white);
    transition: all 0.3s ease;
}

.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }

.menu-toggle.active span {
    background-color: var(--black); /* Visible on white menu */
}

.menu-toggle.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* Body state when menu is open */
body.menu-open {
    overflow: hidden;
}

/* ===================================
   Hero Section - Sirpi Style
   =================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--cream);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 550px;
    padding: 120px 0;
}

.hero-subtitle {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-desc {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray);
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-light);
}

.hero-feature i {
    color: var(--primary);
    font-size: 0.875rem;
}

/* ===================================
   How Can We Help - Service Icons (Sirpi)
   =================================== */
.help-section {
    padding: 6rem 0;
    background-color: var(--white);
}

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

.help-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.help-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background-color: var(--white);
    border: 1px solid var(--gray);
    transition: var(--transition);
}

.help-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.help-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-icon svg {
    width: 60px;
    height: 60px;
    stroke: var(--text);
    stroke-width: 1;
    fill: none;
    transition: var(--transition);
}

.help-card:hover .help-icon svg {
    stroke: var(--primary);
}

.help-card h4 {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.help-card p {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.7;
}

/* ===================================
   Treatment Categories (Women/Men)
   =================================== */
.treatment-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.treatment-category {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.treatment-category img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.treatment-category:hover img {
    transform: scale(1.05);
}

.treatment-category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.treatment-category-overlay::before {
    content: '';
    width: 40px;
    height: 1px;
    background-color: var(--white);
}

.treatment-category h3 {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ===================================
   Before & After Section
   =================================== */
.before-after {
    padding: 6rem 0;
    background-color: var(--cream);
}

.before-after .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.before-after-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.before-after-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.comparison-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.comparison-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comparison-slider .after-image {
    clip-path: inset(0 50% 0 0);
}

.comparison-slider .slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background-color: var(--white);
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 10;
}

.comparison-slider .slider-handle::before {
    content: 'DRAG';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    color: var(--black);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* ===================================
   FAQ Section - Sirpi Style
   =================================== */
.faq-section {
    padding: 6rem 0;
    background-color: var(--gray-light);
}

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

.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--gray);
    margin-bottom: 0;
}

.faq-question {
    width: 100%;
    padding: 1.5rem 0;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

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

.faq-question i {
    font-size: 0.875rem;
    transition: var(--transition);
}

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

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 0 0 1.5rem;
    max-height: 500px;
}

.faq-answer p {
    color: var(--text-light);
    line-height: 1.8;
    margin: 0;
}

/* ===================================
   Team Section - Sirpi Style
   =================================== */
.team-section {
    padding: 6rem 0;
    background-color: var(--white);
}

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

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.team-card {
    text-align: center;
}

.team-card-image {
    width: 180px;
    height: 180px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--cream);
}

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

.team-card:hover .team-card-image img {
    transform: scale(1.1);
}

.team-card h4 {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.team-card .name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--black);
    margin-bottom: 0.25rem;
}

.team-card .role {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* ===================================
   Testimonials - Sirpi Style
   =================================== */
.testimonials {
    padding: 6rem 0;
    background-color: var(--cream);
}

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

.testimonial-card {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem;
}

.testimonial-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: var(--text);
}

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

.testimonial-stars {
    color: var(--primary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.testimonial-name {
    font-weight: 600;
    color: var(--black);
    font-size: 0.9375rem;
}

.testimonial-service {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Testimonials Navigation Dots */
.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--gray);
    cursor: pointer;
    transition: var(--transition);
}

.testimonial-dot.active {
    background-color: var(--primary);
}

/* ===================================
   Blog Section - Sirpi Style
   =================================== */
.blog-section {
    padding: 6rem 0;
    background-color: var(--white);
}

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

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.blog-card {
    background-color: var(--white);
    overflow: hidden;
}

.blog-card-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

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

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

.blog-card-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: var(--primary);
    color: var(--white);
    padding: 0.375rem 0.75rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.blog-card-content {
    padding: 1.5rem 0;
}

.blog-card h3 {
    font-size: 1.125rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-card h3 a:hover {
    color: var(--primary);
}

.blog-card p {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.7;
}

.blog-card-link {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-card-link:hover {
    color: var(--primary);
    gap: 0.75rem;
}

/* ===================================
   CTA Section - Sirpi Style
   =================================== */
.cta {
    padding: 5rem 0;
    background-color: var(--black);
    text-align: center;
}

.cta .section-subtitle {
    color: var(--primary-light);
}

.cta h2 {
    color: var(--white);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

.cta-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-top: 2rem;
}

.cta-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.9375rem;
}

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

/* ===================================
   Footer - Sirpi Style
   =================================== */
.footer {
    background-color: var(--black);
    color: var(--white);
    padding: 3rem 0 1.25rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-col h4 {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.footer-col p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
}

.footer-col a {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    transition: var(--transition);
}

.footer-col a:hover {
    color: var(--primary-light);
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 1rem;
    display: block;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
}

.footer-contact-item i {
    color: var(--primary);
    margin-top: 4px;
    font-size: 0.875rem;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0;
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    transition: var(--transition);
}

.footer-social a:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.4);
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    color: rgba(255,255,255,0.4);
}

.footer-bottom-links a:hover {
    color: var(--white);
}

/* ===================================
   Newsletter Popup - AESTO Premium Split Layout
   =================================== */
.newsletter-popup {
    position: fixed;
    inset: 0;
    background-color: rgba(30, 26, 22, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.newsletter-popup.active {
    opacity: 1;
    visibility: visible;
}

.newsletter-content {
    background-color: var(--white);
    max-width: 500px;
    width: 100%;
    padding: 3rem;
    position: relative;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.newsletter-content--split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    max-width: 920px;
    width: 100%;
    padding: 0;
    text-align: left;
    background-color: #F7F1E8;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(43, 37, 32, 0.35);
}

.newsletter-popup.active .newsletter-content {
    transform: scale(1);
}

.newsletter-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 999px;
    font-size: 1.05rem;
    color: #2B2520;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, transform 0.3s ease;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(43, 37, 32, 0.15);
}

.newsletter-close:hover {
    background: #fff;
    transform: rotate(90deg);
}

.newsletter-left {
    padding: 56px 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #F7F1E8;
}

.newsletter-brand {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.newsletter-brand__logo {
    height: 56px;
    width: auto;
    display: block;
    object-fit: contain;
}

.newsletter-content h3,
.newsletter-content #newsletterTitle {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.18;
    color: #2B2520;
    margin: 0 0 22px;
    letter-spacing: -0.005em;
}

.newsletter-divider {
    display: block;
    width: 56px;
    height: 1px;
    background: var(--primary);
    margin-bottom: 22px;
}

.newsletter-lead {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: #5b524a;
    margin: 0 0 26px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.newsletter-field {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #E5DCCE;
    border-radius: 2px;
    padding: 0 16px;
    transition: border-color 0.25s ease;
    overflow: hidden;
}

.newsletter-field:focus-within {
    border-color: var(--primary);
}

.newsletter-field i {
    color: var(--primary);
    font-size: 0.95rem;
    margin-right: 12px;
    flex-shrink: 0;
}

.newsletter-form input[type="email"] {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 16px 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.2;
    color: #2B2520;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none;
}

.newsletter-form input[type="email"]::placeholder {
    color: #9c9085;
    letter-spacing: 0.01em;
    opacity: 1;
}

.newsletter-submit {
    width: 100%;
    padding: 17px 1.5rem;
    background-color: #1F1A16;
    color: #FAF8F5;
    border: none;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.newsletter-submit:hover {
    background-color: #2B2520;
}

.newsletter-submit:active {
    transform: translateY(1px);
}

.newsletter-gdpr {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 0;
    font-family: var(--font-body);
    font-size: 0.74rem;
    line-height: 1.55;
    color: #7a6e63;
}

.newsletter-gdpr i {
    color: var(--primary);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.newsletter-right {
    position: relative;
    background: #2B2520;
    overflow: hidden;
    min-height: 460px;
}

.newsletter-right img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 860px) {
    .newsletter-popup {
        padding: 0;
        align-items: stretch;
    }
    .newsletter-content--split {
        grid-template-columns: 1fr;
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        height: 100%;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .newsletter-right {
        order: -1;
        min-height: 200px;
        max-height: 240px;
    }
    .newsletter-left {
        padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px));
        overflow-wrap: anywhere;
    }
    .newsletter-brand {
        margin-bottom: 20px;
    }
    .newsletter-brand__logo {
        height: 44px;
    }
    .newsletter-content h3,
    .newsletter-content #newsletterTitle {
        font-size: 1.35rem;
        margin-bottom: 14px;
    }
    .newsletter-lead {
        font-size: 0.9rem;
        margin-bottom: 18px;
    }
    .newsletter-gdpr {
        font-size: 0.72rem;
        padding-right: 4px;
    }
    .newsletter-close {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 14px);
        right: 14px;
        width: 44px;
        height: 44px;
        background: #fff;
        color: #1F1A16;
        font-size: 1.15rem;
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
        z-index: 2100;
    }
    .newsletter-close:hover {
        background: #fff;
    }
}

.newsletter-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.newsletter-social a {
    color: var(--text-light);
    font-size: 0.875rem;
}

.newsletter-social a:hover {
    color: var(--primary);
}

/* ===================================
   Services Section - Homepage
   =================================== */
.services {
    padding: 6rem 0;
    background-color: var(--cream);
}

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

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.service-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 4/5;
    cursor: pointer;
}

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

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

.service-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.service-card h3 {
    color: var(--white);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Why Us / Features Grid */
.why-us {
    padding: 6rem 0;
    background-color: var(--white);
}

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

.section-header h2 {
    margin-bottom: 1rem;
}

.section-header p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-light);
}

.section-divider {
    width: 60px;
    height: 2px;
    background-color: var(--primary);
    margin: 1rem auto 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--text);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--text);
    transition: var(--transition);
}

.feature-card:hover .feature-icon {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--cream);
}

.feature-card h4 {
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.feature-card p {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0;
}

/* About Section */
.about {
    padding: 6rem 0;
    background-color: var(--white);
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-content h2 {
    margin-bottom: 0.5rem;
}

.about-content p {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--text);
}

/* ===================================
   Scroll to Top Button
   =================================== */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background-color: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    box-shadow: var(--shadow-md);
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
}

/* ===================================
   Page Hero (Inner Pages)
   =================================== */
.page-hero {
    padding: 190px 0 80px;
    background-color: var(--cream);
    text-align: center;
}

.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.page-hero p {
    color: var(--text-light);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Breadcrumbs */
.breadcrumbs {
    padding: 1rem 0;
    background-color: var(--white);
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--gray);
}

.breadcrumbs a {
    color: var(--text-light);
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumbs span {
    color: var(--text-muted);
    margin: 0 0.5rem;
}

.breadcrumbs .current {
    color: var(--text);
}

/* ===================================
   Services Page
   =================================== */
.services-page {
    padding: 4rem 0;
    background-color: var(--white);
}

.services-page .services-grid {
    gap: 2rem;
}

.services-page .service-card {
    text-decoration: none;
    display: block;
}

.service-card-content {
    padding: 1.5rem;
    background-color: var(--white);
    border: 1px solid var(--gray);
    border-top: none;
}

.service-card-content h3 {
    color: var(--black);
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-card-content p {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.service-card-link {
    color: var(--primary);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.service-card-link:hover {
    gap: 0.75rem;
}

/* ===================================
   About Page
   =================================== */
.about-page {
    padding: 4rem 0;
}

.about-intro {
    max-width: 800px;
    margin: 0 auto 4rem;
    text-align: center;
}

.about-intro p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text);
}

/* Mission & Vision */
.mission-vision {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.mission-card,
.vision-card {
    padding: 2.5rem;
    background-color: var(--cream);
}

.mission-card h3,
.vision-card h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Certifications */
.certifications {
    padding: 4rem 0;
    text-align: center;
}

.cert-grid {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.cert-item i {
    font-size: 2.5rem;
    color: var(--primary);
}

.cert-item span {
    font-size: 0.8125rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===================================
   Testimonials Page
   =================================== */
.testimonials-page {
    padding: 4rem 0;
    background-color: var(--white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.testimonial-card-full {
    background-color: var(--cream);
    padding: 2rem;
}

.testimonial-card-full .testimonial-text {
    font-size: 1rem;
    font-family: var(--font-body);
    font-style: normal;
    margin-bottom: 1.5rem;
    text-align: left;
}

.testimonial-card-full .testimonial-author {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ===================================
   Contact Page
   =================================== */
.contact-page {
    padding: 4rem 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-form {
    background-color: var(--cream);
    padding: 2.5rem;
}

.contact-form h3 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--gray);
    background-color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
}

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

/* GDPR consent checkbox */
.form-group--consent { margin-bottom: 1.25rem; }
.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    line-height: 1.5;
    color: var(--text-light) !important;
}
.form-consent input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0.2rem 0 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
    border: 1px solid var(--gray) !important;
}
.form-consent-text { display: inline-block; }
.form-required { color: #c0392b; font-weight: 600; }

.contact-info-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-card {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--cream);
}

.contact-info-card i {
    font-size: 1.25rem;
    color: var(--primary);
    margin-top: 0.25rem;
}

.contact-info-card h4 {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-info-card p {
    color: var(--text-light);
    font-size: 0.9375rem;
    margin: 0;
}

/* Map */
.contact-map {
    margin-top: 1.5rem;
    overflow: hidden;
    height: 250px;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===================================
   Service Detail Page
   =================================== */
.service-detail {
    padding: 4rem 0;
}

.service-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}

.service-main h2 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-main p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.service-main ul {
    margin-bottom: 2rem;
}

.service-main ul li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text);
}

.service-main ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--primary);
    font-size: 0.875rem;
}

/* Service Sidebar */
.service-sidebar {
    position: sticky;
    top: 100px;
}

.service-price-card {
    background-color: var(--cream);
    padding: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.service-price-card .price-label {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.service-price-card .price {
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--primary);
    font-family: var(--font-heading);
}

.service-price-card .price span {
    font-size: 1rem;
    color: var(--text-light);
}

.service-info-box {
    background-color: var(--cream);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.service-info-box h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.service-info-box h4 i {
    color: var(--primary);
}

.service-info-box ul li {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-light);
    border-bottom: 1px solid var(--gray);
}

.service-info-box ul li:last-child {
    border-bottom: none;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 1024px) {
    /* Navigation adjustments for tablets */
    .nav-menu {
        gap: 0.75rem;
    }

    .nav-menu > a,
    .nav-dropdown-toggle {
        font-size: 0.6rem;
        letter-spacing: 0.2px;
    }

    .header-shop-link span,
    .header-portal span,
    .header-promo span {
        display: none;
    }

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

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

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

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

    .service-detail-grid {
        grid-template-columns: 1fr;
    }

    .service-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    /* Header Mobile Adjustments */
    .header-top {
        padding: 0 0.5rem;
    }

    .header-top-inner {
        min-height: 76px;
        height: auto;
        padding: 0.75rem 0;
        gap: 0.5rem;
    }

    .logo {
        font-size: 1.2rem;
    }

    .header-search {
        display: none;
    }

    .header-top-actions {
        gap: 0.25rem;
        margin-left: auto;
    }

    .header-action-btn {
        width: 38px;
        height: 38px;
    }

    .header-action-btn i {
        font-size: 1rem;
    }

    /* Hide tooltips on touch devices */
    .header-action-btn::after {
        display: none;
    }

    /* Hide some buttons on small screens */
    .header-action-promo,
    .header-action-btn[aria-label="Магазин"] {
        display: none;
    }

    .header-action-cart .cart-count {
        top: -4px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.62rem;
        border-radius: 999px;
    }

    .header-cta-btn {
        padding: 0.55rem 0.85rem;
        font-size: 0.6rem;
        gap: 0.35rem;
        margin-left: 0.25rem;
        letter-spacing: 1px;
    }

    .header-cta-btn i {
        font-size: 0.75rem;
    }



    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 26px;
        margin-left: 0.5rem;
        flex-shrink: 0;
        padding: 0;
    }
    .menu-toggle span {
        height: 2px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .header-top-inner {
        min-height: 64px;
        height: auto;
    }

    .logo {
        font-size: 1rem;
    }

    .header-action-btn {
        width: 34px;
        height: 34px;
    }

    .header-action-btn i {
        font-size: 0.95rem;
    }

    /* Hide portal button on very small screens */
    .header-top-actions .header-action-btn[aria-label="Моят AESTO профил"] {
        display: none;
    }

    .header-cta-btn {
        padding: 0.45rem 0.65rem;
        font-size: 0.55rem;
        letter-spacing: 0.5px;
    }
    .header-cta-btn i { font-size: 0.7rem; }

    .menu-toggle {
        width: 28px;
        height: 22px;
        margin-left: 0.35rem;
    }
    .menu-toggle span {
        height: 2px;
    }
}

@media (max-width: 768px) {
    /* Mobile Menu - Modern White Drawer */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%; /* Slightly narrower for depth */
        max-width: 360px;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start; /* Left align */
        padding: 80px 0 0; /* Space for top bar */
        gap: 0;
        z-index: 9999;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Modern ease */
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        display: flex !important;
        box-shadow: -5px 0 30px rgba(0,0,0,0.1);
    }

    .nav-menu > *,
    .nav-menu .nav-dropdown,
    .nav-menu .nav-dropdown-menu,
    .nav-menu .nav-mega-menu {
        max-width: 100%;
        box-sizing: border-box;
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    /* Main Links & Toggles - Visual Style */
    .nav-menu > a,
    .nav-dropdown-toggle {
        display: flex !important;
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        font-family: var(--font-heading);
        color: var(--black);
        border-bottom: 1px solid var(--gray-light);
        text-transform: none;
        letter-spacing: 0.5px;
        transition: color 0.2s; /* Only color transition here */
    }

    /* Animation Wrapper - Apply to direct children of nav-menu */
    .nav-menu > a,
    .nav-dropdown {
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Staggered Animation for Links */
    .nav-menu.active > a,
    .nav-menu.active .nav-dropdown {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-menu.active > *:nth-child(1) { transition-delay: 0.1s; }
    .nav-menu.active > *:nth-child(2) { transition-delay: 0.15s; }
    .nav-menu.active > *:nth-child(3) { transition-delay: 0.2s; }
    .nav-menu.active > *:nth-child(4) { transition-delay: 0.25s; }
    .nav-menu.active > *:nth-child(5) { transition-delay: 0.3s; }
    .nav-menu.active > *:nth-child(6) { transition-delay: 0.35s; }

    /* Dropdowns (Accordions) */
    .nav-dropdown {
        display: block !important;
        width: 100%;
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .nav-dropdown-toggle {
        justify-content: space-between;
    }

    .nav-dropdown-toggle i {
        font-size: 0.8rem;
        transition: transform 0.3s ease;
    }

    .nav-dropdown.active .nav-dropdown-toggle i {
        transform: rotate(180deg);
    }

    .nav-dropdown-menu,
    .nav-mega-menu {
        position: static;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        display: none; /* Hidden by default */
        background-color: var(--gray-light);
        width: 100%;
        min-width: unset;
        grid-template-columns: 1fr;
        transform: none;
    }

    .nav-dropdown.active .nav-dropdown-menu,
    .nav-dropdown.active .nav-mega-menu {
        display: block;
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .nav-dropdown-menu a,
    .nav-mega-menu .mega-menu-item {
        padding: 0.75rem 2rem 0.75rem 3rem; /* Indented */
        font-size: 0.95rem;
        color: var(--text-light);
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }

    /* Column titles in Mega Menu (mobile) */
    .nav-mega-menu .mega-menu-title {
        padding: 1rem 2rem 0.5rem;
        margin: 0;
        font-size: 0.7rem;
        letter-spacing: 2px;
        color: var(--primary);
        border-bottom: 1px solid var(--cream);
    }

    /* Sub-items in Mega Menu */
    .nav-mega-menu .mega-menu-sub {
        padding-left: 4rem;
        font-size: 0.9rem;
    }

    /* Mobile Menu Extras (Footer) */
    .mobile-menu-extras {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 2rem;
        background-color: var(--cream);
        margin-top: auto; /* Push to bottom */
    }

    /* Mobile Search */
    .mobile-menu-search {
        margin-bottom: 1.5rem;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .mobile-menu-search form {
        display: flex;
        background: var(--white);
        border: 1px solid var(--gray);
        border-radius: var(--radius-full);
        padding: 0.25rem 0.5rem;
        width: 100%;
        max-width: 280px; /* Limit width for centered look */
    }

    .mobile-menu-search input {
        flex: 1;
        border: none;
        padding: 0.5rem;
        outline: none;
        font-size: 0.9rem;
    }

    .mobile-menu-search button {
        background: none;
        border: none;
        color: var(--primary);
        padding: 0.5rem;
    }

    /* Mobile Socials */
    .mobile-menu-social {
        display: flex;
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .mobile-menu-social a {
        color: var(--primary);
        font-size: 1.25rem;
    }

    .mobile-menu-portal,
    .mobile-menu-phone {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text);
    }
    
    .mobile-menu-divider {
        display: none;
    }
    
    /* Active Link Styles */
    .nav-menu > a.active,
    .nav-dropdown-toggle.active {
        color: var(--primary);
        background-color: var(--cream);
    }
    
    /* Backdrop */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(2px);
        z-index: 998; /* Below header (1000) */
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 80px 0 60px;
    }

    .hero-bg {
        width: 100%;
        opacity: 0.2;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
        padding: 40px 0;
    }

    .hero-features {
        justify-content: center;
    }

    /* Treatment Categories */
    .treatment-categories {
        grid-template-columns: 1fr;
    }

    .treatment-category {
        height: 350px;
    }

    /* Grids */
    .features-grid,
    .help-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .services-grid,
    .blog-grid,
    .before-after-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .footer-contact-item {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
    }

    /* Pages */
    .page-hero {
        padding: 70px 0 40px;
    }

    .mission-vision,
    .testimonials-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-card-image {
        width: 150px;
        height: 150px;
    }

    /* CTA */
    .cta-contact {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .container {
        padding: 0 1rem;
    }

    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.75rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .newsletter-content {
        padding: 2rem 1.5rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input {
        border-right: 1px solid var(--gray);
        border-bottom: none;
    }
}

/* ===================================
   Animations
   =================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease forwards;
}

/* Smooth reveal for elements */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================
   Navigation Dropdown
   =================================== */
.nav-dropdown {
    position: relative;
}

.nav-dropdown > a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-dropdown > a i {
    font-size: 0.6rem;
    transition: var(--transition);
}

.nav-dropdown:hover > a i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    min-width: 180px;
    padding: 0.75rem 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1000;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    color: var(--text);
}

.dropdown-menu a:hover {
    background: var(--cream);
    color: var(--primary);
}

.dropdown-menu a i {
    width: 16px;
    color: var(--primary);
}

/* Header Cart */
.header-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 0.5rem;
    color: var(--text);
}

.header-cart:hover {
    color: var(--primary);
}

.cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ===================================
   Shop Pages
   =================================== */
.shop-categories {
    padding: 4rem 0;
}

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

.category-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.category-image {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.05);
}

.category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.6));
}

.category-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    color: var(--white);
}

.category-content h3 {
    font-size: 2rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.category-content p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.category-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.category-link i {
    transition: var(--transition);
}

.category-card:hover .category-link i {
    transform: translateX(5px);
}

/* Featured Products */
.featured-products {
    padding: 4rem 0;
    background: var(--cream);
}

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

.products-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.product-card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.product-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: var(--transition);
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.75rem;
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
    z-index: 2;
}

.product-badge.sale {
    background: #E53935;
}

.product-badge.new {
    background: #43A047;
}

.product-badge.hot {
    background: #FF9800;
}

.product-badge.service {
    background: var(--primary-dark);
}

.product-info {
    padding: 1.25rem;
}

.product-category {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.product-info h4 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.product-rating i {
    color: #FFC107;
    font-size: 0.75rem;
}

.product-rating span {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.service-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

.service-meta i {
    margin-right: 0.25rem;
    color: var(--primary);
}

.product-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.current-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--black);
}

.old-price {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.btn-add-cart {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

.btn-add-cart i {
    margin-right: 0.5rem;
}

.shop-cta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* Shop Benefits */
.shop-benefits {
    padding: 3rem 0;
    background: var(--white);
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

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

.benefit-item i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.benefit-item h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.benefit-item p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

/* Shop Page Layout */
.shop-page {
    padding: 3rem 0;
}

.shop-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

.shop-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

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

.filter-section h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray);
}

.filter-list li {
    margin-bottom: 0.5rem;
}

.filter-list a {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.filter-list a:hover,
.filter-list a.active {
    color: var(--primary);
}

.shop-content {
    min-width: 0;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray);
}

.results-count {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

.sort-select {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 1px solid var(--gray);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--white);
    cursor: pointer;
}

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

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--gray);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text);
    transition: var(--transition);
}

.page-link:hover,
.page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* ===================================
   Blog Pages
   =================================== */
.blog-page {
    padding: 3rem 0;
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
}

.blog-post.featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--gray);
}

.blog-post.featured .blog-post-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 400px;
}

.blog-post.featured .blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-post.featured:hover .blog-post-image img {
    transform: scale(1.05);
}

.blog-post-image {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.blog-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.75rem;
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
}

.blog-post-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.blog-meta i {
    margin-right: 0.35rem;
}

.blog-post h2 a,
.blog-post h3 a {
    color: var(--black);
}

.blog-post h2 a:hover,
.blog-post h3 a:hover {
    color: var(--primary);
}

.blog-post.featured h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.blog-post p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.read-more i {
    transition: var(--transition);
}

.read-more:hover i {
    transform: translateX(5px);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.blog-grid .blog-post {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.blog-grid .blog-post:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.blog-grid .blog-post-image {
    height: 200px;
    border-radius: 0;
}

.blog-grid .blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-grid .blog-post-content {
    padding: 1.5rem;
}

.blog-grid .blog-post h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.blog-grid .blog-post p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog Sidebar */
.blog-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: var(--cream);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.sidebar-widget h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray);
}

.search-form {
    display: flex;
    gap: 0;
}

.search-form input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-size: 0.9rem;
}

.search-form button {
    padding: 0.75rem 1rem;
    background: var(--primary);
    border: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--white);
    cursor: pointer;
}

.category-list li {
    margin-bottom: 0.5rem;
}

.category-list a {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.category-list a:hover {
    color: var(--primary);
}

.category-list span {
    color: var(--text-muted);
}

.popular-posts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.popular-post {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.popular-post img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.popular-post h5 {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.popular-post span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.newsletter-widget {
    background: var(--primary);
    color: var(--white);
}

.newsletter-widget h4 {
    color: var(--white);
    border-bottom-color: rgba(255,255,255,0.2);
}

.newsletter-widget p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.newsletter-sidebar-form input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.newsletter-sidebar-form .btn {
    width: 100%;
    background: var(--white);
    color: var(--primary);
}

.newsletter-sidebar-form .btn:hover {
    background: var(--cream);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-cloud a {
    padding: 0.35rem 0.75rem;
    background: var(--white);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: var(--text-light);
}

.tag-cloud a:hover {
    background: var(--primary);
    color: var(--white);
}

/* Blog Post Page */
.blog-post-page {
    padding: 3rem 0;
}

.blog-category-hero {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: rgba(255,255,255,0.2);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.blog-meta-hero {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.page-hero-small {
    padding: 3rem 0 2rem;
}

.blog-featured-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.blog-featured-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.blog-article {
    max-width: 100%;
}

.blog-content {
    font-size: 1.05rem;
    line-height: 1.8;
}

.blog-content .lead {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.blog-content h2 {
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
}

.blog-content ul,
.blog-content ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

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

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

.blog-content li {
    margin-bottom: 0.5rem;
}

.blog-content blockquote {
    margin: 2rem 0;
    padding: 2rem;
    background: var(--cream);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text);
}

.blog-content blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-style: normal;
    color: var(--text-muted);
}

.blog-content figure {
    margin: 2rem 0;
}

.blog-content figure img {
    width: 100%;
    border-radius: var(--radius-md);
}

.blog-content figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
}

.blog-cta-box {
    margin: 2.5rem 0;
    padding: 2rem;
    background: var(--primary);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--white);
}

.blog-cta-box h3 {
    color: var(--white);
    margin-bottom: 0.5rem;
}

.blog-cta-box p {
    opacity: 0.9;
    margin-bottom: 1.25rem;
}

.blog-cta-box .btn {
    background: var(--white);
    color: var(--primary);
}

.author-box {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--cream);
    border-radius: var(--radius-lg);
    margin: 3rem 0 2rem;
}

.author-box img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info h4 {
    margin-bottom: 0.5rem;
}

.author-info p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.author-social {
    display: flex;
    gap: 0.75rem;
}

.author-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--white);
    border-radius: 50%;
    color: var(--text);
}

.author-social a:hover {
    background: var(--primary);
    color: var(--white);
}

.share-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
}

.share-box span {
    font-weight: 500;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--white);
}

.share-btn.facebook { background: #1877F2; }
.share-btn.twitter { background: #1DA1F2; }
.share-btn.linkedin { background: #0A66C2; }
.share-btn.email { background: var(--primary); }

.related-posts {
    margin-top: 3rem;
}

.related-posts h3 {
    margin-bottom: 1.5rem;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.related-post {
    display: block;
    background: var(--cream);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.related-post img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.related-post h4 {
    padding: 1rem;
    font-size: 0.95rem;
}

/* ===================================
   Cart Page
   =================================== */
.cart-page {
    padding: 3rem 0;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    margin-bottom: 4rem;
}

.cart-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--cream);
    border-radius: var(--radius-lg);
}

.cart-empty i {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.cart-empty h3 {
    margin-bottom: 0.5rem;
}

.cart-empty p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.cart-empty-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.cart-items-list {
    display: none;
}

.cart-items-list.has-items {
    display: block;
}

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
    background: var(--white);
    border: 1px solid var(--gray);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.cart-item-image {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.cart-item-type {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--cream);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
    color: var(--primary);
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray);
    background: var(--white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.qty-btn:hover {
    background: var(--cream);
}

.cart-item-quantity span {
    width: 40px;
    text-align: center;
    font-weight: 500;
}

.cart-item-price {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}

.cart-item-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    transition: var(--transition);
}

.cart-item-remove:hover {
    color: #E53935;
}

.cart-summary {
    position: sticky;
    top: 100px;
    background: var(--cream);
    padding: 2rem;
    border-radius: var(--radius-lg);
    height: fit-content;
}

.cart-summary h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.summary-row.total {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
}

.promo-code {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 0.5rem;
}

.promo-code input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.promo-message {
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.promo-message.success {
    color: #43A047;
}

.promo-message.error {
    color: #E53935;
}

.summary-divider {
    height: 1px;
    background: var(--gray);
    margin: 1rem 0;
}

.btn-checkout {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    margin-top: 1rem;
}

.btn-checkout i {
    margin-right: 0.5rem;
}

.payment-methods {
    margin-top: 1.5rem;
    text-align: center;
}

.payment-methods p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.payment-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 1.5rem;
    color: var(--text-muted);
}

.cart-benefits {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray);
}

.cart-benefits .benefit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.cart-benefits .benefit i {
    color: var(--primary);
    width: 16px;
}

.cart-related {
    margin-top: 2rem;
}

/* ===================================
   Shop/Blog Responsive
   =================================== */
@media (max-width: 1024px) {
    .category-cards {
        grid-template-columns: 1fr;
    }

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

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

    .shop-layout {
        grid-template-columns: 200px 1fr;
    }

    .blog-layout {
        grid-template-columns: 1fr 280px;
    }

    .cart-layout {
        grid-template-columns: 1fr 320px;
    }
}

@media (max-width: 768px) {
    .nav-dropdown .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 0.5rem 0 0.5rem 1rem;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .nav-dropdown.active .dropdown-menu {
        display: block;
    }

    .header-cart {
        display: flex;
    }

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

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

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .filter-section {
        flex: 1;
        min-width: 140px;
        margin-bottom: 0;
    }

    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
    }

    .blog-post.featured {
        grid-template-columns: 1fr;
    }

    .blog-post.featured .blog-post-image {
        height: 250px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 1rem;
    }

    .cart-item-quantity,
    .cart-item-price {
        grid-column: 2;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
    }

    .author-box {
        flex-direction: column;
        text-align: center;
    }

    .author-social {
        justify-content: center;
    }

    .blog-meta-hero {
        flex-direction: column;
        gap: 0.5rem;
    }
}

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

    .products-grid-4 {
        grid-template-columns: 1fr;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .shop-cta {
        flex-direction: column;
    }

    .shop-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .category-image {
        height: 300px;
    }

    .cart-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cart-item-image {
        margin: 0 auto;
    }

    .cart-item-quantity {
        justify-content: center;
    }

    .cart-item-price {
        text-align: center;
    }

    .cart-empty-buttons {
        flex-direction: column;
    }
}

/* ===================================
   Header Offers Button
   =================================== */
.header-offers-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #E53935, #FF5722);
    color: var(--white);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-glow 2s ease-in-out infinite;
    transition: var(--transition);
}

.header-offers-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
    color: var(--white);
}

.header-offers-btn i {
    font-size: 0.75rem;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(229, 57, 53, 0.3); }
    50% { box-shadow: 0 0 20px rgba(229, 57, 53, 0.6); }
}

/* ===================================
   Header Shop Dropdown
   =================================== */
.header-shop-dropdown {
    position: relative;
}

.header-shop-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #E53935, #FF5722);
    color: var(--white);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-glow 2s ease-in-out infinite;
    transition: var(--transition);
    cursor: pointer;
}

.header-shop-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
    color: var(--white);
}

.header-shop-btn i {
    font-size: 0.75rem;
}

.header-shop-btn .fa-chevron-down {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.header-shop-dropdown:hover .fa-chevron-down {
    transform: rotate(180deg);
}

.header-shop-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 180px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.header-shop-dropdown:hover .header-shop-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-shop-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.header-shop-menu a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.header-shop-menu a i {
    font-size: 1rem;
    color: var(--primary);
}

@media (max-width: 768px) {
    .header-shop-btn span {
        display: none;
    }

    .header-shop-btn {
        padding: 0.5rem;
        width: 40px;
        height: 40px;
        justify-content: center;
    }

    .header-shop-btn .fa-chevron-down {
        display: none;
    }

    .header-shop-menu {
        position: fixed;
        top: auto;
        bottom: 70px;
        right: 10px;
        left: auto;
    }
}

/* ===================================
   Price List Page
   =================================== */
/* Legacy grid kept for any other consumers */
.price-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* New stacked layout used by price-list.php */
.price-page { padding-top: clamp(140px, 12vw, 200px); }
.price-page .price-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

/* Sticky quick navigation between categories */
.price-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.25rem 0;
    margin: 0 0 2.5rem;
    background: var(--cream);
    border-bottom: 1px solid var(--border-color);
}

.price-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--white);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.price-nav a i {
    color: var(--primary);
    font-size: 0.85rem;
    transition: var(--transition);
}

.price-nav a:hover,
.price-nav a.is-active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.price-nav a:hover i,
.price-nav a.is-active i {
    color: var(--white);
}

.price-category {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    scroll-margin-top: 90px;
}

.price-category h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin: 0;
    letter-spacing: 0.01em;
}

.price-category h3 i {
    font-size: 1rem;
    opacity: 0.9;
}

/* Subsection within a category */
.price-subsection {
    padding: 1.25rem 1.5rem 0.5rem;
}

.price-subsection + .price-subsection {
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
    padding-top: 1.5rem;
}

.price-subsection h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--black);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-color);
    letter-spacing: 0.02em;
}

/* Nested subgroup heading (e.g. JetPeel Classic, NeoStrata) inside a subsection */
.price-subgroup {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 1.25rem 0 0.4rem;
    padding: 0 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 1px dotted var(--border-color);
}

.price-subgroup:first-of-type {
    margin-top: 0.25rem;
}

.price-table {
    padding: 0;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.price-row:last-child {
    border-bottom: none;
}

.price-row:hover {
    background: var(--primary-light);
}

.price-service {
    font-weight: 500;
    color: var(--black);
    line-height: 1.45;
}

.price-amount {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 1.05rem;
    text-align: right;
    white-space: nowrap;
}

.price-amount small {
    display: inline-block;
    margin-left: 0.25rem;
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Laser epilation 4-column rows */
.price-row--epilation {
    display: grid;
    grid-template-columns: minmax(140px, 1.6fr) minmax(80px, 0.9fr) 1.1fr 1.1fr;
    gap: 1rem;
    align-items: center;
}

.price-row--epilation .ep-time {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
}

.price-row--epilation .ep-women,
.price-row--epilation .ep-men {
    text-align: right;
    font-weight: 700;
    color: var(--primary-dark);
    white-space: nowrap;
    font-size: 0.95rem;
}

.price-row--header {
    background: var(--cream);
    border-bottom: 1px solid var(--border-color);
}

.price-row--header span {
    color: var(--black);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.price-row--header .ep-women,
.price-row--header .ep-men {
    color: var(--black);
}

.price-row--header:hover {
    background: var(--cream);
}

.price-note {
    background: var(--primary-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}

.price-note p {
    margin: 0;
    color: var(--text-dark, var(--text));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.price-note i {
    color: var(--primary);
    font-size: 1.25rem;
}

/* ===================================
   Promo Offers Page
   =================================== */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.promo-card {
    background: var(--white);
    border: 1px solid #E9E2D6;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(43, 37, 32, 0.06);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(43, 37, 32, 0.1);
}

.promo-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(43, 37, 32, 0.88);
    color: var(--white);
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 10;
}

.promo-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

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

.promo-card:hover .promo-image img {
    transform: scale(1.05);
}

.promo-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Pin CTA button to bottom of card so every card lines up the same. */
.promo-content > .btn { margin-top: auto; }

.promo-kicker {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.promo-content h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.promo-content p {
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.promo-benefits {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.promo-benefits li::marker {
    color: var(--primary);
}

.promo-prices {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.promo-prices--single {
    padding-top: 0.25rem;
    border-top: 1px solid #E9E2D6;
}

.old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 1rem;
}

.new-price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
}

.new-price small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 400;
}

.promo-note {
    background: var(--cream);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid #E9E2D6;
}

.promo-note p {
    margin: 0;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.promo-note i {
    color: var(--primary);
    font-size: 1.25rem;
}

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

    .promo-grid {
        grid-template-columns: 1fr;
    }

    .price-note p,
    .promo-note p {
        flex-direction: column;
        text-align: center;
    }

    .price-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem 0;
        margin-bottom: 1.5rem;
    }
    .price-nav::-webkit-scrollbar {
        display: none;
    }
    .price-nav a {
        font-size: 0.85rem;
        padding: 0.5rem 0.9rem;
    }
    .price-category h3 {
        font-size: 1.2rem;
        padding: 1rem 1.1rem;
    }
    .price-subsection {
        padding: 1rem 1.1rem 0.25rem;
    }
    .price-row {
        padding: 0.75rem 0.15rem;
    }
    .price-amount {
        font-size: 0.95rem;
    }
    .price-amount small {
        display: block;
        margin-left: 0;
        margin-top: 0.1rem;
    }

    /* Mobile: stack epilation rows */
    .price-row--epilation {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.85rem 0.25rem;
    }
    .price-row--epilation .ep-time {
        order: 2;
        font-size: 0.8rem;
    }
    .price-row--epilation .ep-women,
    .price-row--epilation .ep-men {
        order: 3;
        text-align: left;
    }
    .price-row--epilation .ep-women::before,
    .price-row--epilation .ep-men::before {
        content: attr(data-label) ': ';
        color: var(--text);
        font-weight: 600;
    }
    .price-row--header {
        display: none;
    }
}

/* ===================================
   Offers Page
   =================================== */
.offers-hero {
    background: linear-gradient(135deg, #E53935 0%, #FF5722 100%);
    position: relative;
    overflow: hidden;
}

.offers-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: rotate(15deg);
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.2);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

/* Countdown Section */
.countdown-section {
    padding: 2rem 0;
    background: var(--cream);
}

.countdown-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 3rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-lg);
    color: var(--white);
}

.countdown-text h3 {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.countdown-text p {
    opacity: 0.9;
    margin: 0;
}

.countdown-timer {
    display: flex;
    gap: 1.5rem;
}

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

.countdown-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 1;
}

.countdown-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Featured Offer */
.featured-offer {
    padding: 4rem 0;
    background: var(--white);
}

.featured-offer-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background: var(--cream);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.featured-offer-image {
    position: relative;
    min-height: 450px;
}

.featured-offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer-discount-badge {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E53935;
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.4);
}

.featured-offer-content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.offer-tag {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    width: fit-content;
}

.featured-offer-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.featured-offer-content > p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.offer-includes {
    list-style: none;
    margin-bottom: 2rem;
}

.offer-includes li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.offer-includes i {
    color: var(--primary);
    width: 20px;
}

.offer-includes i.fa-gift {
    color: #E53935;
}

.featured-offer-content .offer-price {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.featured-offer-content .old-price {
    font-size: 1.25rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.featured-offer-content .current-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #E53935;
}

.save-badge {
    padding: 0.35rem 0.75rem;
    background: #43A047;
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

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

/* Offers Grid */
.offers-section {
    padding: 4rem 0;
    background: var(--gray-light);
}

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

.offer-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.offer-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.offer-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.offer-card:hover .offer-image img {
    transform: scale(1.05);
}

.offer-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: #E53935;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.offer-badge.sale {
    background: #FF9800;
}

.offer-type {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    padding: 0.35rem 0.75rem;
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
}

.offer-type.product {
    background: #1976D2;
}

.offer-content {
    padding: 1.5rem;
}

.offer-content h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.offer-content > p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.offer-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.offer-meta i {
    margin-right: 0.25rem;
    color: var(--primary);
}

.offer-content .offer-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.offer-content .old-price {
    font-size: 1rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.offer-content .current-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #E53935;
}

.offer-content .btn {
    width: 100%;
}

/* Bundle Offers */
.bundle-offers {
    padding: 4rem 0;
    background: var(--white);
}

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

.bundle-card {
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 2px solid transparent;
    transition: var(--transition);
}

.bundle-card:hover {
    border-color: var(--primary);
}

.bundle-card.featured {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--cream) 100%);
    border-color: var(--primary);
}

.bundle-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.bundle-save {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #E53935;
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-full);
    margin-bottom: 0.75rem;
}

.bundle-header h3 {
    font-size: 1.25rem;
}

.bundle-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bundle-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--white);
    border-radius: var(--radius-md);
}

.bundle-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.bundle-item-type {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
}

.bundle-item p {
    font-size: 0.85rem;
    margin: 0;
}

.bundle-plus {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-muted);
}

.bundle-price {
    margin-bottom: 1.5rem;
}

.bundle-old-price,
.bundle-new-price {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.bundle-old-price {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.bundle-old-price span:last-child {
    text-decoration: line-through;
}

.bundle-new-price {
    font-size: 1.1rem;
    font-weight: 600;
    border-top: 1px solid var(--gray);
    padding-top: 0.75rem;
}

.bundle-new-price span:last-child {
    color: #E53935;
    font-size: 1.25rem;
}

.bundle-card .btn {
    width: 100%;
}

/* Offers Newsletter */
.offers-newsletter {
    padding: 3rem 0;
    background: var(--cream);
}

.offers-newsletter-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.offers-newsletter-content > i {
    font-size: 2.5rem;
    color: var(--primary);
}

.offers-newsletter-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.offers-newsletter-content > div p {
    color: var(--text-light);
    margin: 0;
    font-size: 0.9rem;
}

.offers-newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.offers-newsletter-form input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray);
    border-radius: var(--radius-sm);
    width: 250px;
    font-size: 0.9rem;
}

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

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

    .featured-offer-card {
        grid-template-columns: 1fr;
    }

    .featured-offer-image {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .header-offers-btn span {
        display: none;
    }

    .header-offers-btn {
        padding: 0.5rem;
        width: 40px;
        height: 40px;
        justify-content: center;
    }

    .countdown-banner {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .countdown-timer {
        gap: 1rem;
    }

    .countdown-number {
        font-size: 1.75rem;
    }

    .offers-grid {
        grid-template-columns: 1fr;
    }

    .bundles-grid {
        grid-template-columns: 1fr;
    }

    .bundle-items {
        flex-direction: column;
    }

    .bundle-plus {
        transform: rotate(90deg);
    }

    .offers-newsletter-content {
        flex-direction: column;
        text-align: center;
    }

    .offers-newsletter-form {
        flex-direction: column;
        margin-left: 0;
        width: 100%;
    }

    .offers-newsletter-form input {
        width: 100%;
    }

    .featured-offer-content {
        padding: 2rem;
    }

    .featured-offer-content .current-price {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .offer-discount-badge {
        width: 60px;
        height: 60px;
        font-size: 1.1rem;
    }
}

/* ===================================
   Aura Reality Page - Custom Styles
   =================================== */

/* Aura Page - Matte Champagne / Taupe Variables */
.aura-page {
    --aura-dark: #2B2B2B;
    --aura-rose: #C6A47E;
    --aura-rose-light: #D9BE9B;
    --aura-rose-pale: #E8DED3;
    --aura-gradient: linear-gradient(135deg, #C6A47E 0%, #B89368 60%, #A88560 100%);
}

/* Hero Section */
.aura-hero {
    padding: 200px 0 0;
    background-color: var(--aura-rose-pale);
    text-align: center;
}

.aura-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--aura-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

.aura-hero-banner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.aura-hero-banner img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

/* Tab Navigation */
.aura-tabs {
    background-color: var(--aura-dark);
    position: sticky;
    top: 106px;
    z-index: 100;
}

.aura-tabs-inner {
    display: flex;
    justify-content: center;
    gap: 0;
}

.aura-tab {
    padding: 1.25rem 2.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.aura-tab:hover,
.aura-tab.active {
    color: #FFFFFF;
    border-bottom-color: var(--aura-rose);
}

/* Intro Section */
.aura-intro {
    padding: 5rem 0;
    background-color: #FFFFFF;
    text-align: center;
}

.aura-intro-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--aura-rose);
    margin-bottom: 1rem;
}

.aura-intro-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    color: var(--aura-dark);
    margin-bottom: 1.5rem;
}

.aura-intro-text {
    max-width: 800px;
    margin: 0 auto 2rem;
    color: var(--text-light);
    line-height: 1.8;
}

/* Aura Button */
.aura-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    background: var(--aura-gradient);
    color: #FFFFFF;
}

.aura-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(183, 110, 121, 0.35);
}

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

.aura-btn-outline:hover {
    background: var(--aura-gradient);
    border-color: transparent;
    color: #FFFFFF;
}

/* Grid Sections */
.aura-section {
    padding: 5rem 0;
}

.aura-section--alt {
    background-color: var(--aura-rose-pale);
}

.aura-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.aura-grid--reverse {
    direction: rtl;
}

.aura-grid--reverse > * {
    direction: ltr;
}

.aura-grid-image {
    aspect-ratio: 1;
    overflow: hidden;
    background-color: #E0E0E0;
}

.aura-grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aura-grid-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
    color: var(--aura-dark);
    margin-bottom: 1.5rem;
}

.aura-grid-content p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.aura-grid-content ul {
    margin-bottom: 2rem;
}

.aura-grid-content ul li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text);
}

.aura-grid-content ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--aura-rose);
    font-size: 0.875rem;
}

/* Video Section */
.aura-video {
    padding: 5rem 0;
    background-color: #FFFFFF;
}

.aura-video-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.aura-video-placeholder {
    aspect-ratio: 16/9;
    background-color: var(--aura-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.aura-video-placeholder i {
    font-size: 4rem;
    color: var(--aura-rose);
    opacity: 0.8;
}

.aura-video-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
    color: var(--aura-dark);
    margin-bottom: 1.5rem;
}

.aura-video-content p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.aura-video-content ul li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text);
}

.aura-video-content ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--aura-rose);
    font-size: 0.875rem;
}

/* Features Two Columns */
.aura-features {
    padding: 5rem 0;
    background-color: var(--aura-rose-pale);
}

.aura-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.aura-feature-card {
    background-color: #FFFFFF;
    padding: 2.5rem;
    text-align: center;
}

.aura-feature-card i {
    font-size: 2.5rem;
    color: var(--aura-rose);
    margin-bottom: 1.5rem;
}

.aura-feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--aura-dark);
    margin-bottom: 1.5rem;
}

.aura-feature-card ul {
    text-align: left;
}

.aura-feature-card ul li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    font-size: 0.9375rem;
}

.aura-feature-card ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--aura-rose);
    font-size: 0.75rem;
}

/* Suitable For Section */
.aura-suitable {
    padding: 5rem 0;
    background-color: #FFFFFF;
    text-align: center;
}

.aura-suitable h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--aura-dark);
    margin-bottom: 3rem;
}

.aura-suitable-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.aura-suitable-item {
    padding: 2rem 1.5rem;
    background-color: var(--aura-rose-pale);
    text-align: center;
}

.aura-suitable-item i {
    font-size: 2rem;
    color: var(--aura-rose);
    margin-bottom: 1rem;
}

.aura-suitable-item p {
    color: var(--aura-dark);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Pricing Section */
.aura-pricing {
    padding: 5rem 0;
    background-color: var(--aura-dark);
}

.aura-pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.aura-pricing-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
}

.aura-pricing-label {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--aura-rose-light);
    margin-bottom: 2rem;
}

.aura-pricing-table {
    margin-bottom: 2rem;
}

.aura-pricing-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.aura-pricing-row:last-child {
    border-bottom: none;
}

.aura-pricing-value {
    color: var(--aura-rose-light);
    font-weight: 500;
}

.aura-pricing-cta {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.aura-pricing-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 3rem;
}

.aura-pricing-logo img {
    max-width: 200px;
    opacity: 0.9;
}

.aura-pricing-logo-placeholder {
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

/* Clinic Images */
.aura-clinic {
    padding: 5rem 0;
    background-color: #FFFFFF;
}

.aura-clinic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.aura-clinic-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background-color: #E0E0E0;
}

.aura-clinic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contact Form */
.aura-contact {
    padding: 5rem 0;
    background-color: var(--aura-rose-pale);
}

.aura-contact-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.aura-contact h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--aura-dark);
    margin-bottom: 0.5rem;
}

.aura-contact p {
    color: var(--text-light);
    margin-bottom: 2rem;
}

.aura-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aura-form input,
.aura-form textarea {
    padding: 1rem 1.25rem;
    border: 1px solid rgba(31, 40, 66, 0.2);
    background-color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--text);
    transition: var(--transition);
}

.aura-form input:focus,
.aura-form textarea:focus {
    outline: none;
    border-color: var(--aura-rose);
}

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

.aura-form button {
    align-self: center;
    margin-top: 1rem;
}

/* Specialists Carousel */
.aura-specialists {
    padding: 5rem 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.aura-specialists h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--aura-dark);
    text-align: center;
    margin-bottom: 3rem;
}

.aura-specialists-track {
    display: flex;
    gap: 2rem;
    animation: auraScroll 20s linear infinite;
}

.aura-specialist-card {
    flex: 0 0 280px;
    text-align: center;
}

.aura-specialist-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: #E0E0E0;
}

.aura-specialist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aura-specialist-card h4 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--aura-dark);
    margin-bottom: 0.25rem;
}

.aura-specialist-card p {
    color: var(--aura-rose);
    font-size: 0.875rem;
}

@keyframes auraScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsive - Aura Reality */
@media (max-width: 1024px) {
    .aura-grid,
    .aura-video-wrapper,
    .aura-pricing-grid,
    .aura-features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .aura-grid--reverse {
        direction: ltr;
    }

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

@media (max-width: 768px) {
    .aura-hero {
        padding-top: 70px;
    }

    .aura-tabs {
        top: 56px;
    }

    .aura-hero-banner img {
        height: auto;
        aspect-ratio: 1;
    }

    .aura-tabs-inner {
        flex-wrap: wrap;
    }

    .aura-tab {
        padding: 1rem 1.5rem;
        font-size: 0.75rem;
        flex: 1 1 auto;
        text-align: center;
    }

    .aura-section {
        padding: 3rem 0;
    }

    .aura-grid-image {
        max-width: 400px;
        margin: 0 auto;
    }

    .aura-suitable-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .aura-clinic-grid {
        grid-template-columns: 1fr;
    }

    .aura-specialists-track {
        animation-duration: 15s;
    }

    .aura-specialist-card {
        flex: 0 0 220px;
    }
}

@media (max-width: 480px) {
    .aura-suitable-grid {
        grid-template-columns: 1fr;
    }

    .aura-tab {
        padding: 0.75rem 1rem;
        font-size: 0.6875rem;
    }
}

/* ===================================
   Dermal Fillers Page
   Uses homepage components (hero, help-grid, faq, cta)
   Only custom styles for unique sections below.
   =================================== */

/* Hero overlay tweak for fillers */
.fillers-hero .hero-bg {
    filter: brightness(0.55);
}

.fillers-hero .hero-content .hero-desc em {
    color: var(--primary);
    font-style: italic;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 1px;
}

/* Section header left variant */
.section-header--left {
    text-align: left;
}

.section-header--left .section-subtitle,
.section-header--left .section-title {
    text-align: left;
}

/* Two-column intro layout */
.fillers-intro {
    padding: 6rem 0;
    background: var(--white);
}

.fillers-two-col {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.fillers-two-col-text p {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 1.25rem;
}

.fillers-two-col-img img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Suitable For - indication grid (6 circles) */
.fillers-suitable-section {
    background: var(--cream);
}

.fillers-indication-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}

.fillers-indication {
    text-align: center;
    padding: 1rem;
    transition: var(--transition);
}

.fillers-indication-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--cream-dark);
    color: var(--primary);
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: var(--transition);
}

.fillers-indication:hover .fillers-indication-icon {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
}

.fillers-indication h4 {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.3px;
}

/* Face Mesh Banner */
.fillers-banner {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.fillers-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fillers-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(43,43,43,0.55) 0%, rgba(43,43,43,0.15) 60%, transparent 100%);
}

.fillers-banner-quote {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--white);
    font-style: italic;
    max-width: 600px;
    line-height: 1.3;
    margin: 0;
}

/* AESTO Method - Dark section with bg image */
.fillers-method {
    position: relative;
    padding: 7rem 0;
    color: var(--white);
    overflow: hidden;
    text-align: center;
}

.fillers-method-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.35) saturate(0.8);
    z-index: 0;
}

.fillers-method::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(43,43,43,0.7), rgba(43,43,43,0.85));
    z-index: 1;
}

.fillers-method .container {
    position: relative;
    z-index: 2;
}

.fillers-method-inner {
    max-width: 760px;
    margin: 0 auto;
}

.fillers-method-eyebrow {
    color: var(--primary) !important;
    margin-bottom: 1rem;
}

.fillers-method h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--white);
    margin-bottom: 2rem;
    letter-spacing: -0.5px;
}

.fillers-method p {
    color: rgba(255,255,255,0.85);
    line-height: 1.9;
    font-size: 1.0625rem;
    margin-bottom: 1.25rem;
}

.fillers-method-accent {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.5rem !important;
    color: var(--primary) !important;
    margin-top: 2.5rem !important;
    line-height: 1.5 !important;
}

/* Protocol */
.fillers-protocol {
    padding: 6rem 0;
    background: var(--white);
}

.fillers-protocol-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-top: 3rem;
}

.fillers-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--cream);
    align-items: start;
}

.fillers-step:first-child {
    border-top: none;
    padding-top: 0;
}

.fillers-step-num {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 300;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -1px;
}

.fillers-step-body h3 {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.5rem;
}

.fillers-step-body p {
    color: var(--text-light);
    line-height: 1.8;
    margin: 0;
}

.fillers-results {
    background: var(--cream);
    padding: 2.5rem;
    border-radius: var(--radius-md);
    position: sticky;
    top: 120px;
}

.fillers-results .section-subtitle {
    text-align: left;
    margin-bottom: 0.5rem;
}

.fillers-results h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--black);
    margin-bottom: 1.5rem;
}

.fillers-results ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.fillers-results li {
    padding: 0.625rem 0 0.625rem 1.75rem;
    position: relative;
    color: var(--text);
    border-bottom: 1px solid rgba(122,92,77,0.1);
}

.fillers-results li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.15rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.fillers-results li:last-child {
    border-bottom: none;
}

.fillers-results-note {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 1.5rem;
}

.fillers-results .btn {
    width: 100%;
}

/* Results showcase */
.fillers-results-showcase {
    padding: 0 0 6rem;
    background: var(--white);
}

.fillers-results-showcase img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Individual Plan */
.fillers-individual {
    padding: 6rem 0;
    background: var(--cream);
}

.fillers-individual-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.fillers-criteria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.fillers-criteria-item {
    padding: 2rem 1rem;
    background: var(--white);
    border-radius: var(--radius-md);
    text-align: center;
    transition: var(--transition);
}

.fillers-criteria-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.fillers-criteria-item i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.fillers-criteria-item h4 {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.fillers-closing-accent {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.625rem;
    color: var(--primary);
    margin-top: 2rem;
    line-height: 1.4;
}

/* Final CTA override - darker */
.fillers-final-cta {
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
}

.fillers-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(198,164,126,0.15) 0%, transparent 60%);
    z-index: 0;
}

.fillers-final-cta .container {
    position: relative;
    z-index: 1;
}

.fillers-final-cta h2 {
    font-style: italic;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 992px) {
    .fillers-two-col,
    .fillers-protocol-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

    .fillers-results {
        position: static;
    }

    .fillers-banner {
        height: 320px;
    }

    .fillers-criteria {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .fillers-intro,
    .fillers-protocol,
    .fillers-individual,
    .fillers-results-showcase {
        padding: 4rem 0;
    }

    .fillers-method {
        padding: 5rem 0;
    }

    .fillers-indication-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .fillers-indication-icon {
        width: 64px;
        height: 64px;
        font-size: 1.4rem;
    }

    .fillers-step {
        gap: 1.25rem;
        padding: 1.25rem 0;
    }

    .fillers-step-num {
        font-size: 2.25rem;
    }

    .fillers-banner {
        height: 260px;
    }

    .fillers-criteria {
        grid-template-columns: 1fr;
    }

    .fillers-results {
        padding: 1.75rem;
    }
}

/* ===================================
   SkinPen Page
   Extends fillers page styles, adds unique bits.
   =================================== */

/* Centered hero content variant */
.hero-content--center {
    margin: 0 auto;
    text-align: center;
    max-width: 780px;
}

.hero-content--center .hero-features {
    justify-content: center;
}

/* SkinPen split hero - text left, image right */
.skinpen-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px;
    margin-top: 80px; /* space for fixed header */
}

.skinpen-hero-text {
    background: var(--cream);
    display: flex;
    align-items: center;
    padding: 4rem 3rem;
}

.skinpen-hero-text-inner {
    max-width: 520px;
    margin-left: auto;
    padding-right: 2rem;
}

.skinpen-hero-text .hero-subtitle {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.25rem;
}

.skinpen-hero-text h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4.5vw, 3.75rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.skinpen-hero-tagline {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.skinpen-hero-tagline em {
    font-style: italic;
    color: var(--primary);
}

.skinpen-hero-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 440px;
}

.skinpen-hero-visual {
    position: relative;
    overflow: hidden;
    background: var(--cream-dark);
}

.skinpen-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.skinpen-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(232,222,211,0.4) 0%, transparent 25%);
    pointer-events: none;
}

@media (max-width: 992px) {
    .skinpen-hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .skinpen-hero-text {
        padding: 3rem 2rem;
    }

    .skinpen-hero-text-inner {
        margin: 0 auto;
        padding-right: 0;
        text-align: center;
    }

    .skinpen-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .skinpen-hero-visual {
        min-height: 380px;
    }
}

/* Reversed 2-col intro layout */
.fillers-two-col--reverse {
    direction: rtl;
}

.fillers-two-col--reverse > * {
    direction: ltr;
}

/* Alternate light section background */
.skinpen-light-section {
    background: var(--cream);
}

/* SkinPen steps grid - 5 vertical cards side by side */
.skinpen-steps {
    background: var(--white);
}

.skinpen-steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}

.skinpen-step-card {
    padding: 2rem 1.5rem;
    background: var(--cream);
    border-radius: var(--radius-md);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skinpen-step-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    background: var(--white);
    border: 1px solid var(--cream-dark);
}

.skinpen-step-card .skinpen-step-num {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -1px;
}

.skinpen-step-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--black);
    margin: 0;
}

.skinpen-step-card p {
    color: var(--text-light);
    font-size: 0.875rem;
    line-height: 1.7;
    margin: 0;
}

/* SkinPen pricing dark - tighter layout */
.skinpen-pricing .fillers-method-inner {
    max-width: 680px;
}

.skinpen-pricing h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

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

@media (max-width: 576px) {
    .skinpen-steps-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   Microneedling Page - Dark AESTO Protocol
   Gradient: #0F0F0F -> #1A1A1A -> #0A0A0A
   =================================== */

.mn-dark-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 20%, rgba(200, 178, 140, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0,0,0,0.55) 0%, transparent 60%),
        linear-gradient(180deg, #0E0E10 0%, #17171A 45%, #0B0B0D 100%);
    z-index: 0;
}

.mn-dark-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.mn-dark-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 140% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

.mn-btn {
    display: inline-block;
    padding: 0.95rem 2.25rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.35s ease;
}

.mn-btn--ghost:hover {
    background: #fff;
    color: #0F0F0F;
    border-color: #fff;
}

.mn-btn--large {
    padding: 1.1rem 2.75rem;
}

.mn-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--black);
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.mn-section-title--light {
    color: #EFE5D3;
    font-style: italic;
    font-weight: 300;
}

.mn-divider {
    width: 80px;
    height: 1px;
    background: var(--primary);
    margin-bottom: 2rem;
}

.mn-divider--center {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.mn-divider--light {
    background: linear-gradient(90deg, transparent 0%, rgba(220, 200, 165, 0.55) 50%, transparent 100%);
    height: 1px;
    width: 120px;
}

/* Hero */
.mn-hero {
    position: relative;
    min-height: 100vh;
    max-height: 820px;
    display: flex;
    align-items: center;
    padding: 200px 0 80px;
    margin-top: 0;
    overflow: hidden;
    background: #1E2024;
}
.mn-hero-image {
    top: 160px !important;
}

.mn-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.mn-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(30,32,36,0.92) 0%, rgba(30,32,36,0.7) 40%, rgba(30,32,36,0.1) 80%),
        linear-gradient(180deg, rgba(20,22,26,0.35) 0%, transparent 100%);
    z-index: 1;
}

.mn-hero-container {
    position: relative;
    z-index: 2;
}

.mn-hero-text {
    max-width: 580px;
    color: #fff;
}

.mn-hero-text h1 {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.mn-hero-text h1 span {
    display: block;
    font-size: 0.45em;
    font-weight: 300;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    margin-top: 0.5rem;
    font-family: var(--font-body);
}

.mn-hero-tagline {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
    letter-spacing: 0.3px;
}

.mn-hero-desc {
    font-size: 0.9rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
    max-width: 440px;
    margin-bottom: 2.5rem;
}

/* Intro section - light, text left, device right with gradient */
.mn-intro {
    padding: 5rem 0 2.5rem;
    background: #F7F2EC;
}

.mn-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.mn-intro-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--black);
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.mn-intro-text p {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 1rem;
}

.mn-intro-accent {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--text) !important;
    font-size: 1.1rem;
    padding-top: 0.5rem;
}

.mn-intro-device {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mn-intro-device-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #2B2D31 0%, #34363C 50%, #1E2024 100%);
    z-index: 0;
}

.mn-intro-device-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 60%);
}

.mn-intro-device img {
    position: relative;
    width: 80%;
    max-width: 420px;
    height: auto;
    margin: auto;
    display: block;
    padding: 2rem;
    object-fit: contain;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
}

/* Plain variant - transparent product image on cream background (no dark gradient) */
.mn-intro-device--plain {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    aspect-ratio: 16/10;
}
.mn-intro-device--plain img {
    width: 90%;
    max-width: 520px;
    padding: 0;
    filter: drop-shadow(0 18px 30px rgba(40, 40, 50, 0.18));
}

/* Suitable */
.mn-suitable {
    padding: 2.5rem 0 5rem;
    background: #F7F2EC;
    text-align: center;
}

.mn-suitable-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.mn-suitable-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    transition: var(--transition);
}

.mn-suitable-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid var(--cream-dark);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.5rem;
    transition: var(--transition);
}

.mn-suitable-item:hover .mn-suitable-icon {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-4px);
}

.mn-suitable-item p {
    font-size: 0.875rem;
    color: var(--text);
    margin: 0;
}

/* AESTO Method - dark */
.mn-method {
    position: relative;
    padding: 6rem 0 2.5rem;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.mn-method .container {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

.mn-method-text p {
    color: rgba(232, 223, 208, 0.78);
    line-height: 1.9;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

.mn-method-accent {
    font-family: var(--font-heading);
    font-style: italic;
    color: #EFE5D3 !important;
    font-size: 1.35rem !important;
    padding-top: 1.5rem;
    letter-spacing: 0.5px;
}

/* Protocol */
.mn-protocol {
    position: relative;
    padding: 2.5rem 0 6rem;
    overflow: hidden;
    color: #fff;
}

.mn-protocol .container {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

.mn-protocol-list {
    display: flex;
    flex-direction: column;
}

.mn-protocol-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid rgba(220, 200, 165, 0.18);
    align-items: baseline;
}

.mn-protocol-row:last-child {
    border-bottom: 1px solid rgba(220, 200, 165, 0.18);
}

.mn-protocol-num {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 300;
    color: rgba(239, 229, 211, 0.75);
    letter-spacing: 1px;
    font-style: italic;
}

.mn-protocol-body h3 {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 400;
    color: #EFE5D3;
    margin-bottom: 0.375rem;
    letter-spacing: 0.3px;
}

.mn-protocol-body p {
    color: rgba(232, 223, 208, 0.6);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

.mn-protocol-cta {
    text-align: center;
    margin-top: 3rem;
}

/* Results */
.mn-results {
    position: relative;
    padding: 5rem 0 6rem;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.mn-results .container {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.mn-results-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 2.5rem;
    display: inline-block;
    text-align: left;
}

.mn-results-list li {
    position: relative;
    padding: 0.625rem 0 0.625rem 1.75rem;
    color: rgba(232, 223, 208, 0.88);
    font-size: 1rem;
}

.mn-results-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C8B28C;
}

.mn-results-note {
    color: rgba(232, 223, 208, 0.6);
    font-style: italic;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
    font-size: 0.9rem;
}

/* Individual Plan */
.mn-individual {
    padding: 6rem 0;
    background: #F7F2EC;
}

.mn-individual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.mn-individual-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--black);
    margin-bottom: 1rem;
}

.mn-individual-text p {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 1rem;
}

.mn-individual-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.mn-individual-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Control - atmospheric dark with clinic bg */
.mn-control {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.mn-control-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.35) saturate(0.7);
    z-index: 0;
}

.mn-control-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30,32,36,0.72) 0%, rgba(43,45,49,0.88) 100%);
    z-index: 1;
}

.mn-control .container {
    position: relative;
    z-index: 2;
}

.mn-control-inner {
    max-width: 760px;
    margin: 0 auto;
}

.mn-control-inner p {
    color: rgba(255,255,255,0.8);
    line-height: 1.9;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.mn-control-accent {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.375rem !important;
    color: #fff !important;
    padding-top: 1.5rem;
}

/* Final CTA */
.mn-final-cta {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.mn-final-cta .container {
    position: relative;
    z-index: 1;
}

.mn-final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 400;
    color: #EFE5D3;
    line-height: 1.3;
    margin-bottom: 2.5rem;
    font-style: italic;
}

.mn-cta-contact {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.mn-cta-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(232, 223, 208, 0.7);
    font-size: 0.875rem;
}

.mn-cta-contact-item i {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 992px) {
    .mn-intro-grid,
    .mn-individual-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

    .mn-hero {
        min-height: auto;
        padding: 140px 0 60px;
    }
}

@media (max-width: 576px) {
    .mn-intro,
    .mn-suitable,
    .mn-method,
    .mn-protocol,
    .mn-results,
    .mn-individual,
    .mn-control,
    .mn-final-cta {
        padding: 4rem 0;
    }

    .mn-suitable-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .mn-protocol-row {
        grid-template-columns: 60px 1fr;
        gap: 1rem;
        padding: 1.25rem 0;
    }

    .mn-protocol-num {
        font-size: 1.5rem;
    }

    .mn-cta-contact {
        gap: 1.5rem;
    }
}

/* ============================================================
   AESTO HOMEPAGE — Medical Aesthetics Studio
   Palette: bg-main #E8DED3 · bg-secondary #CBB8A6 · accent #C6A47E
            dark #2B2B2B · brown #7A5C4D · white-soft #F7F3EF
   ============================================================ */

.aesto-hero,
.aesto-method,
.aesto-clinic,
.aesto-team,
.aesto-approach,
.aesto-cta {
    font-family: var(--font-body);
}

.aesto-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 2.5rem;
}

.aesto-eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 1px;
    background: var(--primary);
    transform: translateY(-50%);
}

.aesto-eyebrow--light {
    color: #E8DED3;
}

.aesto-eyebrow--light::before {
    background: rgba(232, 222, 211, 0.55);
}

.aesto-h2 {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    color: var(--black);
    letter-spacing: -0.5px;
    margin-bottom: 1.5rem;
}

.aesto-h2 em {
    font-style: italic;
    color: var(--primary-dark);
    font-weight: 400;
}

.aesto-hairline {
    width: 60px;
    height: 1px;
    background: var(--primary);
    margin-bottom: 2rem;
}

.aesto-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem 2.25rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid var(--black);
    background: transparent;
    color: var(--black);
    cursor: pointer;
    transition: all 0.4s ease;
    border-radius: 999px;
}

.aesto-btn i {
    font-size: 0.7rem;
    transition: transform 0.4s ease;
}

.aesto-btn:hover i {
    transform: translateX(6px);
}

.aesto-btn--dark {
    background: var(--black);
    color: #F7F3EF;
    border-color: var(--black);
}

.aesto-btn--dark:hover {
    background: transparent;
    color: var(--black);
}

.aesto-btn--light {
    border-color: #E8DED3;
    color: #F7F3EF;
}

.aesto-btn--light:hover {
    background: #F7F3EF;
    color: var(--black);
    border-color: #F7F3EF;
}

/* ---------- 1. HERO ---------- */
.aesto-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 78vh, 780px);
    padding: clamp(140px, 14vw, 200px) 0 clamp(3rem, 6vw, 5rem);
    background: #0C0907;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}

/* Full-bleed slider (lives behind the text) */
.aesto-hero-slider {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #0C0907;
}

.aesto-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1.4s ease, transform 9s ease;
    transform: scale(1.04);
    pointer-events: none;
    z-index: 1;
}

.aesto-hero-slide.is-active {
    opacity: 1;
    transform: scale(1.0);
    pointer-events: auto;
    z-index: 2;
}

/* Gradient overlay — strong on the left where text sits, light on the right */
.aesto-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(12,9,7,0.82) 0%, rgba(12,9,7,0.55) 35%, rgba(12,9,7,0.18) 70%, rgba(12,9,7,0.05) 100%),
        linear-gradient(180deg, rgba(122,92,77,0.12) 0%, rgba(12,9,7,0.30) 100%);
    pointer-events: none;
}

.aesto-hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.aesto-hero-content {
    max-width: 600px;
}

/* Eyebrow */
.aesto-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: rgba(198, 164, 126, 1);
    margin-bottom: 1.5rem;
}

/* Gold divider line under headline */
.aesto-hero-divider {
    width: 90px;
    height: 1px;
    background: rgba(198, 164, 126, 0.85);
    margin: 1.25rem 0 1.75rem;
}

.aesto-hero-desc {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
    margin: 0 0 2.25rem;
}

.aesto-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* Primary CTA — solid gold */
.aesto-hero-btn--primary {
    background: rgba(198, 164, 126, 1);
    color: #0C0907;
    border-color: rgba(198, 164, 126, 1);
}
.aesto-hero-btn--primary:hover {
    background: transparent;
    color: #fff;
    border-color: rgba(198, 164, 126, 1);
}

/* Outline CTA — gold border */
.aesto-hero-btn--outline {
    background: transparent;
    color: rgba(198, 164, 126, 1);
    border-color: rgba(198, 164, 126, 1);
}
.aesto-hero-btn--outline:hover {
    background: rgba(198, 164, 126, 1);
    color: #0C0907;
}

.aesto-hero-slider-cta {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 2.1rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    background: rgba(43, 43, 43, 0.82);
    color: #F7F3EF;
    border: 1px solid rgba(239, 217, 199, 0.35);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    transition: all 0.35s ease;
    text-decoration: none;
    white-space: nowrap;
}

.aesto-hero-slider-cta:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateX(-50%) translateY(-2px);
}

.aesto-hero-slider-cta i {
    font-size: 0.7rem;
    transition: transform 0.35s ease;
}

.aesto-hero-slider-cta:hover i {
    transform: translateX(4px);
}

.aesto-hero-slider-dots {
    position: absolute;
    bottom: 2rem;
    right: clamp(1.25rem, 4vw, 3rem);
    z-index: 3;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(12, 9, 7, 0.45);
    backdrop-filter: blur(6px);
    border-radius: 999px;
}

.aesto-hero-slider-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    background: rgba(239, 217, 199, 0.4);
    cursor: pointer;
    transition: all 0.35s ease;
    border-radius: 50% !important;
}

.aesto-hero-slider-dots button:hover {
    background: rgba(239, 217, 199, 0.7);
}

.aesto-hero-slider-dots button.is-active {
    background: #EFD9C7;
    width: 28px;
    border-radius: 999px !important;
}

.aesto-hero-text {
    position: relative;
    z-index: 2;
    padding-left: 0.5rem;
}

.aesto-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    line-height: 1.08;
    color: #fff;
    letter-spacing: -0.5px;
    margin: 0;
}

.aesto-hero-title em {
    font-style: italic;
    font-weight: 300;
    color: rgba(198, 164, 126, 1);
    letter-spacing: 0;
}

.aesto-hero-scroll {
    position: absolute;
    left: 2.5rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-light);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.aesto-hero-scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--primary) 30%, var(--primary) 70%, transparent);
    animation: aestoScroll 2.2s ease-in-out infinite;
}

@keyframes aestoScroll {
    0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- 2. AESTO МЕТОД ---------- */
.aesto-method {
    padding: 4.5rem 0;
    background: #fff;
    position: relative;
}

.aesto-method .container {
    max-width: 1200px;
}

.aesto-method-head {
    text-align: center;
    margin-bottom: 3.5rem;
}

.aesto-method-head .aesto-eyebrow {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.aesto-method-head .aesto-eyebrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 32px;
    height: 1px;
    background: var(--primary);
    transform: translateY(-50%);
}

.aesto-method-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.aesto-method-text {
    max-width: 640px;
    margin: 0 auto 3rem;
    text-align: center;
}

.aesto-method-lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--black);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.aesto-method-text p:not(.aesto-method-lead) {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1rem;
}

.aesto-method-interactive {
    background: var(--cream);
    padding: 3rem 2rem 3.5rem;
    border-radius: 4px;
    position: relative;
}

.aesto-method-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.aesto-method-tab {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid rgba(198, 164, 126, 0.4);
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aesto-method-tab:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.aesto-method-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: scale(1.05);
}

.aesto-method-stage {
    position: relative;
    min-height: 400px;
}

.aesto-method-card {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.55s ease;
}

.aesto-method-card.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.aesto-method-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.aesto-method-images figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.aesto-method-images figure img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: saturate(0.9);
}

.aesto-method-images figcaption {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(43, 43, 43, 0.6);
    padding: 0.35rem 0.85rem;
    backdrop-filter: blur(4px);
}

.aesto-method-caption {
    text-align: center;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text);
    margin: 0;
}

/* ---------- 3. AESTO CLINIC ---------- */
.aesto-clinic {
    padding: 4.5rem 0;
    background: var(--cream);
    position: relative;
    overflow: hidden;
}

.aesto-clinic::before {
    content: "";
    position: absolute;
    top: 10%;
    right: -200px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(198, 164, 126, 0.25);
    pointer-events: none;
}

.aesto-clinic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.aesto-clinic-visual {
    position: relative;
}

.aesto-clinic-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 280px 280px 8px 8px;
    filter: saturate(0.9);
}

.aesto-clinic-arc {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 180px;
    height: 180px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
}

.aesto-clinic-text p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.aesto-clinic-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
    line-height: 1.65 !important;
    color: var(--text) !important;
    font-weight: 400;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem !important;
    max-width: 560px;
}

.aesto-clinic-accent {
    font-family: var(--font-heading) !important;
    font-style: italic !important;
    font-size: 1.35rem !important;
    color: var(--black) !important;
    line-height: 1.5 !important;
    padding-top: 1rem;
    border-top: 1px solid rgba(122, 92, 77, 0.2);
    margin-top: 2rem !important;
}

/* ---------- 4. ЕКИП ---------- */
.aesto-team {
    padding: 4.5rem 0;
    background: #F7F3EF;
}

.aesto-team-head {
    text-align: center;
    margin-bottom: 3rem;
}

.aesto-team-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.aesto-team-text {
    max-width: 680px;
    margin: 0 auto 2.75rem;
    text-align: center;
}

.aesto-team-text p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1rem;
}

.aesto-team-thin {
    font-family: var(--font-heading);
    font-size: 1.15rem !important;
    color: var(--primary-dark) !important;
    letter-spacing: 0.5px;
    padding-top: 1.5rem;
}

.aesto-team-circles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}

.aesto-team-circle {
    text-align: center;
    transition: transform 0.5s ease;
}

.aesto-team-circle:hover {
    transform: translateY(-6px);
}

.aesto-team-photo {
    width: 180px;
    height: 180px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(198, 164, 126, 0.3);
    padding: 6px;
    background: #fff;
}

.aesto-team-photo::before {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: border-color 0.5s ease;
}

.aesto-team-circle:hover .aesto-team-photo::before {
    border-color: var(--primary);
}

.aesto-team-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(0.2) saturate(0.9);
    transition: filter 0.5s ease;
}

.aesto-team-circle:hover .aesto-team-photo img {
    filter: grayscale(0) saturate(1);
}

.aesto-team-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--black);
    margin-bottom: 0.25rem;
    font-weight: 400;
}

.aesto-team-role {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-light);
}

/* ---------- 5. ПОДХОД / ФИЛОСОФИЯ ---------- */
.aesto-approach {
    padding: 4.5rem 0;
    background: #fff;
}

.aesto-approach-head {
    text-align: center;
    margin-bottom: 2.75rem;
}

.aesto-approach-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.aesto-approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.aesto-approach-block {
    padding: 1.5rem 1rem 1rem;
    text-align: center;
    transition: transform 0.5s ease;
}

.aesto-approach-block:hover {
    transform: translateY(-6px);
}

.aesto-approach-icon {
    width: 140px;
    height: 140px;
    margin: 0 auto 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease;
}

.aesto-approach-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.aesto-approach-block:hover .aesto-approach-icon {
    transform: scale(1.06);
}

.aesto-approach-caption {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
}

.aesto-approach-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 300;
}

.aesto-approach-label {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--black);
    letter-spacing: 0.3px;
}

.aesto-approach-desc {
    margin: 1rem auto 0;
    max-width: 320px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
}

/* ---------- CTA ---------- */
.aesto-cta {
    padding: 5rem 0;
    background: var(--black);
    position: relative;
    overflow: hidden;
}

.aesto-cta::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198,164,126,0.12) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.aesto-cta-inner {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.aesto-cta-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    color: #F7F3EF;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 1.5rem 0 2.5rem;
}

.aesto-cta-title em {
    font-style: italic;
    color: var(--primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .aesto-hero {
        padding: clamp(130px, 16vw, 170px) 0 3rem;
        min-height: clamp(500px, 80vw, 640px);
    }

    .aesto-hero-content { max-width: 100%; }

    .aesto-hero-slider-dots {
        bottom: 1.25rem;
        right: 1.25rem;
    }

    .aesto-hero-scroll {
        display: none;
    }

    .aesto-clinic-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .aesto-clinic-visual img {
        max-width: 460px;
        margin: 0 auto;
    }

    .aesto-team-circles {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .aesto-approach-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .aesto-method,
    .aesto-clinic,
    .aesto-team,
    .aesto-approach,
    .aesto-cta {
        padding: 5rem 0;
    }
}

@media (max-width: 576px) {
    .aesto-hero-cta { flex-direction: column; align-items: stretch; }
    .aesto-hero-cta .aesto-btn { justify-content: center; }

    .aesto-hero-slider-dots {
        padding: 0.35rem 0.5rem;
        gap: 0.35rem;
    }

    .aesto-hero-slider-dots button {
        width: 6px;
        height: 6px;
    }

    .aesto-hero-slider-dots button.is-active {
        width: 20px;
    }

    .aesto-method-tab {
        width: 74px;
        height: 74px;
        font-size: 0.75rem;
    }

    .aesto-method-images {
        grid-template-columns: 1fr;
    }

    .aesto-team-circles {
        grid-template-columns: 1fr;
    }

    .aesto-team-photo {
        width: 150px;
        height: 150px;
    }
}

/* ============================================================
   AESTO SHOWCASE — Interior gallery (homepage)
   ============================================================ */
.aesto-showcase {
    padding: 4.5rem 0;
    background: #F7F3EF;
    position: relative;
    overflow: hidden;
}

.aesto-showcase::before {
    content: "";
    position: absolute;
    top: 8%;
    left: -180px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(198, 164, 126, 0.2);
    pointer-events: none;
}

.aesto-showcase::after {
    content: "";
    position: absolute;
    bottom: 10%;
    right: -220px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(203, 184, 166, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.aesto-showcase-head {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.aesto-showcase-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.aesto-showcase-lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text);
    line-height: 1.7;
    margin-top: 1rem;
}

/* Masonry showcase — images keep native aspect ratio (no crop) */
.aesto-showcase-grid {
    column-count: 3;
    column-gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.aesto-showcase-item {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--cream);
    cursor: pointer;
    margin-bottom: 1.25rem;
    break-inside: avoid;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
    box-shadow: 0 8px 24px -12px rgba(43, 43, 43, 0.15);
}

.aesto-showcase-item img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.94);
    transition: transform 1.1s ease, filter 0.6s ease;
}

.aesto-showcase-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(43, 43, 43, 0.55) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.aesto-showcase-label {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    color: #F7F3EF;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
    z-index: 2;
    pointer-events: none;
}

.aesto-showcase-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px -14px rgba(43, 43, 43, 0.22);
}

.aesto-showcase-item:hover img {
    transform: scale(1.04);
    filter: saturate(1);
}

.aesto-showcase-item:hover::after {
    opacity: 1;
}

.aesto-showcase-item:hover .aesto-showcase-label {
    opacity: 1;
    transform: translateY(0);
}

/* Shape variations — gentle curves only, full image always visible */
.aesto-shape--soft {
    border-radius: 24px;
}

.aesto-shape--arch {
    /* Cathedral arch — rounded top, squared bottom */
    border-radius: 180px 180px 24px 24px;
}

.aesto-shape--arch-reverse {
    /* Inverted arch — squared top, rounded bottom */
    border-radius: 24px 24px 180px 180px;
}

.aesto-shape--pill {
    /* Long pill — heavy side-curves */
    border-radius: 140px / 24px;
}

/* ---------- Lightbox ---------- */
.aesto-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, 0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    padding: 2rem;
}

.aesto-lightbox.is-open {
    display: flex;
    animation: aestoFade 0.35s ease;
}

@keyframes aestoFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.aesto-lightbox-stage {
    margin: 0;
    max-width: min(1200px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.aesto-lightbox-stage img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.aesto-lightbox-stage figcaption {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    color: #E8DED3;
    letter-spacing: 1px;
}

.aesto-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(232, 222, 211, 0.4);
    background: transparent;
    color: #E8DED3;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aesto-lightbox-close:hover {
    background: #E8DED3;
    color: #2B2B2B;
    transform: rotate(90deg);
}

.aesto-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(232, 222, 211, 0.35);
    background: transparent;
    color: #E8DED3;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.aesto-lightbox-nav:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.aesto-lightbox-nav--prev { left: 2rem; }
.aesto-lightbox-nav--next { right: 2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .aesto-showcase {
        padding: 5rem 0;
    }
    .aesto-showcase-grid {
        column-count: 2;
        column-gap: 1rem;
    }
    .aesto-showcase-item {
        margin-bottom: 1rem;
    }
    .aesto-shape--arch { border-radius: 140px 140px 20px 20px; }
    .aesto-shape--arch-reverse { border-radius: 20px 20px 140px 140px; }
    .aesto-lightbox-nav--prev { left: 0.75rem; }
    .aesto-lightbox-nav--next { right: 0.75rem; }
}

@media (max-width: 576px) {
    .aesto-showcase-grid {
        column-count: 1;
    }
    .aesto-shape--arch { border-radius: 110px 110px 18px 18px; }
    .aesto-shape--arch-reverse { border-radius: 18px 18px 110px 110px; }
    .aesto-shape--soft { border-radius: 18px; }
}

/* ============================================================
   AESTO Logo — header & footer
   ============================================================ */
.aesto-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-indent: -9999px;
    width: auto;
    height: 40px;
    margin-left: -1rem;
}

.aesto-logo img {
    height: 100%;
    width: auto;
    display: block;
    filter: none;
    /* takes the taupe SVG and shifts it to a soft warm beige that reads on dark */
    transition: opacity 0.3s ease;
    opacity: 0.95;
}

.aesto-logo:hover img {
    opacity: 1;
}

.aesto-footer-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-indent: -9999px;
    width: auto;
    height: 64px;
    margin-bottom: 1.5rem;
}

.aesto-footer-logo img {
    height: 100%;
    width: auto;
    display: block;
    filter: none;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .aesto-logo { height: 44px; }
    .aesto-footer-logo { height: 56px; }
}

@media (max-width: 480px) {
    .aesto-logo { height: 40px; }
}

/* ============================================================
   AESTO Header Phone — next to logo
   ============================================================ */
.aesto-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    margin-left: 1.25rem;
    color: #F7F3EF;
    border-left: 1px solid rgba(247, 243, 239, 0.18);
    text-decoration: none;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.aesto-header-phone:hover {
    color: var(--primary);
}

.aesto-header-phone-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(198, 164, 126, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 0.85rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.aesto-header-phone:hover .aesto-header-phone-icon {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: rotate(15deg);
}

.aesto-header-phone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.aesto-header-phone-label {
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(247, 243, 239, 0.55);
    margin-bottom: 2px;
}

.aesto-header-phone-num {
    font-family: 'Tenor Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #F7F3EF;
}

@media (max-width: 992px) {
    .aesto-header-phone {
        margin-left: 0.75rem;
        padding: 0.35rem 0.5rem 0.35rem 0.5rem;
        gap: 0.6rem;
        border-left: none;
    }
    .aesto-header-phone-icon {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }
    .aesto-header-phone-text {
        display: none;
    }
}

/* ============================================================
   Global button rounding — "no sharp angles" design guideline
   Applied last to ensure override without touching individual rules.
   ============================================================ */
.btn,
.btn-primary,
.btn-outline,
.btn-white,
.btn-black,
.btn-secondary,
.btn-ghost,
.aesto-btn,
.aesto-btn--dark,
.aesto-btn--light,
.mn-btn,
.header-cta-btn,
.newsletter-form button,
.newsletter-form input,
.contact-form button,
.contact-form input[type="submit"],
form button[type="submit"],
input[type="submit"],
.submit-btn,
.faq-question,
.blog-card-link,
.service-card-link,
.offers-newsletter-form input,
.offers-newsletter-form button,
.filter-btn,
.tab-btn {
    border-radius: 999px !important;
}

/* Newsletter: keep input + button as one connected pill */
.newsletter-form {
    border-radius: 999px;
    overflow: hidden;
}
.newsletter-form input {
    border-radius: 999px 0 0 999px !important;
    border-right: none !important;
}
.newsletter-form button {
    border-radius: 0 999px 999px 0 !important;
}

/* Icon/action buttons stay circular (already 50% radius) */
.scroll-top,
.menu-toggle,
.header-action-btn,
.aesto-header-phone-icon {
    border-radius: 50% !important;
}

/* Soften card & input corners slightly too (no harsh squares) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
    border-radius: 12px;
}

/* Hero/intro images keep their existing arc shapes — don't override */

/* ===================================
   SkinPen page - corrections (AESTO)
   Scoped to .skinpen-* so nothing else is affected
   =================================== */

/* 5. Step icons — replace numbered spans with circular illustrations above the title.
   Keeps the "01 Анализ" inline number beside the heading (per approved mockup). */
.skinpen-steps .skinpen-step-card {
    text-align: center;
    align-items: center;
    padding: 2.25rem 1.25rem 1.75rem;
}
.skinpen-steps .skinpen-step-icon {
    width: 140px;
    height: 140px;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skinpen-steps .skinpen-step-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.skinpen-steps .skinpen-step-card h3 {
    margin-top: 0.25rem;
}
.skinpen-steps .skinpen-step-card h3 .skinpen-step-num {
    display: inline;
    font-family: var(--font-heading);
    font-size: 1.15em;
    font-weight: 400;
    color: var(--primary);
    margin-right: 0.35em;
    letter-spacing: 0;
}

/* 10. Related procedures — square photo cards replacing icon cards */
.skinpen-related .help-card {
    padding: 0 0 1.75rem;
    overflow: hidden;
}
.skinpen-related .help-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0 0 1.25rem;
    background: var(--cream);
}
.skinpen-related .help-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.skinpen-related .help-card:hover .help-card-img img {
    transform: scale(1.04);
}
.skinpen-related .help-card h4,
.skinpen-related .help-card p {
    padding: 0 1.25rem;
}

/* 3. Fix cropped banner in "Колко процедури" section — image was getting cropped
   by the grid cell. Keep natural aspect ratio. */
.skinpen-hero-split + .fillers-intro .fillers-two-col-img,
.skinpen-light-section .fillers-two-col-img {
    display: flex;
    align-items: center;
    justify-content: center;
}
.skinpen-hero-split + .fillers-intro .fillers-two-col-img img,
.skinpen-light-section .fillers-two-col-img img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    object-position: center;
}

/* Product variant — transparent PNG, no card frame, subtle drop-shadow */
.fillers-two-col-img--product {
    background: transparent;
    padding: 1rem 0;
}
.fillers-two-col-img--product img,
.skinpen-light-section .fillers-two-col-img--product img {
    width: 100%;
    max-width: 520px;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    filter: drop-shadow(0 18px 30px rgba(40, 40, 50, 0.18));
}

/* Spacing cleanup — tighter transitions between SkinPen sections
   (items 3, 4, 7, 8, 9, 11) */
.skinpen-hero-split + .fillers-intro {
    padding-top: 4.5rem;
    padding-bottom: 3.5rem;
}
.skinpen-light-section {
    padding: 3.5rem 0;
}
body .fillers-suitable-section {
    padding: 3.5rem 0 3rem;
}
body .skinpen-steps {
    padding: 3rem 0 4.5rem;
}
body .skinpen-pricing {
    padding: 5rem 0;
}
body .skinpen-pricing + .faq-section {
    padding: 3.75rem 0 3.25rem;
}
body .faq-section + .skinpen-related {
    padding: 3.25rem 0 3.75rem;
}
body .skinpen-related + .team-section {
    padding: 3.25rem 0 4rem;
}

/* Keep section-header spacing tight when eyebrow is absent */
.skinpen-steps .section-header,
.skinpen-related .section-header,
.skinpen-pricing .fillers-method-inner,
.faq-section .section-header {
    margin-bottom: 2.5rem;
}

@media (max-width: 992px) {
    .skinpen-steps .skinpen-step-icon {
        width: 120px;
        height: 120px;
    }
}
@media (max-width: 576px) {
    .skinpen-steps .skinpen-step-icon {
        width: 110px;
        height: 110px;
    }
    body .skinpen-steps,
    body .skinpen-pricing,
    body .faq-section,
    body .skinpen-related,
    body .team-section {
        padding: 3rem 0;
    }
}

/* ===================================
   Fillers page - corrections (AESTO)
   Scoped to .fillers-hero-banner and .fillers-related
   =================================== */

/* 2. Hero banner - full rectangle card with rounded corners + text overlay */
.fillers-hero-banner {
    padding: 2.5rem 0 3rem;
    background: var(--cream);
}
.fillers-hero-banner-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    isolation: isolate;
}

/* Full-bleed variant — edge-to-edge hero banner, no side gutters or rounded corners */
.fillers-hero-banner--fullwidth {
    padding: 0;
    background: transparent;
}
.fillers-hero-banner--fullwidth .fillers-hero-banner-card {
    aspect-ratio: 16 / 7;
    border-radius: 0;
    box-shadow: none;
}
.fillers-hero-banner--fullwidth .fillers-hero-banner-card img {
    object-position: center 20%;
}
.fillers-hero-banner--fullwidth .fillers-hero-banner-overlay {
    display: block;
    align-items: initial;
}
.fillers-hero-banner--fullwidth .fillers-hero-banner-overlay > .container {
    height: 100%;
    display: flex;
    align-items: center;
}
.fillers-hero-banner--fullwidth .fillers-hero-banner-inner {
    padding: 3rem 0;
}
@media (max-width: 992px) {
    .fillers-hero-banner--fullwidth .fillers-hero-banner-card {
        aspect-ratio: 4 / 3;
    }
    .fillers-hero-banner--fullwidth .fillers-hero-banner-inner {
        padding: 2rem 0;
    }
}
@media (max-width: 576px) {
    .fillers-hero-banner--fullwidth .fillers-hero-banner-card {
        aspect-ratio: 3 / 4;
    }
    .fillers-hero-banner--fullwidth .fillers-hero-banner-inner {
        padding: 1.5rem 0;
    }
}
.fillers-hero-banner-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}
.fillers-hero-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg,
        rgba(20,20,20,0.65) 0%,
        rgba(20,20,20,0.35) 50%,
        rgba(20,20,20,0.05) 100%);
    color: var(--white);
}
.fillers-hero-banner-inner {
    max-width: 560px;
    padding: 3rem 4rem;
}
.fillers-hero-banner-inner h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--white);
    margin: 0 0 1rem;
    text-transform: none;
    letter-spacing: 0.5px;
}
.fillers-hero-banner-tagline {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--primary-light, #E0C9A6);
    margin: 0 0 1.25rem;
    letter-spacing: 1px;
}
.fillers-hero-banner-tagline em {
    font-style: italic;
}
.fillers-hero-banner-desc {
    color: rgba(255,255,255,0.88);
    line-height: 1.65;
    margin: 0 0 2rem;
    max-width: 480px;
}

/* Light outline button for dark banners */
.btn.btn-outline-light {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    padding: 0.85rem 2rem;
    font-size: 0.875rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn.btn-outline-light:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

/* 4. Tighter spacing after hero banner */
.fillers-hero-banner + .fillers-intro {
    padding-top: 3.5rem;
    padding-bottom: 3.25rem;
}

/* 5. Tighter transition intro -> suitable (no eyebrow) */
.fillers-hero-banner ~ .fillers-suitable-section {
    padding: 3.25rem 0 3.75rem;
}

/* Lip Fillers page — offset fixed header above full-bleed hero banner */
.fillers-hero-banner.lf-hero {
    padding-top: 160px;
}
@media (max-width: 992px) {
    .fillers-hero-banner.lf-hero {
        padding-top: 140px;
    }
}
@media (max-width: 576px) {
    .fillers-hero-banner.lf-hero {
        padding-top: 120px;
    }
}

/* 7. Tighter transition method -> protocol (no "AESTO Метод" eyebrow) */
body .fillers-method {
    padding: 5.5rem 0;
}
body .fillers-method + .fillers-protocol {
    padding: 3.75rem 0 4rem;
}

/* 10. Tighter transition individual -> faq (no "Индивидуален план" eyebrow) */
body .fillers-individual {
    padding: 3.75rem 0 3.25rem;
}
body .fillers-individual + .faq-section {
    padding: 3.25rem 0 3.5rem;
}
body .faq-section + .fillers-related {
    padding: 3.25rem 0 4rem;
}

/* 11. Related procedures - swap icons for real photos */
.fillers-related .help-card {
    padding: 0 0 1.75rem;
    overflow: hidden;
}
.fillers-related .help-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0 0 1.25rem;
    background: var(--cream);
}
.fillers-related .help-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.fillers-related .help-card:hover .help-card-img img {
    transform: scale(1.04);
}
.fillers-related .help-card h4,
.fillers-related .help-card p {
    padding: 0 1.25rem;
}

@media (max-width: 992px) {
    .fillers-hero-banner-card {
        aspect-ratio: 4 / 3;
    }
    .fillers-hero-banner-inner {
        padding: 2rem 2.5rem;
        max-width: 90%;
    }
    .fillers-hero-banner-overlay {
        background: linear-gradient(180deg,
            rgba(20,20,20,0.3) 0%,
            rgba(20,20,20,0.65) 65%,
            rgba(20,20,20,0.8) 100%);
        align-items: flex-end;
    }
}
@media (max-width: 576px) {
    .fillers-hero-banner {
        padding: 1.5rem 0 2rem;
    }
    .fillers-hero-banner-card {
        aspect-ratio: 3 / 4;
        border-radius: var(--radius-md);
    }
    .fillers-hero-banner-inner {
        padding: 1.5rem;
    }
    .fillers-hero-banner-tagline {
        font-size: 1.05rem;
    }
}

/* ===================================
   Lip Fillers page (AESTO)
   Scoped to .lf-*
   =================================== */

/* Reusable — light variant of section subtitle for dark backgrounds */
.section-subtitle--light {
    color: var(--primary-light, #E0C9A6) !important;
}

/* Quote banner — "Устните не се уголемяват" */
.lf-quote-banner {
    min-height: 420px;
}
.lf-quote-banner img {
    object-position: center;
}
.lf-quote-banner .lf-quote-banner-overlay {
    background: linear-gradient(90deg,
        rgba(15,15,20,0.78) 0%,
        rgba(15,15,20,0.55) 55%,
        rgba(15,15,20,0.25) 100%);
    display: flex;
    align-items: center;
}
.lf-quote-banner-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.15;
    margin: 0 0 1.25rem;
    max-width: 680px;
    letter-spacing: 0.5px;
}
.lf-quote-banner-text {
    color: rgba(255,255,255,0.82);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 540px;
    margin: 0;
}

/* Подходящо при — custom lip icons */
.lf-suitable {
    padding: 5rem 0;
}
.lf-indications-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 3rem auto 0;
}
.lf-indication {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    transition: var(--transition);
}
.lf-indication-icon {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 1px solid var(--cream-dark, #E8DFD0);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    transition: var(--transition);
}
.lf-indication-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.lf-indication:hover .lf-indication-icon {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(180, 145, 100, 0.12);
}
.lf-indication h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    letter-spacing: 0.3px;
    line-height: 1.35;
}

/* AESTO Метод — dark section with 3 method pillars */
.lf-method {
    padding: 6rem 0;
}
.lf-method .fillers-method-bg {
    filter: brightness(0.55) saturate(0.9);
    background-position: center right;
}
.lf-method::before {
    background: linear-gradient(90deg,
        rgba(10,10,14,0.9) 0%,
        rgba(10,10,14,0.7) 55%,
        rgba(10,10,14,0.35) 100%);
    z-index: 1;
}
.lf-method-inner {
    max-width: 920px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.lf-method-inner h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.8vw, 2.75rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.2;
    margin: 1rem 0 1.5rem;
    letter-spacing: 0.5px;
}
.lf-method-inner > p {
    color: rgba(232, 223, 208, 0.78);
    font-size: 1.05rem;
    line-height: 1.85;
    max-width: 680px;
    margin: 0 auto 3rem;
}
.lf-method-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 820px;
    margin: 0 auto;
}
.lf-method-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.lf-method-pillar-icon {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.lf-method-pillar-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lf-method-pillar:hover .lf-method-pillar-icon {
    transform: scale(1.04);
}
.lf-method-pillar h4 {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 400;
    color: #EFE5D3;
    margin: 0;
    letter-spacing: 0.5px;
}

/* Protocol tweaks — section header subtitle */
.lf-protocol .section-header {
    text-align: center;
}
.lf-protocol-cta {
    text-align: left;
}

/* Twin banners — "Индивидуален подход" + "Контролът зад резултата" */
.lf-twin-banners {
    padding: 4rem 0 5rem;
    background: var(--white);
}
.lf-twin-banners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}
.lf-twin-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 3rem 2.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 420px;
    position: relative;
}
.lf-twin-card--light {
    background: var(--cream, #F7F2EC);
    color: var(--text);
}
.lf-twin-card--light h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.25;
    margin: 0.75rem 0 1.5rem;
    letter-spacing: 0.3px;
}
.lf-twin-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.lf-twin-card-list li {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text);
    padding-left: 1.5rem;
    position: relative;
}
.lf-twin-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.75rem;
    height: 1px;
    background: var(--primary, #B49164);
}
.lf-twin-card--light .btn {
    align-self: flex-start;
}
.lf-twin-card--dark {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
}
.lf-twin-card-overlay {
    background: linear-gradient(135deg,
        rgba(10,10,14,0.85) 0%,
        rgba(10,10,14,0.55) 100%);
    margin: -3rem -2.75rem;
    padding: 3rem 2.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lf-twin-card--dark h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.25;
    margin: 0.75rem 0 1.25rem;
    letter-spacing: 0.3px;
}
.lf-twin-card--dark p {
    color: rgba(255,255,255,0.82);
    line-height: 1.75;
    margin: 0 0 1.75rem;
    max-width: 420px;
}
.lf-twin-card--dark .btn {
    align-self: flex-start;
}

/* Middle quote banner — "Формата е детайл. Балансът е резултат." */
.lf-middle-banner {
    min-height: 380px;
}
.lf-middle-banner .fillers-banner-overlay {
    background: linear-gradient(90deg,
        rgba(10,10,14,0.75) 0%,
        rgba(10,10,14,0.5) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.lf-middle-banner .fillers-banner-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    color: var(--white);
    line-height: 1.3;
    margin: 0;
    max-width: 900px;
    letter-spacing: 0.3px;
}

/* FAQ tweaks */
.lf-faq {
    padding: 4rem 0 5rem;
}

/* Price section */
.lf-price-section {
    padding: 4.5rem 0 5rem;
    background: var(--cream, #F7F2EC);
    text-align: center;
}
.lf-price-inner {
    max-width: 680px;
    margin: 0 auto;
}
.lf-price-inner h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--text);
    margin: 0.75rem 0 1rem;
    letter-spacing: 0.3px;
}
.lf-price-inner p {
    color: var(--text-light);
    line-height: 1.8;
    margin: 0 auto 2rem;
    max-width: 540px;
}

/* Related — use default fillers-related spacing */
.lf-related {
    padding: 4rem 0 5rem;
}

/* Final CTA — reuse fillers-final-cta */
.lf-final-cta {
    padding: 5rem 0;
}

/* Responsive */
@media (max-width: 992px) {
    .lf-indications-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        max-width: 680px;
    }
    .lf-method-pillars {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 300px;
    }
    .lf-twin-banners-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .lf-indication-icon {
        width: 110px;
        height: 110px;
    }
}
@media (max-width: 576px) {
    .lf-indications-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .lf-indication-icon {
        width: 95px;
        height: 95px;
    }
    .lf-method-pillar-icon {
        width: 120px;
        height: 120px;
    }
    .lf-twin-card {
        padding: 2rem 1.5rem;
        min-height: 320px;
    }
    .lf-twin-card-overlay {
        margin: -2rem -1.5rem;
        padding: 2rem 1.5rem;
    }
}

/* ============================================
   BOTOX (AESTO Протокол) — /services/botox.php
   ============================================ */

/* Hero — stronger dark overlay for dramatic AESTO look */
.bt-hero .fillers-hero-banner-card img {
    object-position: right center;
    filter: brightness(0.85) contrast(1.05);
}
.bt-hero .fillers-hero-banner-overlay {
    background: linear-gradient(90deg,
        rgba(10,10,10,0.92) 0%,
        rgba(10,10,10,0.75) 40%,
        rgba(10,10,10,0.25) 75%,
        rgba(10,10,10,0.05) 100%);
}

/* Hero CTA — beige hover/focus/active instead of white */
.bt-hero .btn.btn-outline-light:hover,
.bt-hero .btn.btn-outline-light:focus,
.bt-hero .btn.btn-outline-light:active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* Centered quote banner on cream background with gold accent lines */
.bt-quote {
    background-color: #F3EDE3;
    padding: 3.25rem 0 3rem;
    position: relative;
    text-align: center;
    overflow: hidden;
}
.bt-quote::before,
.bt-quote::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.55;
    transform: translateY(-50%);
}
.bt-quote::before { left: 6%; }
.bt-quote::after  { right: 6%; }
.bt-quote-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    color: var(--black);
    line-height: 1.3;
    margin: 0 0 1.25rem;
    font-weight: 400;
}
.bt-quote-title em {
    font-style: italic;
    color: var(--primary-dark);
}
.bt-quote-sub {
    font-family: var(--font-body);
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* Full-width banner image section (reusable for composed Canva banners) */
.bt-image-banner {
    padding: 0;
    display: block;
    line-height: 0;
    background-color: #F3EDE3;
}
.bt-image-banner--dark { background-color: #0F0E0D; }
.bt-image-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1600px;
    margin: 0 auto;
}

/* Control section — 2-col: image left, text + link right */
.bt-control {
    background-color: #F3EDE3;
    padding: 3.5rem 0;
}
.bt-control-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.bt-control-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
    background-color: var(--cream);
}
.bt-control-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.bt-control-body .section-subtitle { margin-bottom: 0.75rem; }
.bt-control-body h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--black);
    line-height: 1.25;
    margin: 0 0 1.25rem;
    font-weight: 400;
}
.bt-control-body p {
    color: var(--text-light);
    line-height: 1.8;
    margin: 0 0 1.75rem;
}
.bt-control-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: 0.875rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--primary);
    padding-bottom: 4px;
    transition: var(--transition);
}
.bt-control-link:hover {
    color: var(--black);
    border-color: var(--black);
    gap: 1rem;
}

/* FAQ top image (used above the accordion) */
.bt-faq-image {
    max-width: 720px;
    margin: 0 auto 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.bt-faq.faq-section { padding: 3.5rem 0; }
.bt-faq .section-header { margin-bottom: 2rem; }
.bt-faq-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Price section — tighter for botox (short content) */
.bt-price {
    background-color: #F3EDE3;
    padding: 3.25rem 0;
}
.bt-price .lf-price-inner h2 {
    margin-bottom: 0.5rem;
}
.bt-price .lf-price-inner p {
    margin-bottom: 2rem;
}

/* FAQ section — match botox cream background */
.bt-faq { background-color: var(--cream); }

/* Suitable-for — 5 icon cards evenly spread */
.bt-suitable-section {
    background-color: var(--cream);
    padding: 3.25rem 0 3.25rem;
}
.bt-suitable-section .section-header { margin-bottom: 2rem; }
.bt-suitable-section .section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
}
.bt-indications-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.25rem !important;
    max-width: 1100px;
    margin: 0 auto;
}

/* AESTO Метод — dark section adjustments */
.bt-method {
    padding: 3.25rem 0 3.5rem;
    text-align: left;
}
.bt-method .fillers-method-bg {
    background-position: right center;
    filter: brightness(0.6) saturate(1.05);
}
.bt-method::before {
    background: linear-gradient(90deg,
        rgba(10,10,10,0.95) 0%,
        rgba(10,10,10,0.8) 45%,
        rgba(10,10,10,0.4) 70%,
        rgba(10,10,10,0.1) 100%);
}
.bt-method-inner {
    max-width: 640px;
    text-align: left;
    margin: 0;
}
.bt-method-inner h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--white);
    margin: 0 0 1.5rem;
    letter-spacing: 0.5px;
}
.bt-method-lead {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--primary-light, #E0C9A6);
    font-style: italic;
    line-height: 1.4;
    margin: 0 0 1.5rem;
}
.bt-method-pillars {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 3rem;
    margin-top: 2.75rem;
}
.bt-method-pillars .lf-method-pillar-icon {
    width: 96px;
    height: 96px;
    background-color: var(--cream);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(224,201,166,0.35), 0 4px 20px rgba(0,0,0,0.3);
}
.bt-method-pillars .lf-method-pillar-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.bt-method-pillars h4 {
    color: var(--primary-light, #E0C9A6);
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 0.85rem;
    font-weight: 500;
    text-align: center;
}

/* Protocol — 5-step horizontal timeline */
.bt-protocol {
    background-color: var(--cream);
    padding: 3.25rem 0 3.5rem;
}
.bt-protocol .section-header { margin-bottom: 2rem; }
.bt-protocol .section-title {
    font-family: var(--font-heading);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.bt-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    max-width: 1100px;
    margin: 3rem auto 0;
    padding: 0 1rem;
}
.bt-timeline-track {
    position: absolute;
    top: 30px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: repeating-linear-gradient(90deg,
        var(--primary) 0 6px,
        transparent 6px 12px);
    opacity: 0.6;
    z-index: 0;
}
.bt-timeline-step {
    position: relative;
    text-align: center;
    padding-top: 60px;
    z-index: 1;
}
.bt-timeline-num {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--primary-dark);
    font-weight: 400;
    letter-spacing: 1px;
}
.bt-timeline-dot {
    position: absolute;
    top: 42px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px var(--cream);
}
.bt-timeline-step h4 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.bt-timeline-step p {
    font-size: 0.8125rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
    padding: 0 0.25rem;
}

/* Zones — 3-col: labels | face | labels */
.bt-zones {
    background-color: #F3EDE3;
    padding: 3.25rem 0 3.5rem;
}
.bt-zones .section-header { margin-bottom: 1.75rem; }
.bt-zones .section-title {
    font-family: var(--font-heading);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.bt-zones-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.bt-zones-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.bt-zones-list--left { text-align: right; }
.bt-zones-list--right { text-align: left; }
.bt-zones-list li {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    position: relative;
    letter-spacing: 0.5px;
}
.bt-zones-list--left li::after,
.bt-zones-list--right li::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background: var(--primary);
    vertical-align: middle;
    margin: 0 0 0 12px;
}
.bt-zones-list--right li::before { margin: 0 12px 0 0; }
.bt-zones-image {
    text-align: center;
}
.bt-zones-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Result — dark 2-col with face bg */
.bt-result {
    position: relative;
    padding: 3.5rem 0 3.5rem;
    color: var(--white);
    overflow: hidden;
    background-color: #0F0E0D;
}
.bt-result-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    z-index: 0;
    opacity: 0.85;
}
.bt-result::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(10,10,10,0.97) 0%,
        rgba(10,10,10,0.88) 40%,
        rgba(10,10,10,0.45) 70%,
        rgba(10,10,10,0.1) 100%);
    z-index: 1;
}
.bt-result .container {
    position: relative;
    z-index: 2;
}
.bt-result-inner {
    max-width: 560px;
}
.bt-result-inner h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--white);
    margin: 0 0 2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.bt-result-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.bt-result-list li {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.25rem;
    align-items: center;
}
.bt-result-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(224,201,166,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bt-result-icon img {
    width: 95%;
    height: 95%;
    object-fit: contain;
}
.bt-result-text h4 {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--primary-light, #E0C9A6);
    margin: 0 0 0.35rem;
    font-weight: 500;
}
.bt-result-text p {
    margin: 0;
    color: rgba(255,255,255,0.78);
    font-size: 0.9rem;
    line-height: 1.55;
}
.bt-result-quote {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0;
    color: rgba(255,255,255,0.92);
}
.bt-result-quote em {
    font-style: italic;
    color: var(--primary-light, #E0C9A6);
    display: block;
    margin-top: 0.25rem;
}

/* Approach — 3-col light section */
.bt-approach {
    background-color: #F3EDE3;
    padding: 3.25rem 0 3.5rem;
}
.bt-approach .section-header { margin-bottom: 2rem; }

/* Approach as full-width banner image — flush with neighbors, no padding */
.bt-approach-banner {
    padding: 0;
    margin: 0;
    background-color: #F3EDE3;
    line-height: 0;
    font-size: 0;
    display: block;
}
.bt-approach-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
}
/* Tighten neighbours: no extra cream/dark gap touching the banner */
.bt-result:has(+ .bt-approach-banner) { padding-bottom: 2rem; }
.bt-approach-banner + .bt-control { padding-top: 2rem; }
.bt-approach .section-title {
    font-family: var(--font-heading);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.bt-approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.bt-approach-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--cream);
}
.bt-approach-icon img {
    width: 75%;
    height: 75%;
    object-fit: contain;
}
.bt-approach-item h4 {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.bt-approach-item p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .bt-control-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .bt-quote::before,
    .bt-quote::after { width: 90px; }
    .bt-indications-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .bt-method { padding: 4.5rem 0; }
    .bt-method::before {
        background: linear-gradient(180deg,
            rgba(10,10,10,0.85) 0%,
            rgba(10,10,10,0.7) 100%);
    }
    .bt-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 1.5rem;
    }
    .bt-timeline-track { display: none; }
    .bt-zones-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .bt-zones-list--left,
    .bt-zones-list--right { text-align: center; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
    .bt-zones-list--left li::after,
    .bt-zones-list--right li::before { display: none; }
    .bt-approach-grid { grid-template-columns: 1fr; gap: 2rem; }
    .bt-result { padding: 4.5rem 0; }
    .bt-result::before {
        background: linear-gradient(180deg,
            rgba(10,10,10,0.92) 0%,
            rgba(10,10,10,0.7) 100%);
    }
}
@media (max-width: 576px) {
    .bt-quote { padding: 3.5rem 0 3rem; }
    .bt-quote::before,
    .bt-quote::after { display: none; }
    .bt-control { padding: 4rem 0; }
    .bt-indications-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .bt-timeline { grid-template-columns: 1fr; }
    .bt-method-pillars {
        grid-template-columns: repeat(3, auto);
        gap: 1.25rem;
    }
    .bt-method-pillars .lf-method-pillar-icon {
        width: 64px;
        height: 64px;
    }
}

/* ============================================
   SKINBOOSTERS — /services/skinboosters.php
   ============================================ */

/* Hero — bright cream look vs botox's black */
.sb-hero .fillers-hero-banner-card img {
    object-position: right center;
    filter: brightness(0.98) contrast(1.03);
}
.sb-hero .fillers-hero-banner-overlay {
    background: linear-gradient(90deg,
        rgba(15,15,15,0.80) 0%,
        rgba(15,15,15,0.50) 45%,
        rgba(15,15,15,0.15) 75%,
        rgba(15,15,15,0.02) 100%);
}
.sb-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary-light, #E0C9A6);
    margin-bottom: 0.75rem;
}

/* Hero CTA — beige hover/active/focus instead of white */
.sb-hero .btn.btn-outline-light:hover,
.sb-hero .btn.btn-outline-light:focus,
.sb-hero .btn.btn-outline-light:active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* Section 2 — when skin needs more (2-col light) */
.sb-intro {
    background-color: var(--cream);
    padding: 6rem 0;
}
.sb-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.sb-intro-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 1.5rem;
    color: var(--black);
}
.sb-intro-lead {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--primary-dark);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}
.sb-intro-text p:not(.sb-intro-lead) {
    color: var(--text-light);
    line-height: 1.8;
    margin: 0;
}
.sb-intro-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9;
}
.sb-intro-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Section 3 — what is the procedure (2-col, image left) */
.sb-what-is {
    background-color: #F3EDE3;
    padding: 6rem 0;
}
.sb-what-is-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: center;
}
.sb-what-is-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
    background-color: var(--cream);
}
.sb-what-is-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.sb-what-is-text .section-subtitle { margin-bottom: 0.75rem; }
.sb-what-is-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    color: var(--black);
}
.sb-what-is-text p {
    color: var(--text-light);
    line-height: 1.75;
    margin: 0 0 1rem;
}
.sb-what-is-text p:last-child { margin-bottom: 0; }

/* Section 4 — benefits row */
.sb-benefits {
    background-color: var(--cream);
    padding: 5.5rem 0 6rem;
}
.sb-benefits .section-header { margin-bottom: 3rem; }
.sb-benefits .section-title {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.sb-benefits-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.sb-benefit {
    text-align: center;
    padding: 1rem 0.5rem;
}
.sb-benefit-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.85rem;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(138,106,72,0.08);
    transition: var(--transition);
}
.sb-benefit:hover .sb-benefit-icon {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(138,106,72,0.18);
}
.sb-benefit h4 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}

/* Section 5 — Подходящо при (3-col: list | face | zones) */
.sb-suitable {
    background-color: #F3EDE3;
    padding: 5.5rem 0 6rem;
}
.sb-suitable .section-header { margin-bottom: 3rem; }
.sb-suitable .section-title {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.sb-suitable-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.sb-suitable-face {
    text-align: center;
}
.sb-suitable-face img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Reusable checklist */
.sb-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.sb-checklist li {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.55;
}
.sb-checklist li i {
    color: var(--primary);
    font-size: 0.75rem;
    margin-top: 0.3rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Zones list — dot style */
.sb-zones-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sb-zones-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    letter-spacing: 0.3px;
}
.sb-zone-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.sb-suitable-note {
    max-width: 760px;
    margin: 3rem auto 0;
    text-align: center;
    color: var(--text-light);
    line-height: 1.75;
    font-size: 0.95rem;
}

/* Section 7 — AESTO Method (light) */
.sb-method {
    background-color: var(--cream);
    padding: 5.5rem 0 6rem;
}
.sb-method .section-header { margin-bottom: 2.5rem; }
.sb-method .section-title {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.sb-method .section-desc {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-dark);
    line-height: 1.5;
    margin-top: 1rem;
}
.sb-method-inner {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: 4rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.sb-method-evaluate h4 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 0 0 1.25rem;
    font-weight: 500;
}
.sb-method-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    text-align: center;
}
.sb-pillar-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(138,106,72,0.08);
}
.sb-pillar-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
}
.sb-pillar h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.sb-pillar p {
    font-size: 0.825rem;
    color: var(--text-light);
    line-height: 1.55;
    margin: 0;
    padding: 0 0.25rem;
}

/* Section 8 — timeline 5-step */
.sb-protocol {
    background-color: #F3EDE3;
    padding: 5.5rem 0 6rem;
}
.sb-protocol .section-header { margin-bottom: 3.5rem; }
.sb-protocol .section-title {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.sb-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 1rem;
}
.sb-timeline-track {
    position: absolute;
    top: 44px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: repeating-linear-gradient(90deg,
        var(--primary) 0 6px,
        transparent 6px 12px);
    opacity: 0.55;
    z-index: 0;
}
.sb-timeline-step {
    position: relative;
    text-align: center;
    z-index: 1;
}
.sb-timeline-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(138,106,72,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.75rem;
}
.sb-timeline-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}
.sb-timeline-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary-dark);
    font-weight: 400;
    margin-bottom: 0.35rem;
}
.sb-timeline-step h4 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.sb-timeline-step p {
    font-size: 0.8125rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
    padding: 0 0.25rem;
}

/* Section 9 — Result */
.sb-result {
    background-color: var(--cream);
    padding: 6rem 0;
}
.sb-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.sb-result-text .section-subtitle { margin-bottom: 1rem; }
.sb-result-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 2rem;
    color: var(--black);
}
.sb-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sb-result-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--black);
    font-weight: 400;
}
.sb-result-list li i {
    color: var(--white);
    background: var(--primary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.sb-result-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
    background: var(--cream);
}
.sb-result-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* FAQ section tweak */
.sb-faq { background-color: #F3EDE3; }

/* Specialist final CTA */
.sb-specialist {
    background-color: var(--cream);
    padding: 5.5rem 0 6rem;
    text-align: center;
}
.sb-specialist-inner {
    max-width: 720px;
    margin: 0 auto;
}
.sb-specialist-lead {
    font-family: var(--font-body);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0 0 1.25rem;
}
.sb-specialist-inner > p {
    color: var(--text-light);
    line-height: 1.75;
    margin-bottom: 2rem;
}
.sb-specialist-card {
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    margin: 0 0 2.5rem;
}
.sb-specialist-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.25rem;
}
.sb-specialist-role {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 0 0 1rem !important;
}
.sb-specialist-quote {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text);
    line-height: 1.55;
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 992px) {
    .sb-intro-grid,
    .sb-what-is-grid,
    .sb-method-inner,
    .sb-result-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .sb-what-is-grid .sb-what-is-image { order: -1; }
    .sb-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1rem;
    }
    .sb-suitable-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .sb-suitable-face { max-width: 280px; margin: 0 auto; }
    .sb-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 1.5rem;
    }
    .sb-timeline-track { display: none; }
    .sb-method-pillars { margin-top: 1rem; }
}
@media (max-width: 576px) {
    .sb-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sb-method-pillars { grid-template-columns: 1fr; gap: 2rem; }
    .sb-timeline { grid-template-columns: 1fr; }
    .sb-intro, .sb-what-is, .sb-benefits, .sb-suitable, .sb-method, .sb-protocol, .sb-result, .sb-specialist {
        padding: 4rem 0;
    }
}

/* ===================================
   Profhilo Service Page
   =================================== */

/* Profhilo dark palette helpers */
.profhilo-btn {
    border-radius: 999px;
    letter-spacing: 1.5px;
}

.btn-outline-light {
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 999px;
}
.btn-outline-light:hover {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* 1) HERO - full-bleed cinematic banner --------------------------------- */
.profhilo-hero {
    position: relative;
    margin-top: 80px; /* fixed header */
    height: clamp(580px, 78vh, 800px);
    overflow: hidden;
    background: #1d1a17;
    color: #fff;
}
.profhilo-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.profhilo-hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 70% center;
    display: block;
    /* slow Ken Burns animation */
    animation: profhiloHeroZoom 18s ease-out forwards;
}
@keyframes profhiloHeroZoom {
    0%   { transform: scale(1.08); }
    100% { transform: scale(1.00); }
}
.profhilo-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(20,17,14,0.92) 0%, rgba(20,17,14,0.78) 35%, rgba(20,17,14,0.30) 65%, transparent 100%),
        linear-gradient(180deg, rgba(20,17,14,0.20) 0%, transparent 30%, transparent 70%, rgba(20,17,14,0.45) 100%);
    pointer-events: none;
}
.profhilo-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}
.profhilo-hero-text {
    max-width: 620px;
    padding: 2rem 0;
}
.profhilo-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.75rem;
    padding-left: 3.25rem;
    position: relative;
}
.profhilo-hero-eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2.5rem;
    height: 1px;
    background: var(--primary);
}
.profhilo-hero-text h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 1.75rem;
    text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.profhilo-hero-sub {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.88);
    margin-bottom: 1.5rem;
    max-width: 540px;
}
.profhilo-hero-zones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(198,164,126,0.3);
}
.profhilo-hero-zone {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}
.profhilo-hero-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
}
.profhilo-hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Scroll indicator (bottom-right) */
.profhilo-hero-scroll {
    position: absolute;
    right: 2rem;
    bottom: 1.5rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.profhilo-hero-scroll span {
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, transparent, var(--primary));
    animation: profhiloScrollLine 2.5s ease-in-out infinite;
}
@keyframes profhiloScrollLine {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
    50%      { opacity: 1; transform: scaleY(1); }
}
.profhilo-hero-scroll small {
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

/* 1.5) QUICK FEATURES STRIP ---------------------------------------------- */
.profhilo-features {
    background: linear-gradient(180deg, #1d1a17 0%, #221d18 100%);
    padding: 0 0 4rem;
    position: relative;
    color: #fff;
}
.profhilo-features::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, transparent 0%, rgba(198,164,126,0.04) 100%);
    pointer-events: none;
}
.profhilo-features .container { position: relative; z-index: 1; }
.profhilo-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(198,164,126,0.18);
}
.profhilo-feature {
    text-align: center;
    padding: 1rem;
    transition: var(--transition);
}
.profhilo-feature:hover {
    transform: translateY(-4px);
}
.profhilo-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(198,164,126,0.12);
    border: 1px solid rgba(198,164,126,0.4);
    color: var(--primary);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    gap: 2px;
}
.profhilo-feature-icon i + i {
    font-size: 0.7rem;
    margin-left: -4px;
    opacity: 0.7;
}
.profhilo-feature h4 {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    color: #fff;
    margin-bottom: 0.5rem;
}
.profhilo-feature p {
    color: rgba(255,255,255,0.6);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
}

/* 2) WHAT IS PROFHILO ----------------------------------------------------- */
.profhilo-what {
    position: relative;
    padding: 6rem 0;
    background: linear-gradient(180deg, #1d1a17 0%, #221d18 100%);
    color: #fff;
}
.profhilo-what::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.profhilo-what .container { position: relative; z-index: 1; }
.profhilo-what-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.profhilo-what-text .section-subtitle {
    color: var(--primary);
}
.profhilo-what-text .section-title {
    color: #fff;
    text-align: left;
    margin-bottom: 1.5rem;
}
.profhilo-what-text p {
    color: rgba(255,255,255,0.78);
    line-height: 1.9;
    margin-bottom: 1.25rem;
}
.profhilo-accent {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.375rem;
    color: var(--primary) !important;
    line-height: 1.5;
    margin-top: 1.5rem;
}
.profhilo-what-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.profhilo-what-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    display: block;
}

/* 3) ZONES OF APPLICATION ------------------------------------------------- */
.profhilo-zones {
    padding: 6rem 0;
    background: var(--gray-light);
}
.profhilo-zones-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: stretch;
}
.profhilo-zones-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 580px;
    box-shadow: var(--shadow-md);
}
.profhilo-zones-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profhilo-zones-content .section-title {
    text-align: left;
    margin-bottom: 1rem;
}
.section-desc-left {
    max-width: 560px;
    margin: 0 0 2.5rem;
    color: var(--text-light);
    font-size: 0.9375rem;
    line-height: 1.7;
}
.profhilo-zones-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.profhilo-zone-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.profhilo-zone-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.profhilo-zone-img {
    flex: 0 0 130px;
    width: 130px;
    height: 130px;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid var(--primary-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.profhilo-zone-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.profhilo-zone-text h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--black);
    margin-bottom: 0.25rem;
}
.profhilo-zone-text p {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

/* 4) OUR APPROACH (DARK) -------------------------------------------------- */
.profhilo-approach {
    position: relative;
    padding: 6rem 0;
    background: linear-gradient(180deg, #1d1a17 0%, #2b2520 100%);
    color: #fff;
}
.profhilo-approach::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(198,164,126,0.12) 0%, transparent 50%);
    pointer-events: none;
}
.profhilo-approach .container { position: relative; z-index: 1; }
.profhilo-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.profhilo-approach .section-subtitle {
    color: var(--primary);
}
.profhilo-approach .section-title {
    color: #fff;
}
.profhilo-approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.profhilo-approach-card {
    text-align: center;
    padding: 2.5rem 1.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(198,164,126,0.2);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}
.profhilo-approach-card:hover {
    border-color: var(--primary);
    transform: translateY(-6px);
    background: rgba(198,164,126,0.06);
}
.profhilo-approach-num {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}
.profhilo-approach-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
}
.profhilo-approach-card p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
}

/* Approach card icon (inside each card, on dark bg) */
.profhilo-approach-icon {
    width: 130px;
    height: 130px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profhilo-approach-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    filter: brightness(1.45) saturate(1.3) drop-shadow(0 0 8px rgba(198,164,126,0.25));
    transition: var(--transition);
}
.profhilo-approach-card:hover .profhilo-approach-icon img {
    filter: brightness(1.7) saturate(1.4) drop-shadow(0 0 12px rgba(198,164,126,0.45));
    transform: scale(1.05);
}

/* 5) HOW THE PROCEDURE GOES (LIGHT GRANITE) ------------------------------- */
.profhilo-procedure {
    padding: 6rem 0;
    background: var(--gray-light);
}
.profhilo-procedure-icon {
    width: 110px;
    height: 110px;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profhilo-procedure-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    transition: var(--transition);
}
.profhilo-procedure-step:hover .profhilo-procedure-icon img {
    transform: scale(1.05);
}
.profhilo-procedure .profhilo-section-header .section-subtitle {
    color: var(--primary);
}
.profhilo-procedure .section-title {
    color: var(--black);
}
.profhilo-procedure-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
}
.profhilo-procedure-step {
    position: relative;
    padding: 2rem 1.25rem;
    background: #fff;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.profhilo-procedure-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.profhilo-procedure-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}
.profhilo-procedure-step h4 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    color: var(--black);
    margin-bottom: 0.75rem;
}
.profhilo-procedure-step p {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* 6) RESULT (DARK, editorial quote-led) ---------------------------------- */
.profhilo-result {
    position: relative;
    padding: 7rem 0 5rem;
    background: linear-gradient(180deg, #1d1a17 0%, #251f1a 100%);
    color: #fff;
    overflow: hidden;
}
.profhilo-result::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(198,164,126,0.10) 0%, transparent 55%);
    pointer-events: none;
}
.profhilo-result .container { position: relative; z-index: 1; }

.profhilo-result-editorial {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding: 0 1rem;
}
.profhilo-result-editorial .section-subtitle {
    color: var(--primary);
}
.profhilo-result-editorial .section-title {
    color: #fff;
    margin-bottom: 3.5rem;
}

/* Editorial quote */
.profhilo-result-quote {
    position: relative;
    margin: 0 auto 3rem;
    padding: 0;
    max-width: 760px;
}
.profhilo-result-quote-mark {
    position: absolute;
    top: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 6rem;
    color: var(--primary);
    line-height: 1;
    opacity: 0.5;
    pointer-events: none;
}
.profhilo-result-quote p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1.45;
    color: #fff;
    margin: 0 0 1.75rem;
    letter-spacing: 0.5px;
}
.profhilo-result-quote p em {
    color: var(--primary);
    font-style: italic;
}
.profhilo-result-quote footer {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

/* Centered benefit list with bullets in front */
.profhilo-result-ribbon {
    list-style: none;
    padding: 1.75rem 0;
    margin: 0 auto;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    border-top: 1px solid rgba(198,164,126,0.25);
    border-bottom: 1px solid rgba(198,164,126,0.25);
}
.profhilo-result-ribbon-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    transition: color 0.3s ease;
    padding: 0;
}
.profhilo-result-ribbon-item::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.profhilo-result-ribbon-item:hover {
    color: var(--primary);
}

/* Decorative photo strip below */
.profhilo-result-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 1100px;
    margin: 5rem auto 0;
    padding: 0 1rem;
}
.profhilo-result-strip-img {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    opacity: 0.65;
    transition: var(--transition);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.profhilo-result-strip-img:hover {
    opacity: 1;
    transform: translateY(-4px);
}
.profhilo-result-strip-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* 7) SPECIALIST ----------------------------------------------------------- */
.profhilo-specialist {
    padding: 6rem 0;
    background: var(--white);
}
.profhilo-specialist-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
}
.profhilo-specialist-text .section-title {
    text-align: left;
    margin-bottom: 1.25rem;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.profhilo-specialist-text > p {
    color: var(--text-light);
    line-height: 1.85;
    margin-bottom: 2rem;
}
.profhilo-specialist-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.75rem;
    padding: 1.75rem;
    background: var(--gray-light);
    border-radius: var(--radius-lg);
    align-items: center;
}
.profhilo-specialist-photo {
    width: 160px;
    height: 200px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.profhilo-specialist-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profhilo-specialist-info h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--black);
    margin-bottom: 0.25rem;
}
.profhilo-specialist-role {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.profhilo-specialist-focus {
    color: var(--text-light);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 0;
}
.profhilo-specialist-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 5;
}
.profhilo-specialist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 8) FAQ override (Profhilo card style) ----------------------------------- */
.profhilo-faq {
    background: var(--white);
}
.profhilo-faq .section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.profhilo-faq .section-title {
    text-align: center;
}
.profhilo-faq .faq-item {
    background: var(--gray-light);
    border-radius: var(--radius-md);
    border-bottom: none;
    margin-bottom: 0.75rem;
    padding: 0 1.5rem;
    overflow: hidden;
}
.profhilo-faq .faq-question {
    padding: 1.25rem 0;
}

/* 8.5) RELATED PROCEDURES (uses .help-section/.help-grid skeleton) -------- */
.profhilo-related {
    background: var(--gray-light);
}
.profhilo-related .help-card {
    padding: 0 0 1.75rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #fff;
}
.profhilo-related .help-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0 0 1.25rem;
    background: var(--cream);
}
.profhilo-related .help-card-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.profhilo-related .help-card:hover .help-card-img img {
    transform: scale(1.05);
}
.profhilo-related .help-card h4,
.profhilo-related .help-card p {
    padding: 0 1.25rem;
}

/* 9) FINAL CTA ------------------------------------------------------------ */
.profhilo-final-cta {
    position: relative;
    padding: 7rem 0;
    color: #fff;
    overflow: hidden;
    text-align: center;
}
.profhilo-final-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.35) saturate(0.85);
    z-index: 0;
}
.profhilo-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29,26,23,0.7), rgba(29,26,23,0.85));
    z-index: 1;
}
.profhilo-final-cta .container {
    position: relative;
    z-index: 2;
}
.profhilo-final-inner {
    max-width: 760px;
    margin: 0 auto;
}
.profhilo-final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 1.5rem;
}
.profhilo-final-cta p {
    color: rgba(255,255,255,0.85);
    font-size: 1.0625rem;
    line-height: 1.8;
    max-width: 580px;
    margin: 0 auto 2rem;
}
.profhilo-final-cta .cta-contact {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}
.profhilo-final-cta .cta-contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.9375rem;
}
.profhilo-final-cta .cta-contact-item i {
    color: var(--primary);
}

/* RESPONSIVE -------------------------------------------------------------- */
@media (max-width: 992px) {
    .profhilo-hero { height: clamp(520px, 70vh, 680px); }
    .profhilo-hero-bg img { object-position: 75% center; }
    .profhilo-hero-overlay {
        background:
            linear-gradient(180deg, rgba(20,17,14,0.55) 0%, rgba(20,17,14,0.85) 100%);
    }
    .profhilo-hero-content { justify-content: center; text-align: center; }
    .profhilo-hero-text { text-align: center; max-width: 700px; padding: 0 1rem; }
    .profhilo-hero-eyebrow { padding-left: 0; }
    .profhilo-hero-eyebrow::before { display: none; }
    .profhilo-hero-zones { justify-content: center; }
    .profhilo-hero-cta { justify-content: center; }
    .profhilo-hero-scroll { display: none; }

    .profhilo-what-grid,
    .profhilo-zones-grid,
    .profhilo-specialist-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .profhilo-zones-image { min-height: 380px; }

    .profhilo-procedure-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .profhilo-result-strip { gap: 0.75rem; }
}

@media (max-width: 768px) {
    .profhilo-hero,
    .profhilo-what,
    .profhilo-zones,
    .profhilo-approach,
    .profhilo-procedure,
    .profhilo-result,
    .profhilo-specialist,
    .profhilo-final-cta {
        padding-left: 0;
        padding-right: 0;
    }
    .profhilo-what,
    .profhilo-zones,
    .profhilo-approach,
    .profhilo-procedure,
    .profhilo-result,
    .profhilo-specialist {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .profhilo-final-cta { padding: 4.5rem 0; }

    .profhilo-zones-list { grid-template-columns: 1fr; }
    .profhilo-approach-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .profhilo-features-grid { grid-template-columns: repeat(2, 1fr); }

    .profhilo-specialist-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .profhilo-specialist-photo {
        width: 140px;
        height: 180px;
        margin: 0 auto;
    }

    .profhilo-result-images { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .profhilo-procedure-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .profhilo-hero-text h1 { font-size: 2rem; }
    .profhilo-hero-cta { flex-direction: column; align-items: stretch; }
    .profhilo-hero-cta .btn { width: 100%; }
    .profhilo-zone-card { flex-direction: column; text-align: center; }
    .profhilo-zone-img { flex: 0 0 90px; width: 90px; height: 90px; }
}

/* ============================================================
   AESTO DECORATIVE ELEMENTS — Subtle background accents
   Reusable purely-decorative layers, do not affect layout
   ============================================================ */

.aesto-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.aesto-decor--lines-h {
    background-image: url('/images/decorative/lines-horizontal.png');
    width: clamp(380px, 46vw, 680px);
    aspect-ratio: 1500 / 1050;
    opacity: 0.85;
}

.aesto-decor--lines-v {
    background-image: url('/images/decorative/lines-vertical.png');
    width: clamp(260px, 28vw, 420px);
    aspect-ratio: 840 / 1050;
    opacity: 0.85;
}

.aesto-decor--dark-mist {
    background-image: url('/images/decorative/dark-mist.webp');
    background-size: cover;
    background-position: center;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.aesto-decor--gold-ring {
    background-image: url('/images/decorative/gold-ring.webp');
    width: clamp(280px, 38vw, 540px);
    aspect-ratio: 1 / 1;
    opacity: 0.55;
}

.aesto-decor--halftone {
    background-image: url('/images/decorative/halftone-dots.webp');
    width: clamp(220px, 26vw, 380px);
    aspect-ratio: 1200 / 1873;
    opacity: 0.6;
}

/* Center anchor for circle/ring style decorations */
.aesto-decor--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.aesto-decor--flip-x { transform: scaleX(-1); }
.aesto-decor--flip-y { transform: scaleY(-1); }
.aesto-decor--flip-xy { transform: scale(-1, -1); }

/* Position helpers (corner anchors) */
.aesto-decor--tr { top: -60px; right: -120px; }
.aesto-decor--tl { top: -60px; left: -120px; }
.aesto-decor--br { bottom: -60px; right: -120px; }
.aesto-decor--bl { bottom: -60px; left: -120px; }
.aesto-decor--mr { top: 50%; right: -140px; transform: translateY(-50%); }
.aesto-decor--ml { top: 50%; left: -140px; transform: translateY(-50%); }
.aesto-decor--mr.aesto-decor--flip-x { transform: translateY(-50%) scaleX(-1); }
.aesto-decor--ml.aesto-decor--flip-x { transform: translateY(-50%) scaleX(-1); }

/* Sections that need positioning context for decorative children */
.aesto-method,
.aesto-team,
.aesto-approach,
.profhilo-features,
.profhilo-what,
.profhilo-approach,
.page-hero,
.cta,
.services-page,
.blog-page,
.blog-post-page,
.contact-page,
.testimonials-page,
.cart-page,
.shop-categories,
.shop-page,
.featured-products,
.shop-benefits,
.about-page,
.certifications,
.faq-section,
.offers-section,
.service-detail,
.endo-how,
.endo-benefits,
.endo-who,
.endo-team-section {
    position: relative;
    overflow: hidden;
}

.endo-how > .container,
.endo-benefits > .container,
.endo-who > .container,
.endo-team-section > .container {
    position: relative;
    z-index: 1;
}

/* Keep inner content above decorative layer for the new sections */
.page-hero > .container,
.cta > .container,
.services-page > .container,
.blog-page > .container,
.blog-post-page > .container,
.contact-page > .container,
.testimonials-page > .container,
.cart-page > .container,
.shop-categories > .container,
.shop-page > .container,
.featured-products > .container,
.shop-benefits > .container,
.about-page > .container,
.certifications > .container,
.faq-section > .container,
.offers-section > .container,
.service-detail > .container {
    position: relative;
    z-index: 1;
}

/* Keep section content above decorative layer */
.aesto-method > .container,
.aesto-team > .container,
.aesto-approach > .container,
.aesto-clinic > .container,
.aesto-cta > .container,
.aesto-hero-grid {
    position: relative;
    z-index: 1;
}

/* Hide line/ring decorations on small screens to keep things clean */
@media (max-width: 768px) {
    .aesto-decor--lines-h,
    .aesto-decor--lines-v,
    .aesto-decor--gold-ring,
    .aesto-decor--halftone {
        display: none;
    }
}


/* ============================================================
   BIOSTIMULATORS PAGE — /services/biostimulators.php
   Editorial layout following AESTO design language
   ============================================================ */

.bio-hero,
.bio-analysis,
.bio-use,
.bio-method,
.bio-tracking,
.bio-quote,
.bio-suitable,
.bio-gallery,
.bio-team,
.bio-final-cta {
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
}

/* ---------- 1) HERO ---------- */
.bio-hero {
    padding: 200px 0 60px;
    background: var(--cream);
}

.bio-hero-grid {
    max-width: none;
    margin: 0;
    padding: 0;
    padding-left: max(2rem, calc((100vw - 1280px) / 2 + 2rem));
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: 6rem;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.bio-hero-text { max-width: 540px; }

.bio-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    padding-left: 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.bio-hero-eyebrow strong {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 4px;
    color: var(--black);
    text-transform: none;
    line-height: 1;
}

.bio-hero-eyebrow span {
    line-height: 1.4;
    border-left: 1px solid rgba(43, 43, 43, 0.25);
    padding-left: 1rem;
    color: var(--text-light);
    font-size: 0.65rem;
}

.bio-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2.75rem, 6vw, 4.75rem);
    line-height: 1.02;
    color: var(--black);
    letter-spacing: -1.5px;
    margin-bottom: 1.25rem;
}

.bio-hero-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--primary-dark);
    margin-bottom: 1.75rem;
    letter-spacing: 0.5px;
}

.bio-hero-desc {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1rem;
    max-width: 520px;
}

.bio-hero-desc + .bio-hero-desc { margin-bottom: 2.25rem; }

.bio-hero-visual {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 24px 0 0 24px;
}

.bio-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
    display: block;
    filter: saturate(0.95);
}

/* ---------- 2) ANALYSIS BAR (DARK) ---------- */
.bio-analysis {
    padding: 0;
    border-top: 1.5rem solid var(--cream);
    border-bottom: 1.5rem solid var(--cream);
    background: var(--black);
    color: #F7F3EF;
}

.bio-analysis .container { position: relative; z-index: 1; }

.bio-analysis-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.4fr;
    gap: 3.5rem;
    align-items: center;
}

.bio-analysis-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.25;
    color: #F7F3EF;
    margin-bottom: 1rem;
}

.bio-analysis-title em {
    font-style: italic;
    color: var(--primary);
    font-weight: 400;
    display: block;
}

.bio-analysis-text p {
    color: rgba(247, 243, 239, 0.7);
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 420px;
    margin: 0;
}

.bio-analysis-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.bio-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bio-stat-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.bio-stat-content { display: flex; flex-direction: column; }

.bio-stat-value {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    color: var(--primary);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.bio-stat-label {
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(247, 243, 239, 0.7);
}

.bio-analysis-footnote {
    color: rgba(247, 243, 239, 0.45);
    font-size: 0.72rem;
    text-align: right;
    margin: 1.5rem 0 0;
    font-style: italic;
}

/* ---------- 3) USE CASES ---------- */
.bio-use {
    padding: 0;
    background: #FBF7F2;
}

.bio-use .container { position: relative; z-index: 1; }

.bio-use-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.bio-use-content { max-width: 760px; }

.bio-use-icons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.bio-use-card {
    text-align: center;
    padding: 1rem 0.5rem;
}

.bio-use-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: block;
}

.bio-use-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.bio-use-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-light);
    margin: 0;
}

.bio-use-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #EDE3D5;
}

.bio-use-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- 4) AESTO METHOD ---------- */
.bio-method {
    padding: 0;
    background: #fff;
}

.bio-method .container { position: relative; z-index: 1; }

.bio-method-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.bio-method-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.bio-method-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 3rem;
}

.bio-method-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #EDE3D5;
}

.bio-method-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bio-method-body p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.bio-method-accent {
    font-family: var(--font-heading);
    font-style: italic !important;
    font-size: 1.25rem !important;
    color: var(--black) !important;
    line-height: 1.5 !important;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(122, 92, 77, 0.2);
    margin-top: 1.5rem !important;
}

.bio-method-accent em { font-style: italic; }

.bio-method-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    padding-top: 2.25rem;
    border-top: 1px solid rgba(198, 164, 126, 0.25);
}

.bio-method-step { padding-right: 1rem; }

.bio-step-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 2rem;
    font-weight: 300;
    color: var(--primary);
    line-height: 1;
    display: block;
    margin-bottom: 1rem;
}

.bio-step-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--black);
    font-weight: 400;
    margin-bottom: 0.6rem;
    letter-spacing: 0.3px;
}

.bio-method-step p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-light);
    margin: 0;
}

/* ---------- 5) TRACKING ---------- */
.bio-tracking {
    padding: 0;
    background: #F7F3EF;
}

.bio-tracking .container { position: relative; z-index: 1; }

.bio-tracking-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.bio-tracking-text { max-width: 560px; }

.bio-tracking-text p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.bio-tracking-list {
    list-style: none;
    padding: 1.5rem 0 0;
    margin: 0;
    border-top: 1px solid rgba(198, 164, 126, 0.3);
}

.bio-tracking-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.75rem;
    color: var(--text);
    font-size: 0.95rem;
}

.bio-tracking-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 14px;
    height: 1px;
    background: var(--primary);
}

.bio-tracking-device {
    text-align: center;
    padding: 2rem;
    position: relative;
}

.bio-tracking-device::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198, 164, 126, 0.18) 0%, transparent 65%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bio-tracking-device img {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.bio-tracking-device-caption {
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--primary-dark);
    letter-spacing: 0.5px;
}

/* ---------- 6) QUOTE ---------- */
.bio-quote {
    padding: 0;
    background: #fff;
    text-align: center;
}

.bio-quote-block {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.bio-quote-mark {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 5rem;
    color: var(--primary);
    line-height: 0.6;
    margin-bottom: 0.5rem;
    opacity: 0.55;
}

.bio-quote-line {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    line-height: 1.5;
    color: var(--black);
    margin: 0.25rem 0;
    font-weight: 300;
}

.bio-quote-line--lead {
    font-style: italic;
    color: var(--primary-dark);
}

.bio-quote-line--soft {
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    color: var(--text);
    font-style: italic;
}

.bio-quote-author {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--primary-dark);
    margin: 2.5rem 0 0;
    font-size: 1.15rem;
    letter-spacing: 1px;
}

.bio-quote-author::before {
    content: "—";
    margin-right: 0.5rem;
    color: var(--primary);
}

/* ---------- 7) SUITABLE ---------- */
.bio-suitable {
    padding: 0;
    background: #FBF7F2;
}

.bio-suitable .container { position: relative; z-index: 1; }

.bio-suitable-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 4rem;
    align-items: start;
}

.bio-suitable-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.bio-suitable-list li {
    position: relative;
    padding: 1rem 0 1rem 2.25rem;
    border-bottom: 1px solid rgba(198, 164, 126, 0.25);
    font-size: 1rem;
    color: var(--text);
}

.bio-suitable-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.4rem;
    width: 16px;
    height: 8px;
    border-bottom: 1.5px solid var(--primary);
    border-left: 1.5px solid var(--primary);
    transform: rotate(-45deg);
}

.bio-suitable-list li:last-child { border-bottom: none; }

.bio-suitable-related {
    background: var(--black);
    color: #F7F3EF;
    padding: 2.25rem 2rem;
    border-radius: var(--radius-md);
    align-self: stretch;
}

.bio-suitable-related .aesto-eyebrow {
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.bio-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bio-related-list li {
    border-bottom: 1px solid rgba(247, 243, 239, 0.12);
}

.bio-related-list li:last-child { border-bottom: none; }

.bio-related-list a {
    display: block;
    padding: 0.95rem 0;
    color: rgba(247, 243, 239, 0.85);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.bio-related-list a:hover {
    color: var(--primary);
    padding-left: 0.5rem;
}

/* ---------- 8) GALLERY ---------- */
.bio-gallery {
    padding: 0;
    background: #fff;
}

.bio-gallery-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 2rem;
}

.bio-gallery-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.bio-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.25rem;
}

.bio-gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #EDE3D5;
    transition: transform 0.5s ease;
}

.bio-gallery-item--tall { aspect-ratio: 3 / 5; }

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

.bio-gallery-item:hover { transform: translateY(-4px); }
.bio-gallery-item:hover img { transform: scale(1.04); }

/* ---------- 9) TEAM ---------- */
.bio-team {
    padding: 0;
    background: #F7F3EF;
    text-align: center;
}

.bio-team-inner {
    max-width: 680px;
    margin: 0 auto;
}

.bio-team-inner .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.bio-team-inner p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.bio-team-inner > .aesto-btn,
.bio-final-cta-inner > .aesto-btn {
    margin-bottom: 1rem;
}

/* ---------- 10) FINAL CTA ---------- */
.bio-final-cta {
    padding: 0;
    background: var(--black);
    text-align: center;
    color: #F7F3EF;
}

.bio-final-cta .container { position: relative; z-index: 1; }

.bio-final-cta-inner {
    max-width: 720px;
    margin: 0 auto;
}

.bio-final-cta-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.25;
    color: #F7F3EF;
    margin-bottom: 1.5rem;
}

.bio-final-cta-title em {
    font-style: italic;
    color: var(--primary);
    font-weight: 400;
}

.bio-final-cta-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(247, 243, 239, 0.75);
    margin-bottom: 2.5rem;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .bio-hero { padding: 160px 0 60px; }

    .bio-hero-grid {
        padding: 0 2rem;
    }

    .bio-hero-grid,
    .bio-analysis-grid,
    .bio-use-grid,
    .bio-method-grid,
    .bio-tracking-grid,
    .bio-suitable-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .bio-method-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .bio-analysis-stats { grid-template-columns: 1fr; gap: 1.25rem; }
    .bio-use-icons { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .bio-gallery-grid { grid-template-columns: repeat(2, 1fr); }

    .bio-hero-visual { max-height: none; }

    .bio-tracking-device { padding: 0; }
}

@media (max-width: 600px) {
    .bio-hero { padding: 130px 0 40px; }
    .bio-hero-grid { padding: 0 1.25rem; }
    .bio-hero-eyebrow { margin-bottom: 2rem; }
    .bio-hero-title { font-size: 2.5rem; }

    .bio-analysis { padding: 0; }

    .bio-use,
    .bio-method,
    .bio-tracking,
    .bio-suitable,
    .bio-gallery,
    .bio-team,
    .bio-final-cta { padding: 0; }

    .bio-quote { padding: 0; }

    .bio-use-icons { grid-template-columns: repeat(2, 1fr); }
    .bio-method-steps { grid-template-columns: 1fr; gap: 1.75rem; }
    .bio-gallery-grid { grid-template-columns: 1fr; }

    .bio-hero-visual { border-radius: 220px 220px 8px 8px; }
}

/* ============================================================
   COLLAGEN STIMULATORS PAGE — /services/collagen-stimulators.php
   ============================================================ */

.cs-hero,
.cs-manifesto,
.cs-how,
.cs-suitable,
.cs-method,
.cs-result,
.cs-comparison,
.cs-related,
.cs-team,
.cs-faq,
.cs-final-cta {
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
}

/* ---------- 1) HERO ---------- */
.cs-hero {
    padding: 130px 0 0;
    background: var(--cream);
}

.cs-hero-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.cs-hero-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1774 / 887;
    object-fit: cover;
    object-position: center right;
}

.cs-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%,
            rgba(247, 243, 239, 0.85) 0%,
            rgba(247, 243, 239, 0.55) 45%,
            rgba(247, 243, 239, 0) 80%),
        linear-gradient(90deg,
            rgba(232, 222, 211, 0.92) 0%,
            rgba(232, 222, 211, 0.7) 30%,
            rgba(232, 222, 211, 0.3) 50%,
            rgba(232, 222, 211, 0) 70%),
        linear-gradient(180deg,
            rgba(40, 28, 14, 0) 70%,
            rgba(40, 28, 14, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

.cs-hero-banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 max(2rem, calc((100vw - 1280px) / 2 + 2rem));
    z-index: 2;
}

.cs-hero-text { max-width: 540px; }

.cs-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.08;
    color: var(--black);
    letter-spacing: -1px;
    margin-bottom: 1.25rem;
}

.cs-hero-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--primary-dark);
    margin-bottom: 1.75rem;
    letter-spacing: 0.5px;
}

.cs-hero-desc {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1rem;
    max-width: 520px;
}

.cs-hero-desc + .cs-hero-desc { margin-bottom: 2.25rem; }

/* ---------- 2) MANIFESTO / DARK BAND ---------- */
.cs-manifesto {
    padding: 3.5rem 0 2.75rem;
    background: var(--black);
    color: #F7F3EF;
}

.cs-manifesto .container { position: relative; z-index: 1; }

.cs-manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3.5rem;
    align-items: center;
}

.cs-manifesto-quote {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1.15;
    color: #F7F3EF;
    margin: 0;
    letter-spacing: -0.5px;
}

.cs-manifesto-quote em {
    font-style: italic;
    color: var(--primary);
    font-weight: 400;
}

.cs-manifesto-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    border-left: 1px solid rgba(247, 243, 239, 0.15);
    padding-left: 3rem;
}

.cs-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cs-stat-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.cs-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    color: var(--primary);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.cs-stat-label {
    display: block;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(247, 243, 239, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cs-manifesto-footnote {
    color: rgba(247, 243, 239, 0.4);
    font-size: 0.72rem;
    text-align: right;
    margin: 1.5rem 0 0;
    font-style: italic;
}

/* ---------- 3) HOW IT WORKS ---------- */
.cs-how {
    padding: 3rem 0;
    background: #fff;
}

.cs-how .container { position: relative; z-index: 1; }

.cs-how-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 1fr;
    gap: 3rem;
    align-items: start;
}

.cs-how-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cs-how-image img {
    width: 100%;
    height: auto;
    display: block;
}

.cs-how-text p {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1rem;
}

.cs-how-bullets {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cs-how-bullet {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    align-items: center;
}

.cs-how-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.cs-how-bullet p {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--black);
    margin: 0;
}

/* ---------- 4) ПОДХОДЯЩО ПРИ ---------- */
.cs-suitable {
    padding: 3rem 0;
    background: #FBF7F2;
}

.cs-suitable-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 1.75rem;
    position: relative;
    z-index: 1;
}

.cs-suitable-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.cs-suitable-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.cs-suitable-card {
    text-align: center;
    padding: 1.5rem 0.75rem;
}

.cs-suitable-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    display: block;
}

.cs-suitable-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 0.4rem;
    font-weight: 400;
}

.cs-suitable-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-light);
    margin: 0;
}

/* ---------- 5) AESTO METHOD (DARK + Process timeline) ---------- */
.cs-method {
    padding: 3.5rem 0;
    background: var(--black);
    color: #F7F3EF;
}

.cs-method .container { position: relative; z-index: 1; }

.cs-method-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3.5rem;
    align-items: start;
}

.cs-method-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(1.65rem, 2.4vw, 2rem);
    color: #F7F3EF;
    margin-bottom: 0.5rem;
    letter-spacing: -0.2px;
}

.cs-method-sub {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    letter-spacing: 0.3px;
}

.cs-method-text p {
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(247, 243, 239, 0.78);
    margin-bottom: 1rem;
}

.cs-method-list {
    list-style: none;
    padding: 1.25rem 0 0;
    margin: 0;
    border-top: 1px solid rgba(247, 243, 239, 0.12);
}

.cs-method-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.5rem;
    color: rgba(247, 243, 239, 0.85);
    font-size: 0.9rem;
}

.cs-method-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.5rem;
    color: var(--primary);
    font-size: 0.85rem;
}

/* Timeline */
.cs-method-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    position: relative;
}

.cs-method-cta {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.cs-method-timeline::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 164, 106, 0.5) 20%, rgba(201, 164, 106, 0.5) 80%, transparent 100%);
    z-index: 0;
}

.cs-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.cs-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(201, 164, 106, 0.5);
    background: var(--black);
    color: var(--primary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 0.85rem;
}

.cs-step-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 0.85rem;
    display: block;
    opacity: 0.85;
}

.cs-step-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #F7F3EF;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.cs-step p {
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(247, 243, 239, 0.6);
    margin: 0;
}

/* ---------- 6) RESULT ---------- */
.cs-result {
    padding: 3rem 0;
    background: var(--cream);
}

.cs-result .container { position: relative; z-index: 1; }

.cs-result-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 4rem;
    align-items: center;
}

.cs-result-text { max-width: 540px; }

.cs-result-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 1.25rem;
    letter-spacing: -0.5px;
}

.cs-result-title em {
    font-style: italic;
    color: var(--primary-dark);
    font-weight: 400;
}

.cs-result-text p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.cs-result-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 5 / 4;
    background: #EDE3D5;
}

.cs-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- 7) COMPARISON ---------- */
.cs-comparison {
    padding: 3rem 0;
    background: #fff;
}

.cs-comparison-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.cs-comparison-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.cs-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cs-comp-card {
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 320px;
}

.cs-comp-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.cs-comp-content { position: relative; z-index: 2; }

.cs-comp-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.cs-comp-card--bio {
    background: linear-gradient(135deg, #F4EAD9 0%, #E8D5B7 100%);
    color: var(--black);
}

.cs-comp-card--bio::after {
    background: linear-gradient(135deg, rgba(244, 234, 217, 0.6) 0%, rgba(232, 213, 183, 0.35) 100%);
}

.cs-comp-card--collagen {
    background: linear-gradient(135deg, var(--black) 0%, #2B2520 100%);
    color: #F7F3EF;
}

.cs-comp-card--collagen::after {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(43, 37, 32, 0.35) 100%);
}

.cs-comp-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: inherit;
}

.cs-comp-card--bio .cs-comp-eyebrow { color: var(--primary-dark); }
.cs-comp-card--collagen .cs-comp-eyebrow { color: var(--primary); }

.cs-comp-title {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cs-comp-card--bio .cs-comp-title { color: var(--text); }
.cs-comp-card--collagen .cs-comp-title { color: rgba(247, 243, 239, 0.8); }

.cs-comp-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.cs-comp-card--bio p { color: var(--text); }
.cs-comp-card--collagen p { color: rgba(247, 243, 239, 0.78); }

.cs-comp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-dark);
    text-decoration: none;
    transition: gap 0.3s ease;
}

.cs-comp-link:hover { gap: 1rem; }

.cs-comp-badge {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid var(--primary);
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ---------- 8) СВЪРЗАНИ ПРОЦЕДУРИ ---------- */
.cs-related {
    padding: 3rem 0;
    background: #FBF7F2;
}

.cs-related .container { position: relative; z-index: 1; }

.cs-related-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.cs-related-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.cs-related-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}

.cs-related-card {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.4s ease;
}

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

.cs-related-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #EDE3D5;
    margin-bottom: 1rem;
}

.cs-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.cs-related-card:hover .cs-related-image img { transform: scale(1.04); }

.cs-related-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--black);
    font-weight: 400;
    margin-bottom: 0.4rem;
}

.cs-related-card p {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0;
}

/* ---------- 9) ЕКИП ---------- */
.cs-team {
    padding: 3rem 0;
    background: #fff;
    text-align: center;
}

.cs-team-inner {
    max-width: 680px;
    margin: 0 auto;
}

.cs-team-inner .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.cs-team-inner p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.cs-team-inner > .aesto-btn { margin-top: 1rem; }

/* ---------- 10) FAQ ---------- */
.cs-faq {
    padding: 3rem 0;
    background: var(--cream);
}

.cs-faq-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.cs-faq-head .aesto-hairline {
    margin-left: auto;
    margin-right: auto;
}

.cs-faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.cs-faq-item {
    border-bottom: 1px solid rgba(198, 164, 126, 0.3);
    padding: 1.25rem 0;
}

.cs-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--black);
    font-weight: 400;
}

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

.cs-faq-item summary i {
    color: var(--primary);
    font-size: 0.85rem;
    transition: transform 0.4s ease;
}

.cs-faq-item[open] summary i { transform: rotate(45deg); }

.cs-faq-item p {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text);
}

/* ---------- 11) FINAL CTA ---------- */
.cs-final-cta {
    padding: 3.5rem 0;
    background: var(--black);
    text-align: center;
    color: #F7F3EF;
}

.cs-final-cta .container { position: relative; z-index: 1; }

.cs-final-cta-inner {
    max-width: 720px;
    margin: 0 auto;
}

.cs-final-cta-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.25;
    color: #F7F3EF;
    margin-bottom: 1.5rem;
}

.cs-final-cta-title em {
    font-style: italic;
    color: var(--primary);
    font-weight: 400;
}

.cs-final-cta-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(247, 243, 239, 0.75);
    margin-bottom: 2.5rem;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .cs-suitable-grid { grid-template-columns: repeat(3, 1fr); }
    .cs-related-grid { grid-template-columns: repeat(3, 1fr); }
    .cs-method-timeline { grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
}

@media (max-width: 992px) {
    .cs-manifesto-grid,
    .cs-how-grid,
    .cs-method-grid,
    .cs-result-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .cs-manifesto-stats {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(247, 243, 239, 0.15);
        padding-top: 2rem;
    }

    .cs-comparison-grid { grid-template-columns: 1fr; }

    .cs-method-timeline { grid-template-columns: repeat(5, 1fr); }
    .cs-method-timeline::before { display: none; }

    .cs-hero-banner-content { padding: 0 1.5rem; }
    .cs-hero-banner::before {
        background:
            linear-gradient(180deg,
                rgba(232, 222, 211, 0) 35%,
                rgba(232, 222, 211, 0.92) 75%,
                var(--cream) 100%),
            linear-gradient(90deg,
                rgba(232, 222, 211, 0.5) 0%,
                rgba(232, 222, 211, 0.15) 50%,
                rgba(232, 222, 211, 0.5) 100%);
    }
    .cs-hero-banner-content { align-items: flex-end; padding-bottom: 2rem; }
    .cs-hero-text { max-width: 100%; }

    .cs-how-bullets {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .cs-how-bullet {
        flex: 1 1 calc(50% - 0.5rem);
        grid-template-columns: 48px 1fr;
    }
}

@media (max-width: 600px) {
    .cs-hero { padding: 110px 0 0; }
    .cs-hero-image { aspect-ratio: 4 / 5; object-position: 65% center; }

    .cs-manifesto { padding: 3rem 0 2.5rem; }
    .cs-manifesto-stats { grid-template-columns: 1fr; gap: 1.25rem; }

    .cs-how,
    .cs-suitable,
    .cs-method,
    .cs-result,
    .cs-comparison,
    .cs-related,
    .cs-team,
    .cs-faq,
    .cs-final-cta { padding: 3rem 0; }

    .cs-suitable-grid { grid-template-columns: repeat(2, 1fr); }
    .cs-related-grid { grid-template-columns: repeat(2, 1fr); }

    .cs-method-timeline {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cs-step-num { margin-bottom: 0.5rem; }

    .cs-how-bullet { flex: 1 1 100%; }
}

/* =============================================================
   TEAM PAGE
   ============================================================= */
.team-hero,
.team-philosophy,
.team-grid-section,
.team-final-cta {
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
}

/* ---------- 1) HERO ---------- */
.team-hero {
    padding: 0;
    background: #2A2A2A;
    padding-top: clamp(110px, 12vw, 160px);
}

.team-hero-grid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    z-index: 1;
}

.team-hero-visual {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

.team-hero-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.team-hero-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding-left: max(1.5rem, calc((100vw - 1280px) / 2 + 1.5rem));
    padding-right: 1.5rem;
    max-width: min(560px, 45%);
    color: #fff;
    z-index: 2;
}

@media (min-width: 993px) {
    .team-hero-eyebrow { margin-bottom: clamp(1rem, 1.5vw, 1.75rem); }
    .team-hero-title {
        font-size: clamp(1.75rem, 3vw, 3rem);
        line-height: 1.1;
        margin-bottom: clamp(0.75rem, 1vw, 1.25rem);
    }
    .team-hero-tagline {
        font-size: clamp(0.6rem, 0.7vw, 0.75rem);
        margin-bottom: clamp(0.6rem, 0.85vw, 1rem);
    }
    .team-hero-desc {
        font-size: clamp(0.78rem, 0.9vw, 0.95rem);
        line-height: 1.65;
        margin-bottom: 0.65rem;
    }
    .team-hero-desc + .team-hero-desc {
        display: none;
    }
}

.team-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 2.5rem;
}

.team-hero-eyebrow strong {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 4px;
    color: #fff;
    line-height: 1;
}

.team-hero-eyebrow span {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.team-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: 1.05;
    color: #fff;
    letter-spacing: -1.5px;
    margin-bottom: 1.5rem;
}

.team-hero-title em {
    font-style: italic;
    color: var(--primary);
}

.team-hero-tagline {
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.75rem;
}

.team-hero-desc {
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 1rem;
    max-width: 520px;
}

.team-hero-desc strong {
    color: #fff;
    font-weight: 500;
}

/* ---------- 2) PHILOSOPHY ---------- */
.team-philosophy {
    padding: clamp(2rem, 4vw, 3.25rem) 0;
    background: #fff;
    text-align: center;
}

.team-philosophy-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}

.team-philosophy-title em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary-dark);
}

.team-philosophy-text {
    max-width: 760px;
    margin: 0 auto;
}

.team-philosophy-text p {
    font-size: clamp(0.875rem, 1vw, 0.95rem);
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.team-philosophy-text p:last-child { margin-bottom: 0; }

/* ---------- 3) TEAM GRID ---------- */
.team-grid-section {
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: #FBF7F2;
    position: relative;
    overflow: hidden;
}

.team-grid-section .container {
    position: relative;
    z-index: 1;
}

.team-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    display: block;
}

.team-decor img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.team-decor--spiral {
    top: clamp(-120px, -8vw, -60px);
    left: clamp(-140px, -10vw, -80px);
    width: clamp(220px, 32vw, 460px);
    height: clamp(220px, 32vw, 460px);
    opacity: 0.14;
    transform: rotate(-12deg);
    mix-blend-mode: multiply;
}

.team-decor--ring {
    bottom: clamp(-160px, -10vw, -80px);
    right: clamp(-160px, -12vw, -90px);
    width: clamp(240px, 36vw, 540px);
    height: clamp(240px, 36vw, 540px);
    opacity: 0.18;
    transform: rotate(18deg);
    mix-blend-mode: multiply;
}

.team-row {
    display: grid;
    gap: clamp(1rem, 1.75vw, 1.75rem);
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.team-row:last-child { margin-bottom: 0; }

.team-row--four {
    grid-template-columns: repeat(4, 1fr);
}

.team-row--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 76%;
    margin-left: auto;
    margin-right: auto;
}

.team-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(43, 43, 43, 0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
    z-index: 1;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(43, 43, 43, 0.08);
}

.team-card-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--cream-dark);
}

.team-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.team-card-name {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 1.75rem 1rem 0.5rem;
}

.team-card-role {
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0 1rem 1.5rem;
}

.team-card-bio {
    padding: 1.5rem 1.75rem 0.5rem;
    border-top: 1px solid rgba(198, 164, 126, 0.18);
}

.team-card-bio p {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 0.85rem;
}

.team-card-bio p:last-child { margin-bottom: 0; }

.team-card-bio-short {
    margin-bottom: 0;
}

.team-card-bio-extra {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.4s ease;
    margin-top: 0;
}

.team-card.is-expanded .team-card-bio-extra {
    max-height: 600px;
    opacity: 1;
    margin-top: 0.85rem;
}

.team-card-bio-toggle {
    margin: 0.75rem 1.75rem 1.5rem;
    padding: 0.7rem 1rem;
    min-height: 40px;
    background: transparent;
    border: 1px solid rgba(198, 164, 126, 0.35);
    border-radius: 999px;
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    align-self: flex-start;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.team-card-bio-toggle:hover,
.team-card-bio-toggle:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    outline: none;
}

.team-card-bio-toggle-icon {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
}

.team-card-bio-toggle-icon::before,
.team-card-bio-toggle-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform 0.3s ease;
}

.team-card-bio-toggle-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    transform: translateY(-50%);
}

.team-card-bio-toggle-icon::after {
    top: 0;
    left: 50%;
    width: 1.5px;
    height: 100%;
    transform: translateX(-50%);
}

.team-card.is-expanded .team-card-bio-toggle-icon::after {
    transform: translateX(-50%) scaleY(0);
}

/* ---------- 4) FINAL CTA ---------- */
.team-final-cta {
    padding: clamp(2.5rem, 4.5vw, 3.5rem) clamp(1.25rem, 3vw, 2rem);
    background: var(--black);
    color: #F7F3EF;
    text-align: center;
    background-image:
        linear-gradient(135deg, rgba(43, 43, 43, 0.92) 0%, rgba(58, 52, 44, 0.96) 100%),
        radial-gradient(circle at 80% 20%, rgba(198, 164, 126, 0.18) 0%, transparent 60%);
}

.team-final-cta-inner {
    max-width: 760px;
    margin: 0 auto;
}

.team-final-cta-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.25;
    color: var(--primary);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: -0.5px;
}

.team-final-cta-title em {
    font-style: italic;
    color: #F7F3EF;
}

.team-final-cta-desc {
    font-size: clamp(0.875rem, 1vw, 0.95rem);
    line-height: 1.8;
    color: rgba(247, 243, 239, 0.78);
    margin-bottom: 1rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.team-final-cta .aesto-btn { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.aesto-btn--gold {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.aesto-btn--gold:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* ---------- HEADER NAV — AESTO Метод GOLD CTA ---------- */
.nav-menu > a.nav-cta-method {
    background: var(--primary);
    color: #fff !important;
    padding: 0.7rem 1.4rem;
    margin: 0 0.6rem;
    border-radius: 4px;
    transition: background 0.25s ease;
}

.nav-menu > a.nav-cta-method:hover,
.nav-menu > a.nav-cta-method.active {
    background: var(--primary-dark);
    color: #fff !important;
}

.nav-menu > a.nav-cta-method::after { display: none !important; }

/* ---------- TEAM RESPONSIVE ---------- */

/* Large laptop / small desktop (≤1280px, ≥993px): tighter hero overlay */
@media (max-width: 1280px) and (min-width: 993px) {
    .team-hero-text { max-width: min(500px, 48%); }
}

/* Small laptop / large tablet landscape (993-1100px): keep 4-col but compact */
@media (max-width: 1100px) and (min-width: 993px) {
    .team-row--four { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .team-row--three { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
    .team-hero-text { max-width: min(420px, 44%); padding-left: 1.5rem; }
    .team-card-name { font-size: 0.95rem; margin-top: 1.25rem; }
    .team-card-bio { padding: 1.25rem 1.25rem 0.5rem; }
}

/* Tablet (≤992px): hero text drops below banner, grid becomes 2-col */
@media (max-width: 992px) {
    .team-hero {
        padding-top: 0;
    }

    .team-hero-visual {
        aspect-ratio: 16 / 11;
        height: auto;
    }

    .team-hero-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 78% center;
    }

    .team-hero-text {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        max-width: 100%;
        padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2rem) clamp(40px, 6vw, 60px);
    }

    .team-hero-title { font-size: clamp(2rem, 5vw, 3rem); }
    .team-hero-tagline { font-size: 0.7rem; }
    .team-hero-desc { font-size: clamp(0.875rem, 1.6vw, 0.95rem); line-height: 1.8; max-width: 620px; }

    .team-row--four { grid-template-columns: repeat(2, 1fr); }
    .team-row--three { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}

/* Phone landscape & portrait (≤720px): taller crop showing more of the people */
@media (max-width: 720px) {
    .team-hero-visual {
        aspect-ratio: 4 / 3;
    }
    .team-hero-visual img {
        object-position: 80% center;
    }
}

/* Mobile (≤720px) — adjustments shared by phone sizes */
@media (max-width: 720px) {
    .team-decor--spiral { opacity: 0.10; }
    .team-decor--ring { opacity: 0.12; }
    .team-card-bio-toggle { margin-left: 1.25rem; margin-right: 1.25rem; }
    .team-card-bio { padding: 1.25rem 1.25rem 0.5rem; }
}

/* Phone (≤480px): single column */
@media (max-width: 480px) {
    .team-row--four,
    .team-row--three {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .team-hero-title { font-size: clamp(1.85rem, 8vw, 2.25rem); }
    .team-hero-desc { font-size: 0.9rem; }

    .team-decor--spiral { opacity: 0.08; }
    .team-decor--ring { opacity: 0.10; }

    .team-card-bio-toggle {
        width: calc(100% - 2.5rem);
        justify-content: center;
    }
}

/* Very small phones (≤360px): more compact */
@media (max-width: 360px) {
    .team-card-name { font-size: 0.95rem; letter-spacing: 1px; }
    .team-card-bio p { font-size: 0.82rem; }
    .team-hero-text { padding-left: 1rem; padding-right: 1rem; }
}

/* ==================================================================
   PLASMOLIFTING — /services/plasmolifting.php
   Mix style: dark hero + dark final CTA, light middle sections.
   ================================================================== */

/* ---- 1. HERO (dark) ---- */
.pl-hero {
    position: relative;
    min-height: 100vh;
    max-height: 880px;
    display: flex;
    align-items: center;
    padding: 130px 0 0;
    overflow: hidden;
    background: #1A1612;
}
.pl-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    z-index: 0;
}
.pl-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20,16,12,0.94) 0%, rgba(20,16,12,0.78) 35%, rgba(20,16,12,0.25) 70%, rgba(20,16,12,0.05) 100%),
        linear-gradient(180deg, rgba(20,16,12,0.25) 0%, rgba(20,16,12,0.55) 100%);
    z-index: 1;
}
.pl-hero-container {
    position: relative;
    z-index: 2;
    padding-bottom: 8rem;
}
.pl-hero-text {
    max-width: 600px;
    color: #fff;
}
.pl-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary-light, #E0C9A6);
    margin-bottom: 1.25rem;
}
.pl-hero-text h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.05;
    margin: 0 0 1.5rem;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.pl-hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    color: var(--primary-light, #E0C9A6);
    line-height: 1.4;
    margin: 0 0 1.5rem;
}
.pl-hero-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.78);
    max-width: 520px;
    margin: 0 0 1rem;
}
.pl-hero-desc strong { color: #fff; font-weight: 500; }
.pl-hero-cta {
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    border-radius: 4px;
    padding: 0.95rem 1.75rem;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
}
.pl-hero-cta:hover,
.pl-hero-cta:focus,
.pl-hero-cta:active {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.pl-hero-cta i { font-size: 0.75rem; }

.pl-hero-icons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(15,11,8,0.55);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.5rem 0;
}
.pl-hero-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: center;
}
.pl-hero-icon-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
.pl-hero-icon-item i {
    color: var(--primary-light, #E0C9A6);
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* ---- 2. WHAT IS + 4 ICONS (light) ---- */
.pl-what-is {
    background-color: var(--cream);
    padding: 6rem 0 5rem;
}
.pl-what-is .section-header { margin-bottom: 2.5rem; text-align: center; }
.pl-what-is .section-title {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--black);
}
.pl-what-is-text {
    max-width: 780px;
    margin: 0 auto 3.5rem;
    text-align: center;
}
.pl-what-is-text p {
    color: var(--text-light);
    line-height: 1.85;
    font-size: 0.975rem;
    margin: 0 0 1rem;
}
.pl-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.pl-benefit { text-align: center; padding: 0.5rem; }
.pl-benefit-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 6px 22px rgba(138,106,72,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.85rem;
    transition: var(--transition);
}
.pl-benefit:hover .pl-benefit-icon {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(138,106,72,0.20);
}
.pl-benefit h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.6rem;
    font-weight: 500;
}
.pl-benefit p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.55;
    margin: 0;
}

/* ---- 3. BENEFITS LIST (light contrast) ---- */
.pl-benefits-list {
    background-color: #F3EDE3;
    padding: 5.5rem 0 6rem;
}
.pl-benefits-list .section-header { margin-bottom: 3rem; text-align: center; }
.pl-benefits-list .section-title {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--black);
}

/* Reusable checklist (used across sections) */
.pl-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pl-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: start;
    gap: 0.85rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.55;
}
.pl-checklist li i {
    color: var(--primary);
    font-size: 0.7rem;
    margin-top: 0.25rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pl-checklist--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 3rem;
    max-width: 980px;
    margin: 0 auto;
}

/* ---- 4. PROTOCOL — card with photo strip ---- */
.pl-protocol {
    background-color: var(--cream);
    padding: 5.5rem 0 6rem;
}
.pl-protocol-card {
    position: relative;
    background: #F0E6D6;
    border-radius: 24px;
    padding: 3rem 2.5rem 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(138,106,72,0.08);
}
.pl-protocol-decor {
    position: absolute;
    top: 1.25rem;
    width: clamp(140px, 18vw, 220px);
    height: auto;
    pointer-events: none;
    opacity: 0.55;
    z-index: 1;
}
.pl-protocol-decor--left { left: 1rem; }
.pl-protocol-decor--right { right: 1rem; transform: scaleX(-1); }

.pl-protocol-title {
    text-align: center;
    font-family: var(--font-heading);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.5vw, 1.95rem);
    color: var(--primary-dark);
    margin: 0 0 1.25rem;
    position: relative;
    z-index: 2;
}
.pl-protocol-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto 2.5rem;
    max-width: 220px;
    position: relative;
    z-index: 2;
}
.pl-protocol-line {
    flex: 1;
    height: 1px;
    background: var(--primary);
    opacity: 0.7;
}
.pl-protocol-diamond {
    width: 7px;
    height: 7px;
    background: var(--primary);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.pl-protocol-numbers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1100px;
    margin: 0 auto 1.25rem;
    position: relative;
    z-index: 2;
}
.pl-protocol-numbers span {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    color: var(--primary-dark);
    text-align: center;
    letter-spacing: 1px;
    font-weight: 400;
}
.pl-protocol-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    aspect-ratio: 750 / 280;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 18px rgba(138,106,72,0.10);
}
.pl-protocol-strip img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center center;
}

/* ---- 5. SUITABLE + METHOD (2-col split) ---- */
.pl-suitable-method {
    background-color: #F3EDE3;
    padding: 5.5rem 0 6rem;
}
.pl-sm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
}
.pl-suitable-card,
.pl-method-card {
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: 0 6px 24px rgba(138,106,72,0.06);
}
.pl-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 400;
    color: var(--black);
    margin: 0 0 1.5rem;
    letter-spacing: 0.5px;
}
.pl-suitable-image {
    margin-top: 2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.pl-suitable-image img {
    width: 100%;
    height: auto;
    display: block;
}
.pl-method-lead {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0 0 1.75rem;
}
.pl-method-lead strong { color: var(--primary-dark); font-weight: 500; }
.pl-method-pillars {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.pl-pillar {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid rgba(196,164,132,0.25);
}
.pl-pillar:first-of-type { border-top: none; padding-top: 0.25rem; }
.pl-pillar-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.4rem;
    box-shadow: 0 4px 14px rgba(138,106,72,0.08);
}
.pl-pillar-text h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0.45rem 0 0.5rem;
    font-weight: 500;
}
.pl-pillar-text p {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0;
}

/* ---- 6. RESULT + RECOVERY (2-col split) ---- */
.pl-result-recovery {
    background-color: var(--cream);
    padding: 5.5rem 0 6rem;
}
.pl-rr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
}
.pl-result-card,
.pl-recovery-card {
    background: #F3EDE3;
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: 0 6px 24px rgba(138,106,72,0.06);
}
.pl-result-lead {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--primary-dark);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}
.pl-result-card p:not(.pl-result-lead) {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.pl-result-image {
    margin-top: 1.5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.pl-result-image img {
    width: 100%;
    height: auto;
    display: block;
}
.pl-recovery-card p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.pl-recovery-card p strong { color: var(--primary-dark); font-weight: 500; }
.pl-recovery-sub {
    margin-bottom: 1.75rem !important;
}
.pl-recovery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.25rem;
}
.pl-recovery-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text);
    padding: 0.6rem 0.85rem;
    background: #FFFFFF;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(196,164,132,0.18);
    letter-spacing: 0.3px;
}
.pl-recovery-item i { font-size: 1rem; flex-shrink: 0; }
.pl-recovery-item--no i { color: #B85C5C; }
.pl-recovery-item--yes i { color: #6E9E6E; }

/* ---- 7. FAQ — 4 fixed cards (PDF mockup style with `?` icon) ---- */
.pl-faq {
    background-color: #F3EDE3;
    padding: 5.5rem 0 6rem;
}
.pl-faq .section-header { margin-bottom: 3rem; text-align: center; }
.pl-faq .section-title {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--black);
}
.pl-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.pl-faq-card {
    background: var(--cream);
    border: 1px solid rgba(196,164,132,0.20);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    text-align: left;
    transition: var(--transition);
}
.pl-faq-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(138,106,72,0.10);
    border-color: rgba(196,164,132,0.45);
}
.pl-faq-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.pl-faq-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.6rem;
    line-height: 1.35;
}
.pl-faq-card p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0;
}

/* ---- 8. FINAL CTA (dark band) ---- */
.pl-final-cta {
    position: relative;
    background: #1A1612;
    padding: 5rem 0;
    overflow: hidden;
    text-align: center;
}
.pl-final-cta-bg {
    position: absolute;
    inset: 0;
    background-image: url('/images/plasmolifting/hero.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    z-index: 0;
}
.pl-final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,16,12,0.85) 0%, rgba(20,16,12,0.95) 100%);
    z-index: 1;
}
.pl-final-cta .container { position: relative; z-index: 2; }
.pl-final-cta-inner {
    max-width: 720px;
    margin: 0 auto;
}
.pl-final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 1.25rem;
}
.pl-final-cta p {
    font-size: 1rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    margin: 0 0 2rem;
}
.pl-final-cta-btn {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 4px;
    padding: 1rem 2.25rem;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
    display: inline-block;
}
.pl-final-cta-btn:hover,
.pl-final-cta-btn:focus,
.pl-final-cta-btn:active {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}

/* ---- Responsive — Mobile / Tablet / Laptop / Desktop ---- */

/* === LAPTOP (992-1199px): minor compactions === */
@media (max-width: 1199px) {
    .pl-hero-text { max-width: 540px; }
    .pl-hero-text h1 { font-size: clamp(2.5rem, 5vw, 4rem); }

    .pl-what-is { padding: 5rem 0 4rem; }
    .pl-benefits-grid { gap: 1.5rem; }
    .pl-benefits-list, .pl-protocol, .pl-suitable-method, .pl-result-recovery, .pl-faq { padding: 5rem 0; }

    .pl-protocol-card { padding: 2.5rem 2rem 2rem; }
    .pl-protocol-strip,
    .pl-protocol-numbers { max-width: 100%; }

    .pl-sm-grid, .pl-rr-grid { gap: 2rem; max-width: 100%; }
    .pl-suitable-card, .pl-method-card,
    .pl-result-card, .pl-recovery-card { padding: 2.25rem 1.75rem; }
    .pl-faq-grid { gap: 1.25rem; }
}

/* === TABLET (768-991px): 2-col layouts, side-by-side hero icons === */
@media (max-width: 991px) {
    .pl-hero { min-height: auto; padding: 110px 0 0; }
    .pl-hero-container { padding-bottom: 9rem; }
    .pl-hero-overlay {
        background:
            linear-gradient(180deg, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0.78) 50%, rgba(20,16,12,0.92) 100%);
    }
    .pl-hero-image { background-position: center top; opacity: 0.85; }
    .pl-hero-text { max-width: 100%; }
    .pl-hero-text h1 { font-size: clamp(2.25rem, 6vw, 3.25rem); }
    .pl-hero-tagline { font-size: 1.1rem; }
    .pl-hero-desc { max-width: 100%; }

    .pl-hero-icons-grid { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
    .pl-hero-icon-item { flex-direction: column; gap: 0.4rem; text-align: center; font-size: 0.62rem; letter-spacing: 1.2px; }

    .pl-what-is { padding: 4.5rem 0 3.5rem; }
    .pl-benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; max-width: 600px; margin: 0 auto; }

    .pl-benefits-list { padding: 4.5rem 0 5rem; }
    .pl-checklist--two-col { grid-template-columns: 1fr; gap: 0.9rem; max-width: 540px; margin: 0 auto; }

    .pl-protocol { padding: 4.5rem 0 5rem; }
    .pl-protocol-card { padding: 2.25rem 1.5rem 1.75rem; border-radius: 20px; }
    .pl-protocol-decor { width: 130px; top: 1rem; }
    .pl-protocol-decor--left { left: 0.5rem; }
    .pl-protocol-decor--right { right: 0.5rem; }
    .pl-protocol-title { letter-spacing: 3px; }
    .pl-protocol-divider { margin-bottom: 2rem; }

    .pl-suitable-method, .pl-result-recovery { padding: 4.5rem 0 5rem; }
    .pl-sm-grid, .pl-rr-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 640px; margin: 0 auto; }
    .pl-suitable-card, .pl-method-card,
    .pl-result-card, .pl-recovery-card { padding: 2.25rem 1.75rem; }
    .pl-suitable-image { max-width: 380px; margin-left: auto; margin-right: auto; }
    .pl-result-image { max-width: 380px; margin-left: auto; margin-right: auto; }

    .pl-faq { padding: 4.5rem 0 5rem; }
    .pl-faq-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 640px; margin: 0 auto; }

    .pl-final-cta { padding: 4.5rem 0; }
    .pl-final-cta h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
}

/* === LARGE MOBILE (576-767px): tighter layouts, 2x2 hero icons option === */
@media (max-width: 767px) {
    .pl-hero-container { padding-bottom: 11rem; }
    .pl-hero-text h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
    .pl-hero-eyebrow { letter-spacing: 3px; font-size: 0.72rem; }
    .pl-hero-tagline { font-size: 1rem; line-height: 1.45; }
    .pl-hero-desc { font-size: 0.9rem; line-height: 1.7; }
    .pl-hero-cta { padding: 0.85rem 1.5rem; font-size: 0.8rem; letter-spacing: 1.2px; }

    .pl-hero-icons { padding: 1.1rem 0; }
    .pl-hero-icons-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem 1.25rem; }
    .pl-hero-icon-item { flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.7rem; text-align: left; font-size: 0.68rem; letter-spacing: 1.5px; }
    .pl-hero-icon-item i { font-size: 1.15rem; }

    .pl-what-is { padding: 4rem 0 3rem; }
    .pl-what-is-text { margin-bottom: 2.5rem; }
    .pl-what-is-text p { font-size: 0.92rem; line-height: 1.75; }

    .pl-benefits-list { padding: 4rem 0 4.5rem; }
    .pl-protocol { padding: 4rem 0 4.5rem; }
    .pl-protocol-card { padding: 2rem 1rem 1.5rem; border-radius: 18px; }
    .pl-protocol-decor { width: 90px; top: 0.75rem; opacity: 0.4; }
    .pl-protocol-title { font-size: 1.15rem; letter-spacing: 2.5px; }
    .pl-protocol-divider { margin-bottom: 1.5rem; }
    .pl-protocol-numbers span { font-size: 0.95rem; }
    .pl-protocol-strip { border-radius: 12px; }

    .pl-suitable-method, .pl-result-recovery { padding: 4rem 0 4.5rem; }
    .pl-sm-grid, .pl-rr-grid { max-width: 100%; }
    .pl-suitable-card, .pl-method-card,
    .pl-result-card, .pl-recovery-card { padding: 2rem 1.5rem; }
    .pl-card-title { font-size: 1.55rem; }
    .pl-method-lead { font-size: 0.92rem; }
    .pl-result-lead { font-size: 1.2rem; }

    .pl-pillar { grid-template-columns: 56px 1fr; gap: 1rem; }
    .pl-pillar-icon { width: 56px; height: 56px; font-size: 1.2rem; }

    .pl-recovery-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem 0.75rem; }
    .pl-recovery-item { font-size: 0.8rem; padding: 0.55rem 0.7rem; }

    .pl-faq { padding: 4rem 0 4.5rem; }
    .pl-faq-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 480px; margin: 0 auto; }
    .pl-faq-card { padding: 1.5rem 1.25rem; }

    .pl-final-cta { padding: 4rem 0; }
    .pl-final-cta h2 { font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: 1rem; }
    .pl-final-cta p { font-size: 0.92rem; }
    .pl-final-cta-btn { padding: 0.9rem 2rem; font-size: 0.8rem; }
}

/* === MOBILE (≤ 575px): single-column where it makes sense === */
@media (max-width: 575px) {
    .pl-hero { padding: 100px 0 0; }
    .pl-hero-container { padding-bottom: 12rem; }
    .pl-hero-text h1 { font-size: 2.1rem; }
    .pl-hero-eyebrow { font-size: 0.68rem; letter-spacing: 2.5px; }
    .pl-hero-tagline { font-size: 0.95rem; }
    .pl-hero-desc { font-size: 0.85rem; line-height: 1.65; }

    .pl-hero-icons { padding: 1rem 0; }
    .pl-hero-icons-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem 0.85rem; }
    .pl-hero-icon-item { gap: 0.5rem; font-size: 0.6rem; letter-spacing: 1.2px; }
    .pl-hero-icon-item i { font-size: 1rem; }

    .pl-what-is, .pl-benefits-list, .pl-protocol, .pl-suitable-method, .pl-result-recovery, .pl-faq, .pl-final-cta {
        padding: 3.5rem 0;
    }
    .pl-what-is .section-title,
    .pl-benefits-list .section-title,
    .pl-protocol .section-title,
    .pl-faq .section-title { font-size: 1.5rem; letter-spacing: 1.5px; }

    .pl-benefits-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 280px; margin: 0 auto; }
    .pl-benefit-icon { width: 80px; height: 80px; font-size: 1.65rem; }

    .pl-checklist li { font-size: 0.88rem; gap: 0.65rem; }
    .pl-checklist--two-col { max-width: 100%; }

    .pl-protocol-card { padding: 1.75rem 0.75rem 1.25rem; border-radius: 14px; }
    .pl-protocol-decor { width: 70px; top: 0.5rem; opacity: 0.35; }
    .pl-protocol-decor--left { left: 0.25rem; }
    .pl-protocol-decor--right { right: 0.25rem; }
    .pl-protocol-title { font-size: 1rem; letter-spacing: 2px; padding: 0 4.5rem; }
    .pl-protocol-divider { max-width: 160px; margin-bottom: 1.25rem; }
    .pl-protocol-numbers span { font-size: 0.78rem; }
    .pl-protocol-strip { border-radius: 8px; }

    .pl-sm-grid, .pl-rr-grid { gap: 1.5rem; }
    .pl-suitable-card, .pl-method-card,
    .pl-result-card, .pl-recovery-card { padding: 1.75rem 1.25rem; border-radius: var(--radius-md); }
    .pl-card-title { font-size: 1.35rem; margin-bottom: 1.1rem; }

    .pl-suitable-image, .pl-result-image { max-width: 100%; }

    .pl-pillar { grid-template-columns: 48px 1fr; gap: 0.85rem; padding: 0.85rem 0; }
    .pl-pillar-icon { width: 48px; height: 48px; font-size: 1.05rem; }
    .pl-pillar-text h4 { font-size: 0.72rem; letter-spacing: 1.5px; }
    .pl-pillar-text p { font-size: 0.82rem; }

    .pl-recovery-grid { grid-template-columns: 1fr; gap: 0.55rem; }

    .pl-faq-grid { grid-template-columns: 1fr; gap: 0.9rem; max-width: 100%; }
    .pl-faq-card { padding: 1.4rem 1.15rem; }
    .pl-faq-mark { width: 38px; height: 38px; font-size: 1.2rem; }
    .pl-faq-card h4 { font-size: 1rem; }
    .pl-faq-card p { font-size: 0.82rem; }

    .pl-final-cta h2 { font-size: 1.65rem; line-height: 1.3; }
    .pl-final-cta p { font-size: 0.88rem; line-height: 1.6; margin-bottom: 1.5rem; }
    .pl-final-cta-btn { padding: 0.85rem 1.75rem; font-size: 0.78rem; letter-spacing: 1.2px; }
}

/* === EXTRA SMALL MOBILE (≤ 380px): single-column hero icons === */
@media (max-width: 380px) {
    .pl-hero-text h1 { font-size: 1.85rem; }
    .pl-hero-icons-grid { grid-template-columns: 1fr; gap: 0.5rem; max-width: 220px; margin: 0 auto; }
    .pl-hero-icon-item { justify-content: flex-start; }
}

/* ==================================================================
   VAMPIRE LIFTING / PRP — /services/prp-vampire-lift.php
   Fully dark theme with gold accents.
   ================================================================== */

.vl-divider {
    width: 60px;
    height: 1px;
    background: var(--primary, #C4A484);
    margin: 0 0 1.5rem;
}
.vl-divider--center { margin-left: auto; margin-right: auto; }

.vl-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary, #C4A484);
    margin-bottom: 1rem;
}

/* ---- 1. HERO ---- */
.vl-hero {
    position: relative;
    min-height: 100vh;
    max-height: 880px;
    display: flex;
    align-items: center;
    padding: 130px 0 0;
    overflow: hidden;
    background: #1A130D;
}
.vl-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    z-index: 0;
}
.vl-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20,14,9,0.96) 0%, rgba(20,14,9,0.85) 35%, rgba(20,14,9,0.45) 65%, rgba(20,14,9,0.15) 100%),
        linear-gradient(180deg, rgba(20,14,9,0.30) 0%, rgba(20,14,9,0.55) 100%);
    z-index: 1;
}
.vl-hero-container {
    position: relative;
    z-index: 2;
    padding-bottom: 8rem;
}
.vl-hero-text {
    max-width: 580px;
    color: #fff;
}
.vl-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary, #C4A484);
    margin-bottom: 1.25rem;
}
.vl-hero-text h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.05;
    margin: 0 0 1.5rem;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.vl-hero-h1-sub {
    display: block;
    font-size: 0.6em;
    color: var(--primary, #C4A484);
    margin-top: 0.4rem;
    letter-spacing: 1px;
}
.vl-hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
    margin: 0 0 1.5rem;
}
.vl-hero-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.72);
    max-width: 500px;
    margin: 0 0 2rem;
}
.vl-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--primary, #C4A484);
    color: #fff;
    border: 1px solid var(--primary, #C4A484);
    border-radius: 4px;
    padding: 0.95rem 1.75rem;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
}
.vl-hero-cta:hover,
.vl-hero-cta:focus,
.vl-hero-cta:active {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.vl-hero-cta i { font-size: 0.75rem; }

.vl-hero-icons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(10,7,5,0.65);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(196,164,132,0.20);
    padding: 1.5rem 0;
}
.vl-hero-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: center;
}
.vl-hero-icon-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
.vl-hero-icon-item i {
    color: var(--primary, #C4A484);
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* ---- 2. WHAT IS ---- */
.vl-what-is {
    background: #14100B;
    padding: 6rem 0;
}
.vl-what-is-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.vl-what-is-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.vl-what-is-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}
.vl-what-is-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.vl-what-is-text p {
    color: rgba(255,255,255,0.72);
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.vl-what-is-text strong { color: var(--primary, #C4A484); font-weight: 500; }

/* ---- 3. BENEFITS + SUITABLE — 2-col on dark ---- */
.vl-benefits-suitable {
    background: #1A130D;
    padding: 5.5rem 0 6rem;
}
.vl-bs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1180px;
    margin: 0 auto;
}
.vl-bs-card {
    background: rgba(196,164,132,0.04);
    border: 1px solid rgba(196,164,132,0.12);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
}
.vl-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    font-weight: 400;
    color: #fff;
    margin: 0 0 1.25rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.vl-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vl-checklist li {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: 0.85rem;
    font-family: var(--font-body);
    font-size: 0.93rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
}
.vl-checklist li i {
    color: var(--primary, #C4A484);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(196,164,132,0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(196,164,132,0.05);
}

/* ---- 4. PROTOCOL ---- */
.vl-protocol {
    background: #14100B;
    padding: 5.5rem 0 6rem;
}
.vl-protocol-card {
    position: relative;
    background: linear-gradient(180deg, #221912 0%, #1A130D 100%);
    border: 1px solid rgba(196,164,132,0.15);
    border-radius: 24px;
    padding: 3rem 2.5rem 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.vl-protocol-decor {
    position: absolute;
    top: 1.25rem;
    width: clamp(140px, 18vw, 220px);
    height: auto;
    pointer-events: none;
    opacity: 0.6;
    z-index: 1;
}
.vl-protocol-decor--left { left: 1rem; }
.vl-protocol-decor--right { right: 1rem; transform: scaleX(-1); }
.vl-protocol-title {
    text-align: center;
    font-family: var(--font-heading);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.5vw, 1.95rem);
    color: var(--primary, #C4A484);
    margin: 0 0 1.25rem;
    position: relative;
    z-index: 2;
}
.vl-protocol-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto 2.5rem;
    max-width: 220px;
    position: relative;
    z-index: 2;
}
.vl-protocol-line {
    flex: 1;
    height: 1px;
    background: var(--primary, #C4A484);
    opacity: 0.6;
}
.vl-protocol-diamond {
    width: 7px;
    height: 7px;
    background: var(--primary, #C4A484);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.vl-protocol-numbers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1100px;
    margin: 0 auto 1.25rem;
    position: relative;
    z-index: 2;
}
.vl-protocol-numbers span {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    color: var(--primary, #C4A484);
    text-align: center;
    letter-spacing: 1px;
    font-weight: 400;
}
.vl-protocol-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    aspect-ratio: 750 / 280;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}
.vl-protocol-strip img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center center;
}
.vl-protocol-labels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1100px;
    margin: 1.5rem auto 0;
    position: relative;
    z-index: 2;
    gap: 1rem;
}
.vl-protocol-label {
    text-align: center;
    padding: 0 0.5rem;
}
.vl-protocol-label h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
    margin: 0 0 0.5rem;
}
.vl-protocol-label p {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* ---- 5. AESTO METHOD ---- */
.vl-method {
    position: relative;
    background: #1A130D;
    padding: 5.5rem 0 6rem;
    overflow: hidden;
}
.vl-method-decor {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 30%, rgba(196,164,132,0.12) 0%, transparent 12%),
        radial-gradient(circle at 85% 70%, rgba(196,164,132,0.10) 0%, transparent 12%),
        radial-gradient(circle at 50% 80%, rgba(196,164,132,0.08) 0%, transparent 8%);
    z-index: 0;
    pointer-events: none;
}
.vl-method-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}
.vl-method-title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--primary, #C4A484);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.vl-method-lead {
    color: rgba(255,255,255,0.78);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.vl-method-lead strong { color: var(--primary, #C4A484); font-weight: 500; }
.vl-method-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}
.vl-pillar {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(196,164,132,0.04);
    border: 1px solid rgba(196,164,132,0.12);
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.vl-pillar:hover {
    background: rgba(196,164,132,0.08);
    border-color: rgba(196,164,132,0.30);
    transform: translateY(-3px);
}
.vl-pillar-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    border: 1px solid rgba(196,164,132,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #C4A484);
    font-size: 1.4rem;
}
.vl-pillar h4 {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.6rem;
    font-weight: 500;
}
.vl-pillar p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
    margin: 0;
}

/* ---- 6. RESULT ---- */
.vl-result {
    background: #14100B;
    padding: 6rem 0;
}
.vl-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.vl-result-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 1.5rem;
}
.vl-result-text p {
    color: rgba(255,255,255,0.72);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0;
}
.vl-result-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    background: #1A130D;
    aspect-ratio: 4 / 5;
}
.vl-result-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* ---- 7. FAQ ---- */
.vl-faq {
    background: #1A130D;
    padding: 5.5rem 0 6rem;
}
.vl-faq .section-header { margin-bottom: 3rem; text-align: center; }
.vl-section-title {
    font-family: var(--font-heading);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    color: var(--primary, #C4A484);
    margin: 0 0 1rem;
}
.vl-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.vl-faq-card {
    background: rgba(196,164,132,0.04);
    border: 1px solid rgba(196,164,132,0.15);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    text-align: left;
    transition: var(--transition);
}
.vl-faq-card:hover {
    transform: translateY(-3px);
    background: rgba(196,164,132,0.08);
    border-color: rgba(196,164,132,0.35);
}
.vl-faq-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(196,164,132,0.12);
    border: 1px solid rgba(196,164,132,0.40);
    color: var(--primary, #C4A484);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.vl-faq-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0.6rem;
    line-height: 1.35;
}
.vl-faq-card p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.65;
    margin: 0;
}

/* ---- 8. FINAL CTA ---- */
.vl-final-cta {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
    text-align: center;
    background: #14100B;
}
.vl-final-cta-bg {
    position: absolute;
    inset: 0;
    background-image: url('/images/prp-vampire-lift/final-cta-bg.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    z-index: 0;
}
.vl-final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,16,11,0.78) 0%, rgba(20,16,11,0.92) 100%);
    z-index: 1;
}
.vl-final-cta .container { position: relative; z-index: 2; }
.vl-final-cta-inner { max-width: 720px; margin: 0 auto; }
.vl-final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.4vw, 2.75rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 1.25rem;
}
.vl-final-cta p {
    font-size: 1rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    margin: 0 0 2rem;
}
.vl-final-cta p strong { color: var(--primary, #C4A484); font-weight: 500; }
.vl-final-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--primary, #C4A484);
    color: #fff;
    border: 1px solid var(--primary, #C4A484);
    border-radius: 4px;
    padding: 1rem 2rem;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
}
.vl-final-cta-btn:hover,
.vl-final-cta-btn:focus,
.vl-final-cta-btn:active {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.vl-final-cta-btn i { font-size: 0.75rem; }

/* ---- Vampire Lift Responsive ---- */
@media (max-width: 1199px) {
    .vl-hero-text { max-width: 540px; }
    .vl-bs-card { padding: 2.25rem 1.75rem; }
    .vl-faq-grid { gap: 1.25rem; }
}

@media (max-width: 991px) {
    .vl-hero { min-height: auto; padding: 110px 0 0; }
    .vl-hero-container { padding-bottom: 9rem; }
    .vl-hero-overlay {
        background:
            linear-gradient(180deg, rgba(20,14,9,0.55) 0%, rgba(20,14,9,0.78) 50%, rgba(20,14,9,0.95) 100%);
    }
    .vl-hero-image { background-position: center top; opacity: 0.85; }
    .vl-hero-text { max-width: 100%; }

    .vl-hero-icons-grid { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
    .vl-hero-icon-item { flex-direction: column; gap: 0.4rem; text-align: center; font-size: 0.62rem; letter-spacing: 1.2px; }

    .vl-what-is { padding: 4.5rem 0; }
    .vl-what-is-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 640px; }
    .vl-what-is-image { order: -1; }

    .vl-benefits-suitable { padding: 4.5rem 0 5rem; }
    .vl-bs-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 640px; }

    .vl-protocol { padding: 4.5rem 0 5rem; }
    .vl-protocol-card { padding: 2.5rem 2rem 2rem; border-radius: 20px; }
    .vl-protocol-decor { width: 130px; top: 1rem; }
    .vl-protocol-decor--left { left: 0.5rem; }
    .vl-protocol-decor--right { right: 0.5rem; }
    .vl-protocol-labels { grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
    .vl-protocol-label h4 { font-size: 0.65rem; letter-spacing: 1.2px; }
    .vl-protocol-label p { font-size: 0.7rem; }

    .vl-method { padding: 4.5rem 0; }
    .vl-method-pillars { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .vl-pillar { padding: 1.25rem 0.75rem; }

    .vl-result { padding: 4.5rem 0; }
    .vl-result-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 640px; }
    .vl-result-image { max-width: 380px; margin: 0 auto; }

    .vl-faq { padding: 4.5rem 0 5rem; }
    .vl-faq-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 640px; }

    .vl-final-cta { padding: 4.5rem 0; }
}

@media (max-width: 767px) {
    .vl-hero-container { padding-bottom: 11rem; }
    .vl-hero-text h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
    .vl-hero-eyebrow { letter-spacing: 3px; font-size: 0.72rem; }
    .vl-hero-tagline { font-size: 1rem; line-height: 1.45; }
    .vl-hero-desc { font-size: 0.9rem; line-height: 1.7; }
    .vl-hero-cta { padding: 0.85rem 1.5rem; font-size: 0.8rem; letter-spacing: 1.2px; }

    .vl-hero-icons-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem 1.25rem; }
    .vl-hero-icon-item { flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.7rem; text-align: left; font-size: 0.68rem; letter-spacing: 1.5px; }
    .vl-hero-icon-item i { font-size: 1.15rem; }

    .vl-what-is { padding: 4rem 0; }
    .vl-what-is-grid { gap: 2rem; }
    .vl-bs-card { padding: 2rem 1.5rem; }
    .vl-card-title { font-size: 1.5rem; }

    .vl-protocol { padding: 4rem 0 4.5rem; }
    .vl-protocol-card { padding: 2rem 1rem 1.5rem; border-radius: 18px; }
    .vl-protocol-decor { width: 90px; top: 0.75rem; opacity: 0.45; }
    .vl-protocol-title { font-size: 1.15rem; letter-spacing: 2.5px; }
    .vl-protocol-divider { margin-bottom: 1.5rem; }
    .vl-protocol-numbers span { font-size: 0.95rem; }
    .vl-protocol-strip { border-radius: 12px; }
    .vl-protocol-labels { display: none; }

    .vl-method-pillars { grid-template-columns: 1fr; gap: 1.25rem; max-width: 380px; margin: 0 auto; }

    .vl-result-grid { gap: 2rem; }
    .vl-result-text h2 { font-size: 1.5rem; }

    .vl-faq-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 480px; }
    .vl-faq-card { padding: 1.5rem 1.25rem; }

    .vl-final-cta h2 { font-size: clamp(1.5rem, 5vw, 2.25rem); }
    .vl-final-cta p { font-size: 0.92rem; }
    .vl-final-cta-btn { padding: 0.9rem 1.75rem; font-size: 0.8rem; }
}

@media (max-width: 575px) {
    .vl-hero { padding: 100px 0 0; }
    .vl-hero-container { padding-bottom: 12rem; }
    .vl-hero-text h1 { font-size: 2rem; }
    .vl-hero-eyebrow { font-size: 0.68rem; letter-spacing: 2.5px; }
    .vl-hero-tagline { font-size: 0.95rem; }
    .vl-hero-desc { font-size: 0.85rem; line-height: 1.65; }

    .vl-hero-icons { padding: 1rem 0; }
    .vl-hero-icons-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem 0.85rem; }
    .vl-hero-icon-item { gap: 0.5rem; font-size: 0.6rem; letter-spacing: 1.2px; }
    .vl-hero-icon-item i { font-size: 1rem; }

    .vl-what-is, .vl-benefits-suitable, .vl-protocol, .vl-method, .vl-result, .vl-faq, .vl-final-cta {
        padding: 3.5rem 0;
    }
    .vl-card-title { font-size: 1.35rem; }
    .vl-bs-card { padding: 1.75rem 1.25rem; }
    .vl-protocol-card { padding: 1.75rem 0.75rem 1.25rem; border-radius: 14px; }
    .vl-protocol-decor { width: 70px; top: 0.5rem; opacity: 0.4; }
    .vl-protocol-decor--left { left: 0.25rem; }
    .vl-protocol-decor--right { right: 0.25rem; }
    .vl-protocol-title { font-size: 1rem; letter-spacing: 2px; padding: 0 4.5rem; }
    .vl-protocol-divider { max-width: 160px; margin-bottom: 1.25rem; }
    .vl-protocol-numbers span { font-size: 0.78rem; }

    .vl-result-text h2 { font-size: 1.4rem; }

    .vl-faq-mark { width: 38px; height: 38px; font-size: 1.2rem; }
    .vl-faq-card h4 { font-size: 1rem; }
    .vl-faq-card p { font-size: 0.82rem; }

    .vl-final-cta h2 { font-size: 1.65rem; line-height: 1.3; }
    .vl-final-cta p { font-size: 0.88rem; }
}

@media (max-width: 380px) {
    .vl-hero-text h1 { font-size: 1.85rem; }
    .vl-hero-icons-grid { grid-template-columns: 1fr; gap: 0.5rem; max-width: 220px; margin: 0 auto; }
    .vl-hero-icon-item { justify-content: flex-start; }
}

/* ==================================================================
   EYE BRIGHTENING — /services/eye-brightening.php
   Mix theme: light hero, light/dark alternating sections.
   ================================================================== */

.eb-divider {
    width: 60px;
    height: 1px;
    background: var(--primary, #C4A484);
    margin: 0 0 1.5rem;
}
.eb-divider--center { margin-left: auto; margin-right: auto; }
.eb-divider--light { background: rgba(196,164,132,0.6); }

.eb-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary-dark, #8A6A48);
    margin-bottom: 1.25rem;
}

.eb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--primary, #C4A484);
    color: #fff;
    border: 1px solid var(--primary, #C4A484);
    border-radius: 4px;
    padding: 0.95rem 1.75rem;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
}
.eb-cta-btn:hover,
.eb-cta-btn:focus,
.eb-cta-btn:active {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.eb-cta-btn i { font-size: 0.75rem; }

.eb-section-title {
    font-family: var(--font-heading);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--black);
    margin: 0 0 1rem;
    text-align: center;
}
.eb-section-desc {
    text-align: center;
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
    max-width: 720px;
    margin: 0 auto 1rem;
}
.eb-section-desc strong { color: var(--primary-dark); font-weight: 500; }

/* ---- 1. HERO — Full-bleed face background (real img, no crop) ---- */
.eb-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream, #FAF8F5);
    padding-top: clamp(110px, 11vw, 160px);
}
.eb-hero-bg {
    display: block;
    width: 100% !important;
    height: auto !important;
    position: relative;
    z-index: 0;
}
.eb-hero-overlay {
    position: absolute;
    top: clamp(110px, 11vw, 160px);
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, rgba(250,248,245,0.97) 0%, rgba(250,248,245,0.85) 28%, rgba(250,248,245,0.45) 55%, rgba(250,248,245,0.05) 80%, rgba(250,248,245,0) 100%),
        linear-gradient(180deg, rgba(250,248,245,0.30) 0%, rgba(250,248,245,0) 40%, rgba(250,248,245,0.25) 100%);
    z-index: 1;
}
.eb-hero-content {
    position: absolute;
    top: clamp(110px, 11vw, 160px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.eb-hero-container {
    position: relative;
    width: 100%;
    z-index: 2;
}
.eb-hero-text {
    max-width: 600px;
}
.eb-hero-text h1 {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6.5vw, 5.5rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.0;
    margin: 0 0 1.75rem;
    letter-spacing: -1px;
    text-transform: uppercase;
}
.eb-hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    color: var(--primary-dark, #8A6A48);
    line-height: 1.4;
    margin: 0 0 1.75rem;
    font-style: italic;
    letter-spacing: 0.3px;
}
.eb-hero-desc {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-light);
    margin: 0 0 1rem;
    max-width: 520px;
}
.eb-hero-desc strong { color: var(--primary-dark); font-weight: 500; }
.eb-hero-text .eb-cta-btn { margin-top: 1rem; }

/* ---- 2. WHAT WE SEE — Light, 2-col 50/50 ---- */
.eb-what-we-see {
    background: #F3EDE3;
    padding: 4rem 0;
}
.eb-wws-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.eb-wws-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.2;
    margin: 0 0 1rem;
}
.eb-wws-text p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.eb-wws-sub {
    font-weight: 500;
    color: var(--text);
    margin-top: 1.25rem;
}
.eb-wws-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}
.eb-wws-list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text);
}
.eb-wws-list li i {
    color: var(--primary);
    font-size: 0.7rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.eb-wws-note {
    font-family: var(--font-heading);
    color: var(--primary-dark);
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 1.5rem 0 0;
}
.eb-wws-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(138,106,72,0.12);
}
.eb-wws-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* ---- 3. SUITABLE — Light, 6 icon cards ---- */
.eb-suitable {
    background: var(--cream);
    padding: 4rem 0 4.5rem;
}
.eb-suitable .section-header { margin-bottom: 2.25rem; text-align: center; }
.eb-suitable-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.eb-suitable-card {
    text-align: center;
    padding: 1rem 0.5rem;
}
.eb-suitable-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 20px rgba(138,106,72,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.7rem;
    transition: var(--transition);
}
.eb-suitable-card:hover .eb-suitable-icon {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(138,106,72,0.20);
}
.eb-suitable-card h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.45rem;
    font-weight: 500;
}
.eb-suitable-card p {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

/* ---- 4. APPROACH (DARK with gold molecular accents) ---- */
.eb-approach {
    position: relative;
    background: linear-gradient(180deg, #1A130D 0%, #221912 100%);
    padding: 4.5rem 0;
    overflow: hidden;
    text-align: center;
    color: rgba(255,255,255,0.85);
}
.eb-approach-decor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(140px, 18vw, 240px);
    height: auto;
    pointer-events: none;
    opacity: 0.55;
    z-index: 1;
}
.eb-approach-decor--left { left: 2rem; }
.eb-approach-decor--right { right: 2rem; transform: translateY(-50%) scaleX(-1); }
.eb-approach-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
}
.eb-approach h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.95rem, 3.5vw, 2.75rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}
.eb-approach p {
    color: rgba(255,255,255,0.78);
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.eb-approach p strong { color: var(--primary, #C4A484); font-weight: 500; }
.eb-approach-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.5rem;
    display: inline-block;
    text-align: left;
}
.eb-approach-list li {
    position: relative;
    padding-left: 1.25rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    line-height: 1.85;
}
.eb-approach-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary, #C4A484);
}
.eb-approach-note {
    color: var(--primary, #C4A484) !important;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    margin-top: 1rem !important;
}

/* ---- 5. TREATMENTS — Light, 3 cards ---- */
.eb-treatments {
    background: var(--cream);
    padding: 4rem 0 4.5rem;
}
.eb-treatments .section-header { margin-bottom: 2.25rem; }
.eb-treatments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.eb-treatment-card {
    background: #F3EDE3;
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.75rem;
    box-shadow: 0 6px 24px rgba(138,106,72,0.06);
    transition: var(--transition);
}
.eb-treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(138,106,72,0.12);
}
.eb-treatment-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.4rem;
    margin: 0 0 1.25rem;
    box-shadow: 0 4px 14px rgba(138,106,72,0.10);
}
.eb-treatment-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.4rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.eb-treatment-sub {
    font-family: var(--font-heading);
    color: var(--primary-dark);
    font-style: italic;
    font-size: 1rem;
    margin: 0 0 1rem !important;
}
.eb-treatment-card p {
    color: var(--text-light);
    line-height: 1.75;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.eb-treatment-fit {
    color: var(--text) !important;
    margin-top: 1rem !important;
}
.eb-treatment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.eb-treatment-list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text);
}
.eb-treatment-list li i {
    color: var(--primary);
    font-size: 0.7rem;
}
.eb-treatment-effect {
    color: var(--text) !important;
    font-size: 0.875rem !important;
    margin: 1rem 0 0 !important;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(196,164,132,0.25);
}
.eb-treatment-effect strong { color: var(--primary-dark); }
.eb-treatments-bottom {
    text-align: center;
    margin-top: 2rem;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.eb-treatments-headline {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--black);
    margin: 0 0 0.75rem !important;
}
.eb-treatments-bottom p {
    color: var(--text-light);
    line-height: 1.75;
    margin: 0 0 0.5rem;
}
.eb-treatments-bottom strong { color: var(--primary-dark); font-weight: 500; }

/* ---- 6. AESTO METHOD (DARK 4-step) ---- */
.eb-method {
    background: linear-gradient(180deg, #1A130D 0%, #14100B 100%);
    padding: 4rem 0 4.5rem;
    color: #fff;
}
.eb-method-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--primary, #C4A484);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.eb-method-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 2.25rem auto 0;
}
.eb-method-step {
    text-align: center;
    padding: 1.5rem 0.75rem;
    border-left: 1px solid rgba(196,164,132,0.20);
}
.eb-method-step:first-child { border-left: none; }
.eb-method-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary, #C4A484);
    margin-bottom: 0.85rem;
}
.eb-method-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    border: 1px solid rgba(196,164,132,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #C4A484);
    font-size: 1.2rem;
}
.eb-method-step h4 {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.6rem;
    font-weight: 500;
}
.eb-method-step p {
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

/* ---- 7. RESULT — Light banner with face ---- */
.eb-result {
    background: #F3EDE3;
    padding: 4rem 0;
}
.eb-result-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.eb-result-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(138,106,72,0.15);
}
.eb-result-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}
.eb-result-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.95rem, 3.6vw, 2.75rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.25;
    margin: 0 0 1.5rem;
}
.eb-result-text p {
    color: var(--text-light);
    line-height: 1.85;
    font-size: 1rem;
    margin: 0;
}

/* ---- 8. FAQ — Light cards ---- */
.eb-faq {
    background: var(--cream);
    padding: 4rem 0 4.5rem;
}
.eb-faq .section-header { margin-bottom: 2.25rem; text-align: center; }
.eb-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.eb-faq-card {
    background: #fff;
    border: 1px solid rgba(196,164,132,0.20);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    text-align: left;
    transition: var(--transition);
}
.eb-faq-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(138,106,72,0.10);
    border-color: rgba(196,164,132,0.45);
}
.eb-faq-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary, #C4A484);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.eb-faq-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.6rem;
    line-height: 1.35;
}
.eb-faq-card p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0;
}

/* ---- 9. FINAL CTA (DARK luxury banner) ---- */
.eb-final-cta {
    position: relative;
    padding: 4.5rem 0;
    overflow: hidden;
    text-align: center;
    background: #14100B;
}
.eb-final-cta-bg {
    position: absolute;
    inset: 0;
    background-image: url('/images/eye-brightening/final-cta-bg.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.30;
    z-index: 0;
}
.eb-final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,16,11,0.78) 0%, rgba(20,16,11,0.92) 100%);
    z-index: 1;
}
.eb-final-cta .container { position: relative; z-index: 2; }
.eb-final-cta-inner { max-width: 720px; margin: 0 auto; }
.eb-final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.4vw, 2.75rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}
.eb-final-cta p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    margin: 0 0 2rem;
    font-style: italic;
}
.eb-final-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--primary, #C4A484);
    color: #fff;
    border: 1px solid var(--primary, #C4A484);
    border-radius: 4px;
    padding: 1rem 2rem;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
}
.eb-final-cta-btn:hover,
.eb-final-cta-btn:focus,
.eb-final-cta-btn:active {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.eb-final-cta-btn i { font-size: 0.75rem; }

/* ---- Eye Brightening Responsive ---- */
@media (max-width: 1199px) {
    .eb-hero-text { max-width: 540px; }
    .eb-hero-text h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); }
    .eb-suitable-grid { gap: 1.25rem; }
    .eb-treatment-card { padding: 2rem 1.5rem; }
}

@media (max-width: 991px) {
    .eb-hero-overlay {
        background:
            linear-gradient(180deg, rgba(250,248,245,0.20) 0%, rgba(250,248,245,0.55) 45%, rgba(250,248,245,0.92) 100%);
    }
    .eb-hero-text { max-width: 100%; }
    .eb-hero-text h1 { font-size: clamp(2.5rem, 7vw, 3.5rem); }

    .eb-what-we-see { padding: 4.5rem 0; }
    .eb-wws-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 640px; }
    .eb-wws-list { grid-template-columns: 1fr 1fr; }

    .eb-suitable { padding: 4.5rem 0 5rem; }
    .eb-suitable-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.25rem; max-width: 700px; }

    .eb-approach { padding: 4.5rem 0; }
    .eb-approach-decor { width: 130px; }
    .eb-approach-decor--left { left: 0.5rem; }
    .eb-approach-decor--right { right: 0.5rem; }

    .eb-treatments { padding: 4.5rem 0 5rem; }
    .eb-treatments-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 480px; }

    .eb-method { padding: 4.5rem 0 5rem; }
    .eb-method-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; max-width: 540px; }
    .eb-method-step { border-left: none; }

    .eb-result { padding: 4.5rem 0; }
    .eb-result-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 640px; }
    .eb-result-image { max-width: 480px; margin: 0 auto; order: -1; }

    .eb-faq { padding: 4.5rem 0 5rem; }
    .eb-faq-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 640px; }

    .eb-final-cta { padding: 4.5rem 0; }
}

@media (max-width: 767px) {
    .eb-hero-text h1 { font-size: clamp(2.25rem, 8vw, 3rem); }
    .eb-hero-tagline { font-size: 1.05rem; }
    .eb-hero-desc { font-size: 0.9rem; }

    .eb-what-we-see { padding: 4rem 0; }
    .eb-wws-text h2 { font-size: 1.75rem; }
    .eb-wws-list { grid-template-columns: 1fr; }

    .eb-suitable-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; max-width: 480px; }
    .eb-suitable-icon { width: 76px; height: 76px; font-size: 1.4rem; }

    .eb-approach { padding: 4rem 0; }
    .eb-approach-decor { width: 90px; opacity: 0.4; }
    .eb-approach h2 { font-size: 1.65rem; }
    .eb-approach p { font-size: 0.9rem; }

    .eb-treatments { padding: 4rem 0 4.5rem; }
    .eb-treatment-card { padding: 1.75rem 1.25rem; }
    .eb-treatment-card h3 { font-size: 1.2rem; }

    .eb-method-steps { grid-template-columns: repeat(2, 1fr); }
    .eb-method-icon { width: 50px; height: 50px; font-size: 1.05rem; }

    .eb-result-text h2 { font-size: 1.65rem; }

    .eb-faq-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 480px; }
    .eb-faq-card { padding: 1.5rem 1.25rem; }

    .eb-final-cta h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
    .eb-final-cta p { font-size: 0.95rem; }
}

@media (max-width: 575px) {
    .eb-hero-text h1 { font-size: 2.4rem; line-height: 1.05; }
    .eb-hero-tagline { font-size: 1rem; }
    .eb-hero-desc { font-size: 0.88rem; }

    .eb-what-we-see, .eb-suitable, .eb-approach, .eb-treatments, .eb-method, .eb-result, .eb-faq, .eb-final-cta {
        padding: 3.5rem 0;
    }
    .eb-section-title { font-size: 1.4rem; letter-spacing: 2px; }

    .eb-wws-text h2 { font-size: 1.55rem; }
    .eb-wws-image, .eb-result-image { border-radius: var(--radius-md); }

    .eb-suitable-grid { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
    .eb-suitable-icon { width: 68px; height: 68px; font-size: 1.25rem; }
    .eb-suitable-card h4 { font-size: 0.72rem; letter-spacing: 1.5px; }
    .eb-suitable-card p { font-size: 0.78rem; }

    .eb-approach h2 { font-size: 1.5rem; }
    .eb-approach-decor { width: 70px; opacity: 0.35; }
    .eb-approach-decor--left { left: 0.25rem; }
    .eb-approach-decor--right { right: 0.25rem; }

    .eb-treatments-grid { gap: 1.25rem; }
    .eb-treatment-card { padding: 1.5rem 1.1rem; }
    .eb-treatment-card h3 { font-size: 1.1rem; }

    .eb-method-steps { grid-template-columns: 1fr; gap: 1.5rem; max-width: 280px; }
    .eb-method-step { padding: 1rem 0; }

    .eb-result-grid { gap: 2rem; }
    .eb-result-text h2 { font-size: 1.45rem; }

    .eb-faq-mark { width: 38px; height: 38px; font-size: 1.2rem; }
    .eb-faq-card h4 { font-size: 1rem; }
    .eb-faq-card p { font-size: 0.82rem; }

    .eb-final-cta h2 { font-size: 1.65rem; line-height: 1.3; }
    .eb-final-cta p { font-size: 0.92rem; }
    .eb-final-cta-btn { padding: 0.85rem 1.75rem; font-size: 0.78rem; }
}

@media (max-width: 380px) {
    .eb-hero-text h1 { font-size: 1.85rem; }
    .eb-suitable-grid { grid-template-columns: 1fr; gap: 1.5rem; max-width: 200px; }
}

/* ==================================================================
   MEZOTHERAPY — /services/mesotherapy.php
   Light/cream/gold style following the polynucleotides PDF mockup.
   ================================================================== */

.mezo-hero,
.mezo-what,
.mezo-how,
.mezo-journey,
.mezo-method,
.mezo-related,
.mezo-faq,
.mezo-final-cta {
    font-family: var(--font-body);
    position: relative;
}

/* ---- shared eyebrow + section title ---- */
.mezo-section-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(0.65rem, 0.75vw, 0.72rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

.mezo-section-eyebrow--center {
    display: block;
    text-align: center;
}

.mezo-section-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.75rem, 3.4vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--black);
    margin: 0 0 1.5rem;
}

.mezo-section-title em {
    font-style: italic;
    color: var(--primary-dark);
}

.mezo-section-title--center {
    text-align: center;
}

/* ---- shared button ---- */
.mezo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.75rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.mezo-btn--gold {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}

.mezo-btn--gold:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.mezo-btn--outline {
    background: transparent;
    color: var(--primary-dark);
    border: 1px solid var(--primary);
}

.mezo-btn--outline:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}

.mezo-btn i { font-size: 0.75rem; }

.mezo-final-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: center;
}

/* ---------- 1) HERO ---------- */
.mezo-hero {
    position: relative;
    overflow: hidden;
    background: #F8F2E9;
    padding-top: clamp(110px, 11vw, 160px);
}

.mezo-hero-bg {
    display: block;
    width: 100% !important;
    height: auto !important;
    position: relative;
    z-index: 0;
}

.mezo-hero-content {
    position: absolute;
    top: clamp(110px, 11vw, 160px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 0 clamp(2rem, 4vw, 3.5rem);
}

.mezo-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(253,250,245,0.97) 0%, rgba(253,250,245,0.85) 30%, rgba(253,250,245,0.45) 55%, rgba(253,250,245,0.10) 78%, rgba(253,250,245,0) 100%),
        linear-gradient(180deg, rgba(253,250,245,0.20) 0%, rgba(253,250,245,0) 40%, rgba(253,250,245,0.30) 100%);
    z-index: 1;
}

.mezo-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.mezo-hero-text { max-width: 600px; }

.mezo-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2.75rem, 6vw, 5rem);
    line-height: 1.0;
    letter-spacing: -1.5px;
    color: var(--black);
    margin: 0 0 1.25rem;
}

.mezo-hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: var(--primary-dark);
    margin: 0 0 1.5rem;
    line-height: 1.4;
}

.mezo-hero-tagline em { font-style: italic; }

.mezo-hero-desc {
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.85;
    color: var(--text);
    margin: 0 0 1rem;
    max-width: 520px;
}

.mezo-hero-text .mezo-btn { margin-top: 1.5rem; }

/* ---------- 2) WHAT IS ---------- */
.mezo-what {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #fff;
    text-align: center;
}

.mezo-what .container {
    max-width: 820px;
}

.mezo-what .mezo-section-eyebrow {
    display: block;
    text-align: center;
}

.mezo-what .mezo-section-title { text-align: center; }

.mezo-what-text p {
    font-size: clamp(0.92rem, 1.05vw, 1rem);
    line-height: 1.85;
    color: var(--text);
    margin: 0 0 1rem;
}

.mezo-what-text p:last-child { margin-bottom: 0; }

.mezo-what-text strong {
    color: var(--primary-dark);
    font-weight: 500;
}

/* ---------- 3) HOW WORKS ---------- */
.mezo-how {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #FBF7F2;
}

.mezo-how-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.mezo-how-visual {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--cream-dark);
    box-shadow: 0 6px 28px rgba(43, 43, 43, 0.06);
}

.mezo-how-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mezo-how-content { max-width: 560px; }

.mezo-how-intro {
    font-size: clamp(0.875rem, 1vw, 0.95rem);
    color: var(--text);
    margin: 1.25rem 0 0.85rem;
    font-weight: 500;
}

.mezo-how-intro--results { margin-top: 2rem; }

.mezo-pill-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mezo-pill-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: #fff;
    border: 1px solid rgba(198, 164, 126, 0.3);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text);
    letter-spacing: 0.3px;
}

.mezo-pill-list li i {
    color: var(--primary);
    font-size: 0.72rem;
}

.mezo-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.mezo-check-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    font-size: clamp(0.85rem, 0.95vw, 0.92rem);
    line-height: 1.5;
    color: var(--text);
}

.mezo-check-list li i {
    color: var(--primary);
    font-size: 0.75rem;
    margin-top: 0.4rem;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(198, 164, 126, 0.4);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- 4) JOURNEY (Преди → По време → След) ---------- */
.mezo-journey {
    padding: clamp(3rem, 5.5vw, 4.5rem) 0;
    background: #fff;
    position: relative;
}

.mezo-journey-head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.mezo-journey-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: clamp(0.5rem, 1.5vw, 1.5rem);
    align-items: stretch;
}

.mezo-stage {
    border: 1px solid rgba(198, 164, 126, 0.15);
    border-radius: 12px;
    padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    background: #FBF7F2;
}

.mezo-stage:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(43, 43, 43, 0.06);
    border-color: rgba(198, 164, 126, 0.4);
}

.mezo-stage--before {
    background: linear-gradient(165deg, #FBF7F2 0%, #F5EFE5 100%);
}
.mezo-stage--during {
    background: linear-gradient(165deg, #FAF3E8 0%, #F0E5D0 100%);
    border-color: rgba(198, 164, 126, 0.28);
}
.mezo-stage--after {
    background: linear-gradient(165deg, #FFFCF6 0%, #F8F2E5 100%);
}

.mezo-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(198, 164, 126, 0.3);
    border-radius: 999px;
    align-self: flex-start;
    margin-bottom: 1.25rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mezo-stage-num {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--primary);
    letter-spacing: 1px;
    line-height: 1;
}

.mezo-stage-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--primary-dark);
    font-weight: 500;
}

.mezo-stage-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--black);
    margin: 0 0 0.75rem;
}

.mezo-stage-title em {
    font-style: italic;
    color: var(--primary-dark);
}

.mezo-stage-lead {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0 0 1.25rem;
}

.mezo-stage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.mezo-stage-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text);
}

.mezo-stage-list li i {
    color: var(--primary);
    font-size: 0.4rem;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mezo-stage-list--check li i {
    font-size: 0.65rem;
    color: var(--primary);
    border: 1px solid rgba(198, 164, 126, 0.45);
    border-radius: 50%;
    width: 18px;
    height: 18px;
}

.mezo-stage-footer {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(198, 164, 126, 0.2);
    font-size: 0.85rem;
    color: var(--primary-dark);
    line-height: 1.5;
}

.mezo-stage-footer em { font-style: italic; }

.mezo-stage-zones {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.mezo-stage-zones li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.5rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(198, 164, 126, 0.18);
    border-radius: 8px;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.mezo-stage-zones li:hover {
    background: #fff;
    border-color: rgba(198, 164, 126, 0.5);
    transform: translateY(-2px);
}

.mezo-stage-zones-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(198, 164, 126, 0.12);
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.mezo-stage-zones-label {
    font-size: 0.78rem;
    color: var(--text);
    text-align: center;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.mezo-stage-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.5rem;
    opacity: 0.55;
}

.mezo-stage-arrow i {
    transition: transform 0.4s ease;
}

.mezo-journey-flow:hover .mezo-stage-arrow i {
    transform: translateX(4px);
}

/* ---------- 5) AESTO METHOD ---------- */
.mezo-method {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #FBF7F2;
}

.mezo-method-head {
    text-align: center;
    margin-bottom: clamp(2rem, 3vw, 3rem);
}

.mezo-method-head .mezo-section-eyebrow { display: block; }

.mezo-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    counter-reset: step;
    position: relative;
}

.mezo-steps::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(198, 164, 126, 0.4) 15%, rgba(198, 164, 126, 0.4) 85%, transparent 100%);
    z-index: 0;
}

.mezo-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.mezo-step-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1rem;
    border: 1px solid rgba(198, 164, 126, 0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBF7F2;
    color: var(--primary);
    font-size: 1.5rem;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.mezo-step:hover .mezo-step-icon {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.mezo-step-num {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--primary);
    letter-spacing: 1.5px;
    margin-bottom: 0.4rem;
}

.mezo-step-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--black);
    margin: 0 0 0.5rem;
}

.mezo-step-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 6) RELATED ---------- */
.mezo-related {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #fff;
}

.mezo-related .mezo-section-eyebrow { margin-bottom: 2rem; }

.mezo-related-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.mezo-related-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    background: #FBF7F2;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(198, 164, 126, 0.12);
}

.mezo-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(43, 43, 43, 0.08);
    border-color: rgba(198, 164, 126, 0.35);
}

.mezo-related-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cream-dark);
    position: relative;
}

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

.mezo-related-card:hover .mezo-related-photo img {
    transform: scale(1.05);
}

.mezo-related-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1rem;
    color: var(--primary-dark);
    margin: 1rem 1rem 0.4rem;
    text-align: center;
}

.mezo-related-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-light);
    text-align: center;
    margin: 0 1rem 1.25rem;
}

/* ---------- 7) FAQ ---------- */
.mezo-faq {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #FBF7F2;
}

.mezo-faq .container {
    max-width: 820px;
}

.mezo-faq .mezo-section-eyebrow,
.mezo-faq .mezo-section-title { text-align: center; }

.mezo-faq-list {
    margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
    display: grid;
    gap: 0.75rem;
}

.mezo-faq-item {
    background: #fff;
    border: 1px solid rgba(198, 164, 126, 0.18);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mezo-faq-item[open] {
    border-color: rgba(198, 164, 126, 0.45);
    box-shadow: 0 4px 16px rgba(43, 43, 43, 0.04);
}

.mezo-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: var(--black);
    -webkit-tap-highlight-color: transparent;
}

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

.mezo-faq-item summary i {
    color: var(--primary);
    font-size: 0.85rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.mezo-faq-item[open] summary i {
    transform: rotate(45deg);
}

.mezo-faq-answer {
    padding: 0 1.5rem 1.25rem;
}

.mezo-faq-answer p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text);
}

/* ---------- 8) FINAL CTA ---------- */
.mezo-final-cta {
    padding: clamp(3rem, 5.5vw, 4.5rem) clamp(1.25rem, 3vw, 2rem);
    background: var(--black);
    background-image:
        linear-gradient(135deg, rgba(43, 43, 43, 0.92) 0%, rgba(58, 52, 44, 0.96) 100%),
        radial-gradient(circle at 80% 20%, rgba(198, 164, 126, 0.18) 0%, transparent 60%);
    color: #F7F3EF;
    text-align: center;
}

.mezo-final-inner {
    max-width: 720px;
    margin: 0 auto;
}

.mezo-final-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    line-height: 1.2;
    color: var(--primary);
    margin: 0 0 1.25rem;
    letter-spacing: -0.5px;
}

.mezo-final-title em {
    font-style: italic;
    color: #F7F3EF;
}

.mezo-final-desc {
    font-size: clamp(0.9rem, 1vw, 0.95rem);
    line-height: 1.8;
    color: rgba(247, 243, 239, 0.78);
    margin: 0 0 2rem;
}

.mezo-final-desc strong {
    color: var(--primary);
    font-weight: 400;
}

/* ==================================================================
   MEZOTHERAPY — RESPONSIVE
   ================================================================== */

/* Laptop / small desktop (≤1280px, ≥993px) */
@media (max-width: 1280px) and (min-width: 993px) {
    .mezo-hero-title { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
    .mezo-section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
}

/* Small laptop / large tablet (993-1100px) */
@media (max-width: 1100px) and (min-width: 993px) {
    .mezo-related-grid { grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
    .mezo-related-title { font-size: 0.9rem; }
    .mezo-related-desc { font-size: 0.72rem; }
}

/* Tablet (≤992px) */
@media (max-width: 992px) {
    .mezo-hero-content {
        padding: clamp(100px, 14vw, 130px) 0 clamp(2rem, 4vw, 3rem);
    }

    .mezo-hero-overlay {
        background:
            linear-gradient(180deg, rgba(253,250,245,0.30) 0%, rgba(253,250,245,0.65) 50%, rgba(253,250,245,0.92) 100%);
    }

    .mezo-hero-text {
        max-width: 100%;
    }

    .mezo-hero-text .mezo-btn { margin-top: 1.25rem; }

    .mezo-how-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .mezo-how-visual { max-width: 560px; margin: 0 auto; }

    .mezo-how-content { max-width: 100%; }

    .mezo-journey-flow {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .mezo-stage-arrow {
        transform: rotate(90deg);
        padding: 0.25rem 0;
    }

    .mezo-journey-flow:hover .mezo-stage-arrow i {
        transform: translateX(0) translateY(2px);
    }

    .mezo-stage-zones {
        grid-template-columns: repeat(3, 1fr);
    }

    .mezo-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem;
    }

    .mezo-steps::before { display: none; }

    .mezo-related-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .mezo-related-card:nth-child(4),
    .mezo-related-card:nth-child(5) {
        grid-column: span 1;
    }
}

/* Phone (≤720px) */
@media (max-width: 720px) {
    .mezo-stage-zones {
        grid-template-columns: repeat(3, 1fr);
    }

    .mezo-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }
}

/* Small phone (≤480px) */
@media (max-width: 480px) {
    .mezo-hero-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .mezo-section-title {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
    }

    .mezo-pill-list { gap: 0.4rem; }

    .mezo-pill-list li {
        font-size: 0.72rem;
        padding: 0.45rem 0.7rem;
    }

    .mezo-stage { padding: 1.5rem 1.25rem; }
    .mezo-stage-zones { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .mezo-stage-zones li { padding: 0.7rem 0.4rem; }
    .mezo-stage-zones-icon { width: 32px; height: 32px; font-size: 0.85rem; }

    .mezo-step-icon {
        width: 64px;
        height: 64px;
        font-size: 1.25rem;
    }

    .mezo-related-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .mezo-faq-item summary {
        padding: 1rem 1.15rem;
        font-size: 0.95rem;
    }

    .mezo-faq-answer {
        padding: 0 1.15rem 1rem;
    }

    .mezo-btn {
        padding: 0.85rem 1.5rem;
        font-size: 0.65rem;
    }
}

/* Very small phone (≤360px) */
@media (max-width: 360px) {
    .mezo-hero-title { font-size: 2rem; }
    .mezo-step-icon { width: 56px; height: 56px; font-size: 1.1rem; }
    .mezo-related-photo { aspect-ratio: 16 / 11; }
}

/* ==================================================================
   POLYNUCLEOTIDES — /services/polynucleotides.php
   Light cream theme with golden accents
   ================================================================== */

.pn-divider {
    width: 60px;
    height: 1px;
    background: var(--primary, #C4A484);
    margin: 0 0 1.5rem;
}

.pn-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary-dark, #8A6A48);
    margin-bottom: 1rem;
}

.pn-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #1A130D;
    color: #fff;
    border: 1px solid #1A130D;
    border-radius: 4px;
    padding: 0.95rem 1.75rem;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
}
.pn-cta-btn:hover, .pn-cta-btn:focus, .pn-cta-btn:active {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.pn-cta-btn i { font-size: 0.75rem; }

.pn-section-title {
    font-family: var(--font-heading);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--primary-dark, #8A6A48);
    margin: 0 0 1rem;
    text-align: center;
}
.pn-section-desc {
    text-align: center;
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
    max-width: 720px;
    margin: 0 auto;
}
.pn-section-desc strong { color: var(--primary-dark); font-weight: 500; }

/* ---- 1. HERO — Full-bleed with face ---- */
.pn-hero {
    position: relative;
    min-height: 100vh;
    max-height: 880px;
    display: flex;
    align-items: center;
    padding: 130px 0 80px;
    overflow: hidden;
    background: var(--cream, #FAF8F5);
}
.pn-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    z-index: 0;
}
.pn-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(250,248,245,0.97) 0%, rgba(250,248,245,0.85) 30%, rgba(250,248,245,0.40) 60%, rgba(250,248,245,0.05) 85%, rgba(250,248,245,0) 100%),
        linear-gradient(180deg, rgba(250,248,245,0.20) 0%, rgba(250,248,245,0) 50%, rgba(250,248,245,0.30) 100%);
    z-index: 1;
}
.pn-hero-container {
    position: relative;
    z-index: 2;
}
.pn-hero-text {
    max-width: 600px;
}
.pn-hero-text h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 6vw, 5rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.0;
    margin: 0 0 1.5rem;
    letter-spacing: -0.5px;
}
.pn-hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: var(--primary-dark, #8A6A48);
    line-height: 1.4;
    margin: 0 0 1.5rem;
    font-style: italic;
}
.pn-hero-desc {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-light);
    margin: 0 0 1rem;
    max-width: 520px;
}
.pn-hero-desc strong { color: var(--primary-dark); font-weight: 500; }
.pn-hero-text .pn-cta-btn { margin-top: 1rem; }

/* ---- Reusable checklist ---- */
.pn-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.pn-checklist li {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 0.7rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.5;
}
.pn-checklist li i {
    color: var(--primary);
    font-size: 0.7rem;
    margin-top: 0.3rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pn-checklist--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.5rem;
}
.pn-checklist--compact li { font-size: 0.85rem; }

/* ---- 2. WHAT IS — 2-col droplet image left + text right ---- */
.pn-what-is {
    background: var(--cream, #FAF8F5);
    padding: 4.5rem 0;
}
.pn-wi-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.pn-wi-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #F5EBDB 0%, #E8D8BC 100%);
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pn-wi-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.pn-wi-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.2;
    margin: 0 0 1rem;
}
.pn-wi-text p {
    color: var(--text-light);
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.pn-wi-sub {
    color: var(--text) !important;
    font-weight: 500;
    margin-top: 1.5rem !important;
}
.pn-wi-note {
    background: rgba(196,164,132,0.08);
    border-left: 3px solid var(--primary, #C4A484);
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-sm);
    margin: 1.5rem 0 0 !important;
    color: var(--text) !important;
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.pn-wi-note i {
    color: var(--primary-dark);
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.pn-wi-note strong { color: var(--primary-dark); font-weight: 500; }

/* ---- 3. PROTOCOL — 5-step timeline ---- */
.pn-protocol {
    background: #F3EDE3;
    padding: 4.5rem 0 5rem;
}
.pn-protocol .section-header { margin-bottom: 3rem; text-align: center; }
.pn-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 1rem;
}
.pn-timeline-track {
    position: absolute;
    top: 44px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: repeating-linear-gradient(90deg,
        var(--primary) 0 6px,
        transparent 6px 12px);
    opacity: 0.5;
    z-index: 0;
}
.pn-timeline-step {
    position: relative;
    text-align: center;
    z-index: 1;
}
.pn-timeline-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 18px rgba(138,106,72,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.65rem;
}
.pn-timeline-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--primary-dark);
    font-weight: 400;
    margin-bottom: 0.3rem;
}
.pn-timeline-step h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.pn-timeline-step p {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
    padding: 0 0.25rem;
}

/* ---- 4. SUITABLE + ZONES + RESULT — 3-col split ---- */
.pn-suitable-result {
    background: #F3EDE3;
    padding: 4.5rem 0 5rem;
}
.pn-sr-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}
.pn-sr-card {
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: 0 6px 24px rgba(138,106,72,0.06);
    transition: var(--transition);
}
.pn-sr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(138,106,72,0.10);
}
.pn-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 400;
    color: var(--black);
    margin: 0 0 1rem;
    letter-spacing: 0.5px;
}
.pn-sr-card .pn-divider {
    width: 50px;
    margin-bottom: 1.5rem;
}
.pn-zones-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.pn-zones-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    padding: 0.65rem 1rem;
    background: rgba(196,164,132,0.08);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--primary);
    letter-spacing: 0.3px;
}
.pn-zone-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.pn-result-lead {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    color: var(--primary-dark);
    line-height: 1.25;
    margin: 0 0 1rem !important;
    font-style: italic;
}
.pn-result-sub {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0 0 1rem !important;
}
.pn-result-note {
    font-family: var(--font-heading);
    color: var(--primary-dark);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    margin: 1.25rem 0 0 !important;
    padding-top: 1rem;
    border-top: 1px solid rgba(196,164,132,0.25);
}

/* ---- 5. RELATED — 5 cards inline ---- */
.pn-related {
    background: #F3EDE3;
    padding: 4.5rem 0 5rem;
}
.pn-related .section-header { margin-bottom: 3rem; text-align: center; }
.pn-related-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.pn-related-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-align: left;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(196,164,132,0.15);
}
.pn-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(138,106,72,0.14);
    border-color: rgba(196,164,132,0.45);
}
.pn-related-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #F8F2E6;
    position: relative;
}
.pn-related-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.pn-related-card:hover .pn-related-photo img {
    transform: scale(1.05);
}
.pn-related-body {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pn-related-card h4 {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.55rem;
    font-weight: 500;
    line-height: 1.35;
}
.pn-related-card p {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.55;
    margin: 0;
}

/* ---- 6. TEAM — 2 doctors ---- */
.pn-team {
    background: var(--cream);
    padding: 4.5rem 0 5rem;
}
.pn-team .section-header { margin-bottom: 3rem; text-align: center; }
.pn-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.pn-team-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 6px 22px rgba(138,106,72,0.06);
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: center;
}
.pn-team-photo {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    background: #F8F2E6;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(138,106,72,0.08);
}
.pn-team-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center 18%;
    display: block;
}
.pn-team-info h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.4rem;
}
.pn-team-role {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 0 0 1rem !important;
}
.pn-team-info p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0 0 0.6rem;
}

/* ---- 7. FINAL CTA ---- */
.pn-final-cta {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
    text-align: center;
    background: var(--cream);
}
.pn-final-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    z-index: 0;
}
.pn-final-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(250,248,245,0.78) 0%, rgba(250,248,245,0.85) 100%);
    z-index: 1;
}
.pn-final-cta .container { position: relative; z-index: 2; }
.pn-final-cta-inner { max-width: 720px; margin: 0 auto; }
.pn-final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.25;
    margin: 0 0 1rem;
}
.pn-final-cta p {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0 0 2rem;
}
.pn-final-cta p strong { color: var(--primary-dark); font-weight: 500; }
.pn-final-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #1A130D;
    color: #fff;
    border: 1px solid #1A130D;
    border-radius: 4px;
    padding: 1rem 2rem;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--transition);
}
.pn-final-cta-btn:hover, .pn-final-cta-btn:focus, .pn-final-cta-btn:active {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.pn-final-cta-btn i { font-size: 0.75rem; }

/* ---- Polynucleotides Responsive ---- */
@media (max-width: 1199px) {
    .pn-hero-text { max-width: 540px; }
    .pn-related-grid { gap: 1.25rem; }
    .pn-related-card { padding: 1.5rem 1rem; }
    .pn-sr-grid { gap: 1.75rem; }
}

@media (max-width: 991px) {
    .pn-hero { min-height: auto; padding: 110px 0 70px; }
    .pn-hero-overlay {
        background: linear-gradient(180deg, rgba(250,248,245,0.30) 0%, rgba(250,248,245,0.65) 50%, rgba(250,248,245,0.95) 100%);
    }
    .pn-hero-bg { background-position: center top; opacity: 0.85; }
    .pn-hero-text { max-width: 100%; }
    .pn-hero-text h1 { font-size: clamp(2.4rem, 7vw, 3.5rem); }

    .pn-what-is { padding: 4rem 0; }
    .pn-wi-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 640px; }
    .pn-wi-image { aspect-ratio: 16 / 9; max-width: 480px; margin: 0 auto; }
    .pn-checklist--two-col { grid-template-columns: 1fr; gap: 0.85rem; }

    .pn-protocol { padding: 4rem 0 4.5rem; }
    .pn-timeline { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; max-width: 640px; }
    .pn-timeline-track { display: none; }
    .pn-timeline-step:nth-child(5) { grid-column: 2 / 3; }
    .pn-timeline-step:nth-child(6) { grid-column: 3 / 4; }

    .pn-suitable-result { padding: 4rem 0 4.5rem; }
    .pn-sr-grid { grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 720px; }
    .pn-sr-card--result { grid-column: 1 / -1; }

    .pn-related { padding: 4rem 0 4.5rem; }
    .pn-related-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 720px; }
    .pn-related-card:nth-child(4) { grid-column: 1 / 2; margin-left: 16.66%; }
    .pn-related-card:nth-child(5) { grid-column: 3 / 4; margin-right: 16.66%; }

    .pn-team { padding: 4rem 0 4.5rem; }
    .pn-team-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 600px; }
    .pn-team-card { grid-template-columns: 180px 1fr; padding: 1.75rem; gap: 1.5rem; }
    .pn-team-photo { width: 180px; height: 180px; }

    .pn-final-cta { padding: 4rem 0; }
}

@media (max-width: 767px) {
    .pn-hero { padding: 100px 0 60px; }
    .pn-hero-text h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
    .pn-hero-tagline { font-size: 1.05rem; }
    .pn-hero-desc { font-size: 0.9rem; }

    .pn-what-is { padding: 3.5rem 0; }
    .pn-wi-text h2 { font-size: 1.65rem; }
    .pn-wi-image { aspect-ratio: 4 / 3; }

    .pn-protocol { padding: 3.5rem 0 4rem; }
    .pn-timeline { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; max-width: 460px; }
    .pn-timeline-step:nth-child(5),
    .pn-timeline-step:nth-child(6) { grid-column: auto; }
    .pn-timeline-step:nth-child(5) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
    .pn-timeline-icon { width: 76px; height: 76px; font-size: 1.4rem; }

    .pn-suitable-result { padding: 3.5rem 0 4rem; }
    .pn-sr-grid { grid-template-columns: 1fr; max-width: 480px; }
    .pn-sr-card--result { grid-column: auto; }
    .pn-sr-card { padding: 1.75rem 1.5rem; }

    .pn-related { padding: 3.5rem 0 4rem; }
    .pn-related-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 480px; }
    .pn-related-card:nth-child(4),
    .pn-related-card:nth-child(5) { grid-column: auto; margin: 0; }
    .pn-related-card:nth-child(5) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }

    .pn-team { padding: 3.5rem 0 4rem; }
    .pn-team-card { grid-template-columns: 1fr; text-align: center; padding: 1.75rem 1.25rem; gap: 1.25rem; }
    .pn-team-photo { margin: 0 auto; width: 180px; height: 180px; }

    .pn-final-cta { padding: 3.5rem 0; }
    .pn-final-cta h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
    .pn-final-cta p { font-size: 0.95rem; }
}

@media (max-width: 575px) {
    .pn-hero { padding: 90px 0 50px; }
    .pn-hero-text h1 { font-size: 2.2rem; line-height: 1.05; }
    .pn-hero-tagline { font-size: 0.95rem; }
    .pn-hero-desc { font-size: 0.88rem; }

    .pn-what-is, .pn-protocol, .pn-suitable-result, .pn-related, .pn-team, .pn-final-cta {
        padding: 3rem 0;
    }
    .pn-section-title { font-size: 1.4rem; letter-spacing: 2px; }
    .pn-wi-text h2 { font-size: 1.5rem; }
    .pn-wi-note { padding: 1rem 1.1rem; font-size: 0.85rem !important; }

    .pn-timeline { grid-template-columns: 1fr; gap: 2rem; max-width: 240px; }
    .pn-timeline-step:nth-child(5) { grid-column: auto; max-width: 100%; }

    .pn-related-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 280px; }
    .pn-related-card:nth-child(5) { grid-column: auto; max-width: 100%; }
    .pn-related-card { padding: 1.5rem 1.25rem; }

    .pn-result-lead { font-size: 1.3rem; }

    .pn-final-cta h2 { font-size: 1.55rem; line-height: 1.3; }
    .pn-final-cta p { font-size: 0.9rem; }
}

@media (max-width: 380px) {
    .pn-hero-text h1 { font-size: 1.95rem; }
}

/* ==================================================================
   REDTOUCH PRO — /services/redtouch-pro.php
   Light/Dark mix theme with red+gold accents (laser).
   ================================================================== */

.rt-divider {
    width: 60px;
    height: 1px;
    background: var(--primary, #C4A484);
    margin: 0 0 1.5rem;
}
.rt-divider--center { margin-left: auto; margin-right: auto; }
.rt-divider--light { background: rgba(196,164,132,0.7); }

.rt-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary-dark, #8A6A48);
    margin-bottom: 1.25rem;
}

.rt-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 400;
    color: var(--black);
    margin: 0 0 1rem;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.rt-section-title--light { color: #fff; }
.rt-section-title--center { text-align: center; }

.rt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.75rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}
.rt-btn i { font-size: 0.75rem; }
.rt-btn--gold {
    background: var(--primary, #C4A484);
    color: #fff;
    border-color: var(--primary, #C4A484);
}
.rt-btn--gold:hover, .rt-btn--gold:focus {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.rt-btn--outline {
    background: transparent;
    color: var(--primary-dark, #8A6A48);
    border-color: var(--primary, #C4A484);
}
.rt-btn--outline:hover, .rt-btn--outline:focus {
    background: var(--primary, #C4A484);
    border-color: var(--primary, #C4A484);
    color: #fff;
    transform: translateY(-1px);
}
.rt-btn--ghost {
    background: transparent;
    color: rgba(255,255,255,0.95);
    border-color: rgba(196,164,132,0.55);
}
.rt-btn--ghost:hover, .rt-btn--ghost:focus {
    background: rgba(196,164,132,0.18);
    border-color: var(--primary, #C4A484);
    color: #fff;
}

/* Reusable checklist */
.rt-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.rt-checklist li {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: start;
    gap: 0.8rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.5;
}
.rt-checklist li i {
    color: var(--primary);
    font-size: 0.7rem;
    margin-top: 0.3rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- 1) HERO ---- */
.rt-hero {
    background:
        radial-gradient(circle at 80% 20%, rgba(198,164,126,0.12) 0%, transparent 55%),
        linear-gradient(180deg, #FDFAF5 0%, #F5EFE6 100%);
    padding: clamp(110px, 11vw, 150px) 0 clamp(3rem, 5vw, 4.5rem);
    overflow: hidden;
}
.rt-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}
.rt-hero-text { max-width: 600px; }
.rt-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.0;
    letter-spacing: -1px;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
}
.rt-hero-title-sub {
    color: var(--primary-dark, #8A6A48);
    display: inline-block;
    margin-top: 0.2em;
}
.rt-hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: var(--primary-dark, #8A6A48);
    line-height: 1.4;
    margin: 0 0 1.25rem;
    font-style: italic;
}
.rt-hero-desc {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-light);
    margin: 0 0 1.5rem;
    max-width: 520px;
}
.rt-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.rt-hero-usp {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.85rem;
    border-top: 1px solid rgba(196,164,132,0.25);
    padding-top: 1.5rem;
}
.rt-hero-usp li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text);
    letter-spacing: 0.3px;
}
.rt-hero-usp li i {
    color: var(--primary-dark);
    font-size: 1.1rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rt-hero-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rt-hero-image img {
    max-height: 620px;
    width: auto !important;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.18));
}

/* ---- 2) HOW WORKS — DARK ---- */
.rt-how-works {
    position: relative;
    background: #14100B;
    padding: clamp(3.5rem, 6vw, 5rem) 0;
    color: rgba(255,255,255,0.85);
    overflow: hidden;
}
.rt-how-works-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(196,124,80,0.18) 0%, transparent 25%),
        radial-gradient(circle at 70% 70%, rgba(180,80,60,0.20) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(196,164,132,0.12) 0%, transparent 35%);
    z-index: 0;
    pointer-events: none;
}
.rt-how-works .container { position: relative; z-index: 1; }
.rt-how-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.rt-how-text p {
    color: rgba(255,255,255,0.78);
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.rt-how-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.rt-how-card {
    background: rgba(196,164,132,0.06);
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.4rem;
    transition: var(--transition);
}
.rt-how-card:hover {
    background: rgba(196,164,132,0.12);
    border-color: rgba(196,164,132,0.40);
    transform: translateY(-3px);
}
.rt-how-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(196,164,132,0.12);
    border: 1px solid rgba(196,164,132,0.30);
    color: var(--primary, #C4A484);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 0 1rem;
}
.rt-how-card h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.6rem;
    font-weight: 500;
}
.rt-how-card p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin: 0;
}

/* ---- 3) SUITABLE — Light, bullets + 4 zone photos ---- */
.rt-suitable {
    background: var(--cream, #FAF8F5);
    padding: clamp(3.5rem, 5vw, 4.5rem) 0;
}
.rt-suitable-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
.rt-zones-title {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 0 0 1.25rem;
    font-weight: 500;
}
.rt-zones-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.rt-zone-card {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #F3EDE3;
    position: relative;
    aspect-ratio: 3 / 4;
    box-shadow: 0 4px 18px rgba(138,106,72,0.06);
    transition: var(--transition);
}
.rt-zone-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(138,106,72,0.12);
}
.rt-zone-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.rt-zone-card figcaption {
    position: absolute;
    bottom: 0.85rem;
    left: 0.85rem;
    right: 0.85rem;
    background: rgba(255,255,255,0.92);
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    text-align: center;
    backdrop-filter: blur(4px);
}

/* ---- 4 + 5) PROTOCOL + INFO CARD ---- */
.rt-protocol {
    background: #F3EDE3;
    padding: clamp(3.5rem, 5vw, 4.5rem) 0;
}
.rt-protocol-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
.rt-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.rt-timeline-track {
    position: absolute;
    top: 38px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px);
    opacity: 0.5;
}
.rt-timeline-step {
    position: relative;
    text-align: center;
    z-index: 1;
}
.rt-timeline-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 18px rgba(138,106,72,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.3rem;
}
.rt-timeline-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--primary-dark);
    margin-bottom: 0.3rem;
}
.rt-timeline-step h4 {
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.45rem;
    font-weight: 500;
}
.rt-timeline-step p {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
    padding: 0 0.25rem;
}

.rt-info-card {
    background: #1A130D;
    color: rgba(255,255,255,0.85);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 12px 36px rgba(0,0,0,0.20);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.rt-info-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 0.85rem;
    align-items: start;
}
.rt-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(196,164,132,0.12);
    border: 1px solid rgba(196,164,132,0.30);
    color: var(--primary, #C4A484);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.rt-info-item h5 {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary, #C4A484);
    margin: 0.25rem 0 0.3rem;
    font-weight: 500;
}
.rt-info-item p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.5;
    margin: 0;
}
.rt-info-item p strong { color: #fff; font-weight: 500; }
.rt-info-cta {
    margin-top: 0.5rem;
    align-self: stretch;
    justify-content: center;
    color: var(--primary, #C4A484);
    border-color: rgba(196,164,132,0.55);
}
.rt-info-cta:hover { background: var(--primary, #C4A484); color: #fff; border-color: var(--primary, #C4A484); }

/* ---- 6) RESULTS — bullets + 4 progress photos ---- */
.rt-results {
    background: var(--cream, #FAF8F5);
    padding: clamp(3.5rem, 5vw, 4.5rem) 0;
}
.rt-results-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
.rt-results-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.rt-result-card {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #F3EDE3;
    position: relative;
    aspect-ratio: 3 / 4;
    box-shadow: 0 4px 18px rgba(138,106,72,0.06);
}
.rt-result-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.rt-result-card figcaption {
    position: absolute;
    bottom: 0.65rem;
    left: 0.65rem;
    right: 0.65rem;
    background: rgba(255,255,255,0.92);
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--black);
    text-align: center;
    backdrop-filter: blur(4px);
}

/* ---- 7) COMBO — 4 cards ---- */
.rt-combo {
    background: #F3EDE3;
    padding: clamp(3.5rem, 5vw, 4.5rem) 0;
    text-align: center;
}
.rt-combo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 2rem auto 0;
}
.rt-combo-card {
    background: #fff;
    border: 1px solid rgba(196,164,132,0.15);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
.rt-combo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(138,106,72,0.12);
    border-color: rgba(196,164,132,0.45);
}
.rt-combo-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: var(--transition);
}
.rt-combo-card:hover .rt-combo-icon { background: var(--primary); color: #fff; }
.rt-combo-card h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.rt-combo-card p {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

/* ---- 8) FINAL CTA — DARK with golden glow ---- */
.rt-final-cta {
    position: relative;
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    overflow: hidden;
    text-align: center;
    background: #14100B;
}
.rt-final-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    z-index: 0;
}
.rt-final-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,16,11,0.65) 0%, rgba(20,16,11,0.85) 100%);
    z-index: 1;
}
.rt-final-cta .container { position: relative; z-index: 2; }
.rt-final-cta-inner { max-width: 720px; margin: 0 auto; }
.rt-final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 1rem;
}
.rt-final-cta p {
    font-size: 1rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.7;
    margin: 0 0 2rem;
}
.rt-final-cta p strong { color: var(--primary, #C4A484); font-weight: 500; }
.rt-final-cta-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}

/* ---- RedTouch PRO Responsive ---- */
@media (max-width: 1199px) {
    .rt-hero-grid { gap: 2rem; }
    .rt-hero-image img { max-height: 540px; }
    .rt-how-cards { gap: 1.25rem; }
    .rt-protocol-grid { gap: 2rem; }
}

@media (max-width: 991px) {
    .rt-hero { padding: clamp(100px, 14vw, 130px) 0 clamp(3rem, 5vw, 4rem); }
    .rt-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 700px; }
    .rt-hero-text { text-align: center; max-width: 100%; }
    .rt-hero-desc { margin-left: auto; margin-right: auto; }
    .rt-hero-buttons { justify-content: center; }
    .rt-hero-image img { max-height: 480px; margin: 0 auto; }
    .rt-hero-usp { grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
    .rt-hero-usp li { font-size: 0.62rem; letter-spacing: 0.2px; }
    .rt-hero-usp li i { width: 32px; height: 32px; font-size: 0.95rem; }

    .rt-how-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 720px; }
    .rt-how-cards { grid-template-columns: 1fr; gap: 1rem; }

    .rt-suitable-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 720px; }

    .rt-protocol-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 720px; }
    .rt-timeline { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; }
    .rt-timeline-track { display: none; }

    .rt-results-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 720px; }

    .rt-combo-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 640px; }
}

@media (max-width: 767px) {
    .rt-hero-title { font-size: clamp(2.5rem, 8vw, 3.5rem); }
    .rt-hero-tagline { font-size: 1.05rem; }
    .rt-hero-image img { max-height: 380px; }
    .rt-hero-usp { grid-template-columns: repeat(3, 1fr); gap: 1rem; }

    .rt-zones-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; max-width: 480px; margin: 0 auto; }
    .rt-results-photos { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; max-width: 480px; margin: 0 auto; }

    .rt-info-card { padding: 1.5rem 1.25rem; }

    .rt-final-cta-buttons { flex-direction: column; align-items: stretch; max-width: 280px; margin: 0 auto; }
    .rt-final-cta-buttons .rt-btn { justify-content: center; }
}

@media (max-width: 575px) {
    .rt-hero-title { font-size: 2.5rem; }
    .rt-hero-usp { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
    .rt-hero-buttons { flex-direction: column; align-items: stretch; max-width: 280px; margin: 0 auto 1.5rem; }
    .rt-hero-buttons .rt-btn { justify-content: center; }

    .rt-section-title { font-size: 1.35rem; }
    .rt-timeline { grid-template-columns: 1fr; gap: 1.75rem; max-width: 220px; margin: 1.5rem auto 0; }
    .rt-timeline-icon { width: 64px; height: 64px; font-size: 1.15rem; }
    .rt-zones-grid, .rt-results-photos { max-width: 100%; }
    .rt-combo-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 320px; }
}

@media (max-width: 380px) {
    .rt-hero-title { font-size: 2.1rem; }
    .rt-hero-usp { grid-template-columns: 1fr; gap: 0.6rem; max-width: 220px; margin: 0 auto; padding-top: 1.25rem; }
    .rt-hero-usp li { flex-direction: row; gap: 0.7rem; }
}

/* ==================================================================
   AGAIN PRO — /services/again-pro-plus-dx.php
   Dark cinematic theme with gold accents (DEKA Again PRO laser).
   ================================================================== */

.again-hero,
.again-usp,
.again-quick,
.again-why,
.again-tech,
.again-protocol,
.again-results,
.again-faq,
.again-related,
.again-final {
    font-family: var(--font-body);
    position: relative;
}

/* ---- shared eyebrow + section title ---- */
.again-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(0.65rem, 0.75vw, 0.72rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1rem;
}

.again-eyebrow--center {
    display: block;
    text-align: center;
}

.again-section-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 1.5rem;
}

.again-section-title em {
    font-style: italic;
    color: var(--primary);
}

.again-section-title--center {
    text-align: center;
}

/* ---- shared button ---- */
.again-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.75rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.again-btn--gold {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}

.again-btn--gold:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
}

.again-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}

.again-btn--ghost:hover {
    background: rgba(196,164,132,0.12);
    border-color: var(--primary);
    color: var(--primary);
}

.again-btn--ghost-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.5);
}

.again-btn--ghost-light:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
}

.again-btn--block {
    width: 100%;
    justify-content: center;
    margin-top: 1.25rem;
}

.again-btn i { font-size: 0.78rem; }

/* ---------- 1) HERO ---------- */
.again-hero {
    position: relative;
    overflow: hidden;
    min-height: 600px;
    background: #1A1410;
    padding: clamp(120px, 11vw, 170px) 0 clamp(3rem, 5vw, 4.5rem);
    color: #fff;
}

.again-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0;
}

.again-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,11,9,0.92) 0%, rgba(15,11,9,0.78) 35%, rgba(15,11,9,0.45) 65%, rgba(15,11,9,0.25) 90%, rgba(15,11,9,0.10) 100%),
        linear-gradient(180deg, rgba(15,11,9,0.40) 0%, rgba(15,11,9,0.20) 50%, rgba(15,11,9,0.55) 100%);
    z-index: 1;
}

.again-hero-container {
    position: relative;
    z-index: 2;
}

.again-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.again-hero-text { min-width: 0; }

.again-hero-visual {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.again-hero-visual img {
    width: 100%;
    max-width: 480px;
    max-height: 620px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}

.again-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1.0;
    letter-spacing: -2px;
    color: #fff;
    margin: 0 0 1.25rem;
}

.again-hero-title em {
    font-style: italic;
    color: var(--primary);
    font-weight: 400;
}

.again-hero-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    color: var(--primary);
    margin: 0 0 1.5rem;
    line-height: 1.4;
}

.again-hero-subtitle strong {
    color: #fff;
    font-weight: 500;
}

.again-hero-desc {
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.85;
    color: rgba(255,255,255,0.78);
    margin: 0 0 2rem;
    max-width: 560px;
}

.again-hero-desc strong {
    color: #fff;
    font-weight: 500;
}

.again-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ---------- 2) USP BADGES ---------- */
.again-usp {
    background: #120D0A;
    padding: clamp(2rem, 3.5vw, 3rem) 0;
    border-top: 1px solid rgba(196,164,132,0.10);
    border-bottom: 1px solid rgba(196,164,132,0.10);
}

.again-usp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem 1rem;
    align-items: start;
}

.again-usp-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    text-align: center;
}

.again-usp-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(196,164,132,0.40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.05rem;
    background: rgba(196,164,132,0.06);
}

.again-usp-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
    max-width: 130px;
}

/* ---------- 3) QUICK CARDS ---------- */
.again-quick {
    background: #0F0B09;
    padding: clamp(2.5rem, 4.5vw, 4rem) 0;
}

.again-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.again-quick-card {
    background: #1A130F;
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: 6px;
    padding: 2rem 1.75rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.again-quick-card:hover {
    transform: translateY(-3px);
    border-color: rgba(196,164,132,0.45);
}

.again-quick-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.again-quick-card h3 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 0.85rem;
}

.again-quick-card p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
    margin: 0 0 1.25rem;
}

.again-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    transition: color 0.25s ease, gap 0.25s ease;
}

.again-quick-link:hover {
    color: var(--primary);
    gap: 0.85rem;
}

.again-quick-link i { font-size: 0.7rem; }

/* ---------- 4) WHY AGAIN PRO ---------- */
.again-why {
    background: #0F0B09;
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.again-why-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr 0.85fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.again-why-visual {
    text-align: center;
}

.again-why-visual img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55));
}

.again-why-content {
    color: rgba(255,255,255,0.85);
}

.again-why-lead {
    font-size: clamp(0.92rem, 1vw, 1rem);
    line-height: 1.85;
    color: rgba(255,255,255,0.78);
    margin: 0 0 1rem;
}

.again-why-lead strong { color: #fff; font-weight: 500; }

.again-why-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.25rem;
}

.again-why-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
}

.again-why-list i {
    color: var(--primary);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.again-suitable {
    background: #1A130F;
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: 6px;
    padding: 1.85rem 1.5rem;
    align-self: stretch;
}

.again-suitable-eyebrow {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.again-suitable-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.again-suitable-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
}

.again-suitable-list i {
    color: var(--primary);
    font-size: 0.85rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* ---------- 5) TECHNOLOGY ---------- */
.again-tech {
    background: #120D0A;
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid rgba(196,164,132,0.08);
    border-bottom: 1px solid rgba(196,164,132,0.08);
}

.again-tech-head {
    text-align: center;
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.again-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.again-tech-card {
    background: #1A130F;
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: 6px;
    padding: 2.25rem 1.85rem;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.again-tech-card:hover {
    transform: translateY(-3px);
    border-color: rgba(196,164,132,0.45);
}

.again-tech-card--featured {
    background: linear-gradient(135deg, #1F1611 0%, #15100C 100%);
    border-color: rgba(196,164,132,0.35);
}

.again-tech-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    border: 1px solid rgba(196,164,132,0.35);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin: 0 auto 1.25rem;
}

.again-tech-card h3 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0.75rem;
    letter-spacing: -0.3px;
}

.again-tech-card p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    margin: 0;
}

/* ---------- 5b) FEATURE BANNER ---------- */
.again-feature {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    background: #0F0B09;
    color: #fff;
}

.again-feature-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.55;
}

.again-feature-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,11,9,0.95) 0%, rgba(15,11,9,0.85) 40%, rgba(15,11,9,0.55) 70%, rgba(15,11,9,0.25) 100%),
        linear-gradient(180deg, rgba(15,11,9,0.20) 0%, rgba(15,11,9,0.50) 100%);
    z-index: 1;
}

.again-feature .container {
    position: relative;
    z-index: 2;
}

.again-feature-inner {
    max-width: 680px;
}

.again-feature-desc {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.85;
    color: rgba(255,255,255,0.82);
    margin: 0 0 2rem;
    max-width: 600px;
}

.again-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.5rem;
}

.again-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
}

.again-feature-list i {
    color: var(--primary);
    font-size: 0.78rem;
    flex-shrink: 0;
}

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

/* ---------- 6) PROTOCOL ---------- */
.again-protocol {
    background: #0F0B09;
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.again-protocol-head {
    text-align: center;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.again-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    counter-reset: again-step;
}

.again-step {
    background: #1A130F;
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: 6px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
}

.again-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(196,164,132,0.08);
    border: 1px solid rgba(196,164,132,0.30);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin: 0 auto 1rem;
}

.again-step-num {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 300;
    color: var(--primary);
    margin-bottom: 0.4rem;
    line-height: 1;
}

.again-step h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.75rem;
}

.again-step p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* ---------- 7) RESULTS + INFO ---------- */
.again-results {
    background: #120D0A;
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.again-results-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.again-results-lead {
    font-size: 1.05rem;
    color: var(--primary);
    margin: 0 0 1.5rem;
    font-style: italic;
    font-family: var(--font-heading);
}

.again-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.5rem;
}

.again-results-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
}

.again-results-list i {
    color: var(--primary);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.again-info-card {
    background: #1A130F;
    border: 1px solid rgba(196,164,132,0.25);
    border-radius: 6px;
    padding: 2rem 1.75rem;
}

.again-info-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(196,164,132,0.20);
}

.again-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(196,164,132,0.10);
}

.again-info-row:last-of-type {
    border-bottom: none;
    margin-bottom: 0.5rem;
}

.again-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.again-info-row > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.again-info-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 500;
}

.again-info-value {
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.4;
}

/* ---------- 8) FAQ + IMAGE ---------- */
.again-faq {
    background: #0F0B09;
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.again-faq-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.again-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.again-faq-item {
    background: #1A130F;
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: 4px;
    transition: border-color 0.25s ease;
}

.again-faq-item[open] {
    border-color: rgba(196,164,132,0.45);
}

.again-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.35rem;
    cursor: pointer;
    list-style: none;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

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

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

.again-faq-item summary i {
    color: var(--primary);
    font-size: 0.78rem;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.again-faq-item[open] summary i {
    transform: rotate(45deg);
}

.again-faq-answer {
    padding: 0 1.35rem 1.25rem;
    color: rgba(255,255,255,0.75);
    font-size: 0.92rem;
    line-height: 1.75;
}

.again-faq-answer p { margin: 0; }
.again-faq-answer strong { color: #fff; font-weight: 500; }

.again-faq-visual img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.55);
}

/* ---------- 9) RELATED ---------- */
.again-related {
    background: #120D0A;
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid rgba(196,164,132,0.08);
}

.again-related-head {
    text-align: center;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.again-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.again-related-card {
    background: #1A130F;
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: 6px;
    padding: 1.85rem 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease;
    display: block;
}

.again-related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(196,164,132,0.45);
}

.again-related-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(196,164,132,0.08);
    border: 1px solid rgba(196,164,132,0.25);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin: 0 auto 1rem;
}

.again-related-card h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0.5rem;
    letter-spacing: -0.2px;
}

.again-related-card p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

/* ---------- 10) FINAL CTA ---------- */
.again-final {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: #0F0B09;
    color: #fff;
}

.again-final-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.55;
}

.again-final-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,11,9,0.92) 0%, rgba(15,11,9,0.78) 45%, rgba(15,11,9,0.45) 75%, rgba(15,11,9,0.30) 100%);
    z-index: 1;
}

.again-final .container {
    position: relative;
    z-index: 2;
}

.again-final-inner {
    max-width: 720px;
}

.again-final-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 2rem;
}

.again-final-title em {
    font-style: italic;
    color: var(--primary);
}

.again-final-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .again-why-grid { grid-template-columns: 1fr 1.2fr; }
    .again-suitable { grid-column: 1 / -1; }
    .again-suitable-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem 1.25rem; }
    .again-related-grid { grid-template-columns: repeat(2, 1fr); }
    .again-usp-list { grid-template-columns: repeat(3, 1fr); }
    .again-faq-grid { grid-template-columns: 1fr; }
    .again-faq-visual { max-width: 520px; margin: 0 auto; }
}

@media (max-width: 900px) {
    .again-hero { min-height: auto; padding-top: clamp(110px, 13vw, 160px); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
    .again-hero-bg { opacity: 0.45; }
    .again-hero-grid { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
    .again-hero-visual { order: 2; }
    .again-hero-visual img { max-width: 360px; max-height: 440px; }
    .again-quick-grid { grid-template-columns: 1fr; }
    .again-tech-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .again-steps { grid-template-columns: repeat(2, 1fr); }
    .again-results-grid { grid-template-columns: 1fr; }
    .again-results-list { grid-template-columns: 1fr; }
    .again-why-grid { grid-template-columns: 1fr; }
    .again-why-visual { max-width: 320px; margin: 0 auto; }
    .again-suitable-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .again-hero-cta { flex-direction: column; align-items: stretch; }
    .again-hero-cta .again-btn { justify-content: center; }
    .again-final-cta { flex-direction: column; align-items: stretch; }
    .again-final-cta .again-btn { justify-content: center; }
    .again-usp-list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.85rem; }
    .again-steps { grid-template-columns: 1fr; }
    .again-related-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
    .again-suitable-list { grid-template-columns: 1fr; }
    .again-why-list { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .again-hero-title { font-size: 2.65rem; }
    .again-section-title { font-size: 1.65rem; }
    .again-final-title { font-size: 1.85rem; }
    .again-usp-list { grid-template-columns: 1fr; max-width: 220px; margin: 0 auto; }
}

/* ==================================================================
   AGAIN PRO — /services/again-pro.php
   Dark luxury theme with golden accents (laser hair removal)
   ================================================================== */

.ag-divider {
    width: 60px;
    height: 1px;
    background: var(--primary, #C4A484);
    margin: 0 0 1.5rem;
}
.ag-divider--center { margin-left: auto; margin-right: auto; }

.ag-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--primary, #C4A484);
    margin-bottom: 1.25rem;
}

.ag-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 400;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.ag-section-title--center { text-align: center; }

.ag-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.75rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}
.ag-btn i { font-size: 0.75rem; }
.ag-btn--gold {
    background: var(--primary, #C4A484);
    color: #fff;
    border-color: var(--primary, #C4A484);
}
.ag-btn--gold:hover, .ag-btn--gold:focus {
    background: var(--primary-dark, #8A6A48);
    border-color: var(--primary-dark, #8A6A48);
    color: #fff;
    transform: translateY(-1px);
}
.ag-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(196,164,132,0.55);
}
.ag-btn--ghost:hover, .ag-btn--ghost:focus {
    background: rgba(196,164,132,0.15);
    border-color: var(--primary, #C4A484);
    color: #fff;
}

.ag-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.ag-checklist li {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 0.7rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}
.ag-checklist li i {
    color: var(--primary, #C4A484);
    font-size: 0.7rem;
    margin-top: 0.3rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(196,164,132,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- 1) HERO — Full-bleed banner with text overlay ---- */
.ag-hero {
    position: relative;
    aspect-ratio: 1717 / 916;
    min-height: 580px;
    display: flex;
    align-items: center;
    padding: clamp(110px, 11vw, 150px) 0 clamp(2.5rem, 4vw, 3.5rem);
    overflow: hidden;
    background: #0F0E0D;
    color: rgba(255,255,255,0.92);
}
.ag-hero-bg {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
}
.ag-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,14,13,0.92) 0%, rgba(15,14,13,0.78) 28%, rgba(15,14,13,0.40) 55%, rgba(15,14,13,0.05) 82%, rgba(15,14,13,0) 100%),
        linear-gradient(180deg, rgba(15,14,13,0.30) 0%, rgba(15,14,13,0) 50%, rgba(15,14,13,0.50) 100%);
    z-index: 1;
}
.ag-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.ag-hero-text {
    max-width: 600px;
}
.ag-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6.5vw, 5.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 0.95;
    letter-spacing: -1.5px;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
}
.ag-hero-title-accent {
    color: var(--primary, #C4A484);
    margin-left: 0.15em;
}
.ag-hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    color: #fff;
    line-height: 1.3;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}
.ag-hero-desc {
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.72);
    margin: 0 0 1.5rem;
    max-width: 520px;
}
.ag-hero-desc strong { color: var(--primary, #C4A484); font-weight: 500; }
.ag-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.ag-hero-usp {
    list-style: none;
    padding: 1.5rem 0 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    border-top: 1px solid rgba(196,164,132,0.30);
    max-width: 100%;
}
.ag-hero-usp li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.62rem;
    line-height: 1.3;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.ag-hero-usp li i {
    color: var(--primary, #C4A484);
    font-size: 0.9rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(196,164,132,0.18);
    border: 1px solid rgba(196,164,132,0.40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- 2) QUICK ACTIONS — 3 link cards ---- */
.ag-quick-actions {
    background: #14100B;
    padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}
.ag-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1180px;
    margin: 0 auto;
}
.ag-action-card {
    background: rgba(196,164,132,0.05);
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    text-decoration: none;
    color: rgba(255,255,255,0.85);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ag-action-card:hover {
    background: rgba(196,164,132,0.10);
    border-color: rgba(196,164,132,0.45);
    transform: translateY(-3px);
}
.ag-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(196,164,132,0.12);
    border: 1px solid rgba(196,164,132,0.30);
    color: var(--primary, #C4A484);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.ag-action-card h3 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    font-weight: 500;
}
.ag-action-card p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
    margin: 0;
}
.ag-action-cta {
    margin-top: auto;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--primary, #C4A484);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.ag-action-cta i { font-size: 0.65rem; transition: transform 0.25s ease; }
.ag-action-card:hover .ag-action-cta i { transform: translateX(3px); }

/* ---- 3) WHY AGAIN PRO + ПОДХОДЯЩО ЗА ---- */
.ag-why {
    background: #1A130D;
    padding: clamp(3.5rem, 5vw, 4.5rem) 0;
    color: rgba(255,255,255,0.85);
}
.ag-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.ag-why-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.ag-why-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}
.ag-why-text p {
    color: rgba(255,255,255,0.78);
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0 0 1.25rem;
}
.ag-why-text p strong { color: var(--primary, #C4A484); font-weight: 500; }

/* ---- 3b) ZONES — Standalone grid section ---- */
.ag-zones {
    background: #14100B;
    padding: clamp(3rem, 5vw, 4rem) 0;
    color: rgba(255,255,255,0.85);
}
.ag-zones .ag-section-title { color: #fff; }
.ag-zones-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 1200px;
    margin: 2rem auto 0;
}
.ag-zone-item {
    flex: 0 0 calc((100% - 5rem) / 6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    padding: 1.1rem 0.75rem;
    background: rgba(196,164,132,0.05);
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.4px;
    transition: var(--transition);
}
.ag-zone-item:hover {
    background: rgba(196,164,132,0.10);
    border-color: rgba(196,164,132,0.45);
    transform: translateY(-2px);
}
.ag-zone-item i {
    color: var(--primary, #C4A484);
    font-size: 1.15rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(196,164,132,0.12);
    border: 1px solid rgba(196,164,132,0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- 4) PROTOCOL + INFO CARD ---- */
.ag-protocol {
    background: #14100B;
    padding: clamp(3.5rem, 5vw, 4.5rem) 0;
    color: rgba(255,255,255,0.85);
}
.ag-protocol-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
.ag-protocol-main { padding-top: 0.5rem; }
.ag-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.ag-timeline-track {
    position: absolute;
    top: 38px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px);
    opacity: 0.5;
}
.ag-timeline-step {
    position: relative;
    text-align: center;
    z-index: 1;
}
.ag-timeline-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    border: 1px solid rgba(196,164,132,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #C4A484);
    font-size: 1.3rem;
}
.ag-timeline-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--primary, #C4A484);
    margin-bottom: 0.3rem;
}
.ag-timeline-step h4 {
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.45rem;
    font-weight: 500;
}
.ag-timeline-step p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.62);
    line-height: 1.55;
    margin: 0;
    padding: 0 0.25rem;
}
.ag-info-card {
    background: rgba(196,164,132,0.05);
    border: 1px solid rgba(196,164,132,0.18);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.ag-info-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 0.85rem;
    align-items: start;
}
.ag-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(196,164,132,0.12);
    border: 1px solid rgba(196,164,132,0.30);
    color: var(--primary, #C4A484);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.ag-info-item h5 {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary, #C4A484);
    margin: 0.25rem 0 0.3rem;
    font-weight: 500;
}
.ag-info-item p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.5;
    margin: 0;
}
.ag-info-item p strong { color: #fff; font-weight: 500; }
.ag-info-item p small { color: rgba(255,255,255,0.55); font-size: 0.78rem; }

/* ---- 5) FAQ + image ---- */
.ag-faq {
    background: var(--cream, #FAF8F5);
    padding: clamp(3.5rem, 5vw, 4.5rem) 0;
}
.ag-faq .ag-section-title { color: var(--black); }
.ag-faq-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
.ag-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1rem;
}
.ag-faq-item {
    background: #fff;
    border: 1px solid rgba(196,164,132,0.20);
    border-radius: var(--radius-sm);
    padding: 0;
    transition: var(--transition);
}
.ag-faq-item[open] {
    border-color: rgba(196,164,132,0.45);
    box-shadow: 0 6px 20px rgba(138,106,72,0.10);
}
.ag-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text);
    font-weight: 500;
    transition: var(--transition);
}
.ag-faq-item summary::-webkit-details-marker { display: none; }
.ag-faq-item summary i {
    color: var(--primary, #C4A484);
    font-size: 0.75rem;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}
.ag-faq-item[open] summary i { transform: rotate(45deg); }
.ag-faq-answer {
    padding: 0 1.25rem 1rem;
}
.ag-faq-answer p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
}
.ag-faq-answer p strong { color: var(--primary-dark); font-weight: 500; }
.ag-faq-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(138,106,72,0.12);
    background: #F3EDE3;
}
.ag-faq-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* ---- 6) FINAL CTA — Banner with bg image ---- */
.ag-final-cta {
    position: relative;
    padding: clamp(4rem, 6vw, 5.5rem) 0;
    overflow: hidden;
    background: #14100B;
}
.ag-final-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    z-index: 0;
}
.ag-final-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20,16,11,0.95) 0%, rgba(20,16,11,0.75) 45%, rgba(20,16,11,0.30) 100%);
    z-index: 1;
}
.ag-final-cta .container { position: relative; z-index: 2; }
.ag-final-cta-inner { max-width: 600px; }
.ag-final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ag-final-cta h2 em {
    color: var(--primary, #C4A484);
    font-style: normal;
}
.ag-final-cta p {
    font-size: 1rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.7;
    margin: 0 0 1.75rem;
}
.ag-final-cta p strong { color: var(--primary, #C4A484); font-weight: 500; }
.ag-final-cta-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ---- 7) COMBO ---- */
.ag-combo {
    background: var(--cream, #FAF8F5);
    padding: clamp(3.5rem, 5vw, 4.5rem) 0;
    text-align: center;
}
.ag-combo .ag-section-title { color: var(--black); }
.ag-combo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 2rem auto 0;
}
.ag-combo-card {
    background: #fff;
    border: 1px solid rgba(196,164,132,0.15);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    text-align: left;
}
.ag-combo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(138,106,72,0.14);
    border-color: rgba(196,164,132,0.45);
}
.ag-combo-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #F8F2E6;
}
.ag-combo-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.ag-combo-card:hover .ag-combo-photo img { transform: scale(1.05); }
.ag-combo-body {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
}
.ag-combo-card h4 {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.55rem;
    font-weight: 500;
    line-height: 1.35;
}
.ag-combo-card p {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.55;
    margin: 0;
}

/* ---- Again PRO Responsive ---- */
@media (max-width: 1199px) {
    .ag-why-grid { gap: 2.25rem; }
    .ag-zone-item { flex-basis: calc((100% - 4rem) / 5); }
}

@media (max-width: 991px) {
    .ag-hero {
        aspect-ratio: auto;
        min-height: 600px;
        padding: clamp(110px, 14vw, 140px) 0 clamp(3rem, 5vw, 4rem);
    }
    .ag-hero-overlay {
        background:
            linear-gradient(180deg, rgba(15,14,13,0.55) 0%, rgba(15,14,13,0.78) 45%, rgba(15,14,13,0.95) 100%);
    }
    .ag-hero-bg { object-position: center; }
    .ag-hero-text { max-width: 100%; }
    .ag-hero-usp { grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
    .ag-hero-usp li { font-size: 0.55rem; letter-spacing: 0.3px; }
    .ag-hero-usp li i { width: 30px; height: 30px; font-size: 0.8rem; }

    .ag-actions-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 540px; }

    .ag-why-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 700px; }
    .ag-why-image { max-width: 600px; margin: 0 auto; }

    .ag-zones-grid { max-width: 720px; }
    .ag-zone-item { flex-basis: calc((100% - 3rem) / 4); }

    .ag-protocol-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 720px; }
    .ag-timeline { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; }
    .ag-timeline-track { display: none; }

    .ag-faq-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 720px; }
    .ag-faq-image { max-width: 600px; margin: 0 auto; }

    .ag-final-cta-overlay {
        background: linear-gradient(180deg, rgba(20,16,11,0.55) 0%, rgba(20,16,11,0.92) 100%);
    }
    .ag-final-cta-inner { max-width: 100%; text-align: center; margin: 0 auto; }
    .ag-final-cta-buttons { justify-content: center; }

    .ag-combo-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 640px; }
}

@media (max-width: 767px) {
    .ag-hero-title { font-size: clamp(2.5rem, 8vw, 3.5rem); }
    .ag-hero-tagline { font-size: 1.1rem; }
    .ag-hero-usp { grid-template-columns: repeat(3, 1fr); gap: 1rem; }

    .ag-zones-grid { gap: 0.85rem; }
    .ag-zone-item { flex-basis: calc((100% - 1.7rem) / 3); padding: 0.95rem 0.6rem; font-size: 0.72rem; }
    .ag-zone-item i { width: 38px; height: 38px; font-size: 1rem; }

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

    .ag-final-cta-buttons { flex-direction: column; align-items: stretch; max-width: 280px; margin: 0 auto; }
    .ag-final-cta-buttons .ag-btn { justify-content: center; }
}

@media (max-width: 575px) {
    .ag-hero-title { font-size: 2.5rem; }
    .ag-hero-tagline { font-size: 1rem; }
    .ag-hero-usp { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
    .ag-hero-buttons { flex-direction: column; align-items: stretch; max-width: 280px; margin: 0 auto 1.5rem; }
    .ag-hero-buttons .ag-btn { justify-content: center; }

    .ag-section-title { font-size: 1.4rem; }
    .ag-zone-item { flex-basis: calc((100% - 1rem) / 2); }
    .ag-timeline { grid-template-columns: 1fr; gap: 1.75rem; max-width: 220px; margin: 1.5rem auto 0; }
    .ag-timeline-icon { width: 64px; height: 64px; font-size: 1.15rem; }

    .ag-info-card { padding: 1.5rem 1.25rem; }

    .ag-faq-item summary { padding: 0.85rem 1rem; font-size: 0.88rem; }

    .ag-final-cta h2 { font-size: 1.65rem; }
    .ag-final-cta p { font-size: 0.92rem; }

    .ag-combo-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 320px; }
}

@media (max-width: 380px) {
    .ag-hero-title { font-size: 2.1rem; }
    .ag-hero-usp { grid-template-columns: 1fr; gap: 0.6rem; max-width: 220px; margin: 0 auto; padding-top: 1.25rem; }
    .ag-hero-usp li { flex-direction: row; gap: 0.7rem; }
    .ag-zones-grid { gap: 0.6rem; max-width: 220px; margin: 1.5rem auto 0; }
    .ag-zone-item { flex-basis: 100%; flex-direction: row; padding: 0.65rem 0.85rem; }
}

/* ==================================================================
   DUOGLIDE — /services/duoglide.php
   Dual laser technology landing — DEKA CO2 + 1540nm
   Dark luxury theme with golden accents
   ================================================================== */

.duo-hero,
.duo-why,
.duo-improve,
.duo-process,
.duo-faq,
.duo-final {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- shared eyebrow + title ---- */
.duo-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(0.65rem, 0.75vw, 0.72rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1rem;
}

.duo-eyebrow--center {
    display: block;
    text-align: center;
}

/* eyebrow contrast boost for light sections */
.duo-why .duo-eyebrow,
.duo-process .duo-eyebrow,
.duo-faq .duo-eyebrow {
    color: var(--primary-dark);
}

.duo-section-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.85rem, 3.6vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 1.5rem;
}

.duo-section-title em {
    font-style: italic;
    color: var(--primary);
}

/* ---- shared button ---- */
.duo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.duo-btn--gold {
    background: var(--primary);
    color: #1A130F;
    border-color: var(--primary);
}

.duo-btn--gold:hover {
    background: transparent;
    color: var(--primary);
}

.duo-btn--ghost {
    background: transparent;
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.30);
}

.duo-btn--ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.duo-btn--ghost-light {
    background: transparent;
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.45);
}

.duo-btn--ghost-light:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.duo-btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
}

.duo-btn i { font-size: 0.78rem; }

/* ---------- 1) HERO ---------- */
.duo-hero {
    position: relative;
    overflow: hidden;
    min-height: 600px;
    background: #0F0B09;
    padding: clamp(120px, 11vw, 170px) 0 clamp(2.5rem, 4vw, 3.5rem);
    color: #fff;
}

.duo-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.55;
}

.duo-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,11,9,0.95) 0%, rgba(15,11,9,0.78) 35%, rgba(15,11,9,0.45) 65%, rgba(15,11,9,0.20) 90%, rgba(15,11,9,0.05) 100%),
        linear-gradient(180deg, rgba(15,11,9,0.40) 0%, rgba(15,11,9,0.20) 50%, rgba(15,11,9,0.55) 100%);
    z-index: 1;
}

.duo-hero-container {
    position: relative;
    z-index: 2;
}

.duo-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.duo-hero-text { min-width: 0; }

.duo-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(3rem, 7.5vw, 6.5rem);
    line-height: 1.0;
    letter-spacing: -2px;
    color: #fff;
    margin: 0 0 1.25rem;
    text-transform: uppercase;
}

.duo-hero-title em {
    font-style: normal;
    color: var(--primary);
    font-weight: 400;
}

.duo-hero-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    color: rgba(255,255,255,0.85);
    margin: 0 0 1.5rem;
    line-height: 1.4;
    font-style: italic;
}

.duo-hero-subtitle strong {
    color: var(--primary);
    font-weight: 500;
    font-style: normal;
}

.duo-hero-desc {
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.85;
    color: rgba(255,255,255,0.80);
    margin: 0 0 2rem;
    max-width: 560px;
}

.duo-hero-desc strong {
    color: #fff;
    font-weight: 500;
}

.duo-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.duo-hero-visual {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.duo-hero-visual img {
    width: 100%;
    max-width: 460px;
    max-height: 600px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.65));
}

/* hero USP icon row */
.duo-hero-usp {
    list-style: none;
    margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
    padding: clamp(2rem, 3vw, 2.5rem) 0 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    border-top: 1px solid rgba(196,164,132,0.18);
}

.duo-hero-usp li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.duo-hero-usp-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(196,164,132,0.40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1rem;
    background: rgba(196,164,132,0.06);
}

.duo-hero-usp-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
    max-width: 140px;
    letter-spacing: 0.2px;
}

/* ---------- 2) WHY DUOGLIDE (LIGHT) ---------- */
.duo-why {
    background: #F5EFE7;
    padding: clamp(3rem, 6vw, 5rem) 0;
    color: var(--text);
}

.duo-why .duo-section-title { color: var(--black); }

.duo-why-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.duo-why-content {
    color: var(--text);
}

.duo-why-lead {
    font-size: clamp(0.92rem, 1vw, 1rem);
    line-height: 1.85;
    color: var(--text);
    margin: 0 0 1.75rem;
}

.duo-why-lead strong { color: var(--black); font-weight: 600; }

.duo-why-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.duo-why-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.5;
}

.duo-why-list i {
    color: var(--primary);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.duo-why-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.duo-tech-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(198,164,126,0.25);
    padding: 1.5rem 1.6rem 1.4rem;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 14px rgba(122,92,77,0.06);
}

.duo-tech-card:hover {
    border-color: rgba(198,164,126,0.55);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(122,92,77,0.10);
}

.duo-tech-card-glow {
    position: absolute;
    top: -40%;
    right: -30%;
    width: 60%;
    height: 180%;
    background: radial-gradient(closest-side, rgba(198,164,126,0.18), rgba(198,164,126,0) 70%);
    pointer-events: none;
}

.duo-tech-card--featured {
    border-color: rgba(198,164,126,0.50);
    background: linear-gradient(135deg, #FAF4EC 0%, #F2E7D8 100%);
}

.duo-tech-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.5rem;
    letter-spacing: -0.2px;
    position: relative;
    z-index: 1;
}

.duo-tech-card h3 span {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 300;
}

.duo-tech-card--featured h3 {
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
    font-family: var(--font-body);
    font-weight: 600;
}

.duo-tech-card p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ---------- 3) SUITABLE + IMPROVE ---------- */
.duo-improve {
    background: #0F0B09;
    padding: clamp(3rem, 6vw, 5rem) 0;
    color: #fff;
}

.duo-improve-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.duo-suitable-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.duo-suitable-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
}

.duo-suitable-list i {
    color: var(--primary);
    font-size: 0.72rem;
    flex-shrink: 0;
}

.duo-benefits-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.duo-benefit-card {
    background: #1A130F;
    border: 1px solid rgba(196,164,132,0.16);
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.duo-benefit-card:hover {
    transform: translateY(-3px);
    border-color: rgba(196,164,132,0.45);
}

.duo-benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(196,164,132,0.10);
    border: 1px solid rgba(196,164,132,0.30);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 0 auto 1.1rem;
}

.duo-benefit-card h3 {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.duo-benefit-card p {
    font-size: 0.85rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* ---------- 4) PROCESS + INFO (LIGHT) ---------- */
.duo-process {
    background: #FAF6F0;
    padding: clamp(3rem, 6vw, 5rem) 0;
    color: var(--text);
}

.duo-process .duo-section-title { color: var(--black); }

.duo-process-head {
    margin-bottom: clamp(2rem, 3vw, 2.5rem);
}

.duo-process-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(2rem, 3vw, 2.5rem);
    align-items: start;
}

.duo-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    counter-reset: steps;
}

.duo-step {
    background: #FFFFFF;
    border: 1px solid rgba(198,164,126,0.22);
    padding: 1.5rem 1.25rem;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 12px rgba(122,92,77,0.05);
}

.duo-step:hover {
    border-color: rgba(198,164,126,0.55);
    box-shadow: 0 8px 22px rgba(122,92,77,0.10);
    transform: translateY(-2px);
}

.duo-step-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(198,164,126,0.14);
    border: 1px solid rgba(198,164,126,0.40);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
}

.duo-step-num {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: rgba(198,164,126,0.55);
    line-height: 1;
}

.duo-step h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 0.5rem;
    letter-spacing: -0.2px;
}

.duo-step p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.duo-info-card {
    background: #FFFFFF;
    border: 1px solid rgba(198,164,126,0.30);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 2px 14px rgba(122,92,77,0.06);
}

.duo-info-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(198,164,126,0.30);
    letter-spacing: -0.2px;
}

.duo-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(198,164,126,0.18);
}

.duo-info-row:last-of-type {
    border-bottom: none;
}

.duo-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(198,164,126,0.14);
    border: 1px solid rgba(198,164,126,0.35);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.duo-info-row > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.duo-info-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-light);
    font-weight: 600;
}

.duo-info-value {
    font-size: 0.88rem;
    color: var(--black);
    line-height: 1.4;
}

/* ---------- 5) FAQ (LIGHT) ---------- */
.duo-faq {
    background: #F5EFE7;
    padding: clamp(3rem, 6vw, 5rem) 0;
    color: var(--text);
}

.duo-faq .duo-section-title { color: var(--black); }

.duo-faq-head {
    margin-bottom: clamp(2rem, 3vw, 2.5rem);
}

.duo-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 0;
}

.duo-faq-item {
    border-bottom: 1px solid rgba(198,164,126,0.30);
    padding: 0;
}

.duo-faq-item[open] {
    border-color: rgba(198,164,126,0.55);
}

.duo-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--black);
    transition: color 0.3s ease;
    gap: 1rem;
}

.duo-faq-item summary::-webkit-details-marker { display: none; }
.duo-faq-item summary:hover { color: var(--primary-dark); }

.duo-faq-item summary i {
    color: var(--primary-dark);
    font-size: 0.85rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.duo-faq-item[open] summary i {
    transform: rotate(45deg);
}

.duo-faq-answer {
    padding: 0 0 1.25rem;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text);
}

.duo-faq-answer p { margin: 0; }
.duo-faq-answer strong { color: var(--black); font-weight: 600; }

/* ---------- 6) FINAL CTA ---------- */
.duo-final {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    background: #0F0B09;
    color: #fff;
}

.duo-final-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.45;
}

.duo-final-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,11,9,0.92) 0%, rgba(15,11,9,0.75) 45%, rgba(15,11,9,0.40) 75%, rgba(15,11,9,0.20) 100%);
    z-index: 1;
}

.duo-final .container {
    position: relative;
    z-index: 2;
}

.duo-final-inner {
    max-width: 720px;
}

.duo-final-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 1.25rem;
}

.duo-final-title em {
    font-style: italic;
    color: var(--primary);
}

.duo-final-desc {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.8;
    color: rgba(255,255,255,0.82);
    margin: 0 0 2rem;
    max-width: 600px;
}

.duo-final-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .duo-hero-usp { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .duo-improve-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .duo-process-grid { grid-template-columns: 1fr; }
    .duo-faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .duo-hero { min-height: auto; padding-top: clamp(110px, 13vw, 160px); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
    .duo-hero-bg { opacity: 0.40; }
    .duo-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .duo-hero-visual { order: 2; }
    .duo-hero-visual img { max-width: 320px; max-height: 420px; }
    .duo-why-grid { grid-template-columns: 1fr; gap: 2rem; }
    .duo-steps { grid-template-columns: repeat(2, 1fr); }
    .duo-benefits-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .duo-hero-cta { flex-direction: column; align-items: stretch; }
    .duo-hero-cta .duo-btn { justify-content: center; }
    .duo-final-cta { flex-direction: column; align-items: stretch; }
    .duo-final-cta .duo-btn { justify-content: center; }
    .duo-hero-usp { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.85rem; }
    .duo-steps { grid-template-columns: 1fr; }
    .duo-suitable-list { grid-template-columns: 1fr; }
    .duo-why-list { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .duo-hero-title { font-size: 2.65rem; }
    .duo-section-title { font-size: 1.65rem; }
    .duo-final-title { font-size: 1.85rem; }
    .duo-hero-usp { grid-template-columns: 1fr; max-width: 220px; margin: 2rem auto 0; }
    .duo-hero-usp li { flex-direction: row; gap: 0.8rem; text-align: left; }
}

/* =================================================================== */
/* ============== AESTO METHOD — signature landing page ============== */
/* =================================================================== */

.am-hero,
.am-philosophy,
.am-doctor,
.am-visual,
.am-final {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.am-hero img,
.am-philosophy img,
.am-doctor img,
.am-visual img,
.am-final img { max-width: 100%; height: auto; }

/* ---- shared eyebrow ---- */
.am-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(0.65rem, 0.75vw, 0.72rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1rem;
}

.am-philosophy .am-eyebrow,
.am-doctor--light .am-eyebrow { color: var(--primary-dark); }

/* ---- shared section title ---- */
.am-section-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.95rem, 3.6vw, 2.95rem);
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: var(--black);
    margin: 0 0 1.25rem;
}

.am-section-title em {
    font-style: italic;
    color: var(--primary-dark);
}

.am-section-head--center { text-align: center; max-width: 760px; margin: 0 auto clamp(1.25rem, 2.5vw, 2rem); }
.am-section-head--center .am-eyebrow { display: block; }
.am-section-lead {
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.85;
    color: var(--text);
    margin: 0;
}

/* ---- shared button ---- */
.am-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.55rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.am-btn i { font-size: 0.78rem; }

.am-btn--gold {
    background: var(--primary);
    color: #1A130F;
    border-color: var(--primary);
}
.am-btn--gold:hover {
    background: transparent;
    color: var(--primary);
}

.am-btn--ghost {
    background: transparent;
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.30);
}
.am-btn--ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.am-btn--ghost-light {
    background: transparent;
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.45);
}
.am-btn--ghost-light:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.am-btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
}

/* =================== 1) HERO =================== */
.am-hero {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    background: #0C0907;
    padding: clamp(210px, 14vw, 230px) 0 clamp(1.25rem, 2vw, 1.75rem);
    color: #fff;
}

.am-hero-bg {
    position: absolute;
    inset: clamp(210px, 14vw, 230px) 0 0 0;
    background-size: auto 100%;
    background-position: right top;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.92;
}

.am-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12,9,7,0.95) 0%, rgba(12,9,7,0.80) 30%, rgba(12,9,7,0.35) 55%, rgba(12,9,7,0.05) 85%, rgba(12,9,7,0) 100%),
        linear-gradient(180deg, rgba(12,9,7,0.40) 0%, rgba(12,9,7,0.15) 50%, rgba(12,9,7,0.55) 100%);
    z-index: 1;
}

.am-hero-vignette { display: none; }

.am-hero-container {
    position: relative;
    z-index: 2;
}

.am-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    min-height: 460px;
}

.am-hero-text { min-width: 0; max-width: 640px; }

.am-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    line-height: 1.0;
    letter-spacing: -2px;
    color: #fff;
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

.am-hero-title em {
    font-style: italic;
    color: var(--primary);
    font-weight: 400;
}

.am-hero-mark {
    margin: 0.3rem 0 0.7rem;
    line-height: 0;
}

.am-hero-mark img {
    width: clamp(90px, 11vw, 130px);
    height: auto;
    display: block;
    opacity: 0.95;
}

.am-hero-tagline {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: rgba(255,255,255,0.78);
    margin: 0 0 1.1rem;
    letter-spacing: 0.5px;
}

.am-tagline-mark { color: var(--primary); margin-right: 0.4rem; }

.am-hero-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: rgba(255,255,255,0.92);
    margin: 0 0 1.1rem;
    line-height: 1.5;
    font-weight: 400;
}

.am-hero-subtitle strong { color: var(--primary); font-weight: 500; }

.am-hero-body {
    margin: 0 0 1.5rem;
}

.am-hero-body p {
    font-size: clamp(0.88rem, 0.95vw, 0.98rem);
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
    margin: 0 0 0.75rem;
    max-width: 580px;
}

.am-hero-body p strong { color: #fff; font-weight: 500; }

.am-hero-stamp {
    border-left: 2px solid var(--primary);
    padding-left: 1rem;
    color: rgba(255,255,255,0.92) !important;
}

.am-hero-stamp em { color: var(--primary); font-style: italic; font-weight: 400; }

.am-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* hero strip */
.am-hero-strip {
    margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
    padding: clamp(0.85rem, 1.5vw, 1.15rem) 0 0;
    border-top: 1px solid rgba(198,164,126,0.18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.78rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.am-hero-strip-item { display: inline-flex; align-items: center; gap: 0.6rem; }
.am-hero-strip-item i { color: var(--primary); font-size: 0.85rem; }
.am-hero-strip-sep { color: rgba(198,164,126,0.4); font-weight: 300; }

/* =================== 2) PHILOSOPHY =================== */
.am-philosophy {
    background: #F5EFE7;
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    color: var(--text);
}

.am-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
}

.am-pillar {
    position: relative;
    padding: 2rem 1.5rem 1.75rem;
    background: #FFFFFF;
    border: 1px solid rgba(198,164,126,0.22);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    overflow: hidden;
}

.am-pillar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.am-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(122,92,77,0.10);
    border-color: rgba(198,164,126,0.45);
}

.am-pillar:hover::before { transform: scaleX(1); }

.am-pillar-num {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--primary-dark);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-weight: 400;
}

.am-pillar-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(198,164,126,0.12);
    border: 1px solid rgba(198,164,126,0.35);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}

.am-pillar h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 0.65rem;
    letter-spacing: -0.2px;
}

.am-pillar p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}

/* =================== 3,5) DOCTOR sections (shared) =================== */
.am-doctor {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    color: #fff;
    position: relative;
}

.am-doctor--dark { background: #0F0B09; }
.am-doctor--light { background: #FAF6F0; color: var(--text); }

.am-doctor-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.5fr 0.95fr;
    gap: clamp(2rem, 3vw, 3rem);
    align-items: start;
}

.am-doctor-grid--reverse {
    grid-template-columns: 1.5fr 0.95fr;
}

.am-doctor--light .am-doctor-grid--reverse .am-doctor-portrait { order: 2; }

/* portrait */
.am-doctor-portrait { position: relative; }

.am-portrait-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #1A130F;
    border: 1px solid rgba(198,164,126,0.28);
}

.am-doctor--light .am-portrait-frame {
    background: #FFFFFF;
    border-color: rgba(198,164,126,0.30);
    box-shadow: 0 14px 40px rgba(122,92,77,0.10);
}

.am-portrait-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s ease;
}

.am-portrait-frame:hover img { transform: scale(1.03); }

.am-portrait-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(198,164,126,0) 50%, rgba(198,164,126,0.18) 100%);
    pointer-events: none;
}

.am-portrait-shine--light {
    background: linear-gradient(165deg, rgba(198,164,126,0) 50%, rgba(198,164,126,0.12) 100%);
}

.am-portrait-stamp {
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    background: rgba(198,164,126,0.06);
    border: 1px solid rgba(198,164,126,0.25);
    text-align: center;
}

.am-doctor--light .am-portrait-stamp {
    background: #FFFFFF;
    border-color: rgba(198,164,126,0.30);
}

.am-portrait-stamp img {
    height: 36px;
    width: auto;
    opacity: 0.85;
    filter: brightness(1.4);
}

.am-doctor--light .am-portrait-stamp img { filter: none; opacity: 1; }

/* main column */
.am-doctor-meta { margin-bottom: 1.5rem; }

.am-doctor-name {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 0.55rem;
}

.am-doctor--light .am-doctor-name { color: var(--black); }

.am-doctor-name em { font-style: italic; color: var(--primary); font-weight: 400; }
.am-doctor--light .am-doctor-name em { color: var(--primary-dark); }

.am-doctor-tags {
    font-size: clamp(0.55rem, 1.4vw, 0.72rem);
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.2vw, 2.5px);
    color: rgba(255,255,255,0.55);
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.am-doctor--light .am-doctor-tags { color: var(--text-light); }

.am-method-name {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.85rem, 3.6vw, 2.85rem);
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.am-doctor--light .am-method-name { color: var(--black); }

.am-method-name span {
    color: var(--primary);
    font-style: italic;
    font-weight: 400;
}

.am-doctor--light .am-method-name span { color: var(--primary-dark); }

.am-method-name sup {
    font-size: 0.4em;
    color: var(--primary);
    margin-left: 0.2rem;
    vertical-align: super;
}

.am-method-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: rgba(255,255,255,0.82);
    margin: 0 0 1.5rem;
    line-height: 1.5;
    padding-left: 1rem;
    border-left: 2px solid var(--primary);
}

.am-doctor--light .am-method-subtitle { color: var(--text); }

.am-doctor-copy {
    margin: 0 0 2rem;
}

.am-doctor-copy p {
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.85;
    color: rgba(255,255,255,0.78);
    margin: 0 0 1rem;
}

.am-doctor--light .am-doctor-copy p { color: var(--text); }

.am-doctor-copy p strong { color: #fff; font-weight: 500; }
.am-doctor--light .am-doctor-copy p strong { color: var(--black); }

/* method blocks (Анализира / Резултат / Постига / Избягва) */
.am-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(198,164,126,0.18);
}

.am-doctor--light .am-method-grid { border-top-color: rgba(198,164,126,0.30); }

.am-method-grid--three { grid-template-columns: repeat(3, 1fr); }

.am-method-block-title {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--primary);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.am-doctor--light .am-method-block-title { color: var(--primary-dark); }

.am-method-block-title::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--primary);
}

.am-doctor--light .am-method-block-title::before { background: var(--primary-dark); }

.am-method-block-title span { white-space: nowrap; }

/* check / cross lists */
.am-check-list, .am-cross-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.am-check-list li, .am-cross-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    line-height: 1.5;
}

.am-doctor--light .am-check-list li,
.am-doctor--light .am-cross-list li { color: var(--text); }

.am-check-list i {
    color: var(--primary);
    font-size: 0.7rem;
    flex-shrink: 0;
    margin-top: 0.4rem;
}

.am-check-list--accent i { color: var(--primary-light); }

.am-doctor--light .am-check-list i,
.am-doctor--light .am-check-list--light i { color: var(--primary-dark); }

.am-cross-list i {
    color: #C76A5C;
    font-size: 0.78rem;
    flex-shrink: 0;
    margin-top: 0.3rem;
}

.am-check-list strong, .am-cross-list strong { color: #fff; font-weight: 600; }
.am-doctor--light .am-check-list strong,
.am-doctor--light .am-cross-list strong { color: var(--black); }

/* principle highlight */
.am-principle {
    background: linear-gradient(135deg, rgba(198,164,126,0.10) 0%, rgba(198,164,126,0.04) 100%);
    border: 1px solid rgba(198,164,126,0.30);
    border-left: 3px solid var(--primary);
    padding: 1.5rem 1.6rem;
    margin: 0 0 2rem;
}

.am-principle-eyebrow {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

.am-principle-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 0.6rem;
    letter-spacing: -0.3px;
}

.am-principle p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

/* sidebar (am-doctor-side / am-side-card) */
.am-doctor-side { position: sticky; top: 110px; }

.am-side-card {
    background: linear-gradient(180deg, #1A130F 0%, #110C09 100%);
    border: 1px solid rgba(198,164,126,0.28);
    padding: 1.75rem 1.5rem;
}

.am-side-card--light {
    background: #FFFFFF;
    border-color: rgba(198,164,126,0.30);
    box-shadow: 0 8px 28px rgba(122,92,77,0.08);
    margin-top: 1rem;
}

.am-side-title {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--primary);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(198,164,126,0.20);
}

.am-side-title:not(:first-of-type) { margin-top: 1.5rem; }

.am-side-card--light .am-side-title { color: var(--primary-dark); border-bottom-color: rgba(198,164,126,0.30); }

.am-side-list, .am-side-bullets, .am-side-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.am-side-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: rgba(255,255,255,0.88);
    font-size: 0.88rem;
    line-height: 1.45;
}

.am-side-list i {
    color: var(--primary);
    font-size: 0.55rem;
    margin-top: 0.55rem;
    flex-shrink: 0;
}

.am-side-bullets li {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.55;
    padding-left: 0.85rem;
    position: relative;
}

.am-side-bullets li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--primary-dark);
}

.am-side-bullets li strong { color: var(--black); font-weight: 600; }

.am-side-text {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}

.am-side-badges {
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.am-side-badges li {
    background: rgba(198,164,126,0.10);
    border: 1px solid rgba(198,164,126,0.25);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 500;
    text-align: center;
    padding: 0.55rem 0.4rem;
    letter-spacing: 0.3px;
}

/* =================== 4) VISUAL BAND =================== */
.am-visual {
    background: #0C0907;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.am-visual-band {
    position: relative;
    margin: 0;
    line-height: 0;
}

.am-visual-band img {
    width: 100%;
    height: auto;
    display: block;
}

.am-visual-band::before,
.am-visual-band::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 1;
    pointer-events: none;
}

.am-visual-band::before {
    left: 0;
    background: linear-gradient(90deg, rgba(12,9,7,0.65) 0%, rgba(12,9,7,0) 100%);
}

.am-visual-band::after {
    right: 0;
    background: linear-gradient(270deg, rgba(12,9,7,0.65) 0%, rgba(12,9,7,0) 100%);
}

/* =================== 6) FINAL CTA =================== */
.am-final {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #0C0907;
    color: #fff;
}

.am-final-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.30;
    filter: saturate(0.9);
}

.am-final-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12,9,7,0.88) 0%, rgba(12,9,7,0.75) 50%, rgba(12,9,7,0.95) 100%),
        radial-gradient(ellipse at 50% 30%, rgba(198,164,126,0.18), rgba(198,164,126,0) 60%);
    z-index: 1;
}

.am-final .container { position: relative; z-index: 2; }

.am-final-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.am-final-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 1.25rem;
}

.am-final-title em { font-style: italic; color: var(--primary); }
.am-final-title sup { font-size: 0.4em; color: var(--primary); margin-left: 0.2rem; vertical-align: super; }

.am-final-desc {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    margin: 0 auto 2.5rem;
    max-width: 640px;
}

.am-final-steps {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.am-final-steps li {
    position: relative;
    padding: 1.5rem 1rem 1.25rem;
    border: 1px solid rgba(198,164,126,0.25);
    background: rgba(198,164,126,0.04);
    text-align: center;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.am-final-steps li:hover {
    border-color: rgba(198,164,126,0.55);
    background: rgba(198,164,126,0.08);
    transform: translateY(-2px);
}

.am-final-step-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    color: var(--primary);
    letter-spacing: 2px;
    margin-bottom: 0.6rem;
}

.am-final-step-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(198,164,126,0.12);
    border: 1px solid rgba(198,164,126,0.35);
    color: var(--primary);
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
}

.am-final-step-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
}

.am-final-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 2.5rem;
}

.am-final-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    margin-top: 0.5rem;
    position: relative;
}
.am-final-mark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: rgba(198,164,126,0.35);
}
.am-final-mark img {
    height: 56px;
    width: auto;
    opacity: 0.85;
    filter: brightness(1.6);
    display: block;
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1100px) {
    .am-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .am-pillars { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .am-doctor-grid,
    .am-doctor-grid--reverse { grid-template-columns: 1fr; gap: 2rem; }
    .am-doctor-portrait { max-width: 480px; }
    .am-doctor-side { position: static; }
    .am-method-grid--three { grid-template-columns: 1fr 1fr; }
    .am-final-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .am-hero { min-height: auto; padding-top: 165px; }
    .am-hero-bg {
        inset: 165px 0 0 0;
        background-size: cover;
        background-position: 75% top;
        opacity: 0.55;
    }
    .am-hero-strip { gap: 0.85rem; font-size: 0.7rem; }
    .am-hero-strip-sep { display: none; }
    .am-method-grid,
    .am-method-grid--three { grid-template-columns: 1fr; }
    .am-side-badges { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .am-hero { padding-top: 100px; }
    .am-hero-bg { inset: 100px 0 0 0; }
}

@media (max-width: 640px) {
    .am-hero-cta,
    .am-final-cta { flex-direction: column; align-items: stretch; }
    .am-hero-cta .am-btn,
    .am-final-cta .am-btn { justify-content: center; }
    .am-pillars { grid-template-columns: 1fr; }
    .am-final-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
    .am-hero-title { font-size: 2.85rem; letter-spacing: -1px; }
    .am-method-name,
    .am-final-title { font-size: 1.85rem; }
    .am-doctor-name { font-size: 1.6rem; }
    .am-final-steps { grid-template-columns: 1fr; }
}

/* =================== AESTO BIGBLOCK (homepage visual block) =================== */
.aesto-bigblock {
    position: relative;
    overflow: hidden;
    min-height: clamp(420px, 55vw, 620px);
    display: flex;
    align-items: center;
    color: #fff;
    isolation: isolate;
}

.aesto-bigblock-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
    transform: scale(1.02);
    transition: transform 8s ease;
}

.aesto-bigblock:hover .aesto-bigblock-bg { transform: scale(1.05); }

.aesto-bigblock-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(12,9,7,0.78) 0%, rgba(12,9,7,0.45) 55%, rgba(12,9,7,0.15) 100%),
        linear-gradient(180deg, rgba(122,92,77,0.10) 0%, rgba(12,9,7,0.30) 100%);
}

.aesto-bigblock-container { position: relative; z-index: 1; }

.aesto-bigblock-inner {
    max-width: 640px;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.aesto-bigblock-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(198, 164, 126, 0.95);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(198, 164, 126, 0.5);
}

.aesto-bigblock-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.85rem, 4.5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 0 1.25rem;
    color: #fff;
}

.aesto-bigblock-title em {
    font-style: italic;
    color: rgba(198, 164, 126, 0.95);
    font-weight: 400;
}

.aesto-bigblock-desc {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
    margin: 0 0 2rem;
}

.aesto-bigblock-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.aesto-bigblock-btn--primary {
    background: rgba(198, 164, 126, 0.95);
    border-color: rgba(198, 164, 126, 0.95);
    color: #0C0907;
}

.aesto-bigblock-btn--primary:hover {
    background: transparent;
    color: #fff;
    border-color: rgba(198, 164, 126, 0.95);
}

.aesto-bigblock .aesto-btn--light {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.aesto-bigblock .aesto-btn--light:hover {
    background: #fff;
    color: #0C0907;
    border-color: #fff;
}

@media (max-width: 720px) {
    .aesto-bigblock { min-height: clamp(380px, 80vw, 480px); }
    .aesto-bigblock-cta { flex-direction: column; align-items: stretch; }
    .aesto-bigblock-cta .aesto-btn { justify-content: center; }
}

/* ============================================================
   AURA REALITY — service page (aur-*)
   ============================================================ */
.aur-hero,
.aur-about,
.aur-detect,
.aur-advantages,
.aur-who,
.aur-combo,
.aur-process,
.aur-price,
.aur-faq {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    color: var(--text);
}

.aur-hero img,
.aur-about img,
.aur-detect img,
.aur-advantages img,
.aur-who img,
.aur-combo img,
.aur-process img,
.aur-price img,
.aur-faq img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Common section heads */
.aur-section-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.75rem, 3.4vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #1a1410;
    margin: 0;
}
.aur-section-title em {
    font-style: italic;
    color: #8a6a47;
    font-weight: 300;
}
.aur-section-head--center { text-align: center; max-width: 780px; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.aur-section-lead {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.7;
    color: var(--text-light);
    margin: 1rem 0 0;
}
.aur-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(198, 164, 126, 1);
    margin-bottom: 1rem;
}
.aur-eyebrow--dark { color: #8a6a47; }

/* Common buttons */
.aur-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.85rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.35s ease;
    cursor: pointer;
}
.aur-btn i { font-size: 0.7rem; transition: transform 0.35s ease; }
.aur-btn:hover i { transform: translateX(4px); }
.aur-btn--gold {
    background: rgba(198, 164, 126, 1);
    color: #1a1410;
    border-color: rgba(198, 164, 126, 1);
}
.aur-btn--gold:hover {
    background: transparent;
    color: rgba(198, 164, 126, 1);
}
.aur-btn--ghost {
    background: transparent;
    color: rgba(198, 164, 126, 1);
    border-color: rgba(198, 164, 126, 0.5);
}
.aur-btn--ghost:hover {
    background: rgba(198, 164, 126, 1);
    color: #1a1410;
    border-color: rgba(198, 164, 126, 1);
}

/* =================== 1) HERO =================== */
.aur-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #FAF6F0 0%, #F2EAE0 100%);
    padding: clamp(140px, 13vw, 200px) 0 clamp(3rem, 5vw, 4.5rem);
    isolation: isolate;
}

.aur-hero-bg {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198,164,126,0.18) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}
.aur-hero-overlay {
    position: absolute;
    bottom: -100px;
    left: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122,92,77,0.10) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.aur-hero-container { position: relative; z-index: 1; }

.aur-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.aur-hero-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 4.6vw, 3.85rem);
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: #1a1410;
    margin: 0 0 0.85rem;
}
.aur-hero-title em {
    font-style: italic;
    color: #8a6a47;
    font-weight: 300;
}

.aur-hero-tagline {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    color: #8a6a47;
    margin: 0 0 1.5rem;
    letter-spacing: 0.5px;
}
.aur-tagline-mark { color: rgba(198,164,126,0.7); padding-right: 0.4rem; }

.aur-hero-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    max-width: 540px;
    margin: 0 0 1.25rem;
}
.aur-hero-stamp {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.55;
    color: #1a1410;
    max-width: 540px;
    margin: 0 0 1.85rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(198,164,126,0.35);
}
.aur-hero-stamp em { font-style: italic; color: #8a6a47; }

.aur-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.aur-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.aur-hero-visual img {
    width: 100%;
    height: auto;
    max-width: 480px;
    border-radius: 24px;
    box-shadow: 0 30px 60px -20px rgba(43,32,22,0.25);
}

.aur-hero-usp {
    list-style: none;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(198,164,126,0.30);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.aur-hero-usp-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text);
}
.aur-hero-usp-item i {
    color: rgba(198, 164, 126, 1);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* =================== 2) ABOUT — analysis grid =================== */
.aur-about {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
}
.aur-analysis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.aur-analysis-item {
    position: relative;
    padding: 1.5rem 1.25rem 1.5rem;
    background: #FAF6F0;
    border: 1px solid rgba(198,164,126,0.25);
    border-radius: 14px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.aur-analysis-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -16px rgba(43,32,22,0.18);
}
.aur-analysis-num {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: rgba(198,164,126,0.85);
    letter-spacing: 2px;
}
.aur-analysis-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(198,164,126,0.35);
    border-radius: 12px;
    margin-bottom: 0.85rem;
}
.aur-analysis-icon i { color: #8a6a47; font-size: 1.05rem; }
.aur-analysis-item h4 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1410;
    line-height: 1.4;
    margin: 0;
}

/* =================== 3) DETECT — 4 problem-cards =================== */
.aur-detect {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #FAF6F0;
}
.aur-detect-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.aur-detect-card {
    background: #fff;
    border: 1px solid rgba(198,164,126,0.28);
    border-radius: 16px;
    padding: 1.75rem 1.35rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.aur-detect-card:hover {
    transform: translateY(-4px);
    border-color: rgba(198,164,126,0.6);
    box-shadow: 0 22px 38px -18px rgba(43,32,22,0.18);
}
.aur-detect-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(198,164,126,0.14);
    margin-bottom: 1.1rem;
}
.aur-detect-icon i { color: #8a6a47; font-size: 1.25rem; }
.aur-detect-card h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.15rem;
    color: #1a1410;
    margin: 0 0 0.85rem;
    line-height: 1.3;
}
.aur-detect-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(198,164,126,0.25);
    padding-top: 0.85rem;
}
.aur-detect-card ul li {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--text);
    padding-left: 1.1rem;
    position: relative;
}
.aur-detect-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 1px;
    background: rgba(198,164,126,0.7);
}

/* =================== 4) ADVANTAGES =================== */
.aur-advantages {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
}
.aur-advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.aur-advantage {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-right: 1px solid rgba(198,164,126,0.22);
}
.aur-advantage:last-child { border-right: none; }
.aur-advantage-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(198,164,126,0.12);
    border: 1px solid rgba(198,164,126,0.30);
}
.aur-advantage-icon i { color: #8a6a47; font-size: 1.35rem; }
.aur-advantage h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.15rem;
    color: #1a1410;
    margin: 0 0 0.65rem;
}
.aur-advantage p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-light);
    margin: 0;
}

/* =================== 5) WHO =================== */
.aur-who {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: linear-gradient(180deg, #FAF6F0 0%, #F2EAE0 100%);
}
.aur-who-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.aur-who-text .aur-section-title { margin-bottom: 0.5rem; }
.aur-who-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}
.aur-who-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(198,164,126,0.22);
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.5;
}
.aur-who-list li i {
    color: rgba(198, 164, 126, 1);
    font-size: 0.75rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

/* =================== 6) COMBO =================== */
.aur-combo {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
}
.aur-combo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 0.75rem;
    max-width: 980px;
    margin: 0 auto;
}
.aur-combo-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.25rem;
    border: 1px solid rgba(198,164,126,0.45);
    border-radius: 999px;
    font-size: 0.88rem;
    color: #1a1410;
    background: #FAF6F0;
    text-decoration: none;
    transition: all 0.3s ease;
}
a.aur-combo-tag:hover {
    background: rgba(198, 164, 126, 1);
    color: #fff;
    border-color: rgba(198, 164, 126, 1);
}

/* =================== 7) PROCESS =================== */
.aur-process {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #FAF6F0;
}
.aur-process-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.85fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
.aur-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}
.aur-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(198,164,126,0.28);
    border-radius: 14px;
}
.aur-step-num {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(198,164,126,0.12);
    color: #8a6a47;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    border-radius: 50%;
    border: 1px solid rgba(198,164,126,0.35);
}
.aur-step-body h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.1rem;
    color: #1a1410;
    margin: 0 0 0.25rem;
}
.aur-step-body p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0;
}
.aur-process-info {
    padding: 1.75rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(198,164,126,0.28);
    border-radius: 16px;
    position: sticky;
    top: 110px;
}
.aur-process-info h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #1a1410;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(198,164,126,0.30);
}
.aur-process-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}
.aur-process-tags li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.92rem;
    color: var(--text);
}
.aur-process-tags li i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(198,164,126,0.12);
    color: #8a6a47;
    border-radius: 50%;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* =================== 8) PRICE =================== */
.aur-price {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
}
.aur-price-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    background: linear-gradient(135deg, #FAF6F0 0%, #F2EAE0 100%);
    border: 1px solid rgba(198,164,126,0.30);
    border-radius: 24px;
    padding: clamp(2rem, 4vw, 3rem);
}
.aur-price-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-light);
    margin: 1rem 0 0;
}
.aur-price-card {
    background: #fff;
    border: 1px solid rgba(198,164,126,0.35);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 22px 48px -22px rgba(43,32,22,0.18);
}
.aur-price-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8a6a47;
    margin-bottom: 0.85rem;
}
.aur-price-value {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.2vw, 3.25rem);
    color: #1a1410;
    margin-bottom: 1.5rem;
    line-height: 1;
}
.aur-price-value small {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 400;
    letter-spacing: 0;
}

/* =================== 9) FAQ =================== */
.aur-faq {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
    background: #FAF6F0;
}
.aur-faq-grid {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 0.65rem;
}
.aur-faq-item {
    background: #fff;
    border: 1px solid rgba(198,164,126,0.28);
    border-radius: 14px;
    transition: border-color 0.35s ease;
}
.aur-faq-item[open] { border-color: rgba(198,164,126,0.5); }
.aur-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: #1a1410;
    user-select: none;
}
.aur-faq-item summary::-webkit-details-marker { display: none; }
.aur-faq-item summary i {
    color: #8a6a47;
    transition: transform 0.35s ease;
    flex-shrink: 0;
}
.aur-faq-item[open] summary i { transform: rotate(45deg); }
.aur-faq-answer {
    padding: 0 1.5rem 1.25rem;
    border-top: 1px solid rgba(198,164,126,0.22);
    padding-top: 1rem;
    margin-top: 0;
}
.aur-faq-answer p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1100px) {
    .aur-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .aur-hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
    .aur-analysis-grid,
    .aur-detect-grid,
    .aur-advantages-grid { grid-template-columns: repeat(2, 1fr); }
    .aur-advantage { border-right: none; border-bottom: 1px solid rgba(198,164,126,0.22); padding-bottom: 1.5rem; }
    .aur-advantage:last-child { border-bottom: none; }
    .aur-who-grid { grid-template-columns: 1fr; gap: 2rem; }
    .aur-process-grid { grid-template-columns: 1fr; }
    .aur-process-info { position: static; }
    .aur-price-inner { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 720px) {
    .aur-hero-usp { grid-template-columns: 1fr 1fr; }
    .aur-who-list { grid-template-columns: 1fr; }
    .aur-step { grid-template-columns: 48px 1fr; gap: 0.85rem; padding: 1rem 1.15rem; }
    .aur-step-num { width: 48px; height: 48px; font-size: 1.15rem; }
}

@media (max-width: 480px) {
    .aur-hero-title { font-size: 2.1rem; letter-spacing: -0.5px; }
    .aur-hero-cta { flex-direction: column; align-items: stretch; }
    .aur-hero-cta .aur-btn { justify-content: center; }
    .aur-analysis-grid,
    .aur-detect-grid,
    .aur-advantages-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ENDOSPHERES THERAPY — service page (endo-*)
   ============================================================ */
.endo-hero,
.endo-how,
.endo-benefits,
.endo-zones,
.endo-who,
.endo-process,
.endo-course,
.endo-faq {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    color: var(--text);
}

.endo-hero img,
.endo-how img,
.endo-benefits img,
.endo-zones img,
.endo-who img,
.endo-process img,
.endo-course img,
.endo-faq img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Common section heads */
.endo-section-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.75rem, 3.4vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #1a1410;
    margin: 0;
}
.endo-section-title em { font-style: italic; color: #8a6a47; font-weight: 300; }
.endo-section-head--center { text-align: center; max-width: 820px; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.endo-section-lead {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.7;
    color: var(--text-light);
    margin: 1rem 0 0;
}
.endo-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(198, 164, 126, 1);
    margin-bottom: 1rem;
}
.endo-eyebrow--dark { color: #8a6a47; }

/* Common buttons */
.endo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.85rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.35s ease;
    cursor: pointer;
}
.endo-btn i { font-size: 0.7rem; transition: transform 0.35s ease; }
.endo-btn:hover i { transform: translateX(4px); }
.endo-btn--gold {
    background: rgba(198, 164, 126, 1);
    color: #1a1410;
    border-color: rgba(198, 164, 126, 1);
}
.endo-btn--gold:hover {
    background: transparent;
    color: rgba(198, 164, 126, 1);
}
.endo-btn--ghost {
    background: transparent;
    color: rgba(198, 164, 126, 1);
    border-color: rgba(198, 164, 126, 0.5);
}
.endo-btn--ghost:hover {
    background: rgba(198, 164, 126, 1);
    color: #1a1410;
    border-color: rgba(198, 164, 126, 1);
}

/* =================== 1) HERO =================== */
.endo-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #FCF9F4 0%, #F6EFE4 100%);
    padding: clamp(140px, 13vw, 200px) 0 clamp(3rem, 5vw, 4.5rem);
    isolation: isolate;
}

/* Banner variant — rectangular full-width hero with text on left and image fading on right */
.endo-hero--banner {
    padding-top: clamp(110px, 11vw, 150px);
    padding-bottom: 0;
    background: #1a1410;
    min-height: clamp(460px, 56vw, 640px);
}
.endo-hero-banner {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.endo-hero-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
}
.endo-hero-banner-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(20, 14, 10, 0.94) 0%,
        rgba(20, 14, 10, 0.88) 25%,
        rgba(20, 14, 10, 0.58) 50%,
        rgba(20, 14, 10, 0.18) 72%,
        rgba(20, 14, 10, 0) 88%
    );
}
.endo-hero-banner-glow {
    position: absolute;
    top: 50%;
    left: 12%;
    width: 60vw;
    max-width: 720px;
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(198, 164, 126, 0.22) 0%, rgba(198, 164, 126, 0.06) 35%, transparent 65%);
    filter: blur(2px);
    pointer-events: none;
}
.endo-hero--banner .endo-hero-text { color: #FBF7F0; max-width: 560px; }
.endo-hero--banner .endo-hero-title { color: #FBF7F0; }
.endo-hero--banner .endo-hero-title em { color: #d9b88a; }
.endo-hero--banner .endo-hero-desc { color: rgba(251, 247, 240, 0.86); max-width: 520px; }
.endo-hero--banner .endo-hero-usp {
    margin-top: clamp(2.25rem, 4vw, 3rem);
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.endo-hero--banner .endo-hero-usp-item { color: #FBF7F0; }
.endo-hero--banner .endo-hero-usp-item i { color: #d9b88a; }
.endo-hero--banner .endo-hero-usp-item span { color: rgba(251, 247, 240, 0.88); }

@media (max-width: 900px) {
    .endo-hero--banner { min-height: auto; padding-bottom: 0; }
    .endo-hero-banner img { object-position: 70% center; }
    .endo-hero-banner-gradient {
        background: linear-gradient(
            180deg,
            rgba(20, 14, 10, 0.55) 0%,
            rgba(20, 14, 10, 0.85) 55%,
            rgba(20, 14, 10, 0.95) 100%
        );
    }
    .endo-hero-banner-glow { display: none; }
}

.endo-hero-bg {
    position: absolute;
    top: -150px;
    right: -150px;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198,164,126,0.18) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}
.endo-hero-blob {
    position: absolute;
    bottom: -120px;
    left: -100px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122,92,77,0.10) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}
.endo-hero-container { position: relative; z-index: 1; }
.endo-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.endo-hero--banner .endo-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    min-height: clamp(360px, 44vw, 520px);
}
.endo-hero-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.85rem, 3.8vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.3px;
    color: #1a1410;
    margin: 0 0 1.25rem;
}
.endo-hero-title em { font-style: italic; color: inherit; font-weight: 300; }
.endo-hero-tagline {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: #8a6a47;
    margin: 0 0 1.5rem;
    letter-spacing: 0.5px;
}
.endo-tagline-mark { color: rgba(198,164,126,0.7); padding-right: 0.4rem; }
.endo-hero-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 460px;
    margin: 0 0 1.85rem;
}
.endo-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.endo-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.endo-hero-visual img {
    width: 100%;
    height: auto;
    max-width: 480px;
    border-radius: 24px;
    box-shadow: 0 30px 60px -20px rgba(43,32,22,0.25);
}
.endo-hero-usp {
    list-style: none;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
}
.endo-hero-usp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
}
.endo-hero-usp-item i {
    color: #8a6a47;
    font-size: 1.65rem;
    line-height: 1;
}
.endo-hero-usp-item span {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text);
    line-height: 1.5;
}

/* =================== 2) HOW =================== */
.endo-how {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
}
.endo-how-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.endo-how-text p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    margin: 1rem 0 0;
}
.endo-how-text p strong { color: #1a1410; }
.endo-how-accent {
    font-family: var(--font-heading) !important;
    font-style: italic;
    font-size: 1.1rem !important;
    color: #1a1410;
    padding: 1.25rem 0 0;
    margin-top: 1.5rem !important;
    border-top: 1px solid rgba(198,164,126,0.30);
}
.endo-how-accent em { color: #8a6a47; }
.endo-how-visual img {
    border-radius: 20px;
    box-shadow: 0 22px 48px -22px rgba(43,32,22,0.22);
}

/* =================== 3) BENEFITS — compact icon row =================== */
.endo-benefits {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
    border-top: 1px solid rgba(198,164,126,0.20);
    border-bottom: 1px solid rgba(198,164,126,0.20);
}
.endo-benefits-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1.25rem;
    max-width: 1080px;
    margin: 0 auto;
}
.endo-benefit {
    text-align: center;
    padding: 0.5rem 0.35rem;
    transition: transform 0.35s ease;
}
.endo-benefit:hover { transform: translateY(-3px); }
.endo-benefit-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(198,164,126,0.12);
    border: 1px solid rgba(198,164,126,0.30);
}
.endo-benefit-icon i { color: #8a6a47; font-size: 1.2rem; }
.endo-benefit p {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text);
    margin: 0;
    font-weight: 500;
}

/* =================== 4) ZONES (face vs body) =================== */
.endo-zones {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
}
.endo-zones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.endo-zone-card {
    background: #FAF6F0;
    border: 1px solid rgba(198,164,126,0.28);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.endo-zone-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -22px rgba(43,32,22,0.20);
}
.endo-zone-photo {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.endo-zone-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.endo-zone-card:hover .endo-zone-photo img { transform: scale(1.04); }
.endo-zone-body {
    padding: 1.85rem 1.75rem;
}
.endo-zone-body h3 {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 1.65rem;
    color: #1a1410;
    margin: 0 0 1rem;
    line-height: 1.2;
}
.endo-zone-body h3 em { font-style: italic; color: #8a6a47; font-weight: 300; }
.endo-zone-body p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0 0 0.85rem;
}
.endo-zone-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    border-top: 1px solid rgba(198,164,126,0.25);
    padding-top: 0.85rem;
}
.endo-zone-list li {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--text);
    padding-left: 1.1rem;
    position: relative;
}
.endo-zone-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 1px;
    background: rgba(198,164,126,0.7);
}
.endo-zone-result {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem !important;
    color: #1a1410 !important;
    padding-top: 1rem;
    border-top: 1px solid rgba(198,164,126,0.25);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 !important;
}
.endo-zone-result i {
    color: #8a6a47;
    margin-top: 0.3rem;
    flex-shrink: 0;
}

/* =================== 5) WHO =================== */
.endo-who {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: linear-gradient(180deg, #FAF6F0 0%, #F2EAE0 100%);
}
.endo-who-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.endo-who-text p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    margin: 1rem 0 0;
}
.endo-who-text p strong { color: #1a1410; }
.endo-who-text p em { font-style: italic; color: #8a6a47; }
.endo-who-visual img {
    border-radius: 20px;
    box-shadow: 0 28px 56px -22px rgba(43,32,22,0.22);
}

/* =================== 6) PROCESS — quality cards =================== */
.endo-process {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
}
.endo-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.endo-quality {
    text-align: center;
    background: #FAF6F0;
    border: 1px solid rgba(198,164,126,0.28);
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.endo-quality:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 38px -18px rgba(43,32,22,0.18);
}
.endo-quality-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(198,164,126,0.14);
    border: 1px solid rgba(198,164,126,0.30);
}
.endo-quality-icon i { color: #8a6a47; font-size: 1.4rem; }
.endo-quality h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.15rem;
    color: #1a1410;
    margin: 0 0 0.45rem;
}
.endo-quality p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0;
}
.endo-process-note {
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    max-width: 760px;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text);
    padding: 1.25rem 1.5rem;
    border-top: 1px solid rgba(198,164,126,0.30);
    border-bottom: 1px solid rgba(198,164,126,0.30);
}
.endo-process-note em { font-style: italic; color: #8a6a47; }

/* =================== 7) FINAL CTA STRIP — light cream box =================== */
.endo-final {
    position: relative;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    background: #fff;
}
.endo-final-bg, .endo-final-overlay { display: none; }
.endo-final-container { position: relative; z-index: 1; }
.endo-final-inner {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg, #FAF6F0 0%, #F2EAE0 100%);
    border: 1px solid rgba(198,164,126,0.40);
    border-radius: 22px;
    padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 22px 48px -22px rgba(43,32,22,0.12);
}
.endo-final-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
    line-height: 1.18;
    color: #1a1410;
    margin: 0 0 1rem;
}
.endo-final-title em {
    font-style: italic;
    color: #8a6a47;
    font-weight: 300;
}
.endo-final-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.endo-final-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}
.endo-btn--light {
    background: #fff;
    color: #1a1410;
    border-color: rgba(198,164,126,0.50);
}
.endo-btn--light:hover {
    background: rgba(198,164,126,1);
    color: #fff;
    border-color: rgba(198,164,126,1);
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1100px) {
    .endo-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .endo-hero-visual { order: -1; max-width: 460px; margin: 0 auto; }
    .endo-how-grid { grid-template-columns: 1fr; gap: 2rem; }
    .endo-benefits-row { grid-template-columns: repeat(4, 1fr); }
    .endo-zones-grid { grid-template-columns: 1fr; }
    .endo-who-grid { grid-template-columns: 1fr; gap: 2rem; }
    .endo-quality-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .endo-hero-usp { grid-template-columns: repeat(3, 1fr); }
    .endo-benefits-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .endo-final-cta { flex-direction: column; align-items: stretch; }
    .endo-final-cta .endo-btn { justify-content: center; }
}

@media (max-width: 480px) {
    .endo-hero-title { font-size: 2rem; letter-spacing: -0.5px; }
    .endo-hero-usp { grid-template-columns: 1fr 1fr; }
    .endo-benefits-row { grid-template-columns: 1fr 1fr; }
    .endo-quality-grid { grid-template-columns: 1fr; }
    .endo-final-title { font-size: 1.65rem; }
}

/* ===================================================
   HOME PAGE — Aesto Editorial Layout
   =================================================== */

:root {
    --home-mocha: #3F2E22;
    --home-mocha-2: #4B3625;
    --home-gold: #C9A876;
    --home-gold-dark: #AC8954;
    --home-cream: #F7F1E8;
    --home-ivory: #FBF7F0;
    --home-ink: #2A2118;
    --home-muted: #8B7864;
}

/* ---------- HERO (split) ---------- */
.home-hero {
    position: relative;
    display: block;
    min-height: clamp(520px, 66vh, 700px);
    background: var(--home-mocha);
    overflow: hidden;
    isolation: isolate;
}

.home-hero__panel {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: inherit;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(50, 36, 26, 0.88) 0%,
        rgba(50, 36, 26, 0.82) 30%,
        rgba(50, 36, 26, 0.55) 48%,
        rgba(50, 36, 26, 0.15) 68%,
        rgba(50, 36, 26, 0) 85%
    );
}

.home-hero__panel-inner {
    padding: clamp(10rem, 16vh, 13rem) clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 5.5rem);
    color: #FBF7F0;
    max-width: 560px;
    width: 100%;
}

.home-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--home-gold);
    margin-bottom: 1.5rem;
}

.home-hero__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
    line-height: 1.15;
    color: #FBF7F0;
    margin: 0 0 1.5rem;
    letter-spacing: -0.005em;
}

.home-hero__rule {
    display: block;
    width: 56px;
    height: 1px;
    background: var(--home-gold);
    margin: 0 0 1.5rem;
}

.home-hero__lead {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(251, 247, 240, 0.82);
    margin: 0 0 2.25rem;
    max-width: 460px;
}

.home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.home-btn {
    --btn-pad-y: 0.95rem;
    --btn-pad-x: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
    cursor: pointer;
}

.home-btn--gold {
    background: var(--home-gold);
    color: #fff;
    border-color: var(--home-gold);
}
.home-btn--gold:hover {
    background: var(--home-gold-dark);
    border-color: var(--home-gold-dark);
}

.home-btn--ghost {
    background: transparent;
    color: var(--home-gold);
    border-color: var(--home-gold);
}
.home-btn--ghost:hover {
    background: var(--home-gold);
    color: #fff;
}

.home-hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}
.home-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.home-hero__slide.is-active {
    opacity: 1;
}
.home-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
}

/* Founder portraits (slides 1, 2) — fill container with no strips top/bottom.
   Padding-top reserves space for the fixed nav so heads start below it.
   object-fit: cover fills the area; object-position right top keeps heads
   pinned to the top of the cropped area (below the nav). */
.home-hero__slide:nth-child(1),
.home-hero__slide:nth-child(2) {
    padding-top: 150px;
    box-sizing: border-box;
}
.home-hero .home-hero__media .home-hero__slide:nth-child(1) img,
.home-hero .home-hero__media .home-hero__slide:nth-child(2) img {
    object-fit: cover !important;
    object-position: 100% 0% !important;
}

/* Mobile: media is rendered relative (below the panel), nav doesn't overlay
   the image — reset the padding so the image isn't pushed down unnecessarily. */
@media (max-width: 920px) {
    .home-hero__slide:nth-child(1),
    .home-hero__slide:nth-child(2) {
        padding-top: 0;
    }
    .home-hero .home-hero__media .home-hero__slide:nth-child(1) img,
    .home-hero .home-hero__media .home-hero__slide:nth-child(2) img {
        object-position: 100% 50% !important;
    }
}

/* Team banners (slides 4, 5) — heavier crop is OK; anchor people right-top */
.home-hero .home-hero__media .home-hero__slide:nth-child(4) img,
.home-hero .home-hero__media .home-hero__slide:nth-child(5) img {
    object-fit: cover !important;
    object-position: 100% 0% !important;
}

/* Hero responsive */
@media (max-width: 920px) {
    .home-hero {
        min-height: auto;
    }
    .home-hero__media {
        position: relative;
        inset: auto;
        height: clamp(280px, 50vw, 460px);
    }
    .home-hero__panel {
        background: linear-gradient(180deg, rgba(50,36,26,0.92) 0%, rgba(50,36,26,0.92) 100%);
    }
    .home-hero__panel-inner {
        padding: clamp(2.5rem, 8vw, 4rem) clamp(1.5rem, 6vw, 3rem);
        max-width: none;
    }
    .home-hero__ctas { gap: 0.75rem; }
    .home-btn { --btn-pad-x: 1.35rem; }
}

@media (max-width: 480px) {
    .home-hero__title { font-size: 1.85rem; }
    .home-btn { flex: 1 1 100%; }
}

/* ---------- FEATURE STRIP ---------- */
.home-features {
    background: var(--home-ivory);
    padding: clamp(2.5rem, 4vw, 3.5rem) 0;
    border-bottom: 1px solid rgba(201, 168, 118, 0.18);
}

.home-features__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.home-features__item {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 0.5rem clamp(1rem, 2vw, 1.75rem);
    position: relative;
}

.home-features__item + .home-features__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(201, 168, 118, 0.28);
}

.home-features__icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(201, 168, 118, 0.10);
    color: var(--home-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.home-features__icon svg {
    width: 26px;
    height: 26px;
}

.home-features__text h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--home-ink);
    margin: 0.25rem 0 0.4rem;
}

.home-features__text p {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--home-muted);
    margin: 0;
}

@media (max-width: 900px) {
    .home-features__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .home-features__item:nth-child(3)::before { display: none; }
}

@media (max-width: 540px) {
    .home-features__grid { grid-template-columns: 1fr; row-gap: 1.5rem; }
    .home-features__item + .home-features__item::before { display: none; }
    .home-features__item { padding: 0 1rem; }
}

/* ---------- INTERIOR GALLERY ---------- */
.home-gallery {
    background: #fff;
    padding: 0;
}

.home-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.5rem, 1vw, 0.75rem);
    padding: clamp(0.5rem, 1vw, 0.75rem);
}

.home-gallery__tile {
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 5;
    background: var(--home-cream);
}

.home-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
    display: block;
}

.home-gallery__tile:hover img {
    transform: scale(1.04);
}

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

@media (max-width: 480px) {
    .home-gallery__tile { aspect-ratio: 1 / 1; }
}

/* ---------- MANIFESTO ---------- */
.home-manifesto {
    background: #fff;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
    text-align: center;
}

.home-manifesto__line {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    line-height: 1.5;
    color: var(--home-ink);
    margin: 0;
}

.home-manifesto__line--accent {
    color: var(--home-gold-dark);
    margin-top: 0.25rem;
}

.home-manifesto__sign {
    margin-top: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.home-manifesto__rule {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: var(--home-gold);
    opacity: 0.7;
}

.home-manifesto__monogram {
    color: var(--home-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.home-manifesto__monogram svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 540px) {
    .home-manifesto__rule { width: 36px; }
}

/* ===================================================
   HOME TEAM CAROUSEL — без crop на снимките
   =================================================== */
.home-team-carousel {
    position: relative;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: 0 clamp(2.5rem, 5vw, 4rem);
    overflow: hidden;
}

.home-team-track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.home-team-slide {
    flex: 0 0 calc((100% - clamp(1rem, 2vw, 1.75rem) * 2) / 3);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.3s ease;
}

.home-team-slide:hover {
    transform: translateY(-4px);
}

.home-team-photo {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: var(--cream, #E8DED3);
    margin-bottom: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.home-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s ease;
}

.home-team-slide:hover .home-team-photo img {
    transform: scale(1.03);
}

.home-team-name {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 500;
    color: var(--black, #2B2B2B);
    margin: 0 0 0.25rem;
    letter-spacing: 0.3px;
}

.home-team-role {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--primary, #C6A47E);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
}

.home-team-nav {
    position: absolute;
    top: calc(50% - 3rem);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(198, 164, 126, 0.4);
    color: var(--primary, #C6A47E);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    z-index: 3;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.home-team-nav:hover {
    background: var(--primary, #C6A47E);
    border-color: var(--primary, #C6A47E);
    color: #fff;
}

.home-team-nav--prev { left: 4px; }
.home-team-nav--next { right: 4px; }

@media (max-width: 900px) {
    .home-team-carousel { padding: 0 clamp(1.5rem, 4vw, 3rem); }
    .home-team-slide {
        flex: 0 0 calc((100% - clamp(1rem, 2vw, 1.75rem)) / 2);
    }
}

@media (max-width: 540px) {
    .home-team-carousel { padding: 0 2.5rem; }
    .home-team-slide { flex: 0 0 100%; }
    .home-team-nav { width: 38px; height: 38px; }
    .home-team-nav--prev { left: 0; }
    .home-team-nav--next { right: 0; }
}

/* ===================================================
   MOBILE OPTIMIZATIONS — Home page
   =================================================== */

/* Tablet & below (≤ 920px) */
@media (max-width: 920px) {
    /* Hero — fix header clipping, adjust typography */
    .home-hero__panel-inner {
        padding: clamp(5.5rem, 16vw, 7.5rem) 1.5rem clamp(2.25rem, 5vw, 3rem);
        max-width: none;
    }
    .home-hero__title {
        font-size: clamp(1.7rem, 5.5vw, 2.5rem);
        line-height: 1.18;
    }
    .home-hero__lead {
        font-size: 0.95rem;
        line-height: 1.6;
        max-width: 100%;
        margin-bottom: 1.75rem;
    }
    .home-hero__ctas {
        gap: 0.6rem;
    }
    .home-btn {
        --btn-pad-x: 1.4rem;
        --btn-pad-y: 0.85rem;
        font-size: 0.7rem;
    }

    /* Photo gallery — denser on tablet */
    .home-gallery__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
        padding: 0.65rem;
    }
    .home-gallery__tile {
        aspect-ratio: 4 / 5;
    }

    /* Manifesto — adjust */
    .home-manifesto {
        padding: clamp(2.5rem, 6vw, 4rem) 1.25rem clamp(3rem, 7vw, 4.5rem);
    }
    .home-manifesto__line {
        font-size: clamp(1.15rem, 3vw, 1.55rem);
        line-height: 1.45;
    }

    /* Team carousel — better nav placement */
    .home-team-nav {
        width: 40px;
        height: 40px;
    }
    .home-team-name {
        font-size: 1.05rem;
    }
}

/* Phone (≤ 540px) */
@media (max-width: 540px) {
    /* Hero */
    .home-hero__panel-inner {
        padding: 6rem 1.25rem 2.5rem;
        text-align: left;
    }
    .home-hero__title {
        font-size: 1.65rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        margin-bottom: 1.25rem;
    }
    .home-hero__title br { display: none; }
    .home-hero__rule {
        width: 44px;
        margin-bottom: 1.25rem;
    }
    .home-hero__lead {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    .home-hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .home-btn {
        width: 100%;
        flex: none;
        --btn-pad-x: 1rem;
        --btn-pad-y: 0.9rem;
        font-size: 0.68rem;
        letter-spacing: 0.18em;
    }
    .home-hero__media {
        height: clamp(220px, 60vw, 360px);
    }
    .home-hero__media img {
        object-position: center 25%;
    }

    /* Photo gallery — keep 2x2 on phone for visual interest */
    .home-gallery__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
        padding: 0.4rem;
    }
    .home-gallery__tile {
        aspect-ratio: 1 / 1;
        border-radius: 4px;
    }

    /* Manifesto — phone */
    .home-manifesto {
        padding: 2.5rem 1rem 3rem;
    }
    .home-manifesto__line {
        font-size: 1.15rem;
        line-height: 1.45;
    }
    .home-manifesto__line--accent {
        font-size: 1.1rem;
    }

    /* Team carousel — phone optimisations */
    .home-team-carousel {
        padding: 0 2.25rem;
    }
    .home-team-slide {
        flex: 0 0 100%;
    }
    .home-team-photo {
        margin-bottom: 0.85rem;
        border-radius: 6px;
    }
    .home-team-name {
        font-size: 1.05rem;
        margin-bottom: 0.2rem;
    }
    .home-team-role {
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }
    .home-team-nav {
        width: 36px;
        height: 36px;
        top: calc(50% - 2.5rem);
        font-size: 0.75rem;
    }
    .home-team-nav--prev { left: 0; }
    .home-team-nav--next { right: 0; }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
    .home-hero__title { font-size: 1.5rem; }
    .home-hero__lead { font-size: 0.85rem; }
    .home-btn { font-size: 0.65rem; --btn-pad-y: 0.8rem; }
    .home-manifesto__line { font-size: 1.05rem; }
    .home-team-name { font-size: 1rem; }
}


/* ============================================================
   HOMEPAGE UPDATES — Procedures carousel, watermark, header
   tweaks (logo upsize + Онлайн магазин CTA). 2026-05-16
   ============================================================ */

/* ---------- 1. Header logo (~2x bigger, balanced on mobile) ---- */
.aesto-logo {
    height: 80px;
    margin-left: -0.5rem;
}
.aesto-logo img {
    height: 100%;
    width: auto;
    display: block;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}
.aesto-logo:hover img { opacity: 1; }

/* Lift the dark top-bar to keep room around the larger mark */
.header-top-inner {
    min-height: 116px;
    padding: 1rem 0;
    gap: 1.25rem;
}

@media (max-width: 1200px) {
    .aesto-logo { height: 70px; }
    .header-top-inner { min-height: 104px; }
}
@media (max-width: 1024px) {
    .aesto-logo { height: 64px; }
    .header-top-inner { min-height: 96px; }
}
@media (max-width: 768px) {
    .aesto-logo { height: 60px; margin-left: 0; }
    .header-top-inner { min-height: 84px; gap: 0.75rem; padding: 0.65rem 0; }
}
@media (max-width: 480px) {
    .aesto-logo { height: 50px; }
    .header-top-inner { min-height: 72px; }
}

/* ---------- 2. ОНЛАЙН МАГАЗИН CTA (header pill, outlined gold) - */
.header-shop-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0.35rem 0 0.25rem;
    padding: 0.62rem 1.2rem;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.header-shop-cta:hover,
.header-shop-cta.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.header-shop-cta i { font-size: 0.82rem; }

@media (max-width: 1200px) {
    .header-shop-cta { padding: 0.55rem 0.95rem; font-size: 0.66rem; letter-spacing: 1.4px; }
}
@media (max-width: 1024px) {
    .header-shop-cta span { display: none; }
    .header-shop-cta {
        width: 40px; height: 40px; padding: 0;
        justify-content: center; gap: 0;
        border-radius: 50%;
    }
    .header-shop-cta i { font-size: 0.95rem; }
}
@media (max-width: 768px) {
    .header-shop-cta { display: none; }
}

/* Mobile-menu Онлайн магазин entry (mirrors .mobile-menu-portal) */
.mobile-menu-shop {
    display: none;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    background: var(--primary);
    color: #fff !important;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0.5rem 0 0.75rem;
}
.mobile-menu-shop:hover { background: var(--primary-dark); }
.mobile-menu-shop i { font-size: 1rem; }

@media (max-width: 768px) {
    .mobile-menu-shop { display: inline-flex; }
}

/* ---------- 3. WATERMARK (new branded decorative) ------------- */
/* Single source of truth: the AESTO method watermark image.
   Old decor classes (lines-h, lines-v, gold-ring, halftone) are
   redirected to it so every existing markup automatically picks up
   the new asset without per-page edits. */
.aesto-decor--watermark,
.aesto-decor--lines-h,
.aesto-decor--lines-v,
.aesto-decor--gold-ring,
.aesto-decor--halftone {
    background-image: url('/images/decorative/watermark-new.webp');
    aspect-ratio: 1276 / 337;
    opacity: 0.09;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.aesto-decor--watermark      { width: clamp(420px, 52vw, 820px); }
.aesto-decor--lines-h        { width: clamp(420px, 52vw, 780px); }
.aesto-decor--lines-v        { width: clamp(360px, 44vw, 640px); }

/* Restore proper images for circle and dot decorations */
.aesto-decor--gold-ring {
    background-image: url('/images/decorative/gold-ring.webp');
    aspect-ratio: 1 / 1;
    width: clamp(280px, 38vw, 540px);
    opacity: 0.55;
}
.aesto-decor--halftone {
    background-image: url('/images/decorative/halftone-dots.webp');
    aspect-ratio: 1200 / 1873;
    width: clamp(220px, 26vw, 380px);
    opacity: 0.6;
}

/* Background variant — large, very subtle, anchored to section */
.aesto-decor--watermark-bg {
    width: min(82vw, 1080px);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.06;
}

/* Re-shift corner anchors so the wider asset doesn't dominate */
.aesto-decor--lines-h.aesto-decor--tr,
.aesto-decor--watermark.aesto-decor--tr { top: -40px; right: -180px; }
.aesto-decor--lines-h.aesto-decor--bl,
.aesto-decor--watermark.aesto-decor--bl { bottom: -40px; left: -180px; }
.aesto-decor--lines-v.aesto-decor--ml,
.aesto-decor--watermark.aesto-decor--ml { top: 50%; left: -220px; transform: translateY(-50%); }
.aesto-decor--lines-v.aesto-decor--mr,
.aesto-decor--watermark.aesto-decor--mr { top: 50%; right: -220px; transform: translateY(-50%); }

@media (max-width: 768px) {
    .aesto-decor--watermark,
    .aesto-decor--watermark-bg { opacity: 0.05; }
}

/* ---------- 4. PROCEDURES CAROUSEL ---------------------------- */
.home-procedures {
    position: relative;
    background: var(--cream);
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    overflow: hidden;
}

.home-procedures > .container {
    position: relative;
    z-index: 1;
}

.home-procedures__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2.25rem, 4vw, 3.5rem);
}

.home-procedures__eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.home-procedures__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--black);
    margin: 0;
}
.home-procedures__title em {
    font-style: italic;
    color: var(--primary);
}

.home-procedures__head .aesto-hairline {
    margin: 1.25rem auto;
}

.home-procedures__lead {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

/* Viewport wraps the track + arrow buttons */
.home-procedures__viewport {
    position: relative;
    padding: 0 clamp(0px, 3vw, 56px);
}

.home-procedures__track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.75rem 0.25rem 1.5rem;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.home-procedures__track::-webkit-scrollbar { display: none; }
.home-procedures__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.home-procedures__track.is-dragging a { pointer-events: none; }

.home-procedures__card {
    flex: 0 0 clamp(220px, 22vw, 280px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-procedures__card:hover,
.home-procedures__card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.home-procedures__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--cream-dark, #EFE7DD);
}
.home-procedures__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-procedures__card:hover .home-procedures__media img {
    transform: scale(1.06);
}

/* Subtle warm gradient overlay reading on any image */
.home-procedures__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(43,33,28,0) 55%, rgba(43,33,28,0.18) 100%);
    pointer-events: none;
}

.home-procedures__name {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-align: center;
    color: var(--black);
    margin: 0;
    padding: 1.15rem 1rem 1.35rem;
}

/* Arrow nav buttons */
.home-procedures__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(43, 33, 28, 0.08);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.home-procedures__nav:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}
.home-procedures__nav:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
.home-procedures__nav--prev { left: -6px; }
.home-procedures__nav--next { right: -6px; }
.home-procedures__nav i { font-size: 0.85rem; }

@media (max-width: 768px) {
    .home-procedures__nav { display: none; }
    .home-procedures__viewport { padding: 0; }
    .home-procedures__card { flex-basis: 68vw; max-width: 280px; }
}

/* "Виж всички" link below carousel */
.home-procedures__cta {
    text-align: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.home-procedures__cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: var(--primary);
    text-decoration: none;
    padding: 0.6rem 0.4rem 0.65rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.home-procedures__cta-link:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary);
}
.home-procedures__cta-link i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}
.home-procedures__cta-link:hover i { transform: translateX(4px); }


/* ============================================================
   FOOTER UPDATES — Bigger logo, 4 legal links, tightened social
   2026-05-16
   ============================================================ */

/* Bigger footer logo (was 64px → 110px) */
.aesto-footer-logo { height: 110px; margin-bottom: 1.75rem; }

@media (max-width: 1024px) {
    .aesto-footer-logo { height: 96px; }
}
@media (max-width: 768px) {
    .aesto-footer-logo { height: 84px; margin-bottom: 1.5rem; }
}
@media (max-width: 480px) {
    .aesto-footer-logo { height: 72px; }
}

/* Legal links row — allow wrapping on small viewports */
.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    justify-content: flex-end;
}
.footer-bottom-links a {
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .footer-bottom-links {
        justify-content: center;
        gap: 0.5rem 1.1rem;
        margin-top: 0.75rem;
    }
    .footer-bottom-links a { font-size: 0.72rem; }
}


/* ============================================================
   LEGAL PAGES + COOKIE BANNER + COOKIE SETTINGS MODAL
   2026-05-16
   ============================================================ */

/* ---------- Legal pages (terms / privacy / cookies / general) -- */
.legal-hero { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 3vw, 3rem); }
.legal-hero .page-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--black);
    margin: 0.5rem 0 0;
}

.legal-page {
    padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem);
    background: #fff;
}

.legal-content {
    max-width: 820px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.78;
    color: var(--text);
}

.legal-content p { margin: 0 0 1rem; }

.legal-content .legal-h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
    font-weight: 500;
    color: var(--black);
    margin: 2.4rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(196, 164, 132, 0.35);
    letter-spacing: 0.2px;
}

.legal-content .legal-h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
    font-weight: 500;
    color: var(--black);
    margin: 1.75rem 0 0.65rem;
}

.legal-content ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1.25rem;
}
.legal-content ul li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
}
.legal-content ul li::before {
    content: '';
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 6px;
    height: 1px;
    background: var(--primary);
}

.legal-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.legal-content a:hover { color: var(--primary-dark); }

/* ---------- CookieConsent v3 — Aesto theme overrides ---------------- */
/* Свързваме библиотечните CSS променливи с дизайн-токените на сайта */
#cc-main {
    --cc-font-family: 'Inter', sans-serif;
    --cc-bg: #ffffff;
    --cc-primary-color: var(--text);
    --cc-secondary-color: var(--text-light);

    --cc-btn-primary-bg: var(--primary);
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: var(--primary);
    --cc-btn-primary-hover-bg: var(--primary-dark);
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: var(--primary-dark);

    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: var(--text);
    --cc-btn-secondary-border-color: rgba(43, 33, 28, 0.2);
    --cc-btn-secondary-hover-bg: rgba(196, 164, 132, 0.08);
    --cc-btn-secondary-hover-color: var(--black);
    --cc-btn-secondary-hover-border-color: var(--text);

    --cc-cookie-category-block-bg: #fff;
    --cc-cookie-category-block-border: rgba(43, 33, 28, 0.12);
    --cc-cookie-category-block-hover-bg: rgba(196, 164, 132, 0.04);
    --cc-cookie-category-block-hover-border: rgba(196, 164, 132, 0.55);
    --cc-cookie-category-expanded-block-bg: rgba(196, 164, 132, 0.06);
    --cc-cookie-category-expanded-block-hover-bg: rgba(196, 164, 132, 0.1);

    --cc-toggle-on-bg: var(--primary);
    --cc-toggle-off-bg: rgba(43, 33, 28, 0.25);
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: #fff;
    --cc-toggle-readonly-bg: rgba(196, 164, 132, 0.35);
    --cc-toggle-readonly-knob-bg: #fff;
    --cc-toggle-readonly-knob-icon-color: var(--primary);

    --cc-separator-border-color: rgba(43, 33, 28, 0.08);
    --cc-overlay-bg: rgba(20, 16, 14, 0.55);

    --cc-border-radius: var(--radius-md);
    --cc-btn-border-radius: 999px;
    --cc-modal-border-radius: var(--radius-md);
    --cc-modal-margin: 1rem;
}

/* Заглавията в банера/модала следват елегантния heading шрифт */
#cc-main .pm__title,
#cc-main .pm__section-title,
#cc-main .cm__title {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--black);
}

#cc-main .cm,
#cc-main .pm {
    box-shadow: 0 24px 60px rgba(43, 33, 28, 0.18);
    border: 1px solid rgba(196, 164, 132, 0.35);
}

/* Бутоните — uppercase + spacing като останалите CTAs на сайта */
#cc-main .cm__btn,
#cc-main .pm__btn {
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.75rem 1.2rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Линкове в текста */
#cc-main a,
.cc__link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#cc-main a:hover,
.cc__link:hover { color: var(--primary-dark); }

/* Floating "Управление на бисквитки" бутон във футъра */
.cookie-policy-trigger { cursor: pointer; }

/* Modal & banner не трябва да са под global sticky CTA */
#cc-main { z-index: 9500 !important; }

/* Mobile-friendly промени — да не закрива sticky "Запази час" CTA */
@media (max-width: 768px) {
    #cc-main .cm {
        left: 0.6rem !important;
        right: 0.6rem !important;
        bottom: 0.6rem !important;
        max-width: none !important;
    }
    #cc-main .cm__btns {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #cc-main .cm__btn { flex: 1 1 auto; padding: 0.7rem 0.85rem; font-size: 0.68rem; letter-spacing: 1.2px; }
    #cc-main .pm { margin: 0.5rem; max-height: calc(100vh - 1rem); }
}

@media (max-width: 540px) {
    #cc-main .pm__btns { flex-direction: column-reverse; }
    #cc-main .pm__btn { width: 100%; }
}


/* ============================================================
   BOTOX page tweaks — Method watermark + control product inset
   2026-05-16
   ============================================================ */

/* AESTO Method banner watermark overlay */
.bt-method { position: relative; overflow: hidden; }
.bt-method-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(78vw, 980px);
    aspect-ratio: 1276 / 337;
    background-image: url('/images/decorative/watermark-new.webp');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.12;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}
.bt-method .container { position: relative; z-index: 2; }

@media (max-width: 768px) {
    .bt-method-watermark { width: 92vw; opacity: 0.10; }
}

/* Control section — main image + Vistabel product inset (bottom-right) */
.bt-control-image { position: relative; }
.bt-control-image > img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}
.bt-control-product {
    position: absolute;
    bottom: -1.25rem;
    right: -1.25rem;
    width: clamp(120px, 22%, 180px);
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 0.6rem;
    box-shadow: 0 18px 40px rgba(43, 33, 28, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bt-control-product img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .bt-control-product {
        bottom: -1rem;
        right: -0.5rem;
        width: 110px;
    }
}
@media (max-width: 480px) {
    .bt-control-product {
        position: static;
        width: 130px;
        margin: 1rem auto 0;
        bottom: auto; right: auto;
    }
}


/* ============================================================
   BIOSTIMULATORS — 3 product systems (AOORA/FLAVYA/DKK)
   2026-05-16
   ============================================================ */

.bio-systems {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    background: var(--cream);
}
.bio-systems > .container { position: relative; z-index: 1; }

.bio-systems__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.75rem);
}
.bio-systems__eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 1rem;
}
.bio-systems__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--black);
    margin: 0;
}
.bio-systems__head .aesto-hairline { margin: 1.25rem auto; }
.bio-systems__lead {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

.bio-systems__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
    align-items: stretch;
}

.bio-system-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.bio-system-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.bio-system-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cream-dark, #EFE7DD);
}
.bio-system-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.bio-system-card:hover .bio-system-card__media img { transform: scale(1.05); }

.bio-system-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.75rem 1.5rem 2rem;
    flex: 1;
}

.bio-system-card__tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: var(--primary);
}

.bio-system-card__title {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.6vw, 1.45rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--black);
    margin: 0;
}

.bio-system-card__desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}

.bio-system-card__sublead {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--black);
    margin: 0.25rem 0 0;
}

.bio-system-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.bio-system-card__list li {
    position: relative;
    padding-left: 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
}
.bio-system-card__list li::before {
    content: '';
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 8px;
    height: 1px;
    background: var(--primary);
}
.bio-system-card__list li strong {
    color: var(--black);
    font-weight: 500;
}

.bio-system-card__outcome {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(196, 164, 132, 0.25);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--primary-dark);
    margin-bottom: 0;
}

.bio-systems__cta {
    text-align: center;
    margin-top: clamp(2rem, 3.5vw, 3rem);
}
.bio-systems__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 2rem;
    background: var(--primary);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.bio-systems__cta-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}
.bio-systems__cta-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}
.bio-systems__cta-btn:hover i { transform: translateX(4px); }

/* Tablet */
@media (max-width: 1024px) {
    .bio-systems__grid { grid-template-columns: 1fr 1fr; }
    .bio-system-card:last-child { grid-column: 1 / -1; max-width: 540px; margin: 0 auto; }
}

/* Mobile — stack */
@media (max-width: 768px) {
    .bio-systems__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .bio-system-card:last-child { grid-column: auto; max-width: none; margin: 0; }
    .bio-system-card__media { aspect-ratio: 16 / 10; }
    .bio-system-card__body { padding: 1.5rem 1.25rem 1.75rem; }
}


/* ============================================================
   EYE-BRIGHTENING — fix square-image stretch + Related Procedures
   2026-05-16
   ============================================================ */

/* Lock the wws image to a fixed aspect so the new wider photo
   doesn't stretch or repeat in its column */
.eb-wws-image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--cream-dark, #EFE7DD);
}
.eb-wws-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (max-width: 768px) {
    .eb-wws-image { aspect-ratio: 4 / 3; }
}

/* Related procedures grid */
.eb-related {
    padding: clamp(4rem, 7vw, 6rem) 0;
    background: var(--cream);
}
.eb-related__head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.eb-related__eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 0.85rem;
}
.eb-related__title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    font-weight: 400;
    color: var(--black);
    margin: 0;
}
.eb-related__head .aesto-hairline { margin: 1rem auto 0; }

.eb-related__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
}

.eb-related__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.eb-related__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.eb-related__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--cream-dark, #EFE7DD);
}
.eb-related__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.eb-related__card:hover .eb-related__media img { transform: scale(1.05); }

.eb-related__name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    text-align: center;
    color: var(--black);
    margin: 0;
    padding: 1.1rem 1rem 1.35rem;
}

/* Tablet — 2-col */
@media (max-width: 1024px) {
    .eb-related__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — horizontal scroll */
@media (max-width: 640px) {
    .eb-related__grid {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0 1.25rem;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .eb-related__grid::-webkit-scrollbar { display: none; }
    .eb-related__card {
        flex: 0 0 70vw;
        max-width: 280px;
        scroll-snap-align: start;
    }
}


/* ============================================================
   POLYNUCLEOTIDES — Product showcase card
   2026-05-16
   ============================================================ */

.pn-product-showcase {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    background: var(--cream);
}

.pn-product-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: stretch;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pn-product-card:hover { box-shadow: var(--shadow-lg); }

.pn-product-card__media {
    position: relative;
    aspect-ratio: 1200 / 817;
    overflow: hidden;
    background: var(--cream-dark, #EFE7DD);
}
.pn-product-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.pn-product-card:hover .pn-product-card__media img { transform: scale(1.04); }

.pn-product-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

.pn-product-card__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
}

.pn-product-card__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
}

.pn-product-card__desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

.pn-product-card__list {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.pn-product-card__list li {
    position: relative;
    padding-left: 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
}
.pn-product-card__list li::before {
    content: '';
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 8px;
    height: 1px;
    background: var(--primary);
}

@media (max-width: 768px) {
    .pn-product-card { grid-template-columns: 1fr; }
    .pn-product-card__media { aspect-ratio: 16 / 10; }
}


/* ============================================================
   BLOG PAGE — Full AESTO redesign (typography, cards, sidebar)
   2026-05-16
   ============================================================ */

/* Hero */
.blog-hero { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 3vw, 3rem); background: var(--cream); }
.blog-hero__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 1.25rem;
}
.blog-hero__crumbs a { color: var(--text-light, var(--text)); text-decoration: none; }
.blog-hero__crumbs a:hover { color: var(--primary); }
.blog-hero__crumbs .breadcrumb-sep { color: var(--primary); }
.blog-hero__crumbs .breadcrumb-current { color: var(--black); }

.blog-hero__eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 0.85rem;
}
.blog-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--black);
    margin: 0;
}
.blog-hero .aesto-hairline { margin: 1.25rem 0; }
.blog-hero__lead {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 640px;
    margin: 0;
}

/* Blog grid + sidebar layout */
.blog-page { padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 6vw, 6rem); background: #fff; }
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

/* Featured post (large card) */
.blog-posts .blog-post.featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--cream);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: clamp(2rem, 3vw, 2.75rem);
    transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-posts .blog-post.featured:hover { box-shadow: var(--shadow-lg); }
.blog-posts .blog-post.featured .blog-post-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
}
.blog-posts .blog-post.featured .blog-post-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-posts .blog-post.featured:hover .blog-post-image img { transform: scale(1.05); }
.blog-posts .blog-post.featured .blog-post-content {
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
}
.blog-posts .blog-post.featured h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}
.blog-posts .blog-post.featured h2 a { color: var(--black); text-decoration: none; transition: color 0.3s ease; }
.blog-posts .blog-post.featured h2 a:hover { color: var(--primary); }

/* Regular posts grid (2-col) */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 2rem);
    margin-bottom: clamp(2rem, 3vw, 2.5rem);
}

.blog-post {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-post:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.blog-post-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
    background: var(--cream-dark, #EFE7DD);
}
.blog-post-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-post:hover .blog-post-image img { transform: scale(1.06); }

.blog-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.94);
    color: var(--primary-dark);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

.blog-post-content {
    padding: 1.5rem 1.4rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.6px;
    color: var(--text);
}
.blog-meta i { color: var(--primary); margin-right: 0.3rem; }

.blog-post h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}
.blog-post h3 a { color: var(--black); text-decoration: none; transition: color 0.3s ease; }
.blog-post h3 a:hover { color: var(--primary); }

.blog-post-content p {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
.read-more:hover { color: var(--primary-dark); }
.read-more i { font-size: 0.7rem; transition: transform 0.3s ease; }
.read-more:hover i { transform: translateX(4px); }

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: clamp(2rem, 3vw, 2.5rem);
}
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(196, 164, 132, 0.4);
    background: #fff;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.pagination .page-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .page-link.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-widget {
    background: var(--cream);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.4rem 1.6rem;
}
.sidebar-widget h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(196, 164, 132, 0.35);
}

.search-form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(43, 33, 28, 0.08);
}
.search-form input {
    flex: 1; border: none; background: transparent;
    padding: 0.7rem 1rem; font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    color: var(--text); outline: none;
}
.search-form input::placeholder { color: rgba(122, 92, 77, 0.55); }
.search-form button {
    background: transparent; border: none; padding: 0.7rem 1rem;
    color: var(--primary); cursor: pointer; transition: color 0.3s ease;
}
.search-form button:hover { color: var(--primary-dark); }

.category-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.category-list li { margin: 0; }
.category-list a {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text);
    text-decoration: none;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(43, 33, 28, 0.06);
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.category-list a:hover { color: var(--primary); padding-left: 0.4rem; }
.category-list a span { font-size: 0.72rem; color: var(--primary); }

.popular-posts { display: flex; flex-direction: column; gap: 1rem; }
.popular-post {
    display: flex; gap: 0.85rem;
    text-decoration: none; color: var(--text);
    transition: color 0.3s ease;
}
.popular-post img {
    width: 70px; height: 70px;
    object-fit: cover; border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.popular-post div { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.popular-post h5 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
    transition: color 0.3s ease;
}
.popular-post:hover h5 { color: var(--primary); }
.popular-post span {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.4px;
    color: var(--text);
}

.newsletter-widget { background: var(--black); color: #F7F3EF; }
.newsletter-widget h4 { color: #F7F3EF; border-bottom-color: rgba(196, 164, 132, 0.35); }
.newsletter-widget p {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem; line-height: 1.6;
    color: rgba(247, 243, 239, 0.78);
    margin: 0 0 1rem;
}
.newsletter-sidebar-form { display: flex; flex-direction: column; gap: 0.6rem; }
.newsletter-sidebar-form input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.newsletter-sidebar-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-sidebar-form input:focus { background: rgba(255,255,255,0.12); border-color: var(--primary); }
.newsletter-sidebar-form button {
    background: var(--primary); color: #fff;
    border: none;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.newsletter-sidebar-form button:hover { background: var(--primary-dark); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-cloud a {
    display: inline-block;
    padding: 0.38rem 0.85rem;
    background: #fff;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    border: 1px solid rgba(196, 164, 132, 0.35);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.tag-cloud a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Responsive */
@media (max-width: 1024px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { grid-row: 2; margin-top: 1rem; }
}
@media (max-width: 768px) {
    .blog-posts .blog-post.featured { grid-template-columns: 1fr; }
    .blog-posts .blog-post.featured .blog-post-image { aspect-ratio: 16 / 10; }
    .blog-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   BLOG EDITORIAL — Magazine layout, mirrors homepage sections
   2026-05-16
   ============================================================ */

/* HERO — large editorial opener */
.blog-edi-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 4vw, 4rem);
}
.blog-edi-hero > .container { position: relative; z-index: 1; }
.blog-edi-crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 1.5rem;
}
.blog-edi-crumbs a { color: var(--text); text-decoration: none; transition: color 0.3s ease; }
.blog-edi-crumbs a:hover { color: var(--primary); }
.blog-edi-crumbs__sep { color: var(--primary); }
.blog-edi-crumbs__current { color: var(--black); }

.blog-edi-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--black);
    margin: 1rem 0 0;
    max-width: 18ch;
}
.blog-edi-hero__title em {
    font-style: italic;
    color: var(--primary);
}
.blog-edi-hero .aesto-hairline { margin: 1.5rem 0; }
.blog-edi-hero__lead {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 60ch;
    margin: 0;
}

/* FEATURED — split layout, arch image, italic h2 */
.blog-edi-featured {
    padding: clamp(3rem, 5vw, 5rem) 0;
    background: #fff;
}
.blog-edi-featured__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.blog-edi-featured__media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.blog-edi-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-edi-featured__media:hover img { transform: scale(1.04); }

.blog-edi-featured__body { display: flex; flex-direction: column; gap: 1rem; }
.blog-edi-featured__title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.8vw, 2.85rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.blog-edi-featured__title em { font-style: italic; color: var(--primary); }
.blog-edi-featured__body .aesto-hairline { margin: 0.75rem 0 0.5rem; }
.blog-edi-featured__body p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    margin: 0;
}
.blog-edi-featured__meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.4px;
    color: var(--text) !important;
    margin-top: 0.5rem !important;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.blog-edi-dot { color: var(--primary); }

/* STORIES — alternating editorial rows */
.blog-edi-stories {
    padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 6vw, 6rem);
    background: var(--cream);
}
.blog-edi-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(2.5rem, 4vw, 3.5rem) 0;
    border-bottom: 1px solid rgba(196, 164, 132, 0.25);
}
.blog-edi-row:last-child { border-bottom: none; }
.blog-edi-row--reverse .blog-edi-row__media { order: 2; }
.blog-edi-row--reverse .blog-edi-row__body { order: 1; }

.blog-edi-row__media {
    display: block;
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
}
.blog-edi-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-edi-row__media:hover img { transform: scale(1.05); }

.blog-edi-row__body { display: flex; flex-direction: column; gap: 0.95rem; }
.blog-edi-row__title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 400;
    line-height: 1.18;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.blog-edi-row__title em { font-style: italic; color: var(--primary); }
.blog-edi-row__body p {
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--text);
    margin: 0;
}
.blog-edi-row__meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text) !important;
    margin: 0.25rem 0 0 !important;
}

/* Editorial link with arrow (no button, just underline-on-hover) */
.blog-edi-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid var(--primary);
    align-self: flex-start;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.blog-edi-link:hover { color: var(--primary-dark); border-color: var(--primary-dark); }
.blog-edi-link i { font-size: 0.75rem; transition: transform 0.3s ease; }
.blog-edi-link:hover i { transform: translateX(4px); }
.blog-edi-link--small { font-size: 0.72rem; letter-spacing: 2px; gap: 0.55rem; padding: 0.4rem 0 0.3rem; }
.blog-edi-link--small i { font-size: 0.7rem; }

/* Aesto-eyebrow consistency (already defined globally for homepage; safe fallback) */
.aesto-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
}

/* Responsive */
@media (max-width: 900px) {
    .blog-edi-featured__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .blog-edi-featured__media { aspect-ratio: 16 / 11; }

    .blog-edi-row,
    .blog-edi-row--reverse {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .blog-edi-row--reverse .blog-edi-row__media,
    .blog-edi-row--reverse .blog-edi-row__body { order: initial; }
    .blog-edi-row__media { aspect-ratio: 16 / 11; }
}

@media (max-width: 480px) {
    .blog-edi-hero__title { font-size: clamp(2rem, 9vw, 2.5rem); }
}


/* ============================================================
   BLOG hero offset — push below fixed header (logo upsize)
   2026-05-16
   ============================================================ */
.blog-edi-hero {
    padding-top: clamp(11rem, 16vw, 14rem);
}
@media (max-width: 1024px) {
    .blog-edi-hero { padding-top: clamp(10rem, 14vw, 12rem); }
}
@media (max-width: 768px) {
    .blog-edi-hero { padding-top: 9rem; }
}
@media (max-width: 480px) {
    .blog-edi-hero { padding-top: 7.5rem; }
}
.blog-edi-crumbs { margin-top: 0; }


/* ============================================================
   BLOG POST (individual) — Editorial long-form layout
   2026-05-16
   ============================================================ */

/* HERO — same offset as blog list */
.post-edi-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    padding: clamp(11rem, 16vw, 14rem) 0 clamp(2.5rem, 4vw, 4rem);
}
.post-edi-hero > .container { position: relative; z-index: 1; max-width: 920px; }
@media (max-width: 1024px) { .post-edi-hero { padding-top: clamp(10rem, 14vw, 12rem); } }
@media (max-width: 768px)  { .post-edi-hero { padding-top: 9rem; } }
@media (max-width: 480px)  { .post-edi-hero { padding-top: 7.5rem; } }

.post-edi-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--black);
    margin: 1rem 0 0;
    max-width: 22ch;
}
.post-edi-hero__title em { font-style: italic; color: var(--primary); }
.post-edi-hero .aesto-hairline { margin: 1.5rem 0 1.25rem; }

.post-edi-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: var(--text);
}
.post-edi-meta__author { color: var(--black); font-weight: 500; }
.post-edi-dot { color: var(--primary); }

/* COVER — magazine spread */
.post-edi-cover { padding: 0 0 clamp(2rem, 4vw, 3.5rem); background: #fff; }
.post-edi-cover .container { max-width: 1100px; }
.post-edi-cover__media {
    display: block;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.post-edi-cover__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* BODY — long-form */
.post-edi-body { background: #fff; padding: 0 0 clamp(3rem, 5vw, 5rem); }
.post-edi-body > .container { max-width: 820px; }

.post-edi-content {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text);
}
.post-edi-content p { margin: 0 0 1.25rem; }

.post-edi-lead {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    color: var(--black);
    margin: 0 0 2.25rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--primary);
}

.post-edi-h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--black);
    margin: 2.75rem 0 1rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}
.post-edi-h2 em { font-style: italic; color: var(--primary); }
.post-edi-num {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--primary);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.post-edi-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.post-edi-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
}
.post-edi-list li::before {
    content: '';
    position: absolute;
    top: 0.85em;
    left: 0;
    width: 10px;
    height: 1px;
    background: var(--primary);
}
.post-edi-list li strong { color: var(--black); font-weight: 500; }

.post-edi-quote {
    border-left: none;
    margin: 2.5rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(196, 164, 132, 0.35);
    border-bottom: 1px solid rgba(196, 164, 132, 0.35);
}
.post-edi-quote p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.45;
    color: var(--black);
    margin: 0 0 0.85rem;
}
.post-edi-quote cite {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
}

.post-edi-figure {
    margin: 2.25rem 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    display: block;
}
.post-edi-figure img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.post-edi-figure figcaption {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    color: var(--text);
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}

.post-edi-cta {
    background: var(--cream);
    padding: 2.25rem clamp(1.5rem, 3vw, 2.5rem);
    margin: 2.5rem 0;
    border-top: 1px solid rgba(196, 164, 132, 0.35);
    border-bottom: 1px solid rgba(196, 164, 132, 0.35);
    text-align: center;
}
.post-edi-cta .aesto-eyebrow { margin-bottom: 0.75rem; }
.post-edi-cta__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--black);
    margin: 0 0 0.75rem;
}
.post-edi-cta__title em { font-style: italic; color: var(--primary); }
.post-edi-cta p {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: var(--text);
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
}

/* AUTHOR byline */
.post-edi-author {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: clamp(1.25rem, 2vw, 2rem);
    align-items: center;
    margin-top: clamp(3rem, 5vw, 4rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    border-top: 1px solid rgba(196, 164, 132, 0.35);
    border-bottom: 1px solid rgba(196, 164, 132, 0.35);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.post-edi-author__photo {
    width: 140px; height: 140px;
    overflow: hidden;
    flex-shrink: 0;
}
.post-edi-author__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-edi-author__body { display: flex; flex-direction: column; gap: 0.5rem; }
.post-edi-author__body h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--black);
    margin: 0;
}
.post-edi-author__body p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}
.post-edi-author__social { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.post-edi-author__social a {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.post-edi-author__social a:hover { background: var(--primary); color: #fff; }

/* SHARE */
.post-edi-share {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 820px;
    margin: 2rem auto 0;
}
.post-edi-share__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: var(--primary);
}
.post-edi-share__rule { flex: 1; height: 1px; background: rgba(196, 164, 132, 0.3); }
.post-edi-share__buttons { display: flex; gap: 0.5rem; }
.post-edi-share__buttons a {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(196, 164, 132, 0.4);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.post-edi-share__buttons a:hover {
    background: var(--primary); color: #fff; border-color: var(--primary);
}

/* RELATED */
.post-edi-related {
    background: var(--cream);
    padding: clamp(4rem, 6vw, 5.5rem) 0;
}
.post-edi-related__head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.post-edi-related__title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    font-weight: 400;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.post-edi-related__title em { font-style: italic; color: var(--primary); }
.post-edi-related__head .aesto-hairline { margin: 1rem auto 0; }

.post-edi-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
}

.post-edi-related__card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--text);
}
.post-edi-related__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    display: block;
    margin-bottom: 0.85rem;
}
.post-edi-related__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-edi-related__card:hover .post-edi-related__media img { transform: scale(1.05); }
.post-edi-related__card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--black);
    margin: 0;
    transition: color 0.3s ease;
}
.post-edi-related__card h3 em { font-style: italic; color: var(--primary); }
.post-edi-related__card:hover h3 { color: var(--primary); }

/* Responsive */
@media (max-width: 768px) {
    .post-edi-hero__title { max-width: none; }
    .post-edi-cover__media { aspect-ratio: 4 / 3; }
    .post-edi-author { grid-template-columns: 1fr; text-align: center; }
    .post-edi-author__photo { margin: 0 auto; width: 110px; height: 110px; }
    .post-edi-author__social { justify-content: center; }
    .post-edi-related__grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}


/* ============================================================
   BLOG POST — widen reading column (was 820 → 1040; cover full)
   2026-05-16
   ============================================================ */
.post-edi-hero > .container { max-width: 1140px; }
.post-edi-cover .container { max-width: 1280px; }
.post-edi-body > .container { max-width: 1040px; }
.post-edi-author { max-width: 1040px; }
.post-edi-share { max-width: 1040px; }
.post-edi-content { font-size: 1.08rem; line-height: 1.85; }
.post-edi-lead { font-size: clamp(1.3rem, 1.85vw, 1.55rem); }

@media (max-width: 1100px) {
    .post-edi-body > .container,
    .post-edi-author,
    .post-edi-share { max-width: 100%; }
}


/* ============================================================
   BLOG POST — Refined cover hero (neutralise arch quirk)
   2026-05-16
   ============================================================ */
.post-edi-cover {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 45%, #fff 45%, #fff 100%);
    padding: 0 0 clamp(2.5rem, 4vw, 4rem);
}
.post-edi-cover .container { max-width: 1280px; position: relative; }

/* Override the playful arch — editorial-clean rectangle with soft radii */
.post-edi-cover__media.aesto-shape--arch,
.post-edi-cover__media {
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: 0 28px 60px -28px rgba(43, 33, 28, 0.35);
    margin: 0;
}

.post-edi-cover__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Subtle warm gradient at bottom for depth, no opacity hit on subject */
.post-edi-cover__media::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(43,33,28,0) 60%, rgba(43,33,28,0.18) 100%);
}

/* Thin gold rule above and centered eyebrow caption beneath */
.post-edi-cover__media::before {
    content: '';
    position: absolute;
    top: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 1px;
    background: var(--primary);
    opacity: 0.6;
}

@media (max-width: 900px) {
    .post-edi-cover__media,
    .post-edi-cover__media.aesto-shape--arch { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
    .post-edi-cover__media,
    .post-edi-cover__media.aesto-shape--arch { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
}


/* ============================================================
   BLOG — Show 1:1 square images in full (no crop)
   Container aspect = 1/1, object-fit cover works because images
   are also 1254×1254. No letterbox, no stretch, no detail loss.
   2026-05-16
   ============================================================ */

/* List view */
.blog-edi-featured__media,
.blog-edi-featured__media.aesto-shape--arch {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: var(--cream-dark, #EFE7DD);
}
.blog-edi-row__media,
.blog-edi-row__media.aesto-shape--soft,
.blog-edi-row__media.aesto-shape--arch,
.blog-edi-row__media.aesto-shape--arch-reverse {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: var(--cream-dark, #EFE7DD);
}

/* Slightly rebalance featured grid since image is now square */
.blog-edi-featured__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

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

/* Individual post — cover spread (banner) */
.post-edi-cover__media,
.post-edi-cover__media.aesto-shape--arch {
    aspect-ratio: 1 / 1;
    max-width: 720px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    background: var(--cream-dark, #EFE7DD);
}
@media (max-width: 900px) {
    .post-edi-cover__media,
    .post-edi-cover__media.aesto-shape--arch { aspect-ratio: 1 / 1; max-width: 100%; }
}
@media (max-width: 600px) {
    .post-edi-cover__media,
    .post-edi-cover__media.aesto-shape--arch { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
}

/* Inline figures within article body */
.post-edi-figure,
.post-edi-figure.aesto-shape--soft {
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-md);
}

/* Related grid — square thumbnails */
.post-edi-related__media,
.post-edi-related__media.aesto-shape--soft {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: var(--cream-dark, #EFE7DD);
}

/* Author photo stays soft-circle but square aspect already */
.post-edi-author__photo,
.post-edi-author__photo.aesto-shape--soft {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}


/* ============================================================
   SHOP — Editorial AESTO redesign (mirrors blog/homepage)
   2026-05-16
   ============================================================ */

/* HERO with header offset */
.shop-edi-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    padding: clamp(11rem, 16vw, 14rem) 0 clamp(2.5rem, 4vw, 4rem);
}
.shop-edi-hero > .container { position: relative; z-index: 1; max-width: 1140px; }
@media (max-width: 1024px) { .shop-edi-hero { padding-top: clamp(10rem, 14vw, 12rem); } }
@media (max-width: 768px)  { .shop-edi-hero { padding-top: 9rem; } }
@media (max-width: 480px)  { .shop-edi-hero { padding-top: 7.5rem; } }

.shop-edi-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--black);
    margin: 1rem 0 0;
    max-width: 22ch;
}
.shop-edi-hero__title em { font-style: italic; color: var(--primary); }
.shop-edi-hero .aesto-hairline { margin: 1.5rem 0; }
.shop-edi-hero__lead {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 60ch;
    margin: 0;
}

/* CATEGORIES — 2 large editorial spreads */
.shop-edi-categories { padding: clamp(3rem, 5vw, 5rem) 0; background: #fff; }
.shop-edi-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.shop-edi-cat {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    text-decoration: none;
    background: var(--cream);
    box-shadow: var(--shadow-sm);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-edi-cat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.shop-edi-cat__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.shop-edi-cat__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-edi-cat:hover .shop-edi-cat__media img { transform: scale(1.05); }
.shop-edi-cat__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(43,33,28,0) 55%, rgba(43,33,28,0.18) 100%);
    pointer-events: none;
}

.shop-edi-cat__body {
    padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem) 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.shop-edi-cat__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--black);
    margin: 0.25rem 0 0;
}
.shop-edi-cat__title em { font-style: italic; color: var(--primary); }
.shop-edi-cat__body p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}

/* FEATURED PRODUCTS */
.shop-edi-featured {
    padding: clamp(4rem, 6vw, 6rem) 0;
    background: var(--cream);
}
.shop-edi-featured__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
}
.shop-edi-featured__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 400;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.shop-edi-featured__title em { font-style: italic; color: var(--primary); }
.shop-edi-featured__head .aesto-hairline { margin: 1rem auto 0; }

.shop-edi-prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

.shop-edi-prod {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-edi-prod:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.shop-edi-prod__badge {
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 2;
    background: var(--primary);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
}
.shop-edi-prod__badge--sale { background: var(--black); }
.shop-edi-prod__badge--service { background: var(--primary-dark); }

.shop-edi-prod__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cream-dark, #EFE7DD);
}
.shop-edi-prod__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-edi-prod:hover .shop-edi-prod__media img { transform: scale(1.06); }

.shop-edi-prod--service .shop-edi-prod__media {
    aspect-ratio: 4 / 5;
    background: #E9E0D4;
}
.shop-edi-prod--service .shop-edi-prod__media img {
    object-fit: contain;
}
.shop-edi-prod--service:hover .shop-edi-prod__media img {
    transform: none;
}

.shop-edi-prod__body {
    padding: 1.25rem 1.15rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}
.shop-edi-prod__tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
}
.shop-edi-prod__title {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
    min-height: 2.6em;
}
.shop-edi-prod__title em { font-style: italic; color: var(--primary); }

.shop-edi-prod__foot {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid rgba(196, 164, 132, 0.25);
}
.shop-edi-prod__price {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--black);
}
.shop-edi-prod__price s {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text);
    margin-right: 0.4rem;
}

.shop-edi-prod__btn {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.shop-edi-prod__btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.shop-edi-prod__btn i { font-size: 0.7rem; }

.shop-edi-cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* BENEFITS — pillars */
.shop-edi-benefits {
    padding: clamp(4rem, 6vw, 6rem) 0;
    background: #fff;
}
.shop-edi-benefits__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
}
.shop-edi-benefits__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 400;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.shop-edi-benefits__title em { font-style: italic; color: var(--primary); }
.shop-edi-benefits__head .aesto-hairline { margin: 1rem auto 0; }

.shop-edi-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1360px;
    margin: 0 auto;
}
.shop-edi-benefit {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(196, 164, 132, 0.35);
}
.shop-edi-benefit__num {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--primary);
    letter-spacing: 1px;
}
.shop-edi-benefit h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black);
    margin: 0;
}
.shop-edi-benefit p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .shop-edi-prod-grid { grid-template-columns: repeat(2, 1fr); }
    .shop-edi-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .shop-edi-cat-grid { grid-template-columns: 1fr; }
    .shop-edi-cat__media { aspect-ratio: 16 / 11; }
}
@media (max-width: 540px) {
    .shop-edi-prod-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
    .shop-edi-benefits__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   SHOP LISTING (services + products) — AESTO editorial reskin
   Keeps existing HTML: .shop-layout, .shop-sidebar, .filter-list,
   .product-card, .pagination — just restyles them. 2026-05-16
   ============================================================ */

/* Compact hero variant for sub-pages */
.shop-edi-hero--compact { padding-bottom: clamp(2rem, 3vw, 3rem); }

/* Layout shell */
.shop-page {
    background: #fff;
    padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem);
    overflow: hidden;
}
.shop-page > .container { position: relative; z-index: 1; }
.shop-page .aesto-decor { display: none; } /* drop secondary decor, hero already has watermark */

.shop-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

/* SIDEBAR — editorial, no card */
.shop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: sticky;
    top: 200px;
    padding: 0;
    background: transparent;
    border: none;
}

.filter-section { padding: 0; background: transparent; border: none; }
.filter-section h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(196, 164, 132, 0.35);
    letter-spacing: 0.3px;
}

.filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.filter-list li { margin: 0; }
.filter-list a {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text);
    text-decoration: none;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(43, 33, 28, 0.06);
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.filter-list a:hover,
.filter-list a.active {
    color: var(--primary);
    padding-left: 0.4rem;
}
.filter-list a.active { font-weight: 500; }

/* SHOP HEADER (sort + count) */
.shop-content { min-width: 0; }
.shop-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(196, 164, 132, 0.3);
}
.results-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text);
    margin: 0;
    letter-spacing: 0.3px;
}
.results-count strong { color: var(--black); font-weight: 500; }
.sort-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text);
    background: #fff
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23C6A47E' stroke-width='1.5'/></svg>")
        no-repeat right 1rem center;
    border: 1px solid rgba(196, 164, 132, 0.4);
    border-radius: 999px;
    padding: 0.6rem 2.5rem 0.6rem 1.1rem;
    outline: none;
    transition: border-color 0.3s ease;
}
.sort-select:hover { border-color: var(--primary); }
.sort-select:focus { border-color: var(--primary); }

/* PRODUCT GRID — reuse home-procedures aesthetic */
.shop-content .products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

.shop-content .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: none;
    padding: 0;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-content .product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.shop-content .product-badge {
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 3;
    background: var(--primary);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
}
.shop-content .product-badge.sale     { background: var(--black); }
.shop-content .product-badge.service  { background: var(--primary-dark); }
.shop-content .product-badge.hot      { background: #B85940; }
.shop-content .product-badge.new      { background: #4A6B5A; }

.shop-content .product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cream-dark, #EFE7DD);
}
.shop-content .product-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-content .product-card:hover .product-image img { transform: scale(1.06); }

.shop-content .product-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(43, 33, 28, 0.35);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-content .product-card:hover .product-overlay { opacity: 1; }
.shop-content .product-overlay .btn-white,
.shop-content .product-overlay .btn-sm {
    background: #fff;
    color: var(--black);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 0.65rem 1.2rem;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.shop-content .product-overlay .btn-white:hover { background: var(--primary); color: #fff; }

.shop-content .product-info {
    padding: 1.25rem 1.15rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}
.shop-content .product-category {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
}
.shop-content .product-info h4 {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
    min-height: 2.6em;
}

.shop-content .service-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text);
    letter-spacing: 0.3px;
}
.shop-content .service-meta i { color: var(--primary); margin-right: 0.35rem; }

.shop-content .product-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(196, 164, 132, 0.25);
    margin-top: auto;
}
.shop-content .product-price .current-price {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black);
}
.shop-content .product-price .old-price {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    text-decoration: line-through;
    color: var(--text);
}

/* Add to cart / book button */
.shop-content .product-info .btn,
.shop-content .product-info .btn-add-cart,
.shop-content .product-info .btn-primary {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    margin-top: 0.5rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.shop-content .product-info .btn:hover,
.shop-content .product-info .btn-add-cart:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
.shop-content .product-info .btn i { font-size: 0.72rem; }

/* PAGINATION */
.shop-content .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.shop-content .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(196, 164, 132, 0.4);
    background: #fff;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.shop-content .pagination .page-link:hover,
.shop-content .pagination .page-link.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .shop-content .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .filter-section { flex: 1 1 200px; min-width: 0; }
}
@media (max-width: 540px) {
    .shop-content .products-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
    .shop-sidebar { flex-direction: column; }
    .filter-section { flex: 1 1 100%; }
    .shop-header { justify-content: center; text-align: center; }
}


/* ============================================================
   SHOP — Fix sidebar vertical alignment (was sticky-offset)
   2026-05-16
   ============================================================ */
.shop-sidebar {
    position: static;
    top: auto;
    align-self: start;
    margin-top: 0;
    padding-top: 0;
}
/* Ensure first filter-section heading aligns with .shop-header text */
.shop-sidebar .filter-section:first-child h4 { margin-top: 0; }

@media (min-width: 901px) {
    /* Optional gentle sticky: matches actual fixed-header height
       so sidebar stays inline with .shop-header when scrolling */
    .shop-sidebar {
        position: sticky;
        top: clamp(130px, 14vw, 180px);
    }
}


/* ============================================================
   SHOP — Final sidebar alignment fix
   - removes overflow:hidden (was killing sticky)
   - forces top-alignment with grid place-self
   - sticky top tuned to header height
   2026-05-16
   ============================================================ */
.shop-page { overflow: visible !important; }
.shop-page .container { overflow: visible !important; }

.shop-page .shop-layout { align-items: start !important; }

.shop-page .shop-sidebar {
    position: sticky !important;
    top: clamp(130px, 14vw, 170px) !important;
    align-self: start !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    height: fit-content !important;
}

.shop-page .shop-sidebar .filter-section:first-child,
.shop-page .shop-sidebar .filter-section:first-child > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tablet (≤900px) — disable sticky, stack horizontally */
@media (max-width: 900px) {
    .shop-page .shop-sidebar {
        position: static !important;
        top: auto !important;
    }
}


/* ============================================================
   SHOP — Active filter pills (chips above grid)
   2026-05-16
   ============================================================ */
.shop-active-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: -0.5rem 0 1.5rem;
    padding: 0.75rem 0 0;
}
.shop-active-pills[hidden] { display: none; }
.shop-active-pills__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--primary);
    margin-right: 0.4rem;
}
.shop-active-pill {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.85rem;
    background: #fff;
    color: var(--text);
    border: 1px solid rgba(196, 164, 132, 0.5);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    line-height: 1.2;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.shop-active-pill:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.shop-active-pill__cat {
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--primary);
    opacity: 0.9;
}
.shop-active-pill:hover .shop-active-pill__cat { color: #fff; opacity: 1; }
.shop-active-pill__val {
    font-weight: 500;
    color: var(--black);
}
.shop-active-pill:hover .shop-active-pill__val { color: #fff; }
.shop-active-pill__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(196, 164, 132, 0.18);
    color: var(--primary);
    font-size: 0.85rem;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.shop-active-pill:hover .shop-active-pill__x {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.shop-active-pills__clear {
    appearance: none;
    cursor: pointer;
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.4rem 0.2rem;
    transition: color 0.3s ease;
}
.shop-active-pills__clear:hover { color: var(--primary); }

@media (max-width: 540px) {
    .shop-active-pills__clear { margin-left: 0; }
}


/* ============================================================
   SHOP — Mobile polish (filters, pills, products, sort)
   2026-05-16
   ============================================================ */

/* ───── Tablet (≤900px) — sidebar becomes collapsible accordion ───── */
@media (max-width: 900px) {
    .shop-page { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }

    .shop-layout {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    /* Filters become a single collapsible block, no horizontal sprawl */
    .shop-sidebar {
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        position: static !important;
        top: auto !important;
        padding: 1rem 1.1rem !important;
        background: var(--cream) !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid rgba(196, 164, 132, 0.25) !important;
    }
    .shop-sidebar::before {
        content: 'Филтри';
        display: block;
        font-family: var(--font-heading);
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--black);
        padding-bottom: 0.6rem;
        margin-bottom: 0.85rem;
        border-bottom: 1px solid rgba(196, 164, 132, 0.35);
        cursor: pointer;
        position: relative;
        padding-right: 1.5rem;
    }
    .shop-sidebar::after {
        content: '+';
        position: absolute;
        right: 1.1rem;
        top: 1rem;
        font-size: 1.4rem;
        color: var(--primary);
        font-weight: 300;
        line-height: 1;
        pointer-events: none;
        transition: transform 0.3s ease;
    }

    /* Collapsed by default on mobile */
    .shop-sidebar .filter-section {
        display: none;
        flex: none !important;
        min-width: 0 !important;
        margin: 0 0 1rem !important;
    }
    .shop-sidebar.is-open .filter-section { display: block; }
    .shop-sidebar.is-open::after { transform: rotate(45deg); }

    .filter-section h4 { font-size: 0.92rem; margin-bottom: 0.6rem; padding-bottom: 0.4rem; }
    .filter-list a { padding: 0.65rem 0; font-size: 0.92rem; } /* bigger tap targets */
}

/* ───── Mobile (≤640px) — header + active pills tighter ───── */
@media (max-width: 640px) {
    .shop-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        text-align: left;
    }
    .results-count { font-size: 0.8rem; }
    .sort-select {
        width: 100%;
        padding: 0.75rem 2.5rem 0.75rem 1.1rem;
        font-size: 0.82rem;
    }

    /* Active filter pills — stack-friendly */
    .shop-active-pills {
        gap: 0.4rem;
        margin: 0.25rem 0 1rem;
    }
    .shop-active-pills__label {
        width: 100%;
        font-size: 0.65rem;
        margin-right: 0;
        margin-bottom: 0.15rem;
    }
    .shop-active-pill {
        font-size: 0.72rem;
        padding: 0.4rem 0.7rem;
        gap: 0.35rem;
    }
    .shop-active-pill__cat { font-size: 0.6rem; letter-spacing: 1.1px; }
    .shop-active-pills__clear {
        width: 100%;
        text-align: center;
        margin: 0.5rem 0 0;
        padding: 0.55rem;
        background: rgba(196, 164, 132, 0.1);
        border-radius: 999px;
        text-decoration: none;
    }
}

/* ───── Small mobile (≤540px) — product grid 1-col fine-tune ───── */
@media (max-width: 540px) {
    .shop-content .products-grid {
        grid-template-columns: 1fr !important;
        max-width: 360px;
        margin: 0 auto;
        gap: 1.25rem;
    }
    .shop-content .product-card { box-shadow: var(--shadow-md); }
    .shop-content .product-info { padding: 1.1rem 1rem 1.35rem; }
    .shop-content .product-info h4 { font-size: 1.05rem; min-height: 0; }

    /* Bigger CTAs — tap target 44px+ */
    .shop-content .product-info .btn,
    .shop-content .product-info .btn-add-cart {
        padding: 0.85rem 1.1rem;
        font-size: 0.72rem;
    }

    /* Pagination — center, larger taps */
    .shop-content .pagination { gap: 0.4rem; }
    .shop-content .pagination .page-link {
        width: 44px; height: 44px;
        font-size: 0.88rem;
    }

    /* Hero offset still right */
    .shop-edi-hero { padding-top: 8rem !important; }
    .shop-edi-hero__title { font-size: clamp(1.85rem, 7vw, 2.4rem); }
}

/* ───── Very small (≤380px) — minimums ───── */
@media (max-width: 380px) {
    .shop-edi-hero__title { font-size: 1.7rem; line-height: 1.15; }
    .shop-content .product-info h4 { font-size: 1rem; }
    .shop-active-pill { font-size: 0.7rem; }
}


/* ============================================================
   SHOP — Mobile filters v2: per-section accordion
   Replaces the wholesale sidebar toggle with per-h4 toggle.
   2026-05-16
   ============================================================ */
@media (max-width: 900px) {
    /* Reset previous wholesale toggle */
    .shop-sidebar::before { content: 'Филтри' !important; }
    .shop-sidebar::after { display: none !important; }
    .shop-sidebar.is-open::after { display: none !important; }

    /* All sections visible by default (no global toggle) */
    .shop-sidebar .filter-section {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(196, 164, 132, 0.25);
    }
    .shop-sidebar .filter-section:last-child { border-bottom: none; }

    /* H4 becomes a tap-toggle row with chevron */
    .shop-sidebar .filter-section h4 {
        cursor: pointer;
        position: relative;
        margin: 0 !important;
        padding: 0.95rem 2.2rem 0.95rem 0 !important;
        font-size: 0.95rem !important;
        font-weight: 500;
        color: var(--black);
        border-bottom: none !important;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .shop-sidebar .filter-section h4::after {
        content: '';
        position: absolute;
        right: 0.25rem;
        top: 50%;
        width: 9px; height: 9px;
        margin-top: -7px;
        border-right: 1.5px solid var(--primary);
        border-bottom: 1.5px solid var(--primary);
        transform: rotate(45deg);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .shop-sidebar .filter-section.is-open h4::after {
        transform: rotate(-135deg);
        margin-top: -3px;
    }

    /* Filter list collapsed by default; expands when section.is-open */
    .shop-sidebar .filter-section .filter-list {
        display: none;
        padding: 0 0 1rem;
        margin: 0;
    }
    .shop-sidebar .filter-section.is-open .filter-list { display: flex; flex-direction: column; }

    /* The wholesale sidebar toggle is now a NO-OP visually */
    .shop-sidebar.is-open .filter-section { display: block !important; }
    .shop-sidebar:not(.is-open) .filter-section { display: block !important; }
}


/* ============================================================
   SHOP — Mobile: force sidebar to FULL viewport width
   Overrides `justify-self: start` from earlier desktop rules
   that wrongly shrank the sidebar to content width on mobile.
   2026-05-16
   ============================================================ */
@media (max-width: 900px) {
    .shop-page .shop-sidebar {
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .shop-page .shop-layout {
        display: block !important;
        grid-template-columns: none !important;
    }
    .shop-page .shop-content { width: 100%; }
}


/* ============================================================
   SHOP — Mobile filters v3: stripped-down toggle (no card)
   Tap "Филтри" to show/hide all sections. No background.
   2026-05-16
   ============================================================ */
@media (max-width: 900px) {
    /* Strip the card styling completely */
    .shop-page .shop-sidebar {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 1rem !important;
    }

    /* "Филтри" toggle row */
    .shop-page .shop-sidebar::before {
        content: 'Филтри' !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 0 !important;
        margin: 0 !important;
        font-family: var(--font-heading);
        font-size: 1rem;
        font-weight: 500;
        color: var(--black);
        border-bottom: 1px solid rgba(196, 164, 132, 0.35);
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Chevron indicator inside the ::before pseudo via ::after */
    .shop-page .shop-sidebar::after {
        content: '' !important;
        display: block !important;
        position: absolute;
        right: 0.25rem;
        top: 1.05rem;
        width: 9px; height: 9px;
        border-right: 1.5px solid var(--primary);
        border-bottom: 1.5px solid var(--primary);
        transform: rotate(45deg);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }
    .shop-page .shop-sidebar.is-open::after {
        transform: rotate(-135deg) !important;
        top: 1.3rem;
    }
    .shop-page .shop-sidebar { position: relative !important; }

    /* All filter sections COLLAPSED by default on mobile */
    .shop-page .shop-sidebar .filter-section {
        display: none !important;
        border-bottom: 1px solid rgba(196, 164, 132, 0.2);
        padding: 0 !important;
        background: transparent !important;
    }
    .shop-page .shop-sidebar.is-open .filter-section {
        display: block !important;
    }

    /* Per-section accordion still works for each h4 INSIDE the open sidebar */
    .shop-page .shop-sidebar .filter-section h4 {
        padding: 0.85rem 2rem 0.85rem 0 !important;
        font-size: 0.92rem !important;
        background: transparent !important;
        border-bottom: none !important;
    }
    .shop-page .shop-sidebar .filter-section .filter-list {
        padding: 0 0 0.85rem !important;
    }

    /* Slightly less vertical space on the filter list items */
    .shop-page .shop-sidebar .filter-list a {
        padding: 0.5rem 0 !important;
        font-size: 0.88rem !important;
        border-bottom: none !important;
    }
}


/* ============================================================
   PRODUCT DETAIL PAGE — /product.php?id=N
   2026-05-16
   ============================================================ */

/* HERO — split layout, header offset */
.prod-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    padding: clamp(11rem, 16vw, 14rem) 0 clamp(3rem, 5vw, 5rem);
}
.prod-hero > .container { position: relative; z-index: 1; max-width: 1240px; }
@media (max-width: 1024px) { .prod-hero { padding-top: clamp(10rem, 14vw, 12rem); } }
@media (max-width: 768px)  { .prod-hero { padding-top: 9rem; } }
@media (max-width: 480px)  { .prod-hero { padding-top: 7.5rem; } }

.prod-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.prod-hero__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 28px 60px -28px rgba(43, 33, 28, 0.25);
}
.prod-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.prod-hero__badge {
    position: absolute;
    top: 1.25rem; left: 1.25rem;
    z-index: 2;
    background: var(--primary);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 999px;
}
.prod-hero__badge--sale { background: var(--black); }
.prod-hero__badge--ново  { background: #4A6B5A; }

/* INFO */
.prod-hero__body { display: flex; flex-direction: column; gap: 1.1rem; }
.prod-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.prod-hero__body .aesto-hairline { margin: 0.25rem 0; }
.prod-hero__desc {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

.prod-hero__price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(196, 164, 132, 0.3);
}
.prod-hero__price s {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
}
.prod-hero__price-current {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 500;
    color: var(--black);
}

/* QTY + Add to cart */
.prod-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.prod-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(196, 164, 132, 0.5);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.prod-qty__btn {
    appearance: none;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 0.95rem;
    height: 48px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.prod-qty__btn:hover { background: var(--primary); color: #fff; }
.prod-qty__val {
    width: 38px;
    text-align: center;
    border: none;
    outline: none;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--black);
    background: transparent;
}

.prod-hero__add {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 220px;
    padding: 0 1.5rem;
    height: 48px;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.prod-hero__add:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.prod-hero__add i { font-size: 0.85rem; }

.prod-hero__benefits {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.prod-hero__benefits li {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.prod-hero__benefits i {
    color: var(--primary);
    width: 1.1rem;
    text-align: center;
}

/* DETAILS — 3-column or stacked blocks */
.prod-details {
    background: #fff;
    padding: clamp(3rem, 5vw, 5rem) 0;
}
.prod-details__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: 1100px;
    margin: 0 auto;
}
.prod-detail-block { display: flex; flex-direction: column; gap: 0.75rem; }
.prod-detail-block__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--black);
    margin: 0;
}
.prod-detail-block .aesto-hairline { margin: 0.25rem 0 0.5rem; }
.prod-detail-block p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 0.75rem;
}

/* RELATED */
.prod-related {
    background: var(--cream);
    padding: clamp(4rem, 6vw, 6rem) 0;
}
.prod-related__head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.prod-related__title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    font-weight: 400;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.prod-related__title em { font-style: italic; color: var(--primary); }
.prod-related__head .aesto-hairline { margin: 1rem auto 0; }
.prod-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 1.75rem);
}
.prod-related__card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--text);
}
.prod-related__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    margin-bottom: 0.85rem;
    background: var(--cream-dark, #EFE7DD);
}
.prod-related__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-related__card:hover .prod-related__media img { transform: scale(1.05); }
.prod-related__name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--black);
    margin: 0;
    transition: color 0.3s ease;
}
.prod-related__card:hover .prod-related__name { color: var(--primary); }
.prod-related__price {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--primary);
    margin-top: 0.15rem;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .prod-hero__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .prod-details__inner { grid-template-columns: 1fr; gap: 2rem; }
    .prod-related__grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}
@media (max-width: 540px) {
    .prod-hero__add { min-width: 0; width: 100%; }
    .prod-qty { width: 100%; justify-content: space-between; }
}


/* ============================================================
   PRODUCT — Details TABS (replaces 3-col stack)
   2026-05-16
   ============================================================ */
.prod-tabs-wrap {
    max-width: 920px;
    margin: 0 auto;
}

.prod-tabs {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
    border-bottom: 1px solid rgba(196, 164, 132, 0.3);
}

.prod-tab {
    appearance: none;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 1.1rem 0;
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.3px;
    position: relative;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
}
.prod-tab:hover { color: var(--black); }
.prod-tab.is-active { color: var(--black); }
.prod-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 6px;
    border-radius: 4px;
}

/* Animated gold underline (rail) */
.prod-tabs__rail {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    background: var(--primary);
    transform-origin: 0 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* Panel content */
.prod-tab-panel {
    display: none;
    animation: prodPanelIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-tab-panel.is-active { display: block; }
.prod-tab-panel p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text);
    margin: 0 0 1.2rem;
    max-width: 75ch;
}
.prod-tab-panel p:last-child { margin-bottom: 0; }

@keyframes prodPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mobile — scrollable tabs row if cramped */
@media (max-width: 540px) {
    .prod-tabs {
        gap: 1.25rem;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .prod-tabs::-webkit-scrollbar { display: none; }
    .prod-tab {
        font-size: 1rem;
        padding: 0.95rem 0;
        flex-shrink: 0;
    }
    .prod-tab-panel p { font-size: 0.95rem; line-height: 1.7; }
}


/* ============================================================
   PRODUCT — Tabs width match other sections (full container)
   2026-05-16
   ============================================================ */
.prod-details .container { max-width: 1240px; }
.prod-tabs-wrap { max-width: none; margin: 0; }

/* Keep reading line-length comfortable inside the panel only */
.prod-tab-panel { max-width: 75ch; }
.prod-tab-panel p { max-width: none; }


/* ============================================================
   PRODUCT — Tab panel text full container width (was 75ch)
   2026-05-16
   ============================================================ */
.prod-tab-panel,
.prod-tab-panel p {
    max-width: none !important;
}


/* ============================================================
   CART — Recommended products: clickable title + image
   2026-05-16
   ============================================================ */
.cart-related .product-card a.product-image { display: block; }
.cart-related .product-card h4 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.cart-related .product-card h4 a:hover { color: var(--primary); }

/* Subtle hover feedback on image link */
.cart-related .product-card a.product-image img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-related .product-card:hover a.product-image img { transform: scale(1.04); }


/* ============================================================
   CART items — clickable image + title styling
   2026-05-16
   ============================================================ */
.cart-item-image-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
.cart-item-image-link .cart-item-image img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-item-image-link:hover .cart-item-image img {
    transform: scale(1.05);
}
.cart-item-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.cart-item-title-link:hover {
    color: var(--primary);
}


/* ============================================================
   CART PAGE — Editorial AESTO redesign
   Keeps JS hooks (#cartItemsList, #cartSummary, etc.) intact.
   2026-05-16
   ============================================================ */

/* HERO */
.cart-edi-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    padding: clamp(11rem, 16vw, 14rem) 0 clamp(2.5rem, 4vw, 4rem);
}
.cart-edi-hero > .container { position: relative; z-index: 1; max-width: 1240px; }
@media (max-width: 1024px) { .cart-edi-hero { padding-top: clamp(10rem, 14vw, 12rem); } }
@media (max-width: 768px)  { .cart-edi-hero { padding-top: 9rem; } }
@media (max-width: 480px)  { .cart-edi-hero { padding-top: 7.5rem; } }

.cart-edi-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--black);
    margin: 1rem 0 0;
}
.cart-edi-hero__title em { font-style: italic; color: var(--primary); }
.cart-edi-hero .aesto-hairline { margin: 1.25rem 0 0; }

/* Page section */
.cart-page {
    background: #fff;
    padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem);
    overflow: visible;
}
.cart-page > .container { position: relative; z-index: 1; max-width: 1240px; }
.cart-page .aesto-decor { display: none; } /* drop secondary decor, hero already has watermark */

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

/* ───── Empty state ───── */
.cart-empty {
    text-align: center;
    padding: clamp(3rem, 6vw, 5rem) 1.5rem;
    background: var(--cream);
    border-radius: var(--radius-md);
    border: 1px solid rgba(196, 164, 132, 0.25);
}
.cart-empty i.fas.fa-shopping-cart {
    font-size: 2.6rem;
    color: var(--primary);
    margin-bottom: 1.25rem;
    opacity: 0.7;
}
.cart-empty h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.65rem;
}
.cart-empty p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    margin: 0 0 1.5rem;
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}
.cart-empty-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.cart-empty-buttons .btn,
.cart-empty-buttons .btn-primary,
.cart-empty-buttons .btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.cart-empty-buttons .btn-primary {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}
.cart-empty-buttons .btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
.cart-empty-buttons .btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.cart-empty-buttons .btn-outline:hover {
    background: var(--primary);
    color: #fff;
}

/* When list has items, hide empty card */
.cart-items-list.has-items + .cart-empty,
.cart-items-list.has-items ~ .cart-empty,
#cartItems:has(.cart-items-list.has-items) .cart-empty {
    display: none;
}
/* Fallback: when list has-items, hide empty above by default (JS toggles via .has-items class) */
.cart-items .cart-items-list.has-items ~ .cart-empty { display: none; }

/* ───── Cart items list ───── */
.cart-items-list { display: flex; flex-direction: column; gap: 1rem; }
.cart-item {
    display: grid;
    grid-template-columns: 90px 1fr auto auto auto;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: center;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(196, 164, 132, 0.25);
    border-radius: var(--radius-md);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.cart-item:hover {
    border-color: rgba(196, 164, 132, 0.5);
    box-shadow: 0 8px 24px -12px rgba(43, 33, 28, 0.15);
}

.cart-item-image {
    aspect-ratio: 1 / 1;
    width: 90px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--cream);
}
.cart-item-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.cart-item-info { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.cart-item-info h4 {
    font-family: var(--font-heading);
    font-size: clamp(0.98rem, 1.4vw, 1.1rem);
    font-weight: 500;
    color: var(--black);
    margin: 0;
    line-height: 1.3;
}
.cart-item-type {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--primary);
}

.cart-item-quantity {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--cream);
    border-radius: 999px;
    padding: 0.25rem;
}
.cart-item-quantity .qty-btn {
    appearance: none;
    cursor: pointer;
    width: 30px; height: 30px;
    border: none;
    background: #fff;
    color: var(--primary);
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.cart-item-quantity .qty-btn:hover { background: var(--primary); color: #fff; }
.cart-item-quantity span {
    min-width: 18px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--black);
}

.cart-item-price {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: 500;
    color: var(--black);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

.cart-item-remove {
    appearance: none;
    cursor: pointer;
    width: 36px; height: 36px;
    border: 1px solid rgba(196, 164, 132, 0.35);
    background: transparent;
    color: var(--text);
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.cart-item-remove:hover {
    background: var(--black);
    color: #fff;
    border-color: var(--black);
}

/* ───── Cart summary (sticky sidebar) ───── */
.cart-summary {
    position: sticky;
    top: clamp(130px, 14vw, 170px);
    align-self: start;
    background: var(--cream);
    border-radius: var(--radius-md);
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2.2vw, 1.85rem);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.cart-summary h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(196, 164, 132, 0.35);
}
.summary-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--text);
    padding: 0.25rem 0;
}
.summary-row span:last-child { color: var(--black); font-weight: 500; }
.summary-row.total {
    padding-top: 0.85rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(196, 164, 132, 0.4);
    font-size: 1.05rem;
}
.summary-row.total span {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--black);
}
.summary-divider { display: none; } /* replaced by border on .total */

/* Promo code */
.promo-code {
    display: flex;
    gap: 0.4rem;
    margin: 0.5rem 0 0.25rem;
}
.promo-code input {
    flex: 1;
    background: #fff;
    border: 1px solid rgba(196, 164, 132, 0.4);
    border-radius: 999px;
    padding: 0.65rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--text);
    outline: none;
    transition: border-color 0.3s ease;
}
.promo-code input:focus { border-color: var(--primary); }
.promo-code input::placeholder { color: rgba(122, 92, 77, 0.55); }
.promo-code .btn,
.promo-code .btn-outline,
.promo-code .btn-sm {
    appearance: none;
    cursor: pointer;
    padding: 0.65rem 1rem;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.promo-code .btn:hover { background: var(--primary); color: #fff; }
.promo-message {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text);
    min-height: 1.2em;
}
.promo-message.success { color: #4A6B5A; }
.promo-message.error   { color: #B85940; }

/* Checkout button */
.btn-checkout {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 1rem 1.5rem;
    margin-top: 0.5rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.btn-checkout:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-checkout:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-checkout i { font-size: 0.85rem; }

/* Payment + benefits inside summary */
.payment-methods {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(196, 164, 132, 0.25);
}
.payment-methods p {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0;
}
.payment-icons {
    display: flex;
    gap: 0.5rem;
    color: var(--primary);
    font-size: 1.4rem;
}

.cart-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.5rem;
}
.cart-benefits .benefit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--text);
}
.cart-benefits .benefit i {
    color: var(--primary);
    width: 1.1rem;
    text-align: center;
    font-size: 0.85rem;
}

/* ───── Related section ───── */
.cart-related {
    margin-top: clamp(3.5rem, 6vw, 5rem);
    grid-column: 1 / -1;
}
.cart-related__head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cart-related__title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    font-weight: 400;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.cart-related__title em { font-style: italic; color: var(--primary); }
.cart-related__head .aesto-hairline { margin: 1rem auto 0; }

.cart-related .products-grid,
.cart-related .products-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* Cards reuse shop-content styling via inheritance */
.cart-related .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: none;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-related .product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.cart-related .product-card .product-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cream-dark, #EFE7DD);
}
.cart-related .product-card .product-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.cart-related .product-card .product-info {
    padding: 1.1rem 1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.cart-related .product-category {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
}
.cart-related .product-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
}
.cart-related .product-card h4 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.cart-related .product-card h4 a:hover { color: var(--primary); }
.cart-related .product-price .current-price {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--black);
}
.cart-related .product-card .btn,
.cart-related .product-card .btn-primary,
.cart-related .product-card .btn-add-cart {
    appearance: none;
    cursor: pointer;
    margin-top: auto;
    padding: 0.7rem 1rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.cart-related .product-card .btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* ───── Responsive ───── */
@media (max-width: 1024px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary {
        position: static;
        order: -1; /* keep summary near top for mobile or below per preference */
    }
    /* Restore order: summary BELOW items on mobile (common e-shop pattern) */
    .cart-summary { order: 0; }
    .cart-related .products-grid,
    .cart-related .products-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .cart-item {
        grid-template-columns: 70px 1fr;
        grid-template-areas:
            "img info"
            "img qty"
            "price remove";
        gap: 0.75rem 1rem;
    }
    .cart-item-image { grid-area: img; width: 70px; }
    .cart-item-info { grid-area: info; }
    .cart-item-quantity { grid-area: qty; justify-self: start; }
    .cart-item-price { grid-area: price; justify-self: start; text-align: left; }
    .cart-item-remove { grid-area: remove; justify-self: end; }
}
@media (max-width: 540px) {
    .cart-related .products-grid,
    .cart-related .products-grid-4 { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}


/* ============================================================
   SHOP HUB — Clickable product cards (link styling)
   2026-05-16
   ============================================================ */
.shop-edi-prod__media {
    display: block;
    text-decoration: none;
}
.shop-edi-prod__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.shop-edi-prod__title a:hover { color: var(--primary); }
.shop-edi-prod__title a em { color: var(--primary); }
.shop-edi-prod__media img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-edi-prod__media:hover img { transform: scale(1.05); }


/* ============================================================
   PRICES — Dual-currency display styling
   Primary: EUR (Cormorant, prominent). Secondary: BGN (Inter, faded)
   2026-05-16
   ============================================================ */
.price-primary {
    font-family: var(--font-heading);
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
}
.price-secondary {
    font-family: 'Inter', sans-serif;
    font-size: 0.78em;
    font-weight: 400;
    color: var(--text);
    opacity: 0.85;
    margin-left: 0.15rem;
    white-space: nowrap;
}

/* Old (strikethrough) price keeps strike on primary EUR */
.prod-hero__price s .price-secondary,
.old-price .price-secondary { font-size: 0.72em; }

/* Cart summary alignment fix when dual-currency wraps */
.summary-row span:last-child { display: inline-flex; align-items: baseline; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
.summary-row .price-primary { font-size: 1em; }

/* Make BGN smaller inside product card price tag */
.product-price .price-secondary,
.shop-edi-prod__price .price-secondary,
.cart-item-price .price-secondary { font-size: 0.75em; }


/* ============================================================
   SHOP filter links — dual currency hint via data-eur
   Show EUR equivalent next to BGN range label without touching
   textContent (filter JS reads textContent for matching).
   2026-05-16
   ============================================================ */
.shop-sidebar .filter-list a[data-eur]::after {
    content: ' · ' attr(data-eur);
    font-size: 0.78em;
    color: var(--primary);
    opacity: 0.85;
    margin-left: 0.2rem;
    font-style: italic;
}
@media (max-width: 900px) {
    .shop-sidebar .filter-list a[data-eur]::after { display: block; margin: 0.1rem 0 0; font-size: 0.75em; }
}


/* ============================================================
   FILTER labels — invert: EUR primary (via ::before), BGN secondary
   2026-05-16 — supersedes prior data-eur ::after rule
   ============================================================ */
.shop-sidebar .filter-list a[data-eur] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--text);
}
.shop-sidebar .filter-list a[data-eur]::before {
    content: attr(data-eur);
    color: var(--black);
    font-weight: 500;
    font-size: 1em;
    font-style: normal;
    order: 0;
}
/* Secondary BGN portion — wraps after EUR via small font + muted color
   Achieved by styling the link's main text font-size + opacity. The
   <a> text after ::before will inherit these styles. */
.shop-sidebar .filter-list a[data-eur] {
    font-size: 0.92em;
}
.shop-sidebar .filter-list a[data-eur]::after {
    content: none !important; /* kill prior ::after with EUR */
}
/* Mimic secondary look via JS-injected span (added below) */
.shop-sidebar .filter-list a[data-eur] .filter-bgn-secondary {
    font-size: 0.78em;
    color: var(--text);
    opacity: 0.75;
    font-style: italic;
}
.shop-sidebar .filter-list a[data-eur]:hover .filter-bgn-secondary,
.shop-sidebar .filter-list a.active[data-eur] .filter-bgn-secondary {
    color: var(--primary);
    opacity: 1;
}

/* Make the ::before pick up active/hover gold */
.shop-sidebar .filter-list a[data-eur]:hover::before,
.shop-sidebar .filter-list a.active[data-eur]::before {
    color: var(--primary);
}


/* ============================================================
   SHOP SERVICES — Aesthetic procedures (categories → procedures)
   2026-05-16
   ============================================================ */

/* HERO — same offset pattern as other shop sub-pages */
.srv-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    padding: clamp(11rem, 16vw, 14rem) 0 clamp(2.5rem, 4vw, 4rem);
}
.srv-hero > .container { position: relative; z-index: 1; max-width: 1240px; }
@media (max-width: 1024px) { .srv-hero { padding-top: clamp(10rem, 14vw, 12rem); } }
@media (max-width: 768px)  { .srv-hero { padding-top: 9rem; } }
@media (max-width: 480px)  { .srv-hero { padding-top: 7.5rem; } }

.srv-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--black);
    margin: 1rem 0 0;
}
.srv-hero__title em { font-style: italic; color: var(--primary); }
.srv-hero .aesto-hairline { margin: 1.25rem 0; }
.srv-hero__lead {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 60ch;
    margin: 0;
}

/* CATEGORY GRID — red entry tiles */
.srv-cats { padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem); background: #fff; }
.srv-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}
.srv-cat-tile {
    appearance: none;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 2rem 1.75rem 2.25rem;
    background: linear-gradient(135deg, #B85940 0%, #8C3D2C 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    text-align: left;
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.srv-cat-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.16) 0%, transparent 60%);
    pointer-events: none;
}
.srv-cat-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -20px rgba(184, 89, 64, 0.55);
}
.srv-cat-tile > * { position: relative; z-index: 1; }
.srv-cat-tile i.fas {
    font-size: 1.6rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 0.25rem;
}
.srv-cat-tile__name {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}
.srv-cat-tile__desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.88);
    margin: 0;
}
.srv-cat-tile__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    margin-top: 0.5rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.srv-cat-tile:hover .srv-cat-tile__arrow {
    background: rgba(255,255,255,0.28);
    transform: translateX(4px);
}

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

/* PROCEDURES VIEW */
.srv-procs { padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem); background: #fff; }
.srv-procs > .container { max-width: 1240px; }

.srv-back {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    padding: 0.65rem 1.1rem;
    background: transparent;
    color: var(--primary);
    border: 1px solid rgba(196, 164, 132, 0.5);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.srv-back:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.srv-back i { font-size: 0.78rem; }

.srv-cat-panel__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.srv-cat-panel__title {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    font-weight: 400;
    color: var(--black);
    margin: 0.5rem 0 0;
}
.srv-cat-panel .aesto-hairline { margin: 1rem 0; }
.srv-cat-panel__desc {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
    max-width: 60ch;
}

/* Gender tabs (epilation) */
.srv-gender-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.3rem;
    background: var(--cream);
    border-radius: 999px;
    margin-bottom: 1.5rem;
}
.srv-gender-tab {
    appearance: none;
    cursor: pointer;
    padding: 0.65rem 1.5rem;
    background: transparent;
    color: var(--text);
    border: none;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.srv-gender-tab.is-active {
    background: var(--primary);
    color: #fff;
}

/* Procedure table */
.srv-subgroup { margin-bottom: 2.5rem; }
.srv-subgroup__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(196, 164, 132, 0.35);
}
.srv-proc-table {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.srv-proc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(0.85rem, 2vw, 1.75rem);
    padding: 1rem 0.25rem;
    border-bottom: 1px solid rgba(196, 164, 132, 0.2);
}
.srv-proc-row:last-child { border-bottom: none; }
.srv-proc-row__name {
    font-family: var(--font-heading);
    font-size: clamp(0.98rem, 1.4vw, 1.1rem);
    font-weight: 500;
    color: var(--black);
}
.srv-proc-row__price { white-space: nowrap; text-align: right; }

.proc-price { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.proc-price__eur {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: 500;
    color: var(--black);
}
.proc-price__bgn {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: var(--text);
    opacity: 0.85;
}
.proc-price__old {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.75;
    margin-bottom: 2px;
}

/* Price list: old (strikethrough) price before discounted one */
.price-amount .price-was {
    display: block;
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.75;
    margin-bottom: 2px;
}

.srv-add {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.srv-add:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.srv-add i { font-size: 0.78rem; }

@media (max-width: 640px) {
    .srv-proc-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "name price" "action action";
        gap: 0.5rem 1rem;
    }
    .srv-proc-row__name { grid-area: name; }
    .srv-proc-row__price { grid-area: price; }
    .srv-proc-row__action { grid-area: action; }
    .srv-add { width: 100%; justify-content: center; padding: 0.75rem 1rem; }
    .proc-price { align-items: flex-end; }
}


/* ============================================================
   SEARCH PAGE — /search.php?q=...
   2026-05-16
   ============================================================ */
.search-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    padding: clamp(11rem, 16vw, 14rem) 0 clamp(2.5rem, 4vw, 4rem);
}
.search-hero > .container { position: relative; z-index: 1; max-width: 880px; }
@media (max-width: 1024px) { .search-hero { padding-top: clamp(10rem, 14vw, 12rem); } }
@media (max-width: 768px)  { .search-hero { padding-top: 9rem; } }
@media (max-width: 480px)  { .search-hero { padding-top: 7.5rem; } }

.search-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--black);
    margin: 1rem 0 0;
}
.search-hero__title em { font-style: italic; color: var(--primary); }
.search-hero .aesto-hairline { margin: 1.25rem 0 1.5rem; }

.search-form-big {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 6px 24px -10px rgba(43, 33, 28, 0.18);
}
.search-form-big input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 1.1rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text);
    outline: none;
}
.search-form-big input::placeholder { color: rgba(122, 92, 77, 0.55); }
.search-form-big button {
    appearance: none;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    border: none;
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}
.search-form-big button:hover { background: var(--primary-dark); }

.search-results { padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem); background: #fff; }
.search-results > .container { max-width: 880px; }

.search-empty {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text);
    text-align: center;
    padding: 2rem 0;
}

.search-no-results {
    text-align: center;
    padding: clamp(2rem, 4vw, 3.5rem) 1rem;
}
.search-no-results i {
    font-size: 2.5rem;
    color: var(--primary);
    opacity: 0.5;
    margin-bottom: 1rem;
}
.search-no-results h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.5rem;
}
.search-no-results p {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    margin: 0 0 1.25rem;
}
.search-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.search-suggestions a {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    background: var(--cream);
    color: var(--primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.search-suggestions a:hover { background: var(--primary); color: #fff; }

.search-result-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.search-result {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(196, 164, 132, 0.25);
}
.search-result:last-child { border-bottom: none; }
.search-result__type {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 0.45rem;
}
.search-result__title {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--black);
    margin: 0 0 0.4rem;
}
.search-result__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.search-result__title a:hover { color: var(--primary); }
.search-result__desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.search-result__link {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text);
    opacity: 0.65;
    text-decoration: none;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.search-result__link:hover { opacity: 1; color: var(--primary); }

mark {
    background: rgba(196, 164, 132, 0.28);
    color: inherit;
    padding: 0 0.1em;
    border-radius: 2px;
}


/* ============================================================
   HOMEPAGE hero — push content below fixed header
   2026-05-16
   ============================================================ */
.home-hero { padding-top: clamp(11rem, 16vw, 14rem); }
.home-hero__panel-inner { padding-top: clamp(1rem, 2vw, 2rem); }

@media (max-width: 1024px) { .home-hero { padding-top: clamp(10rem, 14vw, 12rem); } }
@media (max-width: 768px)  { .home-hero { padding-top: 9rem; } }
@media (max-width: 480px)  { .home-hero { padding-top: 7.5rem; } }


/* ============================================================
   HOMEPAGE hero — text panel only pushes down, media stays full
   (overrides the earlier .home-hero padding-top which moved both)
   2026-05-16
   ============================================================ */
.home-hero { padding-top: 0 !important; }
.home-hero__panel { padding-top: clamp(11rem, 16vw, 14rem) !important; }

@media (max-width: 1024px) { .home-hero__panel { padding-top: clamp(10rem, 14vw, 12rem) !important; } }
@media (max-width: 768px)  { .home-hero__panel { padding-top: 9rem !important; } }
@media (max-width: 480px)  { .home-hero__panel { padding-top: 7.5rem !important; } }

/* ============== Blog page banner ============== */
.blog-banner {
    padding-top: clamp(95px, 9vw, 175px);
    background: #DCCFC0;
    overflow: hidden;
}
.blog-banner__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
@media (max-width: 768px) {
    .blog-banner { padding-top: 100px; }
}

/* AESTO method watermark on microneedling page */
.mn-method-watermark {
    position: absolute;
    bottom: 6%;
    right: 5%;
    width: clamp(160px, 17vw, 240px);
    height: auto;
    opacity: 0.22;
    filter: brightness(0) invert(1);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 768px) {
    .mn-method-watermark {
        bottom: auto;
        top: 1.5rem;
        right: 50%;
        transform: translateX(50%);
        width: 160px;
        opacity: 0.18;
    }
}

/* ============== Blog page background decorations ============== */
.blog-bg-section { position: relative; overflow: hidden; }
.blog-bg-section > .container { position: relative; z-index: 1; }
.blog-bg-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;
}
.blog-bg-decor--spiral1 {
    top: -5%;
    right: -6%;
    width: clamp(280px, 32vw, 520px);
    height: auto;
}
.blog-bg-decor--ring {
    top: 50%;
    left: -12%;
    transform: translateY(-50%);
    width: clamp(380px, 46vw, 720px);
    height: auto;
    opacity: 0.12;
}
.blog-bg-decor--spiral2 {
    bottom: -4%;
    right: -5%;
    width: clamp(300px, 36vw, 560px);
    height: auto;
    opacity: 0.14;
    mix-blend-mode: multiply;
}
@media (max-width: 768px) {
    .blog-bg-decor--spiral1 { width: 200px; opacity: 0.12; }
    .blog-bg-decor--ring { width: 320px; opacity: 0.08; }
    .blog-bg-decor--spiral2 { width: 220px; opacity: 0.1; }
}

/* ============== Contact page banner ============== */
.contact-banner {
    padding-top: clamp(95px, 9vw, 175px);
    background: #DCCFC0;
    overflow: hidden;
}
.contact-banner__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
@media (max-width: 768px) {
    .contact-banner { padding-top: 100px; }
}

/* ============== Promo offers page banner ============== */
.promo-banner {
    padding-top: clamp(95px, 9vw, 175px);
    background: #DCCFC0;
    overflow: hidden;
}
.promo-banner__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
@media (max-width: 768px) {
    .promo-banner { padding-top: 100px; }
}

/* ============== Cosmetic services page banner ============== */
.cosmetic-banner {
    padding-top: clamp(95px, 9vw, 175px);
    background: #DCCFC0;
    overflow: hidden;
}
.cosmetic-banner__media {
    position: relative;
}
.cosmetic-banner__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
.cosmetic-banner__overlay {
    position: absolute;
    left: 5%;
    top: 30%;
    max-width: 42%;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.cosmetic-banner__title {
    font-size: clamp(1.2rem, 2.7vw, 2.8rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.08;
    margin: 0;
    color: #fff;
}
.cosmetic-banner__rule {
    display: block;
    width: clamp(36px, 4vw, 64px);
    height: 1px;
    background: rgba(255, 255, 255, 0.65);
    margin: clamp(0.6rem, 1.2vw, 1.2rem) 0;
}
.cosmetic-banner__lead {
    font-size: clamp(0.78rem, 1.15vw, 1.1rem);
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.3px;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    max-width: 26em;
}
@media (max-width: 768px) {
    .cosmetic-banner { padding-top: 100px; }
    .cosmetic-banner__overlay {
        left: 5%;
        top: 28%;
        max-width: 55%;
    }
    .cosmetic-banner__title {
        letter-spacing: 2px;
    }
}
@media (max-width: 480px) {
    .cosmetic-banner__overlay {
        top: 24%;
        max-width: 60%;
    }
    .cosmetic-banner__rule {
        margin: 0.4rem 0;
    }
}

/* === FIX: team-hero text overlap on tablet/mobile === */
@media (max-width: 992px) {
    .team-hero { padding-top: clamp(80px, 14vw, 130px); padding-bottom: 0; background: #2A2A2A; }
    .team-hero-grid { display: block; }
    .team-hero-visual { aspect-ratio: 16/9; max-height: 380px; }
    .team-hero-visual img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
    .team-hero-text {
        position: static !important;
        transform: none !important;
        top: auto !important;
        max-width: 100% !important;
        padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px) clamp(48px, 8vw, 72px);
    }
    .team-hero-title { font-size: clamp(2rem, 7vw, 3.2rem) !important; line-height: 1.1 !important; margin-bottom: 1rem !important; }
}

/* shop-services: category tile with image banner */
.srv-cat-tile { overflow: hidden; position: relative; }
.srv-cat-tile__img { width: 100%; aspect-ratio: 4/5; overflow: hidden; margin: -1.5rem -1.5rem 1.25rem; border-radius: 0; background: #F0E6D9; }
.srv-cat-tile__img img { object-position: center top; }
.srv-cat-tile__img img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.srv-cat-tile:hover .srv-cat-tile__img img { transform: scale(1.04); }

/* shop-services: image-only tiles (image IS the card) */
.srv-cat-tile--imgonly {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer;
    aspect-ratio: 4/5;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 8px 24px -10px rgba(0,0,0,.08);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.srv-cat-tile--imgonly:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 18px 40px -16px rgba(0,0,0,.15);
}
.srv-cat-tile--imgonly > img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.srv-cat-tile--imgonly:hover > img { transform: scale(1.03); }
.srv-cat-tile__fallback {
    width: 100%; height: 100%;
    background: #FAF8F5;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 1.5rem; text-align: center; gap: 0.75rem;
}
.srv-cat-tile__fallback i { font-size: 2.5rem; color: #C4A484; }
.srv-cat-tile__fallback h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; margin: 0; color: #2A2520; }
.srv-cat-tile__fallback p { font-size: 0.85rem; color: #5A5048; margin: 0; line-height: 1.45; }

/* shop-services: per-category hero banner (in panel) */
.srv-cat-panel__hero { width: 100%; line-height: 0; margin: 0 0 clamp(28px, 4vw, 56px); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px -8px rgba(0,0,0,.1); }
.srv-cat-panel__hero img { width: 100%; height: auto; max-width: 100%; display: block; }
.srv-cat-panel__head--has-hero { display: none; }

/* shop-services: hide panel head text (hero banner shows category) */
.srv-cat-panel__head[hidden] { display: none !important; }

/* ===== Global sticky "Запази час" CTA (appears on scroll) ===== */
.global-sticky-cta {
    position: fixed; bottom: 24px; right: 24px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #C4A484, #A48663);
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(164,134,99,.4), 0 8px 30px -8px rgba(0,0,0,.18);
    z-index: 999;
    opacity: 0; pointer-events: none;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease, background-color .3s ease;
}
.global-sticky-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.global-sticky-cta:hover { background: linear-gradient(135deg, #A48663, #8B6F4F); color: #fff !important; }
.global-sticky-cta i { font-size: 14px; }
@media (max-width: 640px) {
    .global-sticky-cta { bottom: 16px; right: 16px; width: 52px; height: 52px; padding: 0; justify-content: center; }
    .global-sticky-cta span { display: none; }
    .global-sticky-cta i { font-size: 18px; }
}


/* ============================================================
   PRODUCT — Editorial spread (impeccable redesign)
   2026-05-24
   ============================================================ */

.prod-edi {
    position: relative;
    background: var(--cream, #FAF8F5);
    padding: clamp(8rem, 14vw, 12rem) 0 clamp(4rem, 8vw, 8rem);
    overflow: hidden;
}
.prod-edi > .container { position: relative; z-index: 1; max-width: 1280px; }

.prod-edi-crumbs { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Decorative oversized initial — sits behind everything top-right */
.prod-edi-watermark {
    position: absolute;
    top: clamp(2rem, 6vw, 6rem);
    right: clamp(-2rem, -4vw, -6rem);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20rem, 38vw, 36rem);
    line-height: 0.8;
    color: rgba(196, 164, 132, 0.08);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
@media (max-width: 768px) {
    .prod-edi-watermark { font-size: 22rem; right: -3rem; top: 1rem; }
}

/* The editorial grid — image left, sticky info right */
.prod-edi-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
}

/* IMAGE — soft, large, no card framing */
.prod-edi-figure {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 520px;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
}
.prod-edi-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-edi-figure:hover img { transform: scale(1.02); }

.prod-edi-badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--black, #2B2520);
    background: rgba(250, 248, 245, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
}
.prod-edi-badge--sale { color: #8B3A2E; }
.prod-edi-badge--ново { color: #4A6B5A; }

/* RIGHT column — sticks while image scrolls */
.prod-edi-aside {
    position: sticky;
    top: 7.5rem;
    padding-top: 1rem;
}
.prod-edi-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.prod-edi-brand {
    color: var(--primary-dark, #A8845C);
    font-size: 11px;
    letter-spacing: 0.22em;
}

.prod-edi-title {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-weight: 400;
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.012em;
    color: var(--black, #2B2520);
    margin: 0;
}
.prod-edi-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--primary-dark, #A8845C);
}

.prod-edi-hairline {
    width: 56px;
    height: 1px;
    background: var(--primary, #C4A484);
    margin: 0.25rem 0 0.5rem;
}

.prod-edi-lead {
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--text, #4A4239);
    margin: 0;
    max-width: 42ch;
}

/* PRICING — price is quiet, dominant only by typeface, not by color */
.prod-edi-pricing {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-top: 0.75rem;
}
.prod-edi-price {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 400;
    color: var(--black, #2B2520);
    letter-spacing: -0.01em;
    line-height: 1;
}
.prod-edi-price .price-secondary {
    font-size: 0.48em;
    color: var(--text-light, #7B6F62);
    letter-spacing: 0;
    opacity: 1;
}
.prod-edi-pricing s {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--text-muted, #A89E92);
    text-decoration: line-through;
}
.prod-edi-pricing s .price-primary,
.prod-edi-pricing s .price-secondary {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* BUY — text-style quantity, one solid CTA */
.prod-edi-buy {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E9E2D6;
}
.prod-edi-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
}
.prod-edi-qty-btn {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--text, #4A4239);
    line-height: 1;
    transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-edi-qty-btn:hover {
    background: var(--cream-dark, #F2EDE3);
    color: var(--black, #2B2520);
}
.prod-edi-qty-val {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-size: 1.2rem;
    color: var(--black, #2B2520);
    min-width: 1.5ch;
    text-align: center;
    line-height: 1;
}

.prod-edi-cta {
    appearance: none;
    cursor: pointer;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 1.75rem;
    background: var(--black, #2B2520);
    color: #fff;
    border: 1px solid var(--black, #2B2520);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-edi-cta:hover {
    background: var(--primary-dark, #A8845C);
    border-color: var(--primary-dark, #A8845C);
    color: #fff;
    transform: translateY(-1px);
}

/* CONSULT — secondary, link-style, links to booking */
.prod-edi-consult {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
    padding-bottom: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text, #4A4239);
    text-decoration: none;
    letter-spacing: 0.04em;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), gap 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-edi-consult i { font-size: 0.7rem; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.prod-edi-consult:hover {
    color: var(--primary-dark, #A8845C);
    border-bottom-color: var(--primary, #C4A484);
    gap: 0.85rem;
}
.prod-edi-consult:hover i { transform: translateX(2px); }

/* META — small definition list, very quiet */
.prod-edi-meta {
    margin: 1.5rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid #E9E2D6;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1.25rem;
    font-family: 'Inter', sans-serif;
}
.prod-edi-meta > div { display: flex; flex-direction: column; gap: 0.35rem; }
.prod-edi-meta dt {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted, #A89E92);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0;
}
.prod-edi-meta dd {
    font-size: 0.88rem;
    color: var(--text, #4A4239);
    margin: 0;
}

/* ============================================================
   EDITORIAL STORY — chapters with numbered margin
   ============================================================ */
.prod-edi-story {
    background: #fff;
    padding: clamp(5rem, 9vw, 9rem) 0;
}
.prod-edi-story .container { max-width: 1100px; }

.prod-edi-chap {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    border-top: 1px solid #E9E2D6;
    align-items: start;
}
.prod-edi-chap:first-child { border-top: none; padding-top: 0; }
.prod-edi-chap:last-child { padding-bottom: 0; }

.prod-edi-chap-num {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.85rem;
    color: var(--primary, #C4A484);
    line-height: 1;
    letter-spacing: -0.02em;
}

.prod-edi-chap-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 62ch;
}
.prod-edi-chap-body .aesto-eyebrow {
    color: var(--text-light, #7B6F62);
    font-size: 11px;
    letter-spacing: 0.22em;
}

.prod-edi-pull {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.4;
    color: var(--black, #2B2520);
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.005em;
}

.prod-edi-prose {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text, #4A4239);
    margin: 0;
}

/* INCI — small, wide-tracking, monospace-feel */
.prod-edi-inci {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.85;
    letter-spacing: 0.06em;
    color: var(--text, #4A4239);
    margin: 0;
}

/* List — numbered with hairlines between items */
.prod-edi-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: edilist;
}
.prod-edi-list li {
    counter-increment: edilist;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 1rem 0;
    border-top: 1px solid #F2EDE3;
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--text, #4A4239);
}
.prod-edi-list li:first-child { border-top: none; padding-top: 0; }
.prod-edi-list li::before {
    content: counter(edilist, decimal-leading-zero);
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--primary, #C4A484);
    letter-spacing: 0.04em;
}

/* ============================================================
   PRODUCT DETAIL TABS
   ============================================================ */
.prod-edi-tabs {
    background: #FBF8F3;
    padding: clamp(4rem, 7vw, 7rem) 0;
}

.prod-edi-tabs .container { max-width: 1160px; }

.prod-edi-tabs-shell {
    display: grid;
    grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(2rem, 4vw, 3.75rem) 0;
    border-top: 1px solid #E9E2D6;
    border-bottom: 1px solid #E9E2D6;
}

.prod-edi-tabs-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.prod-edi-tabs-title {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-weight: 400;
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    line-height: 1.08;
    color: var(--black, #2B2520);
    margin: 0;
}

.prod-edi-tablist {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: flex-end;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    border-bottom: 1px solid #E9E2D6;
}

.prod-edi-tab {
    appearance: none;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    min-height: 48px;
    padding: 0.85rem 1rem;
    margin-bottom: -1px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-light, #7B6F62);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.prod-edi-tab:hover {
    color: var(--black, #2B2520);
    background: rgba(196, 164, 132, 0.08);
}

.prod-edi-tab.is-active {
    color: var(--black, #2B2520);
    border-bottom-color: var(--primary-dark, #A8845C);
}

.prod-edi-tab:focus-visible {
    outline: 2px solid rgba(168, 132, 92, 0.45);
    outline-offset: 3px;
}

.prod-edi-tabpanels {
    grid-column: 2;
    min-height: 260px;
}

.prod-edi-tabpanel {
    max-width: 72ch;
}

.prod-edi-tabpanel[hidden] { display: none; }

.prod-edi-tabpanel.is-active {
    animation: prodTabIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes prodTabIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FROM THE SAME PROTOCOL
   ============================================================ */
.prod-edi-protocol {
    background: #F4EEE5;
    padding: clamp(4.5rem, 7vw, 7rem) 0;
}
.prod-edi-protocol .container { max-width: 1280px; }

.prod-edi-protocol-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.prod-edi-protocol-head {
    text-align: left;
    margin-bottom: 0;
    position: sticky;
    top: 7rem;
}
.prod-edi-protocol-head .aesto-eyebrow { color: var(--text-light, #7B6F62); }
.prod-edi-protocol-title {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    color: var(--black, #2B2520);
    margin: 0.65rem 0 1rem;
    letter-spacing: 0;
    line-height: 1.08;
}
.prod-edi-protocol-title em {
    font-style: italic;
    color: var(--primary-dark, #A8845C);
}

.prod-edi-protocol-copy {
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--text, #4A4239);
    margin: 0;
    max-width: 30ch;
}

.prod-edi-protocol-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.prod-edi-protocol-pair {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
}
.prod-edi-protocol-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: clamp(0.75rem, 1.5vw, 1rem);
    border: 1px solid rgba(196, 164, 132, 0.28);
    border-radius: 8px;
    background: rgba(250, 248, 245, 0.6);
    gap: 1rem;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-edi-protocol-card:hover {
    transform: translateY(-3px);
    border-color: rgba(168, 132, 92, 0.45);
    background: rgba(250, 248, 245, 0.9);
}
.prod-edi-protocol-card:hover .prod-edi-protocol-figure img { transform: scale(1.04); }

.prod-edi-protocol-figure {
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #FAF8F5;
    aspect-ratio: 1 / 1.08;
}
.prod-edi-protocol-card--sm .prod-edi-protocol-figure { aspect-ratio: 3 / 4; }
.prod-edi-protocol-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.prod-edi-protocol-meta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.15rem 0.15rem 0.25rem;
}
.prod-edi-protocol-card--lg .prod-edi-protocol-name {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}
.prod-edi-protocol-card--sm .prod-edi-protocol-name {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
}
.prod-edi-protocol-name {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-weight: 400;
    color: var(--black, #2B2520);
    margin: 0;
    min-height: 2.6em;
    font-size: clamp(1.12rem, 1.5vw, 1.32rem);
    line-height: 1.28;
    letter-spacing: 0;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-edi-protocol-card:hover .prod-edi-protocol-name { color: var(--primary-dark, #A8845C); }
.prod-edi-protocol-price {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text, #4A4239);
    letter-spacing: 0.02em;
}
.prod-edi-protocol-price .price-secondary {
    font-size: 0.78em;
    color: var(--text-light, #7B6F62);
    opacity: 1;
}

.prod-edi-protocol-link {
    margin-top: 0.35rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--primary-dark, #A8845C);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* TOAST */
.prod-edi-toast {
    position: fixed;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--black, #2B2520);
    color: #FAF8F5;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: max-content;
    min-width: min(360px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
    padding: 0.65rem 0.95rem 0.65rem 0.65rem;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    z-index: 9999;
    opacity: 0;
    box-shadow: 0 20px 50px -20px rgba(43, 37, 32, 0.4);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-edi-toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }

.prod-edi-toast__img {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    object-fit: cover;
    border-radius: 7px;
    background: #FAF8F5;
}

.prod-edi-toast__body {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.prod-edi-toast__body strong {
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.25;
    color: #FAF8F5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prod-edi-toast__body span {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary, #C4A484);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .prod-edi-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .prod-edi-figure {
        justify-self: center;
        max-width: min(520px, 100%);
    }
    .prod-edi-aside {
        position: static;
        padding-top: 0;
    }
    .prod-edi-info { max-width: 560px; }

    .prod-edi-tabs-shell,
    .prod-edi-protocol-layout {
        grid-template-columns: 1fr;
    }
    .prod-edi-tablist,
    .prod-edi-tabpanels {
        grid-column: auto;
    }
    .prod-edi-protocol-head {
        position: static;
        max-width: 44rem;
    }
    .prod-edi-protocol-copy { max-width: 46ch; }
}

@media (max-width: 768px) {
    .prod-edi { padding-top: 7rem; }
    .prod-edi-figure {
        aspect-ratio: 1 / 1;
        max-width: min(420px, 100%);
    }
    .prod-edi-buy { flex-direction: column; align-items: stretch; gap: 1rem; }
    .prod-edi-qty { align-self: flex-start; }
    .prod-edi-cta { width: 100%; }

    .prod-edi-chap {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 2.25rem 0;
    }
    .prod-edi-chap-num { font-size: 1.4rem; }

    .prod-edi-protocol-pair {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .prod-edi-protocol-card--sm .prod-edi-protocol-figure { aspect-ratio: 4 / 5; }

    .prod-edi-tablist {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }
    .prod-edi-tablist::-webkit-scrollbar { display: none; }
    .prod-edi-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .prod-edi-tabpanels { min-height: 0; }
    .prod-edi-protocol-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .prod-edi-title { font-size: clamp(1.8rem, 8vw, 2.2rem); }
    .prod-edi-price { font-size: 1.7rem; }
    .prod-edi-meta { grid-template-columns: 1fr 1fr; }
    .prod-edi-tabs-shell { padding: 2rem 0; }
    .prod-edi-protocol-grid { grid-template-columns: 1fr; }
    .prod-edi-protocol-name { min-height: 0; }
}

/* Hide legacy product styles to prevent visual collisions when redesign loads */
.prod-hero, .prod-details, .prod-related { display: none !important; }

/* Article-style typography inside .prod-edi-chap (for desc2 with mixed content) */
.prod-edi-article { display: flex; flex-direction: column; gap: 0.85rem; }
.prod-edi-article .prod-edi-prose { margin: 0; }
.prod-edi-article .prod-edi-inci { margin: 0.5rem 0; }

.prod-edi-section-h {
    font-family: var(--font-heading, 'Cormorant Garamond'), serif;
    font-weight: 500;
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    color: var(--black, #2B2520);
    margin: 1.5rem 0 0.5rem;
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.prod-edi-article > .prod-edi-section-h:first-child { margin-top: 0; }

.prod-edi-subhead {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--primary-dark, #A8845C);
    margin: 1.25rem 0 0.15rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.prod-edi-article > .prod-edi-subhead:first-child { margin-top: 0; }


/* ============================================================
   FORLLE'D — Japanese Skin Intelligence
   Light cream-platinum + one dark premium band (sec 4)
   2026-05-25
   ============================================================ */

/* HERO */
.forl-hero {
    position: relative;
    background: linear-gradient(180deg, #F7F2EA 0%, #FAF8F5 100%);
    padding: clamp(8rem, 14vw, 12rem) 0 clamp(4rem, 7vw, 7rem);
    overflow: hidden;
}
.forl-hero-watermark {
    position: absolute;
    top: clamp(2rem, 6vw, 5rem);
    left: clamp(-3rem, -3vw, -5rem);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20rem, 40vw, 38rem);
    line-height: 0.8;
    color: rgba(196, 164, 132, 0.07);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.forl-hero > .container { position: relative; z-index: 1; max-width: 1320px; }
.forl-hero-crumbs { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.forl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}
.forl-hero-body { display: flex; flex-direction: column; gap: 1.25rem; }
.forl-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.018em;
    color: #2B2520;
    margin: 0.25rem 0 0;
}
.forl-hero-title em {
    font-style: italic;
    color: #A8845C;
    font-weight: 400;
}
.forl-hero-hairline { width: 56px; height: 1px; background: #C4A484; margin: 0.25rem 0 0.5rem; }
.forl-hero-lead {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #4A4239;
    max-width: 48ch;
    margin: 0;
}
.forl-hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.75rem; }
.forl-hero-figure {
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 5 / 4;
    background: #EAE2D4;
}
.forl-hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* CTA — shared button styles */
.forl-cta {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    height: 54px;
    padding: 0 1.75rem;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.forl-cta--solid { background: #2B2520; color: #fff; border-color: #2B2520; }
.forl-cta--solid:hover { background: #A8845C; border-color: #A8845C; color: #fff; transform: translateY(-1px); }
.forl-cta--ghost { background: transparent; color: #2B2520; border-color: rgba(43, 37, 32, 0.25); }
.forl-cta--ghost:hover { border-color: #A8845C; color: #A8845C; }
.forl-cta--lg { height: 64px; padding: 0 2.5rem; font-size: 12px; }
.forl-cta i { font-size: 0.7rem; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.forl-cta:hover i { transform: translateX(3px); }

/* INTRO */
.forl-intro {
    background: #FAF8F5;
    padding: clamp(4rem, 8vw, 8rem) 0;
}
.forl-intro .container { max-width: 1200px; }
.forl-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.forl-intro-aside { display: flex; flex-direction: column; gap: 0.85rem; padding-top: 0.5rem; }
.forl-intro-aside .aesto-hairline { margin: 0; width: 56px; }
.forl-intro-pull {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.4;
    color: #2B2520;
    margin: 0 0 1.5rem;
    letter-spacing: -0.008em;
    max-width: 60ch;
}
.forl-intro-prose {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.85;
    color: #4A4239;
    margin: 0;
    max-width: 62ch;
}

/* DARK BAND — SECTION 4 */
.forl-dark {
    position: relative;
    background: #0E0B08;
    color: #E8E1D6;
    padding: clamp(5rem, 9vw, 9rem) 0;
    overflow: hidden;
}
.forl-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(196, 164, 132, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 10% 90%, rgba(196, 164, 132, 0.12) 0%, transparent 60%);
    pointer-events: none;
}
.forl-dark > .container { position: relative; z-index: 1; max-width: 1280px; }
.forl-dark-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    opacity: 0.55;
}
.forl-dark-glow--tr {
    width: 480px; height: 480px;
    top: -8rem; right: -6rem;
    background: radial-gradient(circle, #E8D5BC 0%, transparent 65%);
}
.forl-dark-glow--bl {
    width: 520px; height: 520px;
    bottom: -10rem; left: -8rem;
    background: radial-gradient(circle, #C4A484 0%, transparent 65%);
    opacity: 0.35;
}
.forl-dark-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.forl-dark-head { display: flex; flex-direction: column; gap: 1rem; }
.forl-dark-eyebrow { color: rgba(232, 213, 188, 0.7); }
.forl-dark-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: #F7EFE0;
    margin: 0.5rem 0 0;
}
.forl-dark-title em {
    font-style: italic;
    color: #E8D5BC;
    font-weight: 400;
}
.forl-dark-hairline { width: 56px; height: 1px; background: #C4A484; margin: 0.25rem 0; }
.forl-dark-lead {
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    line-height: 1.75;
    color: rgba(232, 213, 188, 0.78);
    max-width: 42ch;
    margin: 0;
}
.forl-dark-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.forl-dark-list li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.25rem;
    align-items: baseline;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(196, 164, 132, 0.22);
}
.forl-dark-list li:first-child { border-top: none; padding-top: 0; }
.forl-dark-list li:last-child { padding-bottom: 0; }
.forl-dark-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.2rem;
    color: #C4A484;
    letter-spacing: 0.02em;
}
.forl-dark-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.35;
    color: #F1E8D6;
    letter-spacing: -0.005em;
}

/* SHARED SECTION HEAD */
.forl-section-head {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}
.forl-section-head .aesto-hairline { width: 56px; margin: 0.5rem auto 0; }
.forl-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #2B2520;
    margin: 0;
}
.forl-section-title em { font-style: italic; color: #A8845C; font-weight: 400; }

/* SECTION 5 — THERAPIES */
.forl-therapies {
    background: #FAF8F5;
    padding: clamp(5rem, 9vw, 9rem) 0;
}
.forl-therapies .container { max-width: 1280px; }
.forl-therapy-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.95fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: stretch;
}
.forl-therapy {
    position: relative;
    background: #fff;
    padding: clamp(2rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border: 1px solid #E9E2D6;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.forl-therapy:hover { transform: translateY(-4px); border-color: #C4A484; }
.forl-therapy--lg { padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
.forl-therapy--md { margin-top: 1.5rem; }
.forl-therapy--sm { margin-top: 3rem; }
.forl-therapy-mark {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.4rem;
    color: #C4A484;
    line-height: 1;
}
.forl-therapy-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.3vw, 1.85rem);
    line-height: 1.2;
    color: #2B2520;
    margin: 0;
    letter-spacing: -0.005em;
}
.forl-therapy-name em { font-style: italic; color: #A8845C; }
.forl-therapy-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.forl-therapy-list li {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4A4239;
    padding-top: 0.75rem;
    border-top: 1px solid #F2EDE3;
}
.forl-therapy-list li:first-child { border-top: none; padding-top: 0; }

/* SECTION 6 — INGREDIENTS */
.forl-ingredients {
    background: #fff;
    padding: clamp(5rem, 9vw, 9rem) 0;
}
.forl-ingredients .container { max-width: 1100px; }
.forl-ingredient-list { display: flex; flex-direction: column; gap: 0; }
.forl-ingredient {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    border-top: 1px solid #E9E2D6;
}
.forl-ingredient:first-child { border-top: none; padding-top: 0; }
.forl-ingredient:last-child { padding-bottom: 0; }
.forl-ingredient-letter {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 0.85;
    color: #C4A484;
    letter-spacing: -0.02em;
    text-align: right;
}
.forl-ingredient-body { display: flex; flex-direction: column; gap: 0.85rem; }
.forl-ingredient-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(1.55rem, 2.4vw, 1.95rem);
    color: #2B2520;
    margin: 0;
    letter-spacing: -0.005em;
}
.forl-ingredient-name sup { font-size: 0.5em; color: #A8845C; }
.forl-ingredient-body p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #4A4239;
    margin: 0;
    max-width: 60ch;
}

/* SECTION 7 — RESULT */
.forl-result {
    background: linear-gradient(180deg, #FAF8F5 0%, #F2EDE3 100%);
    padding: clamp(5rem, 9vw, 9rem) 0;
}
.forl-result .container { max-width: 1240px; }
.forl-result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}
.forl-result-figure {
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 5 / 4;
}
.forl-result-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forl-result-body { display: flex; flex-direction: column; gap: 1rem; }
.forl-result-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #2B2520;
    margin: 0.25rem 0 0;
}
.forl-result-title em { font-style: italic; color: #A8845C; }
.forl-result-body .aesto-hairline { width: 56px; margin: 0.25rem 0 0.5rem; }
.forl-result-lead {
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    color: #4A4239;
    margin: 0.5rem 0 0;
}
.forl-result-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1.5rem;
}
.forl-result-list li {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: #2B2520;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}
.forl-result-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 12px;
    height: 1px;
    background: #C4A484;
}
.forl-result-note {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-style: italic;
    color: #7B6F62;
    margin: 1rem 0 0;
    max-width: 50ch;
}

/* SECTION 8 — RELATED */
.forl-related {
    background: #fff;
    padding: clamp(5rem, 9vw, 9rem) 0;
}
.forl-related .container { max-width: 880px; }
.forl-related-list { list-style: none; padding: 0; margin: 0; }
.forl-related-list li { border-top: 1px solid #E9E2D6; }
.forl-related-list li:last-child { border-bottom: 1px solid #E9E2D6; }
.forl-related-list a {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    text-decoration: none;
    color: #2B2520;
    transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.forl-related-list a:hover { padding-left: 1rem; padding-right: 1rem; color: #A8845C; }
.forl-related-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.15rem;
    color: #C4A484;
}
.forl-related-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    letter-spacing: -0.005em;
}
.forl-related-list a i {
    font-size: 0.75rem;
    color: #A89E92;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.forl-related-list a:hover i { transform: translateX(6px); color: #A8845C; }

/* SECTION 9 — TEAM */
.forl-team {
    background: #FAF8F5;
    padding: clamp(5rem, 9vw, 9rem) 0;
}
.forl-team .container { max-width: 1280px; }
.forl-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
}
.forl-team-card { display: flex; flex-direction: column; gap: 1.5rem; }
.forl-team-figure {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 3 / 4;
    background: #EAE2D4;
}
.forl-team-figure img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.forl-team-card:hover .forl-team-figure img { transform: scale(1.04); }
.forl-team-body { display: flex; flex-direction: column; gap: 0.65rem; }
.forl-team-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.45rem, 2.3vw, 1.85rem);
    line-height: 1.15;
    color: #2B2520;
    margin: 0;
    letter-spacing: -0.005em;
}
.forl-team-name em { font-style: italic; color: #A8845C; }
.forl-team-body p {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #4A4239;
    margin: 0;
    max-width: 32ch;
}

/* SECTION 10 — FINAL CTA */
.forl-final {
    position: relative;
    background: #0E0B08;
    color: #F1E8D6;
    padding: clamp(5rem, 10vw, 10rem) 0;
    overflow: hidden;
}
.forl-final-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 213, 188, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(196, 164, 132, 0.15) 0%, transparent 65%);
    pointer-events: none;
}
.forl-final > .container { position: relative; z-index: 1; }
.forl-final-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.forl-final-eyebrow { color: rgba(232, 213, 188, 0.72); letter-spacing: 0.26em; }
.forl-final-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: #F7EFE0;
    margin: 0.5rem 0 0;
}
.forl-final-title em { font-style: italic; color: #E8D5BC; }
.forl-final-hairline {
    width: 56px;
    height: 1px;
    background: #C4A484;
    margin: 0.5rem 0;
}

.forl-final .forl-cta--solid {
    background: transparent;
    border-color: rgba(232, 213, 188, 0.4);
    color: #F7EFE0;
    margin-top: 1rem;
}
.forl-final .forl-cta--solid:hover {
    background: #C4A484;
    border-color: #C4A484;
    color: #0E0B08;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .forl-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .forl-hero-figure { order: -1; }
    .forl-intro-grid { grid-template-columns: 1fr; gap: 1rem; }
    .forl-dark-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .forl-therapy-grid { grid-template-columns: 1fr; }
    .forl-therapy--md, .forl-therapy--sm { margin-top: 0; }
    .forl-result-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .forl-team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .forl-hero { padding-top: 7rem; }
    .forl-ingredient { grid-template-columns: 5rem 1fr; gap: 1.25rem; }
    .forl-ingredient-letter { font-size: 3.5rem; text-align: left; }
    .forl-result-list { grid-template-columns: 1fr; }
    .forl-team-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .forl-related-list a { grid-template-columns: 2.5rem 1fr auto; gap: 1rem; }
    .forl-hero-actions { flex-direction: column; align-items: stretch; }
    .forl-hero-actions .forl-cta { width: 100%; }
}


/* ============================================================
   SHOP-PRODUCTS — Full-width hero banner + simplified filters
   2026-05-25
   ============================================================ */
.shop-hero-banner {
    width: 100%;
    margin-top: 140px;
    background: #F2EDE3;
    overflow: hidden;
    line-height: 0;
}
.shop-hero-banner img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 460px;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 1024px) { .shop-hero-banner { margin-top: 120px; } .shop-hero-banner img { max-height: 320px; } }
@media (max-width: 600px)  { .shop-hero-banner { margin-top: 100px; } .shop-hero-banner img { max-height: 220px; } }

.shop-hero-crumbs-wrap {
    background: #fff;
    padding: 1.25rem 0 0.25rem;
}
.shop-hero-crumbs-wrap .blog-edi-crumbs { margin: 0; }

.filter-list--static li span {
    display: block;
    padding: 0.35rem 0;
    color: var(--text-light, #7B6F62);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    cursor: default;
}


/* ============================================================
   FORLLE'D — Patches: wide hero, wide result, tighter spacing
   2026-05-25
   ============================================================ */

/* WIDE HERO BANNER with text overlay */
.forl-hero-wide {
    position: relative;
    width: 100%;
    margin-top: 140px;
    overflow: hidden;
    background: #EAE2D4;
    min-height: 520px;
    display: flex;
    align-items: center;
}
.forl-hero-wide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    z-index: 0;
}
.forl-hero-wide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(247, 242, 234, 0.95) 0%, rgba(247, 242, 234, 0.75) 40%, rgba(247, 242, 234, 0.15) 70%, rgba(247, 242, 234, 0) 100%);
    z-index: 1;
}
.forl-hero-wide-container { position: relative; z-index: 2; max-width: 1280px; width: 100%; padding-top: 2rem; padding-bottom: 2rem; }
.forl-hero-wide-crumbs { margin-bottom: 2rem; }
.forl-hero-wide-text { max-width: 540px; display: flex; flex-direction: column; gap: 1.25rem; }
.forl-hero-wide-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: #2B2520;
    margin: 0;
}
.forl-hero-wide-title em { font-style: italic; color: #A8845C; font-weight: 400; }
.forl-hero-wide-lead {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #4A4239;
    margin: 0;
    max-width: 44ch;
}
.forl-hero-wide-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.5rem; }
.forl-cta--ghost-light {
    background: rgba(250, 248, 245, 0.85);
    color: #2B2520;
    border-color: rgba(43, 37, 32, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.forl-cta--ghost-light:hover { background: #2B2520; color: #fff; border-color: #2B2520; }

@media (max-width: 1024px) {
    .forl-hero-wide { margin-top: 120px; min-height: 460px; }
    .forl-hero-wide-overlay { background: linear-gradient(180deg, rgba(247, 242, 234, 0.9) 0%, rgba(247, 242, 234, 0.7) 60%, rgba(247, 242, 234, 0.4) 100%); }
}
@media (max-width: 640px) {
    .forl-hero-wide { margin-top: 100px; min-height: 420px; }
    .forl-hero-wide-actions { flex-direction: column; align-items: stretch; }
    .forl-hero-wide-actions .forl-cta { width: 100%; }
}

/* TIGHTEN INTRO — remove now-empty aside column */
.forl-intro { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.forl-intro-aside:empty { display: none; }
@media (min-width: 1025px) {
    .forl-intro-grid:has(.forl-intro-aside:empty) { grid-template-columns: 1fr; }
}

/* DARK SECTION — tighter top padding (eyebrow removed) */
.forl-dark { padding: clamp(3.5rem, 6vw, 6rem) 0; }

/* THERAPIES + INGREDIENTS — tighter vertical rhythm */
.forl-therapies { padding: clamp(3rem, 5vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.forl-ingredients { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 5rem); }

/* WIDE RESULT BANNER with text overlay */
.forl-result-wide {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #EAE2D4;
    min-height: 460px;
    display: flex;
    align-items: center;
    margin: 0;
}
.forl-result-wide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.forl-result-wide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(247, 242, 234, 0) 0%, rgba(247, 242, 234, 0.3) 30%, rgba(247, 242, 234, 0.85) 60%, rgba(247, 242, 234, 0.95) 100%);
    z-index: 1;
}
.forl-result-wide-container { position: relative; z-index: 2; max-width: 1280px; width: 100%; padding-top: 3rem; padding-bottom: 3rem; display: flex; justify-content: flex-end; }
.forl-result-wide-text { max-width: 500px; display: flex; flex-direction: column; gap: 1rem; }
.forl-result-wide-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #2B2520;
    margin: 0;
}
.forl-result-wide-title em { font-style: italic; color: #A8845C; }
.forl-result-wide-lead {
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    color: #4A4239;
    margin: 0;
}
.forl-result-wide-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 1.5rem;
}
.forl-result-wide-list li {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: #2B2520;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}
.forl-result-wide-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 12px;
    height: 1px;
    background: #C4A484;
}
.forl-result-wide-note {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    color: #7B6F62;
    margin: 0.5rem 0 0;
    max-width: 44ch;
}
@media (max-width: 1024px) {
    .forl-result-wide { min-height: 540px; }
    .forl-result-wide-overlay { background: linear-gradient(180deg, rgba(247, 242, 234, 0.25) 0%, rgba(247, 242, 234, 0.85) 50%, rgba(247, 242, 234, 0.95) 100%); }
    .forl-result-wide-container { justify-content: flex-start; padding-top: 4rem; padding-bottom: 4rem; }
}
@media (max-width: 640px) {
    .forl-result-wide-list { grid-template-columns: 1fr; }
}

/* RELATED — tighter bottom padding */
.forl-related { padding: clamp(3rem, 5vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }

/* TEAM — tighter top, fix image cropping (faces, shoulders visible), equal heights */
.forl-team { padding: clamp(2rem, 4vw, 3rem) 0 clamp(5rem, 9vw, 9rem); }
.forl-team-figure {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #EAE2D4;
}
.forl-team-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.forl-team-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
}
.forl-team-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 90px;
    align-items: flex-start;
}
.forl-team-grid { align-items: stretch; }

@media (max-width: 768px) {
    .forl-team-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 2rem; }
}

/* ============================================================
   Targeted hero fixes — 2026-05-30
   Biostimulators rectangular hero image + PRP text clearance
   ============================================================ */
.bio-hero-visual {
    border-radius: 0 !important;
    min-height: clamp(440px, 46vw, 620px);
}
.bio-hero-visual img {
    object-position: 58% center;
}
@media (max-width: 992px) {
    .bio-hero-visual {
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-radius: 0 !important;
    }
}
@media (max-width: 600px) {
    .bio-hero-visual {
        aspect-ratio: 4 / 5;
        border-radius: 0 !important;
    }
}

.vl-hero {
    min-height: clamp(720px, 100vh, 940px);
    max-height: none !important;
    padding-top: clamp(160px, 12vw, 190px);
    align-items: center;
}
.vl-hero-container {
    padding-bottom: clamp(9rem, 13vw, 11rem);
}
.vl-hero-text {
    max-width: 620px;
}
.vl-hero-text h1 {
    line-height: 1.08;
    margin-bottom: 1.35rem;
}
.vl-hero-tagline {
    max-width: 560px;
}
.vl-hero-desc {
    max-width: 540px;
}
@media (max-width: 991px) {
    .vl-hero {
        min-height: auto;
        padding-top: clamp(145px, 18vw, 170px);
        align-items: flex-start;
    }
    .vl-hero-container {
        padding-bottom: 12rem;
    }
    .vl-hero-text h1 {
        font-size: clamp(2.15rem, 8vw, 3rem);
    }
}
@media (max-width: 575px) {
    .vl-hero {
        padding-top: 130px;
    }
    .vl-hero-container {
        padding-bottom: 13.5rem;
    }
    .vl-hero-text h1 {
        font-size: clamp(1.85rem, 9vw, 2.35rem);
        line-height: 1.12;
    }
    .vl-hero-tagline,
    .vl-hero-desc {
        max-width: 100%;
    }
}