/* ========================================
   SECTION: HEADER ENHANCED ARCHITECTURE
   Sophisticated header with premium spacing, refined typography,
   and multi-layer gradient overlay for navbar visibility
   Used in: header.html (page headers)
   ======================================== */

/* ----------------------------------------
   Base Container
   ---------------------------------------- */
/* Used in: header.html */
.page-header-enhanced {
    min-height: 500px !important;
    padding: 120px 60px 80px 60px !important;
    display: flex !important;
    align-items: flex-end !important;
    position: relative !important;
}

/* Multi-layer gradient overlay for navbar visibility and depth */
/* Higher specificity (.page-header.page-header-enhanced) to override custom.css .page-header::before */
/* Used in: header.html */
.page-header.page-header-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(38, 38, 38, 0.9) 0%, rgba(38, 38, 38, 0.5) 20%, transparent 45%),
        linear-gradient(180deg, transparent 65%, rgba(38, 38, 38, 0.4) 100%),
        linear-gradient(270deg, rgba(38, 38, 38, 0) 50%, rgba(38, 38, 38, 0.5) 100%),
        rgba(107, 83, 71, 0.4) !important;
}

/* ----------------------------------------
   Content Container
   ---------------------------------------- */
/* Used in: header.html */
.page-header-box-enhanced {
    position: relative !important;
    z-index: 1 !important;
    max-width: 900px !important;
}

/* ----------------------------------------
   Typography
   ---------------------------------------- */
/* Eyebrow text - Category/context label */
/* Used in: header.html */
.page-header-eyebrow {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #E8B087;
    margin-bottom: 14px !important;
}

/* Title typography - Commanding presence */
/* Used in: header.html */
.page-header-box-enhanced h1 {
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 24px !important;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
}

/* Subtitle styling - Clear hierarchy */
/* Used in: header.html */
.page-header-subtitle {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    margin-bottom: 28px !important;
    max-width: 700px !important;
}

/* Gradient accent line - Brand visual anchor */
/* Used in: header.html */
.page-header-accent-line {
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #D4795B, #E8B087);
    border-radius: 2px;
    margin-top: 32px;
}

/* ----------------------------------------
   Tablet Responsive (768px - 1024px)
   ---------------------------------------- */
/* Used in: header.html */
@media (max-width: 1024px) {
    .page-header-enhanced {
        min-height: 450px !important;
        padding: 100px 40px 70px 40px !important;
    }

    .page-header-box-enhanced h1 {
        font-size: 48px !important;
    }

    .page-header-subtitle {
        font-size: 19px !important;
    }

    .page-header-eyebrow {
        font-size: 12px;
    }

    .page-header-accent-line {
        width: 100px;
        height: 3px;
    }
}

/* ----------------------------------------
   Mobile Responsive (<768px)
   ---------------------------------------- */
/* Used in: header.html */
@media (max-width: 767px) {
    .page-header-enhanced {
        min-height: 400px !important;
        padding: 80px 20px 60px 20px !important;
    }

    .page-header-box-enhanced h1 {
        font-size: 40px !important;
        margin-bottom: 24px !important;
    }

    .page-header-subtitle {
        font-size: 18px !important;
        margin-bottom: 28px !important;
    }

    .page-header-eyebrow {
        font-size: 11px;
        margin-bottom: 14px !important;
    }

    .page-header-accent-line {
        width: 80px;
        height: 3px;
        margin-top: 28px;
    }
}

/* Legacy support - maintain compatibility with non-enhanced headers */
/* Used in: header.html (fallback for pages not yet updated) */
.page-header {
    padding: 120px 0 100px !important;
}

.page-header-box h1 {
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 24px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
}

.page-header-box h4 {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 24px !important;
    max-width: 700px !important;
}

.page-header-box h4::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: #E8B087;
    margin-top: 24px;
}

@media (max-width: 1199px) {
    .page-header {
        padding: 100px 0 80px !important;
    }

    .page-header-box h1 {
        font-size: 48px !important;
    }

    .page-header-box h4 {
        font-size: 19px !important;
    }
}

@media (max-width: 767px) {
    .page-header {
        padding: 80px 0 60px !important;
    }

    .page-header-box h1 {
        font-size: 40px !important;
        margin-bottom: 20px !important;
    }

    .page-header-box h4 {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }

    .page-header-box h4::after {
        width: 60px;
        height: 2px;
        margin-top: 20px;
    }
}

/* ========================================
   Biography Section Custom Styles
   Section: new_biography.html
   ======================================== */

/* Biography Section - new_biography.html */
.bio-section {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

/* Biography Images Container - new_biography.html */
.bio-images-container {
    position: relative;
    padding-right: 40px;
    min-height: 600px;
}

/* Bio Image 1 (Main/Larger Image - Portrait Headshot) - new_biography.html */
.bio-img-1 {
    position: relative;
    z-index: 1;
    width: 85%;
    max-width: 450px;
}

.bio-img-1 figure {
    margin-bottom: 0;
}

.bio-img-1 img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

/* Bio Image 2 (Layered/Smaller Image - Landscape) - new_biography.html */
.bio-img-2 {
    position: absolute;
    bottom: 20px;
    right: -20px;
    width: 75%;
    max-width: 380px;
    z-index: 2;
}

.bio-img-2 figure {
    margin-bottom: 0;
}

.bio-img-2 img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Bio Decorative Elements - new_biography.html */
.bio-images-container::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #f8f6f4 0%, #e8ddd4 100%);
    border-radius: 50%;
    z-index: 0;
    opacity: 0.6;
}

.bio-images-container::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 30%;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #9d7d6a 0%, #7c5c47 100%);
    border-radius: 50%;
    z-index: 0;
    opacity: 0.15;
}

/* Bio Decorative Accent Line - new_biography.html */
.bio-accent-line {
    position: absolute;
    top: 50%;
    right: -5px;
    width: 4px;
    height: 200px;
    background: linear-gradient(180deg, transparent 0%, #7c5c47 50%, transparent 100%);
    transform: translateY(-50%);
    z-index: 0;
    opacity: 0.3;
}

/* Credentials Badge - new_biography.html */
.bio-credentials-badge {
    position: absolute;
    top: 30px;
    left: -20px;
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(124, 92, 71, 0.15);
    z-index: 3;
    max-width: 250px;
}

.bio-badge-content h4 {
    font-family: 'Marcellus', serif;
    font-size: 18px;
    font-weight: 700;
    color: #7c5c47;
    margin-bottom: 8px;
    line-height: 1.3;
}

.bio-badge-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Years of Experience Badge - new_biography.html */
.bio-experience-badge {
    position: absolute;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #7c5c47 0%, #9d7d6a 100%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(124, 92, 71, 0.25);
    z-index: 3;
}

.experience-number {
    font-family: 'Marcellus', serif;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 4px;
}

.experience-label {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Biography Content Wrapper - new_biography.html */
.bio-content-wrapper {
    padding-left: 40px;
}

/* Biography Header - new_biography.html */
.bio-header .section-title h2 {
    margin-bottom: 15px;
}

/* Biography Credentials Line - new_biography.html */
.bio-credentials-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 15px;
    margin-bottom: 30px;
}

.credential-item {
    font-size: 15px;
    font-weight: 500;
    color: #7c5c47;
    background: #f8f6f4;
    padding: 8px 18px;
    border-radius: 20px;
}

.credential-separator {
    font-size: 18px;
    color: #9d7d6a;
}

/* Biography Experience Section - new_biography.html */
.bio-experience {
    margin-bottom: 35px;
}

.bio-experience h3 {
    font-family: 'Marcellus', serif;
    font-size: 24px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 18px;
}

.bio-experience p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Secondary Biography Image - new_biography.html */
.bio-image-secondary {
    margin: 35px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.bio-image-secondary img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    transition: transform 0.4s ease;
}

.bio-image-secondary:hover img {
    transform: scale(1.03);
}

/* Biography Philosophy Section - new_biography.html */
.bio-philosophy {
    margin-bottom: 35px;
}

.bio-philosophy h3 {
    font-family: 'Marcellus', serif;
    font-size: 24px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 18px;
}

.bio-philosophy p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Philosophy Highlight Box - new_biography.html */
.bio-philosophy-highlight {
    background: #f8f6f4;
    border-left: 4px solid #7c5c47;
    padding: 25px 30px;
    margin: 25px 0;
    border-radius: 4px;
}

.bio-philosophy-highlight p {
    font-size: 16px;
    color: #2c2c2c;
    margin-bottom: 0;
    line-height: 1.7;
}

.bio-philosophy-highlight strong {
    color: #7c5c47;
    font-weight: 600;
}

/* Biography CTA Buttons - new_biography.html */
.bio-cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Responsive Design for Biography Section - new_biography.html */
@media (max-width: 992px) {
    .bio-content-wrapper {
        padding-left: 0;
        margin-top: 60px;
    }

    .bio-images-container {
        padding-right: 20px;
        margin-bottom: 40px;
        min-height: 520px;
    }

    .bio-img-1 {
        width: 75%;
        max-width: 380px;
    }

    .bio-img-1 img {
        height: 480px;
    }

    .bio-img-2 {
        width: 70%;
        max-width: 320px;
    }

    .bio-img-2 img {
        height: 230px;
    }

    .bio-experience-badge {
        width: 90px;
        height: 90px;
    }

    .experience-number {
        font-size: 28px;
    }

    .experience-label {
        font-size: 10px;
    }

    .bio-section {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .bio-credentials-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .credential-separator {
        display: none;
    }

    .bio-experience h3,
    .bio-philosophy h3 {
        font-size: 20px;
    }

    .bio-cta-buttons {
        flex-direction: column;
    }

    .bio-cta-buttons .btn-default {
        width: 100%;
        text-align: center;
    }

    .bio-credentials-badge {
        position: static;
        margin-top: 30px;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .bio-experience-badge {
        position: static;
        margin: 20px auto;
    }

    .bio-accent-line {
        display: none;
    }

    .bio-images-container::before,
    .bio-images-container::after {
        display: none;
    }

    .bio-images-container {
        padding-right: 0;
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bio-img-1 {
        position: static;
        width: 80%;
        max-width: 300px;
    }

    .bio-img-1 img {
        height: 380px;
    }

    .bio-img-2 {
        position: static;
        width: 90%;
        max-width: 100%;
        margin-top: 20px;
    }

    .bio-img-2 img {
        height: 180px;
    }
}

@media (max-width: 576px) {
    .bio-section {
        padding: 40px 0;
    }

    .bio-badge-content h4 {
        font-size: 16px;
    }

    .bio-badge-content p {
        font-size: 13px;
    }

    .bio-philosophy-highlight {
        padding: 20px 20px;
    }

    .bio-img-1 {
        width: 100%;
    }

    .bio-img-1 img {
        height: 350px;
    }

    .bio-img-2 img {
        height: 160px;
    }

    .bio-experience-badge {
        width: 80px;
        height: 80px;
    }

    .experience-number {
        font-size: 24px;
    }

    .experience-label {
        font-size: 9px;
    }
}

/* ========================================
   Homepage Conditions Highlight Section Custom Styles
   Section: new_homepage_conditions.html
   ======================================== */

/* Homepage Conditions Section - new_homepage_conditions.html */
.homepage-conditions-section {
    padding: 100px 0;
    background: #f8f6f4;
    position: relative;
}

/* Conditions Cards Grid Container - new_homepage_conditions.html */
.conditions-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 40px;
}

/* Individual Condition Card - new_homepage_conditions.html */
.condition-card {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.condition-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #7c5c47 0%, #9d7d6a 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.condition-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(124, 92, 71, 0.15);
    border-color: #d4c5b9;
}

.condition-card:hover::before {
    transform: scaleX(1);
}

/* Condition Card Icon/Badge - new_homepage_conditions.html */
.condition-card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f8f6f4 0%, #e8ddd4 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 28px;
    color: #7c5c47;
    transition: all 0.4s ease;
}

.condition-card:hover .condition-card-icon {
    background: linear-gradient(135deg, #7c5c47 0%, #9d7d6a 100%);
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

/* Condition Card Title - new_homepage_conditions.html */
.condition-card-title {
    font-family: 'Marcellus', serif;
    font-size: 24px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Condition Card Description - new_homepage_conditions.html */
.condition-card-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Conditions CTA Button Container - new_homepage_conditions.html */
.conditions-cta {
    text-align: center;
    margin-top: 20px;
}

/* Responsive Design for Homepage Conditions Section - new_homepage_conditions.html */
@media (max-width: 992px) {
    .conditions-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .homepage-conditions-section {
        padding: 80px 0;
    }

    .condition-card {
        padding: 35px 25px;
    }
}

@media (max-width: 768px) {
    .conditions-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }

    .homepage-conditions-section {
        padding: 60px 0;
    }

    .condition-card {
        padding: 30px 25px;
    }

    .condition-card-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .condition-card-title {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .homepage-conditions-section {
        padding: 50px 0;
    }

    .condition-card {
        padding: 25px 20px;
    }

    .condition-card-title {
        font-size: 20px;
    }

    .condition-card-description {
        font-size: 14px;
    }
}

/* ========================================
   Case Studies Section Custom Styles
   Section: new_casestudies.html
   ======================================== */

/* Used in: new_casestudies.html */
.casestudies-section {
    padding: 100px 0;
    background: #f8f6f4;
    position: relative;
}

/* Used in: new_casestudies.html */
.casestudies-header {
    margin-bottom: 60px;
}

/* Used in: new_casestudies.html */
.casestudies-header .section-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #7c5c47;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

/* Used in: new_casestudies.html */
.casestudies-header .section-title {
    font-family: 'Marcellus', serif;
    font-size: 42px;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Used in: new_casestudies.html */
.casestudies-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 30px;
    margin-bottom: 50px;
}

/* Used in: new_casestudies.html */
.casestudies-supporting-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Used in: new_casestudies.html */
.casestudy-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.35s ease-out;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

/* Used in: new_casestudies.html */
.casestudy-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(124, 92, 71, 0.2);
}

/* Used in: new_casestudies.html - Clickable card overlay */
.card-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}

/* Used in: new_casestudies.html */
.casestudy-image-container {
    position: relative;
    overflow: hidden;
}

/* Used in: new_casestudies.html - Featured card portrait image */
.casestudy-featured .casestudy-image-container {
    height: 550px;
}

/* Used in: new_casestudies.html - Supporting card landscape image */
.casestudy-supporting .casestudy-image-container {
    height: 260px;
}

/* Used in: new_casestudies.html */
.casestudy-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease-out;
}

/* Used in: new_casestudies.html */
.casestudy-card:hover .casestudy-image {
    transform: scale(1.05);
}

/* Used in: new_casestudies.html - Desert Clay overlay on hover */
.casestudy-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #D4795B;
    opacity: 0;
    transition: opacity 0.35s ease-out;
    pointer-events: none;
}

/* Used in: new_casestudies.html */
.casestudy-card:hover .casestudy-image-overlay {
    opacity: 0.25;
}

/* Used in: new_casestudies.html */
.casestudy-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Used in: new_casestudies.html */
.casestudy-visible-content {
    margin-bottom: 20px;
}

/* Used in: new_casestudies.html - Category badge */
.casestudy-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: #B85C3F;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 15px;
}

/* Used in: new_casestudies.html */
.casestudy-headline {
    font-family: 'Marcellus', serif;
    font-size: 24px;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.3;
    margin-bottom: 12px;
}

/* Used in: new_casestudies.html */
.casestudy-teaser {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Used in: new_casestudies.html - Progressive disclosure content (hidden initially, shown on hover for desktop/tablet) */
.casestudy-progressive-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.35s ease-out, max-height 0.35s ease-out;
}

/* Used in: new_casestudies.html */
.casestudy-card:hover .casestudy-progressive-content {
    opacity: 1;
    max-height: 500px;
}

/* Used in: new_casestudies.html */
.casestudy-challenge,
.casestudy-solution {
    margin-bottom: 20px;
}

/* Used in: new_casestudies.html */
.casestudy-challenge:last-child,
.casestudy-solution:last-child {
    margin-bottom: 0;
}

/* Used in: new_casestudies.html */
.detail-label {
    font-size: 16px;
    font-weight: 600;
    color: #7c5c47;
    margin-bottom: 8px;
}

/* Used in: new_casestudies.html */
.casestudy-challenge p,
.casestudy-solution p {
    font-size: 15px;
    color: #2c2c2c;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Used in: new_casestudies.html */
.casestudies-cta {
    margin-top: 20px;
}

/* Responsive Design for Case Studies Section */

/* Tablet: Featured full width, supporting side-by-side */
@media (max-width: 992px) {
    /* Used in: new_casestudies.html */
    .casestudies-section {
        padding: 80px 0;
    }

    /* Used in: new_casestudies.html */
    .casestudies-header .section-title {
        font-size: 36px;
    }

    /* Used in: new_casestudies.html */
    .casestudies-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Used in: new_casestudies.html */
    .casestudies-supporting-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-featured .casestudy-image-container {
        height: 450px;
    }
}

/* Mobile: All stacked, full content visible (no progressive disclosure) */
@media (max-width: 768px) {
    /* Used in: new_casestudies.html */
    .casestudies-section {
        padding: 60px 0;
    }

    /* Used in: new_casestudies.html */
    .casestudies-header {
        margin-bottom: 40px;
    }

    /* Used in: new_casestudies.html */
    .casestudies-header .section-title {
        font-size: 32px;
    }

    /* Used in: new_casestudies.html */
    .casestudies-supporting-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-featured .casestudy-image-container {
        height: 380px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-supporting .casestudy-image-container {
        height: 240px;
    }

    /* Used in: new_casestudies.html - Show all content on mobile (no hover effect) */
    .casestudy-progressive-content {
        opacity: 1;
        max-height: none;
        overflow: visible;
        margin-top: 20px;
    }

    /* Used in: new_casestudies.html - Disable hover lift on mobile */
    .casestudy-card:hover {
        transform: none;
    }

    /* Used in: new_casestudies.html */
    .casestudy-content {
        padding: 25px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-headline {
        font-size: 22px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-teaser {
        font-size: 15px;
    }

    /* Used in: new_casestudies.html */
    .detail-label {
        font-size: 15px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-challenge p,
    .casestudy-solution p {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    /* Used in: new_casestudies.html */
    .casestudies-section {
        padding: 50px 0;
    }

    /* Used in: new_casestudies.html */
    .casestudies-header .section-title {
        font-size: 28px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-featured .casestudy-image-container {
        height: 320px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-supporting .casestudy-image-container {
        height: 220px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-content {
        padding: 20px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-headline {
        font-size: 20px;
    }

    /* Used in: new_casestudies.html */
    .casestudy-category {
        font-size: 11px;
        padding: 5px 12px;
    }
}

/* ========================================
   Office Hours Section Custom Styles
   ======================================== */

/* Office Hours Grid Container */
.office-hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

/* Individual Office Hours Card */
.office-hours-card {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 30px 25px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.office-hours-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #7c5c47 0%, #9d7d6a 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.office-hours-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.office-hours-card:hover::before {
    transform: scaleX(1);
}

/* Day Name Styling */
.office-hours-day {
    font-family: 'Marcellus', serif;
    font-size: 24px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* Time Display */
.office-hours-time {
    font-size: 18px;
    font-weight: 600;
    color: #7c5c47;
    margin-bottom: 10px;
    display: inline-block;
    padding: 8px 20px;
    background: #f8f6f4;
    border-radius: 20px;
}

/* Time Description */
.office-hours-description {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    line-height: 1.6;
}

/* Extended Hours Badge */
.office-hours-card.extended-hours .office-hours-time {
    background: #e8ddd4;
    color: #5a4435;
}

/* Weekend Hours Styling */
.office-hours-card.weekend-hours {
    border-color: #d4c5b9;
}

.office-hours-card.weekend-hours .office-hours-time {
    background: #f0e9e3;
}

/* Closed Day Styling */
.office-hours-card.closed {
    background: #f8f8f8;
    border-color: #ddd;
}

.office-hours-card.closed .office-hours-time {
    background: #e8e8e8;
    color: #999;
}

.office-hours-card.closed .office-hours-day {
    color: #999;
}

/* Appointment Types Section */
.appointment-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

/* Appointment Type Card */
.appointment-type-card {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
}

.appointment-type-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #7c5c47 0%, #9d7d6a 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.appointment-type-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.appointment-type-card:hover::after {
    transform: scaleX(1);
}

/* Appointment Type Badge */
.appointment-type-badge {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #f8f6f4;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    font-weight: 700;
    color: #7c5c47;
    margin-bottom: 20px;
}

/* Appointment Type Title */
.appointment-type-title {
    font-family: 'Marcellus', serif;
    font-size: 20px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 12px;
}

/* Appointment Type Description */
.appointment-type-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

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

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

@media (max-width: 576px) {
    .office-hours-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .appointment-types-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .office-hours-card {
        padding: 25px 20px;
    }

    .appointment-type-card {
        padding: 25px 20px;
    }
}

/* ========================================
   The Solana Difference Section Custom Styles
   Section: new_thesolanadifference.html
   ======================================== */

/* Used in: new_thesolanadifference.html */
.solana-difference-section {
    padding: 80px 0;
    background: #F5F1E8;
    position: relative;
}

/* Used in: new_thesolanadifference.html */
.solana-difference-headline {
    font-family: 'Marcellus', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #6B5347;
    margin-bottom: 60px;
    line-height: 1.3;
}

/* Used in: new_thesolanadifference.html */
.solana-difference-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 60px;
}

/* Used in: new_thesolanadifference.html */
.difference-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Used in: new_thesolanadifference.html */
.difference-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Used in: new_thesolanadifference.html */
.difference-card-icon {
    width: 48px;
    height: 48px;
    background: #C89F7C;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 22px;
    transition: all 0.35s ease;
}

/* Used in: new_thesolanadifference.html */
.difference-card:hover .difference-card-icon {
    background: #6B5347;
    transform: scale(1.1) rotate(5deg);
}

/* Used in: new_thesolanadifference.html */
.difference-card-headline {
    font-family: 'Marcellus', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #6B5347;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* Used in: new_thesolanadifference.html */
.difference-card-body {
    font-size: 1rem;
    color: #6B5347;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Used in: new_thesolanadifference.html */
.solana-difference-cta {
    text-align: center;
    margin-top: 60px;
}

/* Used in: new_thesolanadifference.html */
.cta-secondary-text {
    font-size: 15px;
    color: #6B5347;
    margin-top: 15px;
    margin-bottom: 0;
    font-weight: 500;
}

/* Responsive Design for The Solana Difference Section */

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
    /* Used in: new_thesolanadifference.html */
    .solana-difference-section {
        padding: 60px 0;
    }

    /* Used in: new_thesolanadifference.html */
    .solana-difference-headline {
        font-size: 2rem;
        margin-bottom: 50px;
    }

    /* Used in: new_thesolanadifference.html */
    .solana-difference-grid {
        gap: 28px;
    }

    /* Used in: new_thesolanadifference.html */
    .difference-card {
        padding: 28px;
    }

    /* Used in: new_thesolanadifference.html */
    .difference-card-headline {
        font-size: 1.35rem;
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    /* Used in: new_thesolanadifference.html */
    .solana-difference-section {
        padding: 50px 0;
    }

    /* Used in: new_thesolanadifference.html */
    .solana-difference-headline {
        font-size: 1.75rem;
        margin-bottom: 40px;
    }

    /* Used in: new_thesolanadifference.html */
    .solana-difference-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 24px;
        margin-bottom: 50px;
    }

    /* Used in: new_thesolanadifference.html */
    .difference-card {
        padding: 24px;
    }

    /* Used in: new_thesolanadifference.html */
    .difference-card-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* Used in: new_thesolanadifference.html */
    .difference-card-headline {
        font-size: 1.25rem;
    }

    /* Used in: new_thesolanadifference.html */
    .difference-card-body {
        font-size: 0.95rem;
    }

    /* Used in: new_thesolanadifference.html */
    .solana-difference-cta {
        margin-top: 50px;
    }

    /* Used in: new_thesolanadifference.html */
    .cta-secondary-text {
        font-size: 14px;
    }
}

/* ========================================
   Case Studies Overview Section Custom Styles
   Section: new_casestudies_overview.html
   ======================================== */

/* Used in: new_casestudies_overview.html */
.casestudies-overview-section {
    padding: 60px 0;
    background: #EBE7DC; /* Darker than card Sand for visual separation */
    position: relative;
}

/* Used in: new_casestudies_overview.html */
.casestudies-overview-header {
    margin-bottom: 50px;
}

/* Used in: new_casestudies_overview.html */
.casestudies-overview-title {
    font-family: 'Marcellus', serif;
    font-size: 36px;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* Used in: new_casestudies_overview.html */
.casestudies-overview-subheader {
    font-size: 16px;
    color: #2c2c2c;
    line-height: 1.6;
    opacity: 0.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Used in: new_casestudies_overview.html */
.casestudies-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    margin-bottom: 40px;
}

/* Used in: new_casestudies_overview.html */
.casestudy-overview-card {
    background: #F5F1E8; /* Sand - warm brand color */
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    /* Enhanced double-layered shadow for depth */
    box-shadow:
        0 4px 16px rgba(107, 83, 71, 0.14),
        0 2px 4px rgba(107, 83, 71, 0.06);
    /* Subtle border for definition */
    border: 1px solid rgba(107, 83, 71, 0.08);
    /* Enhanced left border - Desert Clay brand anchor */
    border-left: 4px solid #D4795B;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Used in: new_casestudies_overview.html - Sunrise Peach corner glow */
.casestudy-overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 30%;
    background: radial-gradient(circle at top right, rgba(232, 176, 135, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-top-right-radius: 16px;
}

/* Used in: new_casestudies_overview.html */
.casestudy-overview-card:hover {
    transform: translateY(-4px);
    /* Stronger double-layered hover shadow */
    box-shadow:
        0 8px 24px rgba(107, 83, 71, 0.20),
        0 4px 8px rgba(107, 83, 71, 0.08);
    /* Darker Desert Clay on left border */
    border-left-color: #C36A4F;
    /* Desert Clay hint on general border */
    border-color: rgba(212, 121, 91, 0.2);
}

/* Used in: new_casestudies_overview.html */
.casestudy-condition-label {
    font-size: 22px;
    font-weight: 700;
    color: #6B5347;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
    padding: 24px 20px;
    background: #F5F1E8;
    position: relative;
    z-index: 2;
}

/* Used in: new_casestudies_overview.html */
.casestudy-split-container {
    display: flex;
    align-items: stretch;
    flex: 1;
    position: relative;
    padding: 0;
    gap: 0;
}

/* Used in: new_casestudies_overview.html */
.casestudy-before,
.casestudy-after {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Used in: new_casestudies_overview.html - Before section with harsh desert photography */
.casestudy-before {
    position: relative;
    background-color: #F5F1E8;
}

/* Used in: new_casestudies_overview.html - Before section harsh desert photo layer (pseudo-element) */
.casestudy-before::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://images.unsplash.com/photo-1501594907352-04cda38ebc29?q=80&w=1400&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.24;
    filter: saturate(0.28);
    z-index: 0;
    pointer-events: none;
}

/* Used in: new_casestudies_overview.html - Before section Earth Brown tint layer */
.casestudy-before::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(107, 83, 71, 0.10);
    z-index: 0;
    pointer-events: none;
}

/* Used in: new_casestudies_overview.html - After section with calm desert photography */
.casestudy-after {
    position: relative;
    background-color: #F5F1E8;
}

/* Used in: new_casestudies_overview.html - After section calm desert photo layer (pseudo-element) */
.casestudy-after::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://images.unsplash.com/photo-1509316785289-025f5b846b35?q=80&w=1400&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.24;
    filter: saturate(0.28);
    z-index: 0;
    pointer-events: none;
}

/* Used in: new_casestudies_overview.html - After section Sunrise Peach warmth layer */
.casestudy-after::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(232, 176, 135, 0.04);
    z-index: 0;
    pointer-events: none;
}

/* Used in: new_casestudies_overview.html - Ensure text sits above photo layers */
.split-section-label {
    font-size: 16px;
    font-weight: 700;
    color: #6B5347;
    margin: 0 0 8px 0;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    background: rgba(245, 241, 232, 0.85);
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Used in: new_casestudies_overview.html - Ensure text sits above photo layers */
.split-section-content {
    font-size: 13px;
    color: #6B5347;
    line-height: 1.6;
    margin: 0;
    flex: 1;
    position: relative;
    z-index: 1;
    font-weight: 400;
    overflow: hidden;
}

/* Used in: new_casestudies_overview.html - Content wrapper for before section */
.casestudy-before .section-content-wrapper {
    background: rgba(245, 241, 232, 0.92);
    padding: 14px;
    border-radius: 8px;
    margin: 18px;
    width: calc(100% - 36px);
    position: relative;
    z-index: 2;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

/* Used in: new_casestudies_overview.html - Content wrapper for after section */
.casestudy-after .section-content-wrapper {
    background: rgba(245, 241, 232, 0.92);
    padding: 14px;
    border-radius: 8px;
    margin: 18px;
    width: calc(100% - 36px);
    position: relative;
    z-index: 2;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

/* Used in: new_casestudies_overview.html - Divider must have position:relative for arrow absolute positioning */
.casestudy-divider {
    width: 5px;
    background: #D4795B;
    position: relative;
    flex-shrink: 0;
    margin: 18px 0;
}

/* Used in: new_casestudies_overview.html - Arrow centered ON the divider line (absolute positioning) */
.divider-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    color: #D4795B;
    background: #F5F1E8;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(212, 121, 91, 0.12);
    z-index: 2;
}

/* Used in: new_casestudies_overview.html - Treatment details and CTA split section */
.casestudy-treatment {
    background: #F5F1E8;
    border-top: 2px solid rgba(107, 83, 71, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    gap: 20px;
}

/* Used in: new_casestudies_overview.html - Left zone: treatment information */
.treatment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Used in: new_casestudies_overview.html - Treatment duration (most prominent) */
.treatment-duration {
    font-size: 12px;
    font-weight: 600;
    color: #6B5347;
    letter-spacing: 0.3px;
}

/* Used in: new_casestudies_overview.html - Medication/dose (secondary) */
.treatment-medication {
    font-size: 11px;
    color: rgba(107, 83, 71, 0.75);
    font-weight: 500;
}

/* Used in: new_casestudies_overview.html - Method/approach (tertiary) */
.treatment-method {
    font-size: 10px;
    color: rgba(107, 83, 71, 0.6);
    font-style: italic;
}

/* Used in: new_casestudies_overview.html - Right zone: CTA button */
.learn-more-btn {
    background: #B85C3F;
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Used in: new_casestudies_overview.html - Button hover effects */
.learn-more-btn:hover {
    background: #C36A4F;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(212, 121, 91, 0.3);
}

/* Used in: new_casestudies_overview.html - Arrow icon after button text */
.learn-more-btn::after {
    content: "→";
    font-size: 14px;
    transition: transform 0.2s ease;
}

/* Used in: new_casestudies_overview.html - Arrow animation on hover */
.learn-more-btn:hover::after {
    transform: translateX(3px);
}

/* Responsive Design for Case Studies Overview Section */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
    /* Used in: new_casestudies_overview.html */
    .casestudies-overview-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Used in: new_casestudies_overview.html */
    .casestudies-overview-section {
        padding: 50px 0;
    }

    /* Used in: new_casestudies_overview.html */
    .casestudy-overview-card {
        min-height: 380px;
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    /* Used in: new_casestudies_overview.html */
    .casestudies-overview-section {
        padding: 40px 0;
    }

    /* Used in: new_casestudies_overview.html */
    .casestudies-overview-title {
        font-size: 28px;
    }

    /* Used in: new_casestudies_overview.html */
    .casestudies-overview-subheader {
        font-size: 15px;
    }

    /* Used in: new_casestudies_overview.html */
    .casestudies-overview-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Used in: new_casestudies_overview.html */
    .casestudy-overview-card {
        height: auto;
        min-height: 320px;
    }

    /* Used in: new_casestudies_overview.html - Stack before/after vertically on mobile */
    .casestudy-split-container {
        flex-direction: column;
    }

    /* Used in: new_casestudies_overview.html - Make divider horizontal on mobile */
    .casestudy-divider {
        width: 100%;
        height: 5px;
        margin: 16px 0;
    }

    /* Used in: new_casestudies_overview.html - Rotate arrow to point down on mobile */
    .divider-arrow {
        transform: translate(-50%, -50%) rotate(90deg);
        top: 50%;
    }

    /* Used in: new_casestudies_overview.html */
    .casestudy-condition-label {
        font-size: 12px;
        padding: 18px 20px 14px;
    }

    /* Used in: new_casestudies_overview.html */
    .casestudy-before,
    .casestudy-after {
        padding: 0;
    }

    /* Used in: new_casestudies_overview.html - Mobile adjustments for content wrappers */
    .casestudy-before .section-content-wrapper,
    .casestudy-after .section-content-wrapper {
        margin: 16px;
        padding: 12px;
        height: 180px;
        width: calc(100% - 32px);
    }

    /* Used in: new_casestudies_overview.html - Stack treatment section vertically on mobile */
    .casestudy-treatment {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    /* Used in: new_casestudies_overview.html - Tighten gaps on mobile */
    .treatment-info {
        gap: 3px;
    }

    /* Used in: new_casestudies_overview.html - Full width button on mobile */
    .learn-more-btn {
        width: 100%;
        justify-content: center;
    }

    /* Used in: new_casestudies_overview.html */
    .split-section-label {
        font-size: 12px;
        margin: 0 0 8px 0;
    }

    /* Used in: new_casestudies_overview.html */
    .split-section-content {
        font-size: 11px;
        line-height: 1.5;
    }
}

/* ========================================
   Services & Fees Page Custom Styles
   Section: new_services_fees.html
   ======================================== */

/* Main Section Container - new_services_fees.html */
.services-fees-section {
    padding: 80px 0;
    position: relative;
}

/* Services Page Header - new_services_fees.html */
.services-page-header {
    /* Inherits from .page-header and .page-header-enhanced */
    /* Background image set via inline style */
}

/* Override the default page-header::before with enhanced gradient */
.page-header.services-page-header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Multi-layer gradient: top fade for navbar, overall opacity, bottom fade */
    background:
        linear-gradient(180deg, rgba(38, 38, 38, 0.9) 0%, rgba(38, 38, 38, 0.5) 20%, transparent 45%),
        linear-gradient(180deg, transparent 65%, rgba(38, 38, 38, 0.4) 100%),
        linear-gradient(270deg, rgba(38, 38, 38, 0) 50%, rgba(38, 38, 38, 0.5) 100%),
        rgba(107, 83, 71, 0.4) !important;
}

/* Section 2: Appointment Types & Pricing - new_services_fees.html */
.appointment-pricing-section {
    background: #ffffff;
    padding: 80px 0;
}

/* Pricing Table - new_services_fees.html */
.pricing-table {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(107, 83, 71, 0.08), 0 4px 16px rgba(107, 83, 71, 0.12);
    margin-bottom: 40px;
}

.pricing-table-header {
    display: grid;
    grid-template-columns: 200px 100px 1fr;
    gap: 0;
    background: var(--earth-brown, #6B5347);
    color: #ffffff;
}

.pricing-table-header .pricing-table-col {
    padding: 14px 24px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pricing-table-header .pricing-table-col-service {
    padding-left: 28px;
}

.pricing-table-header .pricing-table-col-price {
    text-align: center;
    padding: 14px 16px;
}

.pricing-table-header .pricing-table-col-description {
    border-left: 1px solid rgba(255,255,255,0.15);
}

.pricing-table-row {
    display: grid;
    grid-template-columns: 200px 100px 1fr;
    gap: 0;
    min-height: 120px;
    border-bottom: 1px solid #f0ece8;
    align-items: center;
    transition: background 0.2s ease;
    background: #ffffff;
}

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

.pricing-table-row:nth-child(even) {
    background: #faf9f8;
}

.pricing-table-row:hover {
    background: #f7f5f3;
}

/* Service Column */
.pricing-table-col-service {
    padding: 20px 16px 20px 28px;
    align-self: center;
}

.pricing-table-col-service h3 {
    font-family: 'Marcellus', serif;
    font-size: 17px;
    font-weight: 400;
    color: #2c2c2c;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
}

/* Price Column */
.pricing-table-col-price {
    padding: 20px 16px;
    text-align: center;
    align-self: center;
}

.pricing-amount {
    font-family: 'Marcellus', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--earth-brown, #6B5347);
    line-height: 1;
    display: block;
}

.pricing-amount-featured {
    font-size: 28px;
    color: var(--clay-deep);
}

.pricing-amount-free {
    font-family: 'Marcellus', serif;
    font-size: 20px;
    color: var(--sage-text);
    font-weight: 400;
    display: block;
    line-height: 1;
}

/* Description Column */
.pricing-table-col-description {
    padding: 20px 28px 20px 24px;
    border-left: 1px solid #f0ece8;
    align-self: center;
}

.pricing-table-col-description p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Row Badges - High Contrast */
.pricing-row-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: #666;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    border: 1px solid #d4d0cc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.pricing-row-badge-featured {
    background: #B85C3F;
    color: #ffffff;
    border-color: var(--desert-clay, #D4795B);
}

.pricing-row-badge-value {
    background: #667D58;
    color: #ffffff;
    border-color: var(--warm-sage, #9CAF88);
}

/* Row Note - Consistent Styling */
.pricing-row-note {
    font-size: 13px;
    color: #888;
    font-style: italic;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e8e4df;
    line-height: 1.5;
}

/* Row Accent Borders */
.pricing-row-featured {
    border-left: 4px solid var(--desert-clay, #D4795B);
}

.pricing-row-featured:nth-child(even),
.pricing-row-featured {
    background: #fffbf9;
}

.pricing-row-featured:hover {
    background: #fff7f4;
}

.pricing-row-value {
    border-left: 4px solid var(--warm-sage, #9CAF88);
}

.pricing-row-value:nth-child(even),
.pricing-row-value {
    background: #fbfdf9;
}

.pricing-row-value:hover {
    background: #f7faf4;
}

.pricing-row-sage {
    border-left: 4px solid var(--warm-sage, #9CAF88);
}

.pricing-row-standard {
    border-left: 4px solid var(--desert-clay, #D4795B);
}

.pricing-row-muted {
    border-left: 4px solid #a99b91;
}

/* Pricing CTA Container - new_services_fees.html */
.pricing-cta-container {
    text-align: center;
    margin-top: 30px;
}

/* Section 3: Payment Information - new_services_fees.html */
.payment-info-section {
    background: #ffffff;
}

/* Payment Explanation - new_services_fees.html */
.payment-explanation {
    margin-bottom: 40px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.payment-explanation p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
}

/* Subsection Heading - new_services_fees.html */
.subsection-heading {
    font-family: 'Marcellus', serif;
    font-size: 26px;
    font-weight: 600;
    color: #2c2c2c;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 40px;
}

/* Payment Methods Grid - new_services_fees.html */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

/* Used in: new_services_fees.html */
/* Single full-width card: icon left, text right (replaces the retired .payment-methods-two-col) */
.payment-methods-grid.payment-methods-single {
    grid-template-columns: 1fr;
}

/* Used in: new_services_fees.html */
.payment-methods-single .payment-method-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    align-items: center;
    text-align: left;
    padding: 24px 30px;
}

/* Used in: new_services_fees.html */
.payment-methods-single .payment-method-icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
}

/* Used in: new_services_fees.html */
.payment-methods-single .payment-method-item h4 {
    margin-bottom: 4px;
}

/* Used in: new_services_fees.html */
.payment-methods-single .payment-method-item:hover {
    transform: none;
    box-shadow: none;
}

/* Payment Method Item - new_services_fees.html */
.payment-method-item {
    background: #f8f6f4;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 30px 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.payment-method-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Payment Method Icon - new_services_fees.html */
.payment-method-icon {
    font-size: 36px;
    margin-bottom: 15px;
    color: var(--earth-brown, #6B5347);
}

.payment-method-icon svg {
    width: 36px;
    height: 36px;
}

.payment-method-item h4 {
    font-family: 'Marcellus', serif;
    font-size: 18px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 10px;
}

.payment-method-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Cancellation Policy Box - new_services_fees.html */
.cancellation-policy-box {
    background: #fff8f0;
    border: 2px solid #D4795B;
    border-radius: 8px;
    padding: 30px 35px;
    margin-top: 40px;
}

.cancellation-policy-box h4 {
    font-family: 'Marcellus', serif;
    font-size: 22px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 20px;
}

.cancellation-policy-box p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 12px;
}

.cancellation-policy-box .policy-note {
    font-size: 14px;
    color: #999;
    font-style: italic;
    margin-top: 15px;
    margin-bottom: 0;
}

/* Section 4: Insurance & Billing - new_services_fees.html */
.insurance-section {
    background: #f8f6f4;
}

/* Insurance Explanation - new_services_fees.html */
.insurance-explanation {
    margin-bottom: 50px;
}

.insurance-explanation h3 {
    font-family: 'Marcellus', serif;
    font-size: 28px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 20px;
}

.insurance-explanation p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Insurance Benefits List - new_services_fees.html */
.insurance-benefits-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.insurance-benefits-list li {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    padding-left: 30px;
    position: relative;
    margin-bottom: 15px;
}

.insurance-benefits-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #7c5c47;
    font-weight: 700;
    font-size: 18px;
}

/* Superbill Info Box - new_services_fees.html */
/* Used in: new_services_fees.html */
.superbill-info-box {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 50px;
}

/* Used in: new_services_fees.html */
.superbill-info-box h3 {
    font-family: 'Marcellus', serif;
    font-size: 26px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 12px;
}

/* Used in: new_services_fees.html */
.superbill-info-box > p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Good Faith Estimate Styles - new_services_fees.html */
/* Note: GFE is now inline within Payment section, not a standalone section */

/* GFE Wrapper - Compact Horizontal Layout - new_services_fees.html */
.gfe-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background: #ffffff;
    border: 1px solid #e0dcd8;
    border-left: 4px solid var(--earth-brown, #6B5347);
    border-radius: 8px;
    padding: 30px 35px;
    box-shadow: 0 2px 8px rgba(107, 83, 71, 0.06);
    margin-top: 36px;
}

.gfe-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--sand, #F5F1E8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--earth-brown, #6B5347);
}

.gfe-icon svg {
    width: 32px;
    height: 32px;
}

.gfe-content-area {
    flex: 1;
    min-width: 0;
}

.gfe-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.gfe-header h3 {
    font-family: 'Marcellus', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--earth-brown, #6B5347);
    margin: 0;
}

/* GFE Badge - new_services_fees.html */
.gfe-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--earth-brown, #6B5347);
    background: var(--sand, #F5F1E8);
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gfe-body p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 10px;
}

.gfe-link {
    font-size: 13px;
    color: var(--clay-text);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.gfe-link:hover {
    color: var(--earth-brown, #6B5347);
    text-decoration: underline;
}

/* Legacy GFE Styles (keep for backwards compatibility) */
.gfe-callout-box {
    background: #F5F1E8;
    border: 2px solid #d4c5b9;
    border-radius: 10px;
    padding: 40px 45px;
}

.gfe-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.gfe-heading h3 {
    font-family: 'Marcellus', serif;
    font-size: 28px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 0;
}

.gfe-content p {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
}

.gfe-content strong {
    color: #2c2c2c;
    font-weight: 600;
}

.gfe-fee-schedule {
    background: #ffffff;
    border: 1px solid #d4c5b9;
    border-radius: 8px;
    padding: 25px 30px;
    margin: 25px 0;
}

.gfe-fee-schedule h4 {
    font-family: 'Marcellus', serif;
    font-size: 20px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 15px;
}

.gfe-fee-schedule ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gfe-fee-schedule li {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.gfe-fee-schedule li:last-child {
    border-bottom: none;
}

.gfe-cta-link {
    margin-top: 25px;
    text-align: center;
}

.btn-link {
    color: #7c5c47;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.btn-link:hover {
    color: var(--clay-text);
}

/* Section 7: Final CTA with Parallax - new_services_fees.html */
.services-final-cta-section {
    position: relative;
    padding: 100px 0 120px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.services-final-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(107, 83, 71, 0.75) 0%,
        rgba(107, 83, 71, 0.85) 100%
    );
    z-index: 1;
}

.services-final-cta-section .container {
    position: relative;
    z-index: 2;
}

.final-cta-content {
    text-align: center;
    position: relative;
}

.final-cta-content h2 {
    font-family: 'Marcellus', serif;
    font-size: 42px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.final-cta-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 50px;
    font-weight: 300;
}

.final-cta-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 800px;
    margin: 0 auto 50px;
}

.final-cta-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 35px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.final-cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.final-cta-card-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    background: #B85C3F;
    padding: 5px 14px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.final-cta-card-badge-secondary {
    background: #667D58;
}

.final-cta-card h3 {
    font-family: 'Marcellus', serif;
    font-size: 24px;
    font-weight: 400;
    color: #2c2c2c;
    margin-bottom: 8px;
}

.final-cta-card-price {
    font-family: 'Marcellus', serif;
    font-size: 36px;
    font-weight: 400;
    color: var(--clay-deep);
    margin-bottom: 16px;
}

.final-cta-card-price-free {
    color: var(--sage-text);
    font-size: 32px;
}

.final-cta-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24px;
}

.final-cta-primary {
    border-top: 5px solid var(--desert-clay, #D4795B);
}

.final-cta-secondary {
    border-top: 4px solid var(--warm-sage, #9CAF88);
}

/* CTA Buttons - new_services_fees.html */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-cta svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

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

.btn-cta-primary {
    background: #B85C3F;
    color: #ffffff;
    border: none;
}

.btn-cta-primary:hover {
    background: #c06a4d;
    color: #ffffff;
}

.btn-cta-secondary {
    background: transparent;
    color: var(--sage-text);
    border: 2px solid var(--warm-sage, #9CAF88);
}

.btn-cta-secondary:hover {
    background: #667D58;
    color: #ffffff;
}

/* Button alignment in cards - new_services_fees.html */
.final-cta-card .btn-cta {
    margin-top: auto;
}

/* Closing Statement - new_services_fees.html */
.final-cta-closing {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 24px 40px;
    max-width: 700px;
    margin: 0 auto;
    backdrop-filter: blur(4px);
}

.final-cta-closing p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    margin: 0;
}

.final-cta-closing a {
    color: var(--sunrise-peach, #E8B087);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease;
}

.final-cta-closing a:hover {
    color: #ffffff;
}

/* Legacy CTA Styles (keep for backwards compatibility) */
.final-cta-note {
    background: rgba(156, 175, 136, 0.1);
    border-radius: 8px;
    padding: 20px 30px;
    max-width: 600px;
    margin: 0 auto;
}

.final-cta-note p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Responsive Design for Services & Fees - new_services_fees.html */

/* Large tablets and small desktops */
@media (max-width: 1200px) {
    .pricing-table-header,
    .pricing-table-row {
        grid-template-columns: 180px 90px 1fr;
    }
}

@media (max-width: 992px) {
    .services-fees-section {
        padding: 60px 0;
    }

    .services-hero-section {
        padding: 80px 0 60px;
    }

    .services-hero-content h1 {
        font-size: 38px;
    }

    /* Pricing table stacked layout */
    .pricing-table-header {
        display: none;
    }

    .pricing-table-row {
        display: block;
        padding: 24px 25px;
        min-height: auto;
    }

    .pricing-table-col-service {
        margin-bottom: 8px;
        padding: 0;
    }

    .pricing-table-col-service h3 {
        white-space: normal;
    }

    .pricing-table-col-price {
        display: block;
        text-align: left;
        margin-bottom: 16px;
        padding: 0;
    }

    .pricing-table-col-description {
        padding: 16px 0 0 0;
        border-top: 1px solid #f0ece8;
        border-left: none;
    }

    .payment-methods-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .final-cta-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* GFE wrapper responsive */
    .gfe-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .gfe-icon {
        margin: 0 auto 15px;
    }

    .gfe-header {
        justify-content: center;
    }

    /* Final CTA parallax - disable fixed on mobile */
    .services-final-cta-section {
        background-attachment: scroll;
        padding: 80px 0;
    }

    .final-cta-content h2 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .services-fees-section {
        padding: 50px 0;
    }

    .services-hero-section {
        padding: 60px 0 50px;
    }

    .services-hero-content h1 {
        font-size: 32px;
    }

    .services-hero-content p {
        font-size: 17px;
    }

    .pricing-table {
        border-radius: 12px;
    }

    .pricing-table-row {
        padding: 20px;
    }

    .pricing-amount {
        font-size: 24px;
    }

    .pricing-amount-featured {
        font-size: 28px;
    }

    .superbill-info-box {
        padding: 30px 25px;
    }

    .gfe-wrapper {
        padding: 20px;
    }

    .gfe-header h3 {
        font-size: 20px;
    }

    .gfe-body p {
        font-size: 13px;
    }

    .final-cta-card {
        padding: 30px 25px;
    }

    .final-cta-closing {
        padding: 20px 25px;
    }

    .final-cta-content h2 {
        font-size: 32px;
    }

    .final-cta-subtitle {
        font-size: 16px;
        margin-bottom: 35px;
    }
}

@media (max-width: 576px) {
    .services-fees-section {
        padding: 40px 0;
    }

    .services-hero-section {
        padding: 50px 0 40px;
    }

    .services-hero-content h1 {
        font-size: 28px;
    }

    .services-hero-content p {
        font-size: 16px;
    }

    .pricing-table-row {
        padding: 18px 15px;
    }

    .pricing-table-col-service h3 {
        font-size: 16px;
    }

    .pricing-amount {
        font-size: 22px;
    }

    .pricing-amount-featured {
        font-size: 26px;
    }

    .pricing-table-col-description p {
        font-size: 13px;
    }

    .payment-method-item {
        padding: 25px 20px;
    }

    .cancellation-policy-box {
        padding: 25px 20px;
    }

    .final-cta-content h2 {
        font-size: 28px;
    }

    .final-cta-card {
        padding: 25px 20px;
    }

    .final-cta-card-price {
        font-size: 30px;
    }

    .final-cta-card-price-free {
        font-size: 26px;
    }

    .btn-cta {
        padding: 12px 20px;
        font-size: 13px;
    }

    .final-cta-closing {
        padding: 16px 20px;
    }

    .final-cta-closing p {
        font-size: 14px;
    }

    .gfe-wrapper {
        padding: 18px;
    }

    .gfe-icon {
        width: 50px;
        height: 50px;
    }

    .gfe-icon svg {
        width: 26px;
        height: 26px;
    }

    .gfe-header h3 {
        font-size: 18px;
    }

}

/* ========================================
   Case Study Detail Sections
   Sections: new_casestudy_hero.html,
             new_casestudy_context_bar.html,
             new_casestudy_problem.html,
             new_casestudy_photo_interlude.html
   ======================================== */

/* Brand Colors */
:root {
    --sand: #F5F1E8;
    --warm-sage: #9CAF88;
    --desert-clay: #D4795B;
    --earth-brown: #6B5347;
    --sunrise-peach: #E8B087;
}

/* ==========================================
   Section 1: Hero Section
   ========================================== */

.casestudy-hero-section {
    position: relative;
    height: 60vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Hero Background */
.casestudy-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.casestudy-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.25) brightness(0.7);
}

.casestudy-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(107, 83, 71, 0.4) 0%,
        rgba(107, 83, 71, 0.7) 100%);
}

/* Hero Content */
.casestudy-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    color: #ffffff;
    padding: 0 20px;
}

/* Breadcrumb Navigation */
.casestudy-breadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
    opacity: 0.9;
}

.breadcrumb-link {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumb-link:hover {
    opacity: 0.7;
}

.breadcrumb-separator {
    margin: 0 8px;
    opacity: 0.6;
}

.breadcrumb-current {
    opacity: 0.8;
}

/* Condition Tag */
.casestudy-condition-tag {
    margin-bottom: 25px;
}

.condition-tag-text {
    display: inline-block;
    padding: 6px 20px;
    background-color: #B85C3F;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
}

/* Hero Title */
.casestudy-hero-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #ffffff;
}

/* Big Outcome Metric */
.casestudy-hero-metric {
    margin-bottom: 20px;
}

.metric-number {
    display: block;
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    color: var(--sunrise-peach);
    margin-bottom: 10px;
}

.metric-label {
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.95;
}

/* Hero Tagline */
.casestudy-hero-tagline {
    font-size: 24px;
    font-weight: 300;
    color: #ffffff;
    opacity: 0.9;
    margin: 0;
}

/* ==========================================
   Section 2: Context Bar
   ========================================== */

.casestudy-context-bar {
    background-color: rgba(156, 175, 136, 0.15);
    border-top: 3px solid var(--desert-clay);
    padding: 25px 0;
}

.context-bar-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.context-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.context-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--earth-brown);
    opacity: 0.7;
}

.context-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--earth-brown);
}

.context-divider {
    width: 1px;
    height: 40px;
    background-color: var(--desert-clay);
    opacity: 0.3;
}

/* ==========================================
   Section 3: Problem Section
   ========================================== */

.casestudy-problem-section {
    background-color: var(--sand);
    padding: 100px 0;
}

.problem-layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 60px;
}

/* Left Column: Context */
.problem-context {
    padding-right: 20px;
}

.problem-header {
    margin-bottom: 25px;
}

.problem-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 15px;
}

.problem-accent-line {
    width: 60px;
    height: 4px;
    background-color: var(--desert-clay);
    border-radius: 2px;
}

.problem-intro {
    font-size: 18px;
    line-height: 1.8;
    color: var(--earth-brown);
    margin-bottom: 35px;
}

/* Baseline Metrics Callout Box */
.baseline-metrics-box {
    background-color: #ffffff;
    border: 2px solid var(--desert-clay);
    border-radius: 8px;
    padding: 25px;
}

.metrics-header {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--clay-text);
    margin-bottom: 20px;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
}

.metric-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--earth-brown);
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--clay-deep);
}

.metric-severity {
    font-size: 12px;
    color: var(--earth-brown);
    opacity: 0.7;
    margin-left: 8px;
}

.metric-divider {
    height: 1px;
    background-color: var(--desert-clay);
    opacity: 0.2;
    margin: 20px 0;
}

.bfis-domains {
    margin-top: 15px;
}

.domain-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--earth-brown);
    margin-bottom: 10px;
}

.domain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.domain-list li {
    font-size: 14px;
    color: var(--earth-brown);
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.domain-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--desert-clay);
    font-weight: 700;
}

/* Right Column: Problem Details */
.problem-details {
    padding-left: 20px;
}

.problem-domain {
    margin-bottom: 40px;
}

.problem-domain:last-child {
    margin-bottom: 0;
}

.domain-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--clay-deep);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.problem-list li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--earth-brown);
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
}

.problem-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--desert-clay);
    font-weight: 700;
}

/* ==========================================
   Section 4: Photo Interlude
   ========================================== */

.casestudy-photo-interlude {
    position: relative;
    height: 40vh;
    min-height: 300px;
    overflow: hidden;
}

.casestudy-photo-interlude.interlude-transition {
    height: 40vh;
}

.casestudy-photo-interlude.interlude-resolution {
    height: 35vh;
}

.photo-interlude-background {
    position: relative;
    width: 100%;
    height: 100%;
}

.photo-interlude-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.25);
    transform: translateZ(0);
    will-change: transform;
}

/* Parallax effect - will be enhanced with JS */
.casestudy-photo-interlude.parallax .photo-interlude-img {
    transform: translateY(var(--parallax-offset, 0));
}

.photo-interlude-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
}

/* ==========================================
   Responsive Design
   ========================================== */

/* Tablet (768-1199px) */
@media (max-width: 1199px) {
    .casestudy-hero-title {
        font-size: 48px;
    }

    .metric-number {
        font-size: 64px;
    }

    .casestudy-hero-tagline {
        font-size: 20px;
    }

    .problem-layout {
        grid-template-columns: 35% 65%;
        gap: 40px;
    }

    .problem-title {
        font-size: 36px;
    }

    .casestudy-photo-interlude {
        height: 30vh;
    }

    .casestudy-photo-interlude.interlude-resolution {
        height: 28vh;
    }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
    .casestudy-hero-section {
        height: 50vh;
        min-height: 400px;
    }

    .casestudy-hero-title {
        font-size: 32px;
    }

    .metric-number {
        font-size: 48px;
    }

    .metric-label {
        font-size: 16px;
    }

    .casestudy-hero-tagline {
        font-size: 18px;
    }

    /* Context Bar - Stack on Mobile */
    .context-bar-items {
        flex-direction: column;
        gap: 15px;
    }

    .context-divider {
        width: 100%;
        height: 1px;
    }

    /* Problem Section - Single Column */
    .casestudy-problem-section {
        padding: 60px 0;
    }

    .problem-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .problem-context,
    .problem-details {
        padding: 0;
    }

    .problem-title {
        font-size: 32px;
    }

    .problem-intro {
        font-size: 16px;
    }

    .baseline-metrics-box {
        padding: 20px;
    }

    /* Photo Interlude - Reduced Height */
    .casestudy-photo-interlude {
        height: 25vh;
        min-height: 200px;
    }

    .casestudy-photo-interlude.interlude-resolution {
        height: 25vh;
    }

    /* Disable parallax on mobile for performance */
    .casestudy-photo-interlude.parallax .photo-interlude-img {
        transform: none !important;
    }
}

/* ==========================================
   Section 5: Assessment Section
   ========================================== */

.casestudy-assessment-section {
    background-color: #ffffff;
    padding: 100px 0;
}

.assessment-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.assessment-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--earth-brown);
    text-align: center;
    margin-bottom: 50px;
}

.assessment-narrative p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--earth-brown);
    margin-bottom: 25px;
}

.assessment-narrative p:last-child {
    margin-bottom: 0;
}

/* ==========================================
   Section 6: Timeline Section
   ========================================== */

.casestudy-timeline-section {
    background-color: var(--sand);
    padding: 100px 0;
}

.timeline-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--earth-brown);
    text-align: center;
    margin-bottom: 60px;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.timeline-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 35px;
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(107, 83, 71, 0.12);
}

.phase-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--clay-text);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--desert-clay);
}

.medication-info {
    margin-bottom: 25px;
}

.med-change {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: var(--earth-brown);
    background-color: rgba(156, 175, 136, 0.15);
    padding: 8px 16px;
    border-radius: 6px;
}

.observations {
    margin-bottom: 25px;
}

.observation-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.observation-item:last-child {
    margin-bottom: 0;
}

.checkmark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warm-sage);
    font-size: 16px;
    font-weight: 700;
}

.observation-text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--earth-brown);
}

.metric-checkpoint {
    background-color: rgba(212, 121, 91, 0.08);
    border-left: 4px solid var(--desert-clay);
    padding: 15px 20px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkpoint-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--earth-brown);
}

.checkpoint-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--clay-deep);
}

/* ==========================================
   Section 8: Transformation Section
   ========================================== */

.casestudy-transformation-section {
    background-color: #ffffff;
    padding: 100px 0;
}

.transformation-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--earth-brown);
    text-align: center;
    margin-bottom: 60px;
}

.transformation-grid {
    display: grid;
    grid-template-columns: 1fr 4px 1fr;
    gap: 50px;
    align-items: start;
}

.transformation-column {
    padding: 30px;
}

.before-column {
    background-color: rgba(107, 83, 71, 0.03);
    border-radius: 12px;
}

.after-column {
    background-color: rgba(156, 175, 136, 0.08);
    border-radius: 12px;
}

.column-header {
    font-size: 24px;
    font-weight: 700;
    color: var(--earth-brown);
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--desert-clay);
}

.transformation-domain {
    margin-bottom: 35px;
}

.transformation-domain:last-child {
    margin-bottom: 0;
}

.domain-name {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--clay-text);
    margin-bottom: 10px;
}

.domain-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--earth-brown);
    margin: 0;
}

.transformation-divider {
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--desert-clay) 10%,
        var(--desert-clay) 90%,
        transparent 100%);
    border-radius: 2px;
    margin: 0 auto;
}

/* ==========================================
   Responsive Design for Sections 5-8
   ========================================== */

/* Tablet (768-1199px) */
@media (max-width: 1199px) {
    .assessment-title,
    .timeline-title,
    .transformation-title {
        font-size: 36px;
    }

    .timeline-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .timeline-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto;
    }

    .transformation-grid {
        gap: 40px;
    }

    .transformation-column {
        padding: 25px;
    }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
    .casestudy-assessment-section,
    .casestudy-timeline-section,
    .casestudy-transformation-section {
        padding: 60px 0;
    }

    .assessment-title,
    .timeline-title,
    .transformation-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .assessment-narrative p {
        font-size: 16px;
        line-height: 1.7;
    }

    /* Timeline - Single Column */
    .timeline-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .timeline-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
    }

    .timeline-card {
        padding: 25px;
    }

    .phase-label {
        font-size: 12px;
    }

    .med-change {
        font-size: 14px;
    }

    .observation-text {
        font-size: 14px;
    }

    .checkpoint-value {
        font-size: 20px;
    }

    /* Transformation - Single Column */
    .transformation-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .transformation-divider {
        display: none;
    }

    .transformation-column {
        padding: 20px;
    }

    .column-header {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .domain-name {
        font-size: 14px;
    }

    .domain-description {
        font-size: 15px;
    }

    .transformation-domain {
        margin-bottom: 25px;
    }
}

/* ==========================================
   Section 9: Metrics Showcase
   ========================================== */

.casestudy-metrics-section {
    background: linear-gradient(135deg,
        rgba(156, 175, 136, 0.12) 0%,
        rgba(232, 176, 135, 0.12) 100%);
    padding: 100px 0;
}

.metrics-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--earth-brown);
    text-align: center;
    margin-bottom: 60px;
}

.metrics-chart-container {
    max-width: 900px;
    margin: 0 auto 60px;
}

.chart-placeholder {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.08);
}

.asrs-progress-visual {
    width: 100%;
}

.progress-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 30px;
    text-align: center;
}

.progress-bars {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.progress-bar-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.week-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--earth-brown);
    min-width: 80px;
}

.progress-bar-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.progress-bar {
    height: 30px;
    background-color: var(--desert-clay);
    border-radius: 6px;
    transition: width 0.5s ease;
    position: relative;
}

.progress-bar.success {
    background-color: var(--warm-sage);
}

.score-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--earth-brown);
    min-width: 60px;
}

.score-label.success {
    color: var(--sage-text);
}

.metrics-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.metric-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(107, 83, 71, 0.12);
}

.metric-icon {
    font-size: 36px;
    margin-bottom: 15px;
    opacity: 0.7;
}

.metric-number {
    font-size: 48px;
    font-weight: 800;
    color: var(--clay-deep);
    line-height: 1;
    margin-bottom: 10px;
}

.metric-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--earth-brown);
    margin-bottom: 12px;
}

.metric-detail {
    font-size: 13px;
    line-height: 1.5;
    color: var(--earth-brown);
    opacity: 0.8;
}

/* ==========================================
   Section 10: Clinical Insights
   ========================================== */

.casestudy-insights-section {
    background-color: var(--sand);
    padding: 100px 0;
}

.insights-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--earth-brown);
    text-align: center;
    margin-bottom: 60px;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.insight-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    position: relative;
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.08);
}

.insight-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 120px;
    font-weight: 900;
    color: var(--clay-deep);
    opacity: 0.08;
    line-height: 1;
    pointer-events: none;
}

.insight-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.insight-explanation {
    font-size: 16px;
    line-height: 1.7;
    color: var(--earth-brown);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ==========================================
   Section 11: Protocol Specifications
   ========================================== */

.casestudy-protocol-section {
    background-color: #ffffff;
    padding: 100px 0;
}

.protocol-layout {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 60px;
    align-items: start;
}

/* Left Column: Specs Box */
.protocol-specs-box {
    background: linear-gradient(135deg, #B85C3F 0%, #A8502F 100%);
    border-radius: 12px;
    padding: 35px 30px;
    color: #ffffff;
    position: sticky;
    top: 100px;
}

.specs-heading {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 30px;
    text-align: center;
}

.spec-item {
    margin-bottom: 20px;
}

.spec-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
}

.spec-value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.spec-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 20px 0;
}

/* Right Column: Detailed Protocol */
.protocol-details {
    padding-left: 20px;
}

.protocol-section-heading {
    font-size: 32px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 40px;
}

.protocol-block {
    margin-bottom: 35px;
}

.protocol-block:last-child {
    margin-bottom: 0;
}

.block-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--clay-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.protocol-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.protocol-list li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--earth-brown);
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
}

.protocol-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--desert-clay);
    font-weight: 700;
}

/* ==========================================
   Section 12: Relevance Check
   ========================================== */

.casestudy-relevance-section {
    background-color: rgba(156, 175, 136, 0.08);
    border-top: 3px solid var(--desert-clay);
    border-bottom: 3px solid var(--desert-clay);
    padding: 100px 0;
}

.relevance-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.relevance-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--earth-brown);
    text-align: center;
    margin-bottom: 60px;
}

.relevance-block {
    margin-bottom: 50px;
}

.relevance-block:last-child {
    margin-bottom: 0;
}

.relevance-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 25px;
}

.relevance-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.checklist-item:last-child {
    margin-bottom: 0;
}

.checklist-item.fit {
    background-color: rgba(156, 175, 136, 0.1);
}

.checklist-item.fit:hover {
    background-color: rgba(156, 175, 136, 0.15);
}

.checklist-item.no-fit {
    background-color: rgba(107, 83, 71, 0.05);
}

.checklist-item.no-fit:hover {
    background-color: rgba(107, 83, 71, 0.08);
}

.check-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.checklist-item.fit .check-icon {
    color: var(--warm-sage);
}

.checklist-item.no-fit .check-icon {
    color: var(--desert-clay);
}

.check-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--earth-brown);
}

/* ==========================================
   Section 13: Final CTA
   ========================================== */

.casestudy-cta-section {
    background: linear-gradient(135deg,
        rgba(212, 121, 91, 0.15) 0%,
        rgba(232, 176, 135, 0.15) 100%);
    padding: 100px 0;
}

.cta-main-content {
    text-align: center;
    margin-bottom: 80px;
}

.cta-heading {
    font-size: 48px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 20px;
}

.cta-subheading {
    font-size: 20px;
    line-height: 1.6;
    color: var(--earth-brown);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-primary-cta {
    display: inline-block;
    padding: 18px 40px;
    background-color: #B85C3F;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 121, 91, 0.3);
}

.btn-primary-cta:hover {
    background-color: #A8502F;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 121, 91, 0.4);
    color: #ffffff;
}

.btn-secondary-cta {
    display: inline-block;
    padding: 18px 40px;
    background-color: transparent;
    color: var(--earth-brown);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--earth-brown);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-secondary-cta:hover {
    background-color: var(--earth-brown);
    color: #ffffff;
    transform: translateY(-2px);
}

.related-cases-section {
    margin-top: 80px;
}

.related-cases-heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--earth-brown);
    text-align: center;
    margin-bottom: 40px;
}

.related-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.related-case-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(107, 83, 71, 0.12);
}

.case-condition {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    background-color: #B85C3F;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.case-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 12px;
}

.case-snippet {
    font-size: 15px;
    line-height: 1.6;
    color: var(--earth-brown);
    margin-bottom: 20px;
}

.case-metrics {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--earth-brown);
    opacity: 0.8;
}

.case-metric {
    font-weight: 600;
}

.metric-separator {
    opacity: 0.5;
}

.case-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--clay-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.case-link:hover {
    color: var(--clay-text-hover);
}

/* ==========================================
   Responsive Design for Sections 9-13
   ========================================== */

/* Tablet (768-1199px) */
@media (max-width: 1199px) {
    .metrics-cards-grid,
    .insights-grid,
    .related-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .insights-grid .insight-card:nth-child(3),
    .related-cases-grid .related-case-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 500px;
        margin: 0 auto;
    }

    .protocol-layout {
        grid-template-columns: 40% 60%;
        gap: 40px;
    }

    .protocol-specs-box {
        position: static;
    }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
    .casestudy-metrics-section,
    .casestudy-insights-section,
    .casestudy-protocol-section,
    .casestudy-relevance-section,
    .casestudy-cta-section {
        padding: 60px 0;
    }

    .metrics-title,
    .insights-title,
    .relevance-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .chart-placeholder {
        padding: 25px;
    }

    .progress-label {
        font-size: 16px;
    }

    .week-label {
        min-width: 70px;
        font-size: 13px;
    }

    .progress-bar {
        height: 24px;
    }

    .score-label {
        font-size: 14px;
    }

    /* Metrics Cards - Single Column */
    .metrics-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .metric-number {
        font-size: 42px;
    }

    /* Insights - Single Column */
    .insights-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .insights-grid .insight-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
    }

    .insight-card {
        padding: 30px 25px;
    }

    .insight-number {
        font-size: 80px;
    }

    /* Protocol - Single Column */
    .protocol-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .protocol-details {
        padding-left: 0;
    }

    .protocol-section-heading {
        font-size: 28px;
    }

    /* Relevance */
    .relevance-heading {
        font-size: 20px;
    }

    .check-text {
        font-size: 15px;
    }

    /* CTA */
    .cta-heading {
        font-size: 32px;
    }

    .cta-subheading {
        font-size: 18px;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-cta,
    .btn-secondary-cta {
        width: 100%;
        text-align: center;
    }

    .related-cases-heading {
        font-size: 24px;
    }

    /* Related Cases - Single Column */
    .related-cases-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .related-cases-grid .related-case-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
    }
}

/* ========================================
   ARTICLES OVERVIEW SECTION
   ======================================== */

/* Used in: new_articles_overview.html */
.articles-overview {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* Used in: new_articles_overview.html */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

/* Used in: new_articles_overview.html */
.article-card {
    background-color: #F5F1E8;
    border: 1px solid rgba(107, 83, 71, 0.15);
    border-left: 4px solid #D4795B;
    border-radius: 12px;
    padding: 30px;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(107, 83, 71, 0.08);
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.12);
    border-color: rgba(107, 83, 71, 0.25);
}

.article-card:focus {
    outline: 2px solid #D4795B;
    outline-offset: 2px;
}

/* Used in: new_articles_overview.html */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Used in: new_articles_overview.html */
.tag {
    background-color: rgba(156, 175, 136, 0.3);
    border: 1px solid rgba(156, 175, 136, 0.5);
    border-radius: 12px;
    padding: 4px 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6B5347;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* Used in: new_articles_overview.html */
.card-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #6B5347;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    margin-top: 0;
}

/* Used in: new_articles_overview.html */
.card-excerpt {
    font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 15px;
    color: rgba(107, 83, 71, 0.9);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Used in: new_articles_overview.html */
.read-time {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: rgba(107, 83, 71, 0.6);
}

/* Used in: new_articles_overview.html */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px 0 80px;
}

/* Used in: new_articles_overview.html */
.page-link {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 12px;
    margin: 0 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #6B5347;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.page-link:hover {
    color: #6B5347;
    background-color: #F5F1E8;
}

.page-link:focus {
    outline: 2px solid #D4795B;
    outline-offset: 2px;
}

/* Used in: new_articles_overview.html */
.page-link.current {
    color: white;
    background-color: #B85C3F;
    font-weight: 700;
}

/* Used in: new_articles_overview.html */
.page-link.disabled {
    color: rgba(107, 83, 71, 0.3);
    pointer-events: none;
    cursor: default;
}

/* ========================================
   RESPONSIVE: TABLET (768px - 1024px)
   ======================================== */

@media (max-width: 1024px) {
    /* Articles Overview - Tablet */
    .articles-overview {
        padding: 60px 20px;
    }

    .articles-grid {
        gap: 30px;
    }
}

/* ========================================
   RESPONSIVE: MOBILE (<768px)
   ======================================== */

@media (max-width: 768px) {
    /* Articles Overview - Mobile */
    .articles-overview {
        padding: 40px 16px;
    }

    .articles-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 40px;
    }

    .article-card {
        padding: 24px;
    }

    .card-title {
        font-size: 20px;
    }

    .card-excerpt {
        font-size: 15px;
    }

    .pagination {
        margin: 40px 0 60px;
        flex-wrap: wrap;
    }

    .page-link {
        font-size: 14px;
        padding: 6px 10px;
        margin: 4px 2px;
    }
}

/* ========================================
   ARTICLE SECTION TEMPLATES - 17 TYPES
   Individual Article Page Components
   ======================================== */

/* ========================================
   COLOR VARIABLES (Reference)
   ======================================== */
:root {
    --earth-brown: #6B5347;
    --desert-clay: #D4795B;
    --warm-sage: #9CAF88;
    --sand: #F5F1E8;
    --sunrise-peach: #E8B087;
}

/* ========================================
   ARTICLE HERO SECTION
   Full-width hero for article pages
   ======================================== */

.article-hero-section {
    position: relative;
    height: 55vh;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -116px;
    padding-top: 116px;
    margin-bottom: 60px;
}

/* Hero Background */
.article-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.article-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.3) brightness(0.75);
}

.article-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(107, 83, 71, 0.35) 0%,
        rgba(107, 83, 71, 0.65) 100%);
}

/* Hero Content */
.article-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    color: #ffffff;
    padding: 0 20px;
}

/* Breadcrumb Navigation */
.article-breadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
    opacity: 0.9;
}

.article-breadcrumb .breadcrumb-link {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.article-breadcrumb .breadcrumb-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.article-breadcrumb .breadcrumb-separator {
    margin: 0 8px;
    opacity: 0.7;
}

.article-breadcrumb .breadcrumb-current {
    opacity: 0.85;
}

/* Category Tag */
.article-category-tag {
    display: inline-block;
    margin-bottom: 20px;
}

.category-tag-text {
    display: inline-block;
    padding: 8px 20px;
    background-color: #667D58;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
}

/* Hero Title */
.article-hero-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
    color: #ffffff;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Article Metadata */
.article-hero-meta {
    margin-bottom: 20px;
    font-size: 16px;
    color: #ffffff;
    opacity: 0.9;
}

.article-author {
    font-weight: 500;
}

.meta-separator {
    margin: 0 12px;
    opacity: 0.7;
}

.article-read-time {
    font-weight: 400;
}

/* Hero Tagline */
.article-hero-tagline {
    font-size: 20px;
    font-weight: 300;
    color: #ffffff;
    margin: 0 auto 40px;
    max-width: 700px;
    line-height: 1.5;
    background: rgba(107, 83, 71, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 32px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ========================================
   ARTICLE HERO RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768-1199px) */
@media (max-width: 1199px) {
    .article-hero-section {
        margin-top: -90px;
        padding-top: 90px;
    }

    .article-hero-title {
        font-size: 44px;
    }

    .article-hero-tagline {
        font-size: 18px;
    }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
    .article-hero-section {
        height: 45vh;
        min-height: 400px;
        margin-bottom: 40px;
    }

    .article-hero-title {
        font-size: 28px;
    }

    .article-hero-meta {
        font-size: 14px;
    }

    .meta-separator {
        margin: 0 8px;
    }

    .article-hero-tagline {
        font-size: 16px;
        padding: 16px 24px;
    }

    .article-breadcrumb {
        font-size: 12px;
    }
}

/* ========================================
   SECTION TYPE 0: STANDARD TEXT BLOCK
   Base typography for default article prose
   ======================================== */

.article-section-standard {
    margin: 0 auto;
    max-width: 800px;
}

.article-section-standard p {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 18px;
    color: var(--earth-brown);
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.article-section-standard h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-top: 48px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--desert-clay);
    width: 40%;
}

.article-section-standard h3 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-top: 36px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--warm-sage);
    width: 25%;
}

.article-section-standard h4 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-top: 24px;
    margin-bottom: 12px;
}

.article-section-standard ul,
.article-section-standard ol {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 18px;
    color: var(--earth-brown);
    line-height: 1.6;
    margin-left: 1.5em;
    margin-bottom: 0.75em;
}

.article-section-standard li {
    margin-bottom: 0.5em;
}

.article-section-standard ul ul,
.article-section-standard ol ol {
    margin-left: 1.5em;
    margin-top: 0.5em;
}

.article-section-standard strong {
    font-weight: bold;
}

.article-section-standard em {
    font-style: italic;
}

.article-section-standard a {
    color: var(--clay-text);
    text-decoration: underline;
}

.article-section-standard a:hover {
    color: var(--clay-text-hover);
}

/* ========================================
   SECTION TYPE 1: KEY TAKEAWAYS BOX
   ======================================== */

.section-key-takeaways {
    background: linear-gradient(to right, rgba(245, 241, 232, 0.95), rgba(156, 175, 136, 0.05));
    border-left: 4px solid var(--desert-clay);
    border-radius: 8px;
    padding: 32px;
    margin: 40px 0;
    box-shadow: 0 2px 8px rgba(107, 83, 71, 0.06);
}

.takeaways-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--clay-text);
    margin-bottom: 16px;
}

.takeaways-list {
    list-style-type: disc;
    margin-left: 1.5em;
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 17px;
    color: var(--earth-brown);
    line-height: 1.5;
}

.takeaways-list li {
    margin-bottom: 12px;
    color: var(--earth-brown);
}

.takeaways-list li::marker {
    color: var(--desert-clay);
}

/* ========================================
   SECTION TYPE 2: CLINICAL EVIDENCE BLOCK
   ======================================== */

.section-clinical-evidence {
    background: rgba(156, 175, 136, 0.15);
    border: 1px solid rgba(156, 175, 136, 0.3);
    border-radius: 8px;
    padding: 24px;
    margin: 32px 0;
    position: relative;
}

.evidence-icon {
    color: var(--warm-sage);
    margin-bottom: 8px;
}

.evidence-icon svg {
    width: 24px;
    height: 24px;
}

.evidence-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 12px;
}

.evidence-content {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: var(--earth-brown);
    line-height: 1.5;
    margin-bottom: 12px;
}

.evidence-citation {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: var(--earth-brown);
    line-height: 1.5;
    font-style: italic;
}

/* ========================================
   SECTION TYPE 3: PERSONAL INSIGHT CALLOUT
   ======================================== */

.section-personal-insight {
    border-left: 3px solid rgba(107, 83, 71, 0.4);
    padding: 16px 16px 16px 24px;
    margin: 32px 0;
}

.insight-content {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 17px;
    color: rgba(107, 83, 71, 0.9);
    line-height: 1.6;
    font-style: italic;
}

.insight-content strong {
    font-weight: bold;
    font-style: italic;
}

/* ========================================
   SECTION TYPE 4: WARNING/IMPORTANT NOTICE
   ======================================== */

.section-warning {
    background: #B85C3F;
    border: 2px solid #A8502F;
    border-radius: 8px;
    padding: 24px;
    margin: 40px 0;
    color: #FFFFFF;
}

.warning-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.warning-icon {
    color: #FFFFFF;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.warning-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
}

.warning-content {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 17px;
    color: #FFFFFF;
    line-height: 1.6;
}

.warning-content p {
    margin-bottom: 12px;
}

.warning-content ul {
    margin-left: 1.5em;
    margin-bottom: 12px;
}

.warning-content li {
    margin-bottom: 8px;
}

.warning-content strong {
    font-weight: bold;
}

/* ========================================
   SECTION TYPE 5: ARIZONA-SPECIFIC RESOURCE
   ======================================== */

.section-arizona-resource {
    background: rgba(156, 175, 136, 0.25);
    border: 2px solid rgba(156, 175, 136, 0.6);
    border-radius: 8px;
    padding: 28px;
    margin: 32px 0;
}

.resource-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.resource-icon {
    color: var(--warm-sage);
    width: 20px;
    height: 20px;
}

.resource-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--earth-brown);
    margin: 0;
}

.resource-content {
    margin-top: 12px;
}

.resource-name {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 12px;
}

.resource-description {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: var(--earth-brown);
    line-height: 1.6;
    margin-bottom: 16px;
}

.resource-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
}

.contact-label {
    font-weight: 600;
    color: var(--earth-brown);
    min-width: 80px;
}

.contact-link {
    color: var(--clay-text);
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
}

.contact-link:hover {
    color: var(--clay-text-hover);
    text-decoration: underline;
}

.contact-info {
    color: var(--earth-brown);
}

.resource-note {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: var(--earth-brown);
    line-height: 1.5;
    margin-top: 16px;
    font-style: italic;
}

/* ========================================
   SECTION TYPE 6: PATIENT EXAMPLE
   ======================================== */

.section-patient-example {
    background: rgba(232, 176, 135, 0.15);
    border-left: 3px solid rgba(232, 176, 135, 0.6);
    border-radius: 6px;
    padding: 24px;
    margin: 32px 0;
}

.example-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 12px;
}

.example-content {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: rgba(107, 83, 71, 0.9);
    line-height: 1.6;
}

.example-content p {
    margin-bottom: 12px;
}

.example-content em {
    font-style: italic;
}

.example-disclaimer {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: rgba(107, 83, 71, 0.6);
    font-style: italic;
    margin-top: 12px;
}

/* ========================================
   SECTION TYPE 7: MISCONCEPTION VS REALITY
   ======================================== */

.section-misconception-reality {
    border: 1px solid rgba(107, 83, 71, 0.2);
    border-radius: 8px;
    margin: 40px 0;
    overflow: hidden;
}

.comparison-columns {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
}

.misconception-column,
.reality-column {
    padding: 28px;
}

.misconception-column {
    background: rgba(156, 175, 136, 0.15);
}

.reality-column {
    background: var(--sand);
}

.column-icon {
    margin-bottom: 12px;
}

.column-icon svg {
    width: 32px;
    height: 32px;
    color: var(--earth-brown);
}

.column-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 16px;
}

.column-content {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: var(--earth-brown);
    line-height: 1.6;
    margin-bottom: 12px;
}

.column-content em {
    font-style: italic;
}

.column-content ul {
    margin-left: 1.5em;
    margin-top: 8px;
}

.column-content li {
    margin-bottom: 6px;
}

.column-arrow {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: rgba(107, 83, 71, 0.05);
    border-left: 1px solid rgba(107, 83, 71, 0.15);
    border-right: 1px solid rgba(107, 83, 71, 0.15);
}

.column-arrow svg {
    color: var(--desert-clay);
}

/* ========================================
   SECTION TYPE 8: DECISION TREE
   ======================================== */

.section-decision-tree {
    background: rgba(245, 241, 232, 0.5);
    border: 2px solid rgba(156, 175, 136, 0.4);
    border-radius: 8px;
    padding: 32px;
    margin: 40px 0;
}

.tree-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 32px;
    text-align: center;
}

.decision-flow {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.decision-node {
    background: #FFFFFF;
    border: 1px solid rgba(107, 83, 71, 0.2);
    border-radius: 8px;
    padding: 20px;
}

.node-question {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 16px;
}

.node-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-yes,
.option-no {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.option-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--earth-brown);
    min-width: 50px;
}

.outcome-box {
    flex: 1;
    padding: 16px;
    border-radius: 6px;
    border-left: 4px solid;
}

.outcome-urgent {
    background: rgba(212, 121, 91, 0.15);
    border-left-color: var(--desert-clay);
}

.outcome-moderate {
    background: rgba(232, 176, 135, 0.15);
    border-left-color: var(--sunrise-peach);
}

.outcome-low {
    background: rgba(156, 175, 136, 0.15);
    border-left-color: var(--warm-sage);
}

.outcome-box strong {
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 8px;
}

.outcome-box p,
.outcome-box ul {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: var(--earth-brown);
    line-height: 1.5;
}

.outcome-box ul {
    margin-left: 1.5em;
    margin-top: 8px;
}

.continue-arrow {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: rgba(107, 83, 71, 0.6);
}

/* Alternative: Urgency-Based Decision Tree */
.decision-flow-simple {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.urgency-level {
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid;
}

.urgency-emergency {
    background: rgba(212, 121, 91, 0.2);
    border-left-color: #D23B2D;
}

.urgency-high {
    background: rgba(232, 176, 135, 0.2);
    border-left-color: var(--sunrise-peach);
}

.urgency-moderate {
    background: rgba(156, 175, 136, 0.2);
    border-left-color: var(--warm-sage);
}

.urgency-low {
    background: rgba(245, 241, 232, 0.8);
    border-left-color: var(--earth-brown);
}

.urgency-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 12px;
}

.urgency-level ul {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: var(--earth-brown);
    line-height: 1.5;
    margin-left: 1.5em;
}

.urgency-level li {
    margin-bottom: 6px;
}

/* ========================================
   SECTION TYPE 9: PRACTICAL ACTION STEPS
   ======================================== */

.section-action-steps {
    border-left: 4px solid var(--desert-clay);
    border-radius: 6px;
    padding: 24px 24px 24px 28px;
    margin: 32px 0;
}

.steps-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--clay-text);
    margin-bottom: 16px;
}

.steps-list {
    list-style: none;
    counter-reset: step-counter;
    padding: 0;
    margin: 0;
}

.step-item {
    counter-increment: step-counter;
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}

.step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(212, 121, 91, 0.2);
    color: var(--clay-text-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.step-number::before {
    content: counter(step-counter);
}

.step-content {
    flex: 1;
}

.step-content strong {
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 6px;
}

.step-content p {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: var(--earth-brown);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   SECTION TYPE 10: RELATED CONTENT LINKS
   ======================================== */

.section-related-links {
    background: rgba(156, 175, 136, 0.1);
    border-top: 1px solid rgba(107, 83, 71, 0.15);
    border-bottom: 1px solid rgba(107, 83, 71, 0.15);
    padding: 32px 0;
    margin: 60px 0 40px;
}

.related-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 24px;
}

.related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-item {
    margin-bottom: 12px;
}

.related-link {
    display: block;
    padding: 16px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease, padding-left 0.3s ease;
}

.related-link:hover {
    background: var(--sand);
    padding-left: 24px;
}

.link-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.link-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--clay-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.link-arrow {
    color: var(--desert-clay);
    font-size: 18px;
}

.link-description {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: rgba(107, 83, 71, 0.8);
    line-height: 1.5;
    margin: 0;
}

.related-link:hover .link-title {
    color: var(--clay-text-hover);
}

/* Alternative: Simple Links List */
.related-list-simple {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-item-simple {
    margin-bottom: 12px;
}

.related-link-simple {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--clay-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.related-link-simple:hover {
    color: var(--clay-text-hover);
    text-decoration: underline;
}

/* ========================================
   SECTION TYPE 11: PULL QUOTE
   ======================================== */

.section-pull-quote {
    margin: 48px auto;
    padding: 32px 40px;
    max-width: 90%;
    border-left: 5px solid var(--desert-clay);
    border-right: 5px solid var(--desert-clay);
    text-align: center;
}

.quote-text {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 24px;
    color: var(--earth-brown);
    line-height: 1.5;
    font-style: italic;
    margin: 0;
}

.quote-attribution {
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: rgba(107, 83, 71, 0.7);
    margin-top: 16px;
    font-style: normal;
}

/* Decorative quotes version */
.quote-decorative {
    position: relative;
}

.quote-mark {
    position: absolute;
    font-size: 72px;
    color: rgba(212, 121, 91, 0.4);
    font-family: Georgia, serif;
    line-height: 1;
}

.quote-mark-open {
    top: -20px;
    left: 0;
}

.quote-mark-close {
    bottom: -40px;
    right: 0;
}

/* ========================================
   SECTION TYPE 12: FULL-WIDTH IMAGE
   ======================================== */

.section-full-width-image {
    margin: 40px 0;
    max-width: 100%;
}

.full-width-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(107, 83, 71, 0.1);
}

.image-caption {
    background: var(--sand);
    border-top: 2px solid rgba(156, 175, 136, 0.3);
    padding: 16px 20px;
    margin-top: -8px;
    border-radius: 0 0 8px 8px;
}

.caption-text {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: rgba(107, 83, 71, 0.8);
    line-height: 1.5;
    font-style: italic;
    text-align: center;
    margin: 0 0 8px 0;
}

.image-credit {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: rgba(107, 83, 71, 0.6);
    text-align: center;
    margin: 0;
}

.clickable-image {
    cursor: zoom-in;
}

/* ========================================
   SECTION TYPE 13: INLINE IMAGE
   ======================================== */

.section-inline-image {
    width: 45%;
    margin: 16px;
    border: 1px solid rgba(107, 83, 71, 0.1);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(107, 83, 71, 0.08);
}

.section-inline-image.float-right {
    float: right;
    margin-left: 24px;
}

.section-inline-image.float-left {
    float: left;
    margin-right: 24px;
}

.inline-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}

.inline-caption {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 14px;
    color: rgba(107, 83, 71, 0.75);
    line-height: 1.4;
    font-style: italic;
    text-align: left;
    padding: 12px;
    margin: 0;
}

/* Clear float utility */
.clear-float {
    clear: both;
}

/* ========================================
   SECTION TYPE 14: GENERAL COMPARISON
   ======================================== */

.section-comparison {
    border: 1px solid rgba(107, 83, 71, 0.2);
    border-radius: 8px;
    margin: 40px 0;
    overflow: hidden;
}

.comparison-header {
    background: rgba(156, 175, 136, 0.2);
    padding: 16px 28px;
    border-bottom: 1px solid rgba(107, 83, 71, 0.15);
}

.comparison-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--earth-brown);
    margin: 0;
}

.comparison-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.comparison-column {
    padding: 28px;
}

.comparison-column:first-child {
    border-right: 1px solid rgba(107, 83, 71, 0.15);
}

.column-header {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: var(--clay-text);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(212, 121, 91, 0.4);
}

.attribute-row {
    margin-bottom: 16px;
}

.attribute-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: var(--earth-brown);
    display: block;
    margin-bottom: 4px;
}

.attribute-value {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: rgba(107, 83, 71, 0.9);
    line-height: 1.5;
}

/* Simple list version */
.comparison-columns-simple {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.comparison-list {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: var(--earth-brown);
    line-height: 1.6;
    margin-left: 1.5em;
}

.comparison-list li {
    margin-bottom: 8px;
}

.comparison-note {
    background: rgba(245, 241, 232, 0.5);
    padding: 16px 20px;
    margin-top: 0;
    border-top: 1px solid rgba(107, 83, 71, 0.15);
}

.comparison-note p {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: var(--earth-brown);
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   SECTION TYPE 15: MYTH-BUSTING
   ======================================== */

.section-myth-busting {
    background: rgba(232, 176, 135, 0.1);
    border: 2px solid rgba(232, 176, 135, 0.5);
    border-radius: 8px;
    padding: 32px;
    margin: 40px 0;
}

.myth-header {
    margin-bottom: 12px;
}

.myth-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(107, 83, 71, 0.7);
}

.myth-statement {
    margin-bottom: 20px;
}

.myth-statement p {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 18px;
    color: rgba(107, 83, 71, 0.9);
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

.reality-header {
    margin-bottom: 12px;
}

.reality-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--clay-text);
}

.reality-explanation {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 17px;
    color: var(--earth-brown);
    line-height: 1.6;
}

.reality-explanation p {
    margin-bottom: 16px;
}

.reality-explanation em {
    font-style: italic;
}

/* ========================================
   SECTION TYPE 16: TIMELINE EXPECTATIONS
   ======================================== */

.section-timeline {
    padding: 32px 0;
    margin: 48px 0;
}

.timeline-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 32px;
    text-align: center;
}

.timeline-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.timeline-phase {
    flex: 1;
    background: #FFFFFF;
    border: 2px solid rgba(156, 175, 136, 0.4);
    border-radius: 8px;
    padding: 24px;
    position: relative;
}

.phase-number {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #B85C3F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

.phase-time-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--clay-text);
    background: rgba(212, 121, 91, 0.15);
    padding: 6px 12px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 12px;
}

.phase-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 12px;
}

.phase-content p {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: var(--earth-brown);
    line-height: 1.5;
    margin-bottom: 12px;
}

.phase-checklist {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0;
}

.phase-checklist li {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 14px;
    color: var(--earth-brown);
    line-height: 1.5;
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
}

.phase-checklist li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--warm-sage);
    font-weight: bold;
}

.timeline-connector {
    width: 2px;
    background: rgba(156, 175, 136, 0.4);
    margin-top: 50px;
    flex-shrink: 0;
}

/* Simpler timeline version */
.timeline-container-simple {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.timeline-phase-simple {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.phase-marker {
    flex-shrink: 0;
    text-align: center;
}

.phase-number-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #B85C3F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.phase-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--earth-brown);
}

.phase-description {
    flex: 1;
}

.phase-description h4 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 8px;
}

.phase-description p {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: var(--earth-brown);
    line-height: 1.6;
    margin: 0;
}

/* Timeline flow (horizontal arrows) */
.timeline-flow {
    display: flex;
    align-items: center;
    gap: 16px;
}

.timeline-step {
    flex: 1;
    background: var(--sand);
    border: 1px solid rgba(107, 83, 71, 0.2);
    border-radius: 8px;
    padding: 20px;
}

.step-badge {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: var(--clay-text);
    background: rgba(212, 121, 91, 0.15);
    padding: 4px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 10px;
}

.step-content strong {
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 8px;
}

.step-content p {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 14px;
    color: var(--earth-brown);
    line-height: 1.5;
    margin: 0;
}

.timeline-arrow {
    font-size: 24px;
    color: var(--desert-clay);
    flex-shrink: 0;
}

.timeline-note {
    background: rgba(156, 175, 136, 0.1);
    padding: 16px 20px;
    border-radius: 6px;
    margin-top: 24px;
}

.timeline-note p {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 15px;
    color: var(--earth-brown);
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   SECTION TYPE 17: MEDICATION MATRIX
   ======================================== */

.section-medication-matrix {
    margin: 48px 0;
}

.matrix-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: var(--earth-brown);
    margin-bottom: 24px;
}

.table-wrapper {
    overflow-x: auto;
    border: 1px solid rgba(107, 83, 71, 0.2);
    border-radius: 8px;
}

.medication-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

.medication-table thead {
    background: rgba(156, 175, 136, 0.3);
    border-bottom: 2px solid rgba(156, 175, 136, 0.6);
}

.medication-table th {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: var(--earth-brown);
    text-align: left;
    padding: 16px 12px;
}

.medication-table thead th {
    text-align: center;
}

.medication-table thead th.attribute-column {
    text-align: left;
}

.medication-table .attribute-name {
    background: var(--sand);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(107, 83, 71, 0.9);
    text-align: left;
    padding: 14px 16px;
    border-right: 2px solid rgba(107, 83, 71, 0.15);
    position: sticky;
    left: 0;
}

.medication-table td {
    font-size: 15px;
    color: var(--earth-brown);
    text-align: center;
    padding: 14px 12px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(107, 83, 71, 0.1);
}

.medication-table tbody tr:nth-child(even) {
    background: rgba(156, 175, 136, 0.08);
}

.medication-table tbody tr:hover {
    background: rgba(156, 175, 136, 0.15);
}

/* Color-coded cells */
.positive-cell {
    background: rgba(156, 175, 136, 0.4) !important;
}

.negative-cell {
    background: rgba(212, 121, 91, 0.2) !important;
}

.neutral-cell {
    background: rgba(232, 176, 135, 0.2) !important;
}

.table-caption {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 14px;
    color: rgba(107, 83, 71, 0.7);
    line-height: 1.5;
    font-style: italic;
    margin-top: 12px;
}

.table-caption strong {
    font-weight: bold;
}

.legend-positive {
    color: var(--sage-text);
    font-weight: bold;
}

.legend-neutral {
    color: #6B5347;
    font-weight: bold;
}

.legend-negative {
    color: var(--clay-text);
    font-weight: bold;
}


/* ========================================
   RESPONSIVE BREAKPOINTS
   Article Section Templates
   ======================================== */

/* ========================================
   TABLET (768px - 1024px)
   ======================================== */

@media (max-width: 1024px) {
    /* Standard Text */
    .article-section-standard p {
        font-size: 17px;
    }

    .article-section-standard h2 {
        font-size: 28px;
    }

    .article-section-standard h3 {
        font-size: 22px;
    }

    /* Key Takeaways */
    .section-key-takeaways {
        padding: 24px;
    }

    /* Pull Quote */
    .quote-text {
        font-size: 20px;
    }

    /* Misconception vs Reality - May remain side-by-side or stack */
    .comparison-columns {
        gap: 20px;
    }

    /* Comparison - May remain side-by-side */
    .comparison-columns {
        gap: 20px;
    }

    /* Timeline - Adjust spacing */
    .timeline-container {
        gap: 16px;
    }

    .timeline-phase {
        padding: 20px;
    }

    /* Inline Images - May still float */
    .section-inline-image {
        width: 50%;
    }
}

/* ========================================
   MOBILE (<768px)
   ======================================== */

@media (max-width: 768px) {
    /* Standard Text - Mobile sizing */
    .article-section-standard p {
        font-size: 16px;
    }

    .article-section-standard h2 {
        font-size: 28px;
        width: 60%;
    }

    .article-section-standard h3 {
        font-size: 22px;
        width: 40%;
    }

    .article-section-standard h4 {
        font-size: 18px;
    }

    /* Key Takeaways - Mobile */
    .section-key-takeaways {
        padding: 20px;
    }

    .takeaways-list {
        font-size: 16px;
    }

    /* Clinical Evidence - Mobile */
    .section-clinical-evidence {
        padding: 20px;
    }

    /* Personal Insight - Mobile */
    .section-personal-insight {
        padding-left: 16px;
    }

    /* Warning - Mobile */
    .section-warning {
        padding: 20px;
    }

    /* Arizona Resource - Mobile */
    .section-arizona-resource {
        padding: 24px;
    }

    .resource-contact {
        gap: 12px;
    }

    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .contact-label {
        min-width: auto;
    }

    /* Patient Example - Mobile */
    .section-patient-example {
        padding: 20px;
    }

    /* Misconception vs Reality - STACK ON MOBILE */
    .comparison-columns {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .column-arrow {
        display: none; /* Hide arrow on mobile */
    }

    .misconception-column,
    .reality-column {
        padding: 24px;
    }

    /* Decision Tree - Mobile */
    .section-decision-tree {
        padding: 24px;
    }

    .tree-title {
        font-size: 20px;
    }

    /* Action Steps - Mobile */
    .step-number {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .step-content strong {
        font-size: 16px;
    }

    .step-content p {
        font-size: 15px;
    }

    /* Related Links - Mobile */
    .related-link {
        padding: 12px 16px;
    }

    .related-link:hover {
        padding-left: 16px; /* No shift on mobile */
    }

    /* Pull Quote - Mobile */
    .section-pull-quote {
        padding: 24px 20px;
        max-width: 100%;
    }

    .quote-text {
        font-size: 20px;
    }

    .quote-mark {
        font-size: 48px;
    }

    /* Full-Width Image - Mobile */
    .section-full-width-image {
        margin: 32px 0;
    }

    .image-caption {
        padding: 12px 16px;
    }

    /* Inline Image - NO FLOAT ON MOBILE */
    .section-inline-image {
        width: 100%;
        float: none;
        margin: 20px 0;
    }

    .section-inline-image.float-right,
    .section-inline-image.float-left {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* Comparison - STACK ON MOBILE */
    .comparison-columns,
    .comparison-columns-simple {
        grid-template-columns: 1fr;
    }

    .comparison-column:first-child {
        border-right: none;
        border-bottom: 1px solid rgba(107, 83, 71, 0.15);
    }

    .comparison-column {
        padding: 20px;
    }

    /* Myth-Busting - Mobile */
    .section-myth-busting {
        padding: 24px;
    }

    .myth-statement p {
        font-size: 16px;
    }

    .reality-explanation {
        font-size: 16px;
    }

    /* Timeline - STACK VERTICALLY ON MOBILE */
    .timeline-container {
        flex-direction: column;
        gap: 24px;
    }

    .timeline-connector {
        display: none;
    }

    .timeline-phase {
        width: 100%;
        padding: 20px;
    }

    /* Timeline flow - stack on mobile */
    .timeline-flow {
        flex-direction: column;
        gap: 20px;
    }

    .timeline-arrow {
        transform: rotate(90deg);
    }

    .timeline-step {
        width: 100%;
    }

    /* Medication Matrix - Horizontal scroll on mobile */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .medication-table {
        min-width: 600px; /* Force horizontal scroll for complex tables */
    }

    .medication-table th,
    .medication-table td {
        font-size: 14px;
        padding: 10px 8px;
    }

    /* Sticky first column on mobile scroll */
    .medication-table .attribute-name {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    }
}

/* ========================================
   PRINT STYLESHEET
   Article-specific print optimizations
   ======================================== */

@media print {
    /* Hide interactive elements */
    .related-link,
    .section-related-links,
    .column-arrow {
        display: none;
    }

    /* Remove backgrounds for ink-saving */
    .section-key-takeaways,
    .section-clinical-evidence,
    .section-arizona-resource,
    .section-patient-example,
    .misconception-column,
    .reality-column,
    .section-decision-tree,
    .section-myth-busting,
    .comparison-header {
        background: white !important;
    }

    /* Convert colored boxes to simple borders */
    .section-warning {
        background: white !important;
        color: black !important;
        border: 2px solid black !important;
    }

    .warning-content {
        color: black !important;
    }

    /* Remove shadows */
    .section-key-takeaways,
    .full-width-img,
    .section-inline-image {
        box-shadow: none !important;
    }

    /* Maintain structure borders */
    .section-key-takeaways {
        border-left: 3px solid black;
    }

    .section-action-steps {
        border-left: 3px solid black;
    }

    /* Avoid page breaks inside important sections */
    .section-key-takeaways,
    .section-warning,
    .section-patient-example,
    .timeline-phase,
    .comparison-column {
        page-break-inside: avoid;
    }

    /* Page breaks */
    h2 {
        page-break-after: avoid;
    }

    /* Make all text black for readability */
    body,
    p,
    li,
    td,
    th {
        color: black !important;
    }

    /* Show URLs after links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    /* Don't show URLs for anchor links */
    a[href^="#"]:after {
        content: "";
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .related-link,
    .step-content,
    .timeline-phase {
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .section-key-takeaways,
    .section-clinical-evidence,
    .section-arizona-resource {
        border-width: 3px;
    }

    .medication-table {
        border: 2px solid var(--earth-brown);
    }
}

/* Focus visible for keyboard navigation */
.related-link:focus-visible,
.contact-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--desert-clay);
    outline-offset: 2px;
}

/* ========================================
   POLICIES OVERVIEW SECTION
   Section: new_policies_overview.html
   ======================================== */

/* Main Container */
.policies-overview {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 80px 80px;
}

/* Page Header */
.policies-page-header {
    margin-bottom: 48px;
}

/* Breadcrumb Navigation */
.policies-breadcrumb {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 14px;
    color: rgba(107, 83, 71, 0.6);
    margin-bottom: 20px;
}

.policies-breadcrumb a {
    color: #6B5347;
    text-decoration: none;
    transition: color 0.3s ease;
}

.policies-breadcrumb a:hover {
    color: var(--clay-text);
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: rgba(107, 83, 71, 0.4);
}

.breadcrumb-current {
    color: #6B5347;
}

/* Page Title */
.policies-page-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #6B5347;
    margin: 0 0 12px 0;
}

/* Page Subtitle */
.policies-subtitle {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 18px;
    color: rgba(107, 83, 71, 0.8);
    line-height: 1.5;
    margin: 0;
}

/* Introduction Block */
.policies-intro-block {
    background: rgba(156, 175, 136, 0.12);
    border-left: 3px solid rgba(156, 175, 136, 0.5);
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 48px;
}

.policies-intro-block p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 16px;
    color: rgba(107, 83, 71, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* Policy Category Section */
.policy-category {
    margin-top: 60px;
}

.policy-category:first-of-type {
    margin-top: 0;
}

/* Category Header */
.category-header {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #6B5347;
    border-bottom: 3px solid #D4795B;
    padding-bottom: 12px;
    margin-bottom: 12px;
    width: 50%;
    min-width: 300px;
}

/* Category Description */
.category-description {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 16px;
    color: rgba(107, 83, 71, 0.8);
    line-height: 1.5;
    margin-bottom: 32px;
    max-width: 700px;
}

/* Policies Grid */
.policies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    margin-bottom: 60px;
}

/* Policy Card */
.policy-card {
    background: #F5F1E8;
    border: 1px solid rgba(107, 83, 71, 0.15);
    border-left: 4px solid #9CAF88;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(107, 83, 71, 0.08);
    transition: all 0.3s ease;
}

.policy-card:hover {
    border-left-color: #9CAF88;
    border-color: rgba(107, 83, 71, 0.25);
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.12);
    transform: translateY(-2px);
}

/* Card Header - Contains badge and version info */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

/* Applicability Badges */
.applicability-badge {
    display: inline-block;
    border-radius: 12px;
    padding: 6px 14px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.applicability-badge.all-patients {
    background: rgba(156, 175, 136, 0.25);
    color: #6B5347;
    border: 1px solid rgba(156, 175, 136, 0.6);
}

.applicability-badge.stimulant-patients {
    background: rgba(212, 121, 91, 0.2);
    color: #6B5347;
    border: 1px solid rgba(212, 121, 91, 0.6);
}

.applicability-badge.benzodiazepine-patients {
    background: rgba(232, 176, 135, 0.25);
    color: #6B5347;
    border: 1px solid rgba(232, 176, 135, 0.6);
}

.applicability-badge.courtesy-care {
    background: rgba(107, 83, 71, 0.15);
    color: #6B5347;
    border: 1px solid rgba(107, 83, 71, 0.6);
}

/* Version and Date Info */
.version-date {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 13px;
    color: rgba(107, 83, 71, 0.7);
}

.version {
    font-weight: 500;
}

.effective-date {
    font-weight: 400;
}

/* Policy Title */
.policy-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #6B5347;
    line-height: 1.3;
    margin: 0 0 12px 0;
}

/* Policy Description */
.policy-description {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 15px;
    color: rgba(107, 83, 71, 0.85);
    line-height: 1.5;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

/* Action Buttons Container */
.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

/* Button Base Styles */
.action-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 12px 24px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-height: 44px;
}

/* Primary Button - View Online */
.btn-primary {
    background: #B85C3F;
    color: #FFFFFF;
    border: none;
}

.btn-primary:hover {
    background: #A8502F;
}

.btn-primary:focus-visible {
    outline: 2px solid #6B5347;
    outline-offset: 2px;
}

/* Secondary Button - Download PDF */
.btn-secondary {
    background: transparent;
    color: #6B5347;
    border: 2px solid rgba(107, 83, 71, 0.4);
    padding: 10px 22px;
}

.btn-secondary:hover {
    border-color: #6B5347;
    background: rgba(245, 241, 232, 0.5);
}

.btn-secondary:focus-visible {
    outline: 2px solid #6B5347;
    outline-offset: 2px;
    border-color: #6B5347;
}

/* Button Icons */
.button-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

/* ========================================
   RESPONSIVE: TABLET (768px - 1024px)
   ======================================== */

@media (max-width: 1024px) {
    .policies-overview {
        padding: 60px 40px 80px;
    }

    .policies-page-title {
        font-size: 32px;
    }

    .policies-subtitle {
        font-size: 17px;
    }

    .category-header {
        font-size: 26px;
    }

    .policies-grid {
        gap: 30px;
    }

    .policy-card {
        padding: 28px;
    }
}

/* ========================================
   RESPONSIVE: MOBILE (<768px)
   ======================================== */

@media (max-width: 768px) {
    .policies-overview {
        padding: 40px 20px 60px;
    }

    .policies-page-title {
        font-size: 28px;
    }

    .policies-subtitle {
        font-size: 16px;
    }

    .policies-intro-block {
        padding: 20px;
        margin-bottom: 36px;
    }

    .category-header {
        font-size: 24px;
        width: 100%;
        min-width: unset;
    }

    .category-description {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .policies-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 48px;
    }

    .policy-card {
        padding: 24px;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .version-date {
        margin-top: 4px;
    }

    .policy-title {
        font-size: 20px;
    }

    .policy-description {
        font-size: 14px;
    }

    .action-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .action-buttons a {
        width: 100%;
    }
}

/* Small mobile adjustments */
@media (max-width: 400px) {
    .policies-overview {
        padding: 32px 16px 48px;
    }

    .policy-card {
        padding: 20px;
    }
}

/* ========================================
   NEW POLICY HERO SECTION
   Section: new_policy_hero.html
   ======================================== */

/* Hero Container - Full Width Wrapper (matches article hero) */
.new-policy-hero {
    position: relative;
    width: 100vw; /* Full viewport width */
    left: 50%; /* Center alignment trick */
    right: 50%;
    margin-left: -50vw; /* Pull back to full width */
    margin-right: -50vw; /* Pull back to full width */
    height: 55vh;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -116px; /* Extends behind fixed navigation */
    padding-top: 116px; /* Compensates for navigation height */
    margin-bottom: 60px;
}

/* Background Image Container - Full Width (matches article hero) */
.new-policy-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Background Image - Full Coverage (matches article hero) */
.new-policy-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.3) brightness(0.75);
}

/* Dark overlay on background for sophistication (matches article hero) */
.new-policy-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(107, 83, 71, 0.35) 0%,
        rgba(107, 83, 71, 0.65) 100%);
}

/* Content Container - Sits Above Background with generous spacing */
.new-policy-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 100px 40px 80px 40px;
}

/* Breadcrumb Navigation - Elevated styling */
.new-policy-breadcrumb {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0;
    margin-bottom: 32px;
}

.new-policy-breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.new-policy-breadcrumb a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.new-policy-breadcrumb .breadcrumb-separator {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.6);
}

.new-policy-breadcrumb .breadcrumb-current {
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}

/* Policy Title - Sophisticated display typography */
.new-policy-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    margin: 0 0 36px 0;
}

/* Metadata Bar - Sophisticated structure with visual separation */
.new-policy-metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 24px;
    margin-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 0;
}

/* Required Badge - Glass morphism for modern sophistication */
.new-policy-badge-required {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 8px 16px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Applicability Badge - Glass morphism for modern sophistication */
.new-policy-badge-applicability {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 8px 16px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Variant colors (subtle tinting while maintaining glass effect) */
.new-policy-badge-applicability.all-patients {
    background: rgba(156, 175, 136, 0.2);
    border: 1px solid rgba(156, 175, 136, 0.4);
}

.new-policy-badge-applicability.stimulant-patients {
    background: rgba(212, 121, 91, 0.2);
    border: 1px solid rgba(212, 121, 91, 0.4);
}

.new-policy-badge-applicability.benzodiazepine-patients {
    background: rgba(232, 176, 135, 0.2);
    border: 1px solid rgba(232, 176, 135, 0.4);
}

.new-policy-badge-applicability.courtesy-care {
    background: rgba(107, 83, 71, 0.2);
    border: 1px solid rgba(107, 83, 71, 0.4);
}

/* Version Info Container */
.new-policy-version-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.new-policy-version,
.new-policy-effective-date {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.new-policy-version {
    font-weight: 500;
}

.new-policy-separator {
    color: rgba(255, 255, 255, 0.5);
}

/* Download PDF Button - Enhanced presence and interaction */
.new-policy-btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #B85C3F;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 14px 32px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.new-policy-btn-download:hover {
    background: #A8502F;
    box-shadow: 0 4px 16px rgba(212, 121, 91, 0.4);
    transform: translateY(-1px);
    color: #FFFFFF;
    text-decoration: none;
}

.new-policy-btn-download:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.new-policy-btn-download .button-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

/* ========================================
   NEW POLICY HERO RESPONSIVE DESIGN
   ======================================== */

/* Tablet (matches article hero responsive) */
@media (max-width: 1024px) {
    .new-policy-hero {
        margin-top: -90px; /* Adjusted for tablet navigation height */
        padding-top: 90px;
    }

    .new-policy-hero-content {
        padding: 80px 32px 60px 32px;
    }

    .new-policy-title {
        font-size: 42px;
    }
}

/* Mobile (matches article hero responsive) */
@media (max-width: 767px) {
    .new-policy-hero {
        height: 45vh;
        min-height: 450px;
        margin-top: -90px; /* Mobile navigation is ~85px tall (same as tablet) */
        padding-top: 90px;
        margin-bottom: 40px;
    }

    .new-policy-hero-content {
        padding: 60px 24px 50px 24px;
    }

    .new-policy-breadcrumb {
        font-size: 13px;
        margin-bottom: 24px;
    }

    .new-policy-title {
        font-size: 32px;
        margin-bottom: 28px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .new-policy-metadata {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 28px;
        padding-top: 20px;
    }

    .new-policy-version-info {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .new-policy-separator {
        display: none;
    }

    .new-policy-btn-download {
        width: 100%;
        justify-content: center;
        margin-top: 24px;
    }
}

/* ========================================
   INDIVIDUAL POLICY PAGE STYLES
   Section: templates/policies/*.html
   ======================================== */

/* Policy Page Container */
.policy-page {
    background: #FFFFFF;
    padding: 40px 0 80px;
}

.policy-page .container {
    max-width: 1400px;
}

/* Breadcrumb Navigation */
.policy-breadcrumb {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 14px;
    color: rgba(107, 83, 71, 0.6);
    margin-bottom: 20px;
    padding-top: 20px;
}

.policy-breadcrumb a {
    color: #6B5347;
    text-decoration: none;
    transition: color 0.3s ease;
}

.policy-breadcrumb a:hover {
    color: var(--clay-text);
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: rgba(107, 83, 71, 0.4);
}

.breadcrumb-current {
    color: #6B5347;
}

/* Policy Header */
.policy-header {
    margin-bottom: 48px;
}

.policy-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 40px;
    font-weight: bold;
    color: #6B5347;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 800px;
    margin: 0 0 24px 0;
}

/* Policy Metadata Bar */
.policy-metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid rgba(107, 83, 71, 0.1);
    border-bottom: 1px solid rgba(107, 83, 71, 0.1);
    margin-bottom: 24px;
}

.version-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.version,
.effective-date {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 14px;
    color: rgba(107, 83, 71, 0.8);
}

.version {
    font-weight: 500;
}

.effective-date {
    font-weight: 400;
}

/* Download PDF Button */
.btn-download-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #B85C3F;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 12px 28px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 24px;
}

.btn-download-pdf:hover {
    background: #A8502F;
    box-shadow: 0 2px 8px rgba(212, 121, 91, 0.3);
    color: #FFFFFF;
    text-decoration: none;
}

.btn-download-pdf:focus-visible {
    outline: 2px solid #6B5347;
    outline-offset: 2px;
}

.btn-download-pdf .button-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

/* Policy Layout (Desktop: Sidebar + Content) */
.policy-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Table of Contents - Desktop Sidebar */
.policy-toc-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
    padding: 24px 20px;
    border-right: 1px solid rgba(107, 83, 71, 0.08);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.policy-toc {
    position: relative;
}

.toc-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: rgba(107, 83, 71, 0.6);
    letter-spacing: 0.05em;
    margin: 0 0 16px 0;
}

.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-list li {
    margin: 0;
    padding: 0;
}

.toc-link {
    display: block;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(107, 83, 71, 0.8);
    padding: 10px 0 10px 12px;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.toc-link:hover {
    color: #6B5347;
    border-left-color: rgba(156, 175, 136, 0.5);
}

.toc-link.active {
    color: var(--sage-text);
    border-left: 3px solid #9CAF88;
    background: rgba(245, 241, 232, 0.5);
    font-weight: bold;
}

/* Mobile TOC (Collapsible) */
.policy-toc-mobile {
    display: none;
    margin-bottom: 32px;
}

.toc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(156, 175, 136, 0.2);
    border: 1px solid rgba(107, 83, 71, 0.15);
    border-radius: 8px;
    padding: 16px 20px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #6B5347;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toc-toggle:hover {
    background: rgba(156, 175, 136, 0.25);
}

.chevron-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.chevron-icon.rotated {
    transform: rotate(180deg);
}

.toc-mobile-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(245, 241, 232, 0.5);
    border-radius: 0 0 8px 8px;
    margin-top: -8px;
    padding: 0 20px;
}

.toc-mobile-content.expanded {
    max-height: 600px;
    padding: 16px 20px;
    overflow-y: auto;
}

/* Policy Content Area */
.policy-content {
    max-width: 800px;
}

/* Base Typography for Policy Content */
.policy-content p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 18px;
    color: #6B5347;
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.policy-content a {
    color: var(--clay-text);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.policy-content a:hover {
    color: var(--clay-text-hover);
}

.policy-content strong {
    font-weight: bold;
}

.policy-content em {
    font-style: italic;
}

/* Headers within Policy Content */
.policy-content h2 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #6B5347;
    margin: 48px 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #9CAF88;
    width: 40%;
    min-width: 200px;
    position: relative;
}

.policy-content h3 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #6B5347;
    margin: 32px 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(156, 175, 136, 0.4);
    width: 25%;
    min-width: 150px;
}

.policy-content h4 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: rgba(107, 83, 71, 0.9);
    margin: 24px 0 10px 0;
}

/* Lists in Policy Content */
.policy-content ul,
.policy-content ol {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 18px;
    color: #6B5347;
    line-height: 1.6;
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.policy-content li {
    margin-bottom: 0.5em;
}

.policy-content ul {
    list-style-type: disc;
}

.policy-content ol {
    list-style-type: decimal;
}

/* Section Permalink Icons */
.permalink-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    vertical-align: middle;
    color: rgba(156, 175, 136, 0.6);
}

.policy-content h2:hover .permalink-icon {
    opacity: 1;
}

.permalink-icon svg {
    width: 100%;
    height: 100%;
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background: #667D58;
    color: #FFFFFF;
    padding: 14px 24px;
    border-radius: 6px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   POLICY SECTION TYPES (9 Types)
   ======================================== */

/* 1. Standard Policy Text */
.policy-standard-text {
    margin: 32px 0;
}

.policy-standard-text p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 18px;
    color: #6B5347;
    line-height: 1.6;
    margin-bottom: 0.75em;
}

/* 2. Informational Block */
.policy-informational-block {
    background: rgba(156, 175, 136, 0.12);
    border-left: 3px solid rgba(156, 175, 136, 0.5);
    border-radius: 6px;
    padding: 24px 28px;
    margin: 32px 0;
    position: relative;
}

.info-icon {
    width: 20px;
    height: 20px;
    color: rgba(156, 175, 136, 0.8);
    margin-bottom: 8px;
}

.info-icon svg {
    width: 100%;
    height: 100%;
}

.info-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #6B5347;
    margin: 0 0 12px 0;
}

.policy-informational-block p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 17px;
    color: rgba(107, 83, 71, 0.9);
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.policy-informational-block p:last-child {
    margin-bottom: 0;
}

/* 3. Requirements Block */
.policy-requirements-block {
    background: rgba(212, 121, 91, 0.1);
    border-left: 4px solid rgba(212, 121, 91, 0.7);
    border-radius: 6px;
    padding: 24px 28px;
    margin: 32px 0;
}

.requirements-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--clay-text);
    margin: 0 0 14px 0;
}

.requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirements-list li {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: #6B5347;
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
}

.requirements-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #D4795B;
    font-weight: bold;
    font-size: 20px;
}

/* 4. Rights Block */
.policy-rights-block {
    background: rgba(156, 175, 136, 0.15);
    border-left: 4px solid rgba(156, 175, 136, 0.7);
    border-radius: 6px;
    padding: 24px 28px;
    margin: 32px 0;
}

.rights-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #7C9B6D;
    margin: 0 0 14px 0;
}

.rights-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rights-list li {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 17px;
    color: #6B5347;
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
}

.rights-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #9CAF88;
    font-weight: bold;
    font-size: 20px;
}

/* 5. Critical Notice */
.policy-critical-notice {
    background: #B85C3F;
    border: 3px solid #A8502F;
    border-radius: 8px;
    padding: 28px 32px;
    margin: 48px 0;
}

.critical-icon {
    width: 28px;
    height: 28px;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.critical-icon svg {
    width: 100%;
    height: 100%;
}

.critical-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 0 14px 0;
}

.policy-critical-notice p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.policy-critical-notice ul {
    color: #FFFFFF;
    margin-bottom: 1em;
}

.policy-critical-notice li {
    color: #FFFFFF;
}

.policy-critical-notice strong {
    color: #FFFFFF;
}

/* 6. Exception Block */
.policy-exception-block {
    background: transparent;
    border: 2px dashed rgba(107, 83, 71, 0.4);
    border-radius: 6px;
    padding: 20px 24px;
    margin: 28px 0;
}

.exception-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: rgba(107, 83, 71, 0.9);
    margin: 0 0 12px 0;
}

.policy-exception-block p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 16px;
    color: rgba(107, 83, 71, 0.85);
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.policy-exception-block ul {
    font-size: 16px;
    color: rgba(107, 83, 71, 0.85);
}

/* 7. Procedure Steps */
.policy-procedure-steps {
    background: #F5F1E8;
    background: linear-gradient(to right, #F5F1E8 98%, rgba(156, 175, 136, 0.02) 100%);
    border-left: 4px solid rgba(156, 175, 136, 0.5);
    border-radius: 6px;
    padding: 28px 32px;
    margin: 36px 0;
}

.procedure-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #6B5347;
    margin: 0 0 20px 0;
}

.policy-procedure-steps > p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 17px;
    color: #6B5347;
    line-height: 1.6;
    margin-bottom: 20px;
}

.procedure-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step-counter;
}

.procedure-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    counter-increment: step-counter;
}

.step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(156, 175, 136, 0.2);
    color: #9CAF88;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 16px;
}

.step-number::before {
    content: counter(step-counter);
}

.step-content {
    flex: 1;
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 17px;
    color: #6B5347;
    line-height: 1.6;
}

.step-content strong {
    display: block;
    margin-bottom: 4px;
}

.procedure-note {
    font-size: 16px;
    font-style: italic;
    color: rgba(107, 83, 71, 0.8);
    margin-top: 20px;
}

/* 8. Definition Panel */
.policy-definition-panel {
    background: rgba(232, 176, 135, 0.12);
    border: 1px solid rgba(232, 176, 135, 0.4);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 28px 0;
    max-width: 90%;
}

.definition-icon {
    width: 20px;
    height: 20px;
    color: rgba(232, 176, 135, 0.8);
    margin-bottom: 8px;
}

.definition-icon svg {
    width: 100%;
    height: 100%;
}

.definition-term {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #6B5347;
    margin: 0 0 8px 0;
}

.definition-content {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 16px;
    color: rgba(107, 83, 71, 0.9);
    line-height: 1.5;
    margin: 0;
}

/* 9. Legal Language Block */
.policy-legal-language {
    background: rgba(107, 83, 71, 0.05);
    border: 1px solid rgba(107, 83, 71, 0.2);
    border-radius: 4px;
    padding: 24px 28px;
    margin: 36px 0;
}

.legal-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: rgba(107, 83, 71, 0.7);
    letter-spacing: 0.05em;
    margin: 0 0 14px 0;
}

.legal-content {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 16px;
    color: rgba(107, 83, 71, 0.85);
    line-height: 1.5;
}

.legal-content p {
    font-size: 16px;
    color: rgba(107, 83, 71, 0.85);
    line-height: 1.5;
    margin-bottom: 0.75em;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

/* ========================================
   ACKNOWLEDGMENT SECTION
   ======================================== */

.policy-acknowledgment-section {
    background: rgba(156, 175, 136, 0.08);
    border-top: 2px solid rgba(107, 83, 71, 0.2);
    border-bottom: 2px solid rgba(107, 83, 71, 0.2);
    padding: 32px 28px;
    margin: 60px 0 40px 0;
}

.acknowledgment-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #6B5347;
    margin: 0 0 20px 0;
}

.acknowledgment-text p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 17px;
    color: #6B5347;
    line-height: 1.6;
    margin-bottom: 1em;
}

.signature-block {
    margin-top: 28px;
}

.signature-instruction {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 15px;
    font-style: italic;
    color: rgba(107, 83, 71, 0.7);
    margin-bottom: 20px;
}

.signature-lines p {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    font-size: 16px;
    color: rgba(107, 83, 71, 0.8);
    margin-bottom: 16px;
}

.signature-block .btn-download-pdf {
    margin-top: 24px;
}

/* ========================================
   RESPONSIVE: TABLET
   ======================================== */

@media (max-width: 1024px) {
    .policy-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .policy-toc-sidebar {
        display: none;
    }

    .policy-toc-mobile {
        display: block;
    }

    .policy-title {
        font-size: 32px;
    }

    .policy-content h2 {
        font-size: 26px;
    }

    .policy-content h3 {
        font-size: 20px;
    }

    .policy-content {
        padding: 0 20px;
    }
}

/* ========================================
   RESPONSIVE: MOBILE
   ======================================== */

@media (max-width: 768px) {
    .policy-page {
        padding: 20px 0 60px;
    }

    .policy-title {
        font-size: 28px;
    }

    .policy-metadata {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .version-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .policy-content {
        padding: 0;
    }

    .policy-content p {
        font-size: 16px;
    }

    .policy-content h2 {
        font-size: 24px;
        width: 60%;
    }

    .policy-content h3 {
        font-size: 20px;
        width: 40%;
    }

    .policy-content h4 {
        font-size: 17px;
    }

    .policy-content ul,
    .policy-content ol {
        font-size: 16px;
    }

    /* Section type mobile adjustments */
    .policy-informational-block,
    .policy-requirements-block,
    .policy-rights-block,
    .policy-exception-block,
    .policy-procedure-steps,
    .policy-legal-language {
        padding: 20px 24px;
    }

    .policy-critical-notice {
        padding: 24px 28px;
    }

    .policy-definition-panel {
        max-width: 100%;
        padding: 16px 20px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 18px;
        margin-right: 12px;
    }

    .step-content {
        font-size: 16px;
    }

    .toast-notification {
        bottom: 20px;
        right: 20px;
        left: 20px;
    }

    .btn-download-pdf {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    /* Hide interactive elements */
    .policy-toc-sidebar,
    .policy-toc-mobile,
    .btn-download-pdf,
    .permalink-icon,
    .toast-notification {
        display: none !important;
    }

    /* Page setup */
    @page {
        margin: 0.75in;
        size: letter;
    }

    body {
        font-size: 11pt;
        line-height: 1.4;
        color: #000000;
    }

    /* Remove backgrounds for ink-saving */
    .policy-informational-block,
    .policy-requirements-block,
    .policy-rights-block,
    .policy-exception-block,
    .policy-procedure-steps,
    .policy-definition-panel,
    .policy-acknowledgment-section {
        background: #FFFFFF !important;
        border-color: #000000 !important;
    }

    .policy-legal-language {
        background: #F5F5F5 !important;
        border-color: #000000 !important;
    }

    /* Critical Notice - maintain visibility */
    .policy-critical-notice {
        background: #FFFFFF !important;
        border: 3px solid #000000 !important;
    }

    .policy-critical-notice * {
        color: #000000 !important;
    }

    .critical-title {
        font-weight: bold;
    }

    /* All text to black */
    body,
    p,
    li,
    td,
    th,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #000000 !important;
    }

    /* Show URLs after links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    /* Don't show URLs for anchor links */
    a[href^="#"]:after {
        content: "";
    }

    /* Page breaks */
    h2,
    h3 {
        page-break-after: avoid;
    }

    .policy-informational-block,
    .policy-requirements-block,
    .policy-rights-block,
    .policy-critical-notice,
    .policy-exception-block,
    .policy-procedure-steps,
    .policy-definition-panel,
    .policy-legal-language,
    .policy-acknowledgment-section {
        page-break-inside: avoid;
    }

    /* Layout adjustments */
    .policy-layout {
        display: block;
    }

    .policy-content {
        max-width: 100%;
    }

    /* Signature block */
    .signature-lines {
        margin-top: 2em;
    }

    .signature-lines p {
        margin-bottom: 2em;
    }
}


/* ========================================
   SECTION: CLINICAL PROCESS
   Clean vertical stack of treatment stages
   Used in: new_clinicalprocess.html
   ======================================== */

/* Section Container */
.clinical-process {
    background-color: #F5F1E8; /* Sand */
    padding: 80px 5% 80px 5%;
}

.process-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.process-header {
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.process-header .section-label {
    display: block;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--clay-text); /* Desert Clay */
    margin-bottom: 16px;
}

.process-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 12px;
}

.process-header .title-underline {
    width: 80px;
    height: 3px;
    background-color: #D4795B; /* Desert Clay */
    margin-bottom: 24px;
}

.process-header .section-subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(107, 83, 71, 0.8); /* Earth Brown at 80% */
    margin: 0;
}

/* Provider name link inside a Services price-table description (solo): body colour, underlined */
/* Used in: new_services_fees.html */
.pricing-table-col-description p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Solo only: names the provider under the process subtitle */
/* Used in: new_clinicalprocess.html */
.process-header .section-subtitle--provider {
    margin-top: 8px;
    color: #6B5347;
}

/* Used in: new_clinicalprocess.html */
.process-header .section-subtitle--provider a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Stages Container */
.stages-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Individual Stage Card */
.stage-card {
    position: relative;
    background: #FFFFFF;
    border-left: 5px solid #D4795B; /* Desert Clay */
    border-radius: 0;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.1);
    transition: all 0.3s ease;
}

.stage-card:last-child {
    margin-bottom: 0;
}

.stage-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(107, 83, 71, 0.15);
}

/* Stage Badge */
.stage-badge {
    position: absolute;
    left: -28px;
    top: 40px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 4px solid #D4795B; /* Desert Clay */
    box-shadow: 0 2px 8px rgba(212, 121, 91, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--clay-deep); /* Desert Clay */
}

/* Stage Title */
.stage-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 8px;
}

/* Stage Metadata */
.stage-meta {
    font-size: 16px;
    color: var(--clay-text); /* Desert Clay */
    margin-bottom: 20px;
}

/* Stage Content */
.stage-content {
    font-size: 16px;
    line-height: 1.7;
    color: #6B5347; /* Earth Brown */
}

.stage-content p {
    margin-bottom: 16px;
}

.stage-content p:last-child {
    margin-bottom: 0;
}

.stage-content strong {
    font-weight: 700;
}

.stage-content em {
    font-style: italic;
}

/* Section CTA */
.section-cta {
    max-width: 800px;
    margin: 60px auto 0 auto;
    text-align: center;
}

.section-cta h3 {
    font-size: 32px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 12px;
}

.section-cta p {
    font-size: 18px;
    color: rgba(107, 83, 71, 0.8); /* Earth Brown at 80% */
    margin-bottom: 24px;
    line-height: 1.5;
}

.section-cta .cta-button {
    background-color: #B85C3F; /* Desert Clay */
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 40px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(212, 121, 91, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.section-cta .cta-button:hover {
    background-color: #C36A4F; /* Darker Desert Clay */
    box-shadow: 0 6px 16px rgba(212, 121, 91, 0.4);
}

/* Tablet Responsive (768px - 1199px) */
@media (max-width: 1199px) {
    .clinical-process {
        padding: 60px 5%;
    }

    .process-header h2 {
        font-size: 38px;
    }

    .process-header .section-subtitle {
        font-size: 17px;
    }

    .stage-card {
        padding: 32px;
    }

    .stage-badge {
        width: 48px;
        height: 48px;
        font-size: 20px;
        left: -24px;
        border: 3px solid #D4795B;
    }

    .stage-title {
        font-size: 25px;
    }

    .section-cta h3 {
        font-size: 29px;
    }
}

/* Mobile Responsive (<768px) */
@media (max-width: 767px) {
    .clinical-process {
        padding: 40px 16px;
    }

    .process-header {
        margin-bottom: 40px;
    }

    .process-header h2 {
        font-size: 32px;
    }

    .process-header .section-label {
        font-size: 11px;
    }

    .process-header .section-subtitle {
        font-size: 16px;
    }

    .stage-card {
        padding: 24px;
        padding-left: 32px;
        margin-bottom: 32px;
    }

    .stage-badge {
        width: 44px;
        height: 44px;
        font-size: 18px;
        left: -22px;
        top: 24px;
    }

    .stage-title {
        font-size: 24px;
    }

    .stage-meta {
        font-size: 15px;
    }

    .stage-content {
        font-size: 15px;
    }

    .section-cta {
        margin-top: 40px;
    }

    .section-cta h3 {
        font-size: 28px;
    }

    .section-cta p {
        font-size: 16px;
    }

    .section-cta .cta-button {
        width: calc(100% - 32px);
        margin: 0 16px;
    }

}

/* ========== WHY I DO THIS WORK SECTION (ABOUT PAGE) ========== */

/* Section Container */
/* Used in: new_about_robert-WhyIDo.html */
.why-i-do {
    background: #FFFFFF;
    padding: 100px 5% 80px 5%;
}

.why-i-do-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.why-i-do-header {
    margin-bottom: 50px;
}

.why-i-do-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 12px;
}

.why-i-do-header .title-underline {
    width: 120px; /* 40% of approximate title width for visual balance */
    height: 4px;
    background-color: #D4795B; /* Desert Clay */
    margin-bottom: 0;
}

/* Two-Column Layout */
.why-i-do-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%;
}

/* Text Column - 60% width */
.text-column {
    flex: 0 0 60%;
    max-width: 700px;
    order: 1; /* DOM has the photo first (mobile float); keep text left on desktop */
}

.story-text p {
    font-size: 17px;
    line-height: 1.65;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 1.25em;
}

.story-text p:last-child {
    margin-bottom: 0;
}

/* First paragraph bold emphasis */
.story-text .first-paragraph {
    margin-bottom: 0.5em;
}

/* Photo Column - 35% width */
.photo-column {
    flex: 0 0 35%;
    max-width: 450px;
    order: 2;
}

.professional-photo {
    width: 100%;
}

/* Photo Placeholder (to be replaced with actual image) */
.photo-placeholder {
    width: 100%;
    padding-top: 133.33%; /* 3:4 aspect ratio (4/3 * 100) */
    background-color: #E5E5E5;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(107, 83, 71, 0.12);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-placeholder p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #999;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

/* The headshot (3:4), shown when the provider entry has a photo; same frame as the placeholder */
/* Used in: new_about_robert-WhyIDo.html */
.professional-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(107, 83, 71, 0.12);
    display: block;
}

/* Tablet Responsive (768px - 1023px) */
@media (max-width: 1023px) {
    .why-i-do {
        padding: 80px 5% 70px 5%;
    }

    .why-i-do-header h2 {
        font-size: 38px;
    }

    .why-i-do-content {
        gap: 5%;
    }

    /* Adjust column proportions slightly for tablet */
    .text-column {
        flex: 0 0 55%;
    }

    .photo-column {
        flex: 0 0 40%;
    }

    .story-text p {
        font-size: 16px;
    }
}

/* Mobile Responsive (<768px) */
@media (max-width: 767px) {
    .why-i-do {
        padding: 60px 20px 50px 20px;
    }

    .why-i-do-header {
        margin-bottom: 28px;
    }

    .why-i-do-header h2 {
        font-size: 32px;
    }

    .why-i-do-header .title-underline {
        width: 80px;
        height: 3px;
    }

    /* Mobile: block flow with the photo floated beside the opening paragraph (the photo precedes the text in the DOM) */
    .why-i-do-content {
        display: flow-root;
    }

    .text-column {
        max-width: 100%;
    }

    .story-text p {
        font-size: 16px;
        line-height: 1.6;
    }

    .photo-placeholder p {
        font-size: 14px;
    }
}

/* ========== MEDICATION DECISION MAKING SECTION ========== */

/* Section Container */
.decision-making {
    background: #FFFFFF;
    padding: 80px 5%;
}

.decision-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.decision-making .section-header {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}

.decision-making .section-header h2 {
    font-size: 38px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 16px;
}

.decision-making .title-underline {
    width: 100px;
    height: 3px;
    background: #D4795B;
    margin: 0 auto 24px;
}

.decision-making .intro-text {
    font-size: 18px;
    color: rgba(107, 83, 71, 0.85);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* What I Track Subsection */
.tracking-domains {
    margin-bottom: 60px;
}

.tracking-domains h3 {
    font-size: 28px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 30px;
    text-align: center;
}

/* Domain Grid */
.domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Individual Domain Cards */
.domain-card {
    background: rgba(245, 241, 232, 0.6);
    border-top: 4px solid #D4795B;
    border-radius: 0;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(107, 83, 71, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.domain-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.12);
}

.domain-card i {
    font-size: 24px;
    color: #D4795B;
    margin-bottom: 16px;
    display: block;
}

.domain-card h4 {
    font-size: 18px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 12px;
}

.domain-card p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(107, 83, 71, 0.9);
    margin: 0;
}

/* Decision Criteria Box - Editorial Pull Quote Style */
/* Used in: new_makingdecisions.html */
.decision-criteria {
    max-width: 720px; /* 90% width effect through smaller max-width */
    margin: 60px auto 0;
    padding: 48px 56px;
    background: transparent;
    border-left: 6px solid #D4795B; /* Desert Clay */
    border-right: 6px solid #D4795B; /* Symmetric dual borders */
    border-radius: 0;
}

.decision-criteria p {
    font-size: 21px; /* Large, prominent typography */
    font-weight: 700; /* Bold weight for emphasis */
    line-height: 1.65;
    color: #6B5347;
    margin: 0;
    text-align: center; /* Centered for pull-quote effect */
    font-style: normal; /* Non-italic */
}

/* What Doesn't Trigger Subsection */
.non-triggers {
    max-width: 800px;
    margin: 50px auto 0;
}

.non-triggers h3 {
    font-size: 24px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 24px;
}

/* Custom Bullet List */
.non-trigger-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.non-trigger-list li {
    display: flex;
    align-items: start;
    margin-bottom: 20px;
    padding-left: 40px;
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    color: #6B5347;
}

.non-trigger-list li::before {
    content: "×";
    position: absolute;
    left: 0;
    font-size: 24px;
    color: rgba(212, 121, 91, 0.6);
    line-height: 1;
}

/* Closing Statement Box - Personal Insight Style */
/* Used in: new_makingdecisions.html */
.closing-statement {
    max-width: 800px;
    margin: 40px auto 0;
    padding: 36px 40px;
    background: rgba(156, 175, 136, 0.06); /* Light sage green tint */
    border-left: 5px solid #9CAF88; /* Sage green left border */
    border-radius: 0;
    box-shadow: none;
}

.closing-statement p {
    font-size: 17px;
    font-weight: 400; /* Regular weight, flowing typography */
    line-height: 1.8; /* Increased for readability */
    color: #6B5347;
    margin: 0;
    text-align: left; /* Left-aligned for readability */
    font-style: italic; /* Entire block italicized */
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablet (768-1199px) */
@media (max-width: 1199px) {
    .decision-making {
        padding: 60px 5%;
    }

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

    .decision-making .section-header h2 {
        font-size: 35px;
    }

    .decision-making .intro-text {
        font-size: 16.5px;
    }

    .tracking-domains h3 {
        font-size: 26px;
    }

    .non-triggers h3 {
        font-size: 22px;
    }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
    .decision-making {
        padding: 40px 16px;
    }

    .decision-making .section-header h2 {
        font-size: 30px;
    }

    .decision-making .intro-text {
        font-size: 15px;
    }

    .tracking-domains h3 {
        font-size: 22px;
    }

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

    .domain-card {
        padding: 20px;
    }

    .decision-criteria {
        padding: 32px 24px;
        max-width: 90%; /* Maintain inset effect on mobile */
    }

    .decision-criteria p {
        font-size: 18px; /* Scale down but keep prominence */
    }

    .non-triggers h3 {
        font-size: 20px;
    }

    .non-trigger-list li {
        font-size: 15px;
    }

    .non-trigger-list li::before {
        font-size: 20px;
    }

    .closing-statement {
        padding: 28px 24px;
    }

    .closing-statement p {
        font-size: 16px; /* Maintain readability on mobile */
        line-height: 1.75;
    }
}

/* ========================================
   SECTION: EVIDENCE-BASED
   Split-panel design emphasizing systematic methodology
   Used in: new_whyevidencebased.html
   ======================================== */

/* Used in: new_whyevidencebased */
/* Section Container */
.evidence-based {
    background-image:
        linear-gradient(rgba(245, 241, 232, 0.92), rgba(245, 241, 232, 0.88)),
        url("/staticfiles/images/Photos/L-DesertSunset.0aa4ac030a1d.jpg");
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* Parallax effect */
    background-repeat: no-repeat;
    padding: 80px 5%;
}

/* Used in: new_whyevidencebased */
.evidence-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ========== SECTION HEADER ========== */
/* Used in: new_whyevidencebased */
.evidence-based .section-header {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}

/* Used in: new_whyevidencebased */
.evidence-based .section-header h2 {
    font-size: 38px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Used in: new_whyevidencebased */
.evidence-based .title-underline {
    width: 120px;
    height: 3px;
    background: #D4795B; /* Desert Clay */
    margin: 0 auto;
}

/* ========== UNIFIED CARD CONTAINER ========== */
/* Used in: new_whyevidencebased */
.evidence-based .unified-card {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(107, 83, 71, 0.12);
    overflow: hidden;
}

/* ========== MAIN CONTENT LAYOUT ========== */
/* Used in: new_whyevidencebased */
.evidence-based .content-layout {
    display: flex;
    gap: 32px;
    align-items: stretch;
}

/* ========== LEFT COLUMN: EXPLANATION ========== */
/* Used in: new_whyevidencebased */
.evidence-based .explanation-column {
    flex: 0 0 420px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Intro Block with Accent Bar */
/* Used in: new_whyevidencebased */
.evidence-based .intro-block {
    position: relative;
    padding-left: 16px;
}

/* Used in: new_whyevidencebased */
.evidence-based .accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #D4795B; /* Desert Clay */
    border-radius: 2px;
}

/* Used in: new_whyevidencebased */
.evidence-based .intro-block .intro-text {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: #6B5347; /* Earth Brown */
    margin: 0;
}

/* Rating Scales Grid */
/* Used in: new_whyevidencebased */
.evidence-based .rating-scales-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px 0;
}

/* Used in: new_whyevidencebased */
.evidence-based .scale-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: rgba(156, 175, 136, 0.12); /* Warm Sage tint */
    border: 1px solid rgba(156, 175, 136, 0.25);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6B5347; /* Earth Brown */
    letter-spacing: 0.3px;
    text-align: center;
}

/* Detail Text */
/* Used in: new_whyevidencebased */
.evidence-based .explanation-column .detail-text {
    font-size: 15px;
    line-height: 1.65;
    color: #6B5347; /* Earth Brown */
    font-weight: 400;
    margin: 0;
}

/* ========== RIGHT COLUMN: BENEFITS CALLOUT PANEL ========== */
/* Used in: new_whyevidencebased */
.evidence-based .benefits-callout {
    flex: 1 1 55%;
    background: rgba(212, 121, 91, 0.08); /* Subtle clay tint */
    padding: 40px 36px;
    border-top: 4px solid #D4795B; /* Desert Clay accent */
    display: flex;
    flex-direction: column;
}

/* Used in: new_whyevidencebased */
.evidence-based .benefits-callout h3 {
    font-size: 22px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    margin: 0 0 28px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(212, 121, 91, 0.2);
}

/* Benefits List */
/* Used in: new_whyevidencebased */
.evidence-based .benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Used in: new_whyevidencebased */
.evidence-based .benefits-list li {
    display: flex;
    align-items: flex-start;
}

/* Used in: new_whyevidencebased */
.evidence-based .benefits-list li span:last-child {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    color: #6B5347; /* Earth Brown */
}

/* Check Icon */
/* Used in: new_whyevidencebased */
.evidence-based .check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: #D4795B; /* Desert Clay */
    margin-right: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Used in: new_whyevidencebased */
.evidence-based .check-icon i {
    font-size: 12px;
    color: #FFFFFF;
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablet (768-1199px) */
@media (max-width: 1199px) {
    .evidence-based {
        padding: 60px 5%;
    }

    .evidence-based .content-layout {
        gap: 24px;
    }

    .evidence-based .explanation-column {
        flex: 0 0 380px;
        padding: 32px;
        gap: 16px;
    }

    .evidence-based .benefits-callout {
        flex: 1 1 50%;
        padding: 32px 28px;
    }

    .evidence-based .section-header h2 {
        font-size: 35px;
    }

    .evidence-based .intro-block .intro-text {
        font-size: 16px;
    }

    .evidence-based .explanation-column .detail-text {
        font-size: 14px;
    }

    .evidence-based .rating-scales-grid {
        gap: 8px;
    }

    .evidence-based .scale-badge {
        padding: 7px 10px;
        font-size: 12px;
    }

    .evidence-based .benefits-callout h3 {
        font-size: 20px;
        margin-bottom: 24px;
    }

    .evidence-based .benefits-list li span:last-child {
        font-size: 14px;
    }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
    .evidence-based {
        padding: 60px 16px;
        background-attachment: scroll; /* Disable parallax on mobile for performance */
    }

    .evidence-based .section-header {
        margin-bottom: 32px;
    }

    .evidence-based .section-header h2 {
        font-size: 30px;
    }

    .evidence-based .unified-card {
        border-radius: 6px;
    }

    .evidence-based .content-layout {
        flex-direction: column;
        gap: 0;
    }

    /* Benefits panel appears first on mobile */
    .evidence-based .benefits-callout {
        order: 1;
        flex: 0 0 auto;
        padding: 32px 24px;
        border-top: none;
        border-bottom: 4px solid #D4795B;
    }

    .evidence-based .explanation-column {
        order: 2;
        flex: 0 0 auto;
        padding: 32px 24px;
        gap: 16px;
    }

    .evidence-based .intro-block {
        padding-left: 14px;
    }

    .evidence-based .intro-block .intro-text {
        font-size: 16px;
    }

    .evidence-based .rating-scales-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .evidence-based .scale-badge {
        padding: 8px 10px;
        font-size: 12px;
    }

    .evidence-based .explanation-column .detail-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .evidence-based .benefits-callout h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .evidence-based .benefits-list {
        gap: 16px;
    }

    .evidence-based .benefits-list li span:last-child {
        font-size: 14px;
    }
}

/* ========== INTERACTIVE RATING SCALES (NEW) ========== */

/* Instruction Text */
/* Used in: new_whyevidencebased */
.evidence-based .instruction-text {
    font-size: 14px;
    font-weight: 500;
    color: #6B5347;
    margin: 0;
    opacity: 0.85;
}

/* Interactive Scales Selector Grid */
/* Used in: new_whyevidencebased */
.evidence-based .scales-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Override Previous Badge Styles for Interactive Version */
/* Used in: new_whyevidencebased */
.evidence-based .scales-selector .scale-badge {
    padding: 12px 14px;
    border: 2px solid rgba(156, 175, 136, 0.25);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
}

/* Used in: new_whyevidencebased */
.evidence-based .scales-selector .scale-badge:hover {
    background: rgba(156, 175, 136, 0.20);
    border-color: rgba(156, 175, 136, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(107, 83, 71, 0.12);
}

/* Used in: new_whyevidencebased */
.evidence-based .scales-selector .scale-badge:focus {
    outline: 2px solid #D4795B;
    outline-offset: 2px;
}

/* Active Badge State */
/* Used in: new_whyevidencebased */
.evidence-based .scales-selector .scale-badge.active {
    background: #B85C3F; /* Desert Clay */
    border-color: #D4795B;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(212, 121, 91, 0.3);
    transform: none;
}

/* Used in: new_whyevidencebased */
.evidence-based .scales-selector .scale-badge.active:hover {
    background: #C36A4F; /* Slightly darker clay */
    border-color: #C36A4F;
    transform: none;
}

/* ========== DYNAMIC SCALE CONTENT PANEL ========== */

/* Scale Content Container */
/* Used in: new_whyevidencebased */
.evidence-based .scale-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Used in: new_whyevidencebased */
.evidence-based .scale-content.active {
    display: block;
    opacity: 1;
}

/* Scale Content Title */
/* Used in: new_whyevidencebased */
.evidence-based .scale-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #6B5347;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

/* Scale Meta (Measures Tag) */
/* Used in: new_whyevidencebased */
.evidence-based .scale-meta {
    margin-bottom: 18px;
}

/* Used in: new_whyevidencebased */
.evidence-based .measures-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Color-Coded Tags by Category */
/* Used in: new_whyevidencebased */
.evidence-based .tag-adhd {
    background: rgba(212, 121, 91, 0.15); /* Desert Clay */
    color: var(--clay-text);
}

/* Used in: new_whyevidencebased */
.evidence-based .tag-function {
    background: rgba(156, 175, 136, 0.15); /* Warm Sage */
    color: #7A8C6D;
}

/* Used in: new_whyevidencebased */
.evidence-based .tag-anxiety {
    background: rgba(102, 153, 204, 0.15); /* Blue */
    color: #5282B3;
}

/* Used in: new_whyevidencebased */
.evidence-based .tag-depression {
    background: rgba(107, 83, 71, 0.12); /* Earth Brown */
    color: #6B5347;
}

/* Used in: new_whyevidencebased */
.evidence-based .tag-sleep {
    background: rgba(147, 112, 166, 0.15); /* Muted Purple */
    color: #8B6FA0;
}

/* Scale Description */
/* Used in: new_whyevidencebased */
.evidence-based .scale-description {
    font-size: 15px;
    line-height: 1.7;
    color: #6B5347;
    margin: 0 0 20px 0;
}

/* Scale Details Box */
/* Used in: new_whyevidencebased */
.evidence-based .scale-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: rgba(245, 241, 232, 0.4);
    border-radius: 6px;
    border-left: 3px solid #D4795B;
}

/* Used in: new_whyevidencebased */
.evidence-based .detail-item {
    font-size: 14px;
    line-height: 1.5;
    color: #6B5347;
}

/* Used in: new_whyevidencebased */
.evidence-based .detail-item strong {
    font-weight: 700;
    color: #6B5347;
}

/* ========== RESPONSIVE: INTERACTIVE VERSION ========== */

@media (max-width: 1199px) {
    .evidence-based .scales-selector {
        gap: 10px;
    }

    .evidence-based .scales-selector .scale-badge {
        padding: 10px 12px;
        font-size: 13px;
    }

    .evidence-based .scale-content h3 {
        font-size: 20px;
    }

    .evidence-based .scale-description {
        font-size: 14px;
    }

    .evidence-based .instruction-text {
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .evidence-based .scales-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .evidence-based .scales-selector .scale-badge {
        padding: 10px;
        font-size: 12px;
    }

    .evidence-based .scale-content h3 {
        font-size: 19px;
    }

    .evidence-based .scale-description {
        font-size: 14px;
        line-height: 1.6;
    }

    .evidence-based .scale-details {
        padding: 14px;
    }

    .evidence-based .detail-item {
        font-size: 13px;
    }

    .evidence-based .instruction-text {
        font-size: 13px;
    }

    /* Info panel ordering on mobile */
    .evidence-based .scale-info-panel {
        order: 2;
        border-top: none;
        border-bottom: 4px solid #D4795B;
    }

    .evidence-based .explanation-column {
        order: 1;
    }
}

/* ========================================
   SECTION: TIMELINE EXPECTATIONS
   Timeline-focused layout with vertical cards + sidebar
   Used in: new_timeline-expectations.html
   ======================================== */

/* Section Container */
/* Used in: new_timeline-expectations.html */
.timeline-expectations {
    background: linear-gradient(135deg, #f8f6f4 0%, #ebe7dc 100%);
    padding: 80px 5%;
}

/* Used in: new_timeline-expectations.html */
.timeline-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header - Now inside left column */
/* Used in: new_timeline-expectations.html */
.timeline-expectations .section-header {
    max-width: 100%;
    margin: 0 0 40px 0;
    text-align: left;
}

/* Used in: new_timeline-expectations.html */
.timeline-expectations .section-header h2 {
    font-size: 38px;
    font-weight: bold;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

/* Used in: new_timeline-expectations.html */
.timeline-expectations .title-underline {
    width: 100px;
    height: 3px;
    background: #D4795B; /* Desert Clay */
    margin: 0 0 20px 0;
}

/* Used in: new_timeline-expectations.html */
.timeline-expectations .section-subheading {
    font-size: 20px;
    color: rgba(107, 83, 71, 0.8); /* Earth Brown at 80% */
    margin-top: 20px;
    line-height: 1.5;
}

/* Content Container - Textured container with border and shadow */
/* Used in: new_timeline-expectations.html */
.timeline-content-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #FEFDFB;
    border-radius: 12px;
    padding: 50px 40px;
    box-shadow: 0 2px 8px rgba(107, 83, 71, 0.08), 0 8px 24px rgba(107, 83, 71, 0.12);
    border: 1px solid rgba(107, 83, 71, 0.08);
}

/* Main Content Wrapper - Cards + Sidebar Layout */
/* Used in: new_timeline-expectations.html */
.timeline-content-wrapper {
    display: flex;
    gap: 5%;
    align-items: stretch; /* Force both columns to equal height */
}

/* Left Column - Header + Medication Cards Grid */
/* Used in: new_timeline-expectations.html */
.medication-cards-column {
    flex: 0 0 60%; /* Fixed 60% width */
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Medication Cards Grid - 2x2 layout */
/* Used in: new_timeline-expectations.html */
.medication-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Right Sidebar */
/* Used in: new_timeline-expectations.html */
.timeline-sidebar {
    flex: 0 0 35%; /* Fixed 35% width */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute 3 boxes evenly across available height */
    gap: 20px; /* Add minimum spacing between boxes */
    position: sticky;
    top: 100px;
    align-self: flex-start; /* Allow sticky positioning to work */
}

/* Individual Medication Card */
/* Used in: new_timeline-expectations.html */
.medication-card {
    position: relative;
    background: rgba(245, 241, 232, 0.7); /* Sand at 70% opacity */
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(107, 83, 71, 0.08), 0 4px 12px rgba(107, 83, 71, 0.06);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Card hover state - lift effect */
/* Used in: new_timeline-expectations.html */
.medication-card:hover {
    box-shadow: 0 2px 8px rgba(107, 83, 71, 0.12), 0 8px 20px rgba(107, 83, 71, 0.10);
    transform: translateY(-2px);
}

/* Card Header - Clean header with title only */
/* Used in: new_timeline-expectations.html */
.card-header {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.4); /* Subtle white tint */
    border-bottom: 2px solid transparent; /* Will be colored per medication type */
}

/* Card Header Underline Colors by Medication Type */
/* Used in: new_timeline-expectations.html */
.medication-card.stimulants .card-header {
    border-bottom-color: #D4795B; /* Desert Clay */
}

/* Used in: new_timeline-expectations.html */
.medication-card.non-stimulants .card-header {
    border-bottom-color: #9CAF88; /* Warm Sage */
}

/* Used in: new_timeline-expectations.html */
.medication-card.beta-blockers .card-header {
    border-bottom-color: #E8B087; /* Sunrise Peach */
}

/* Used in: new_timeline-expectations.html */
.medication-card.ssris .card-header {
    border-bottom-color: rgba(107, 83, 71, 0.6); /* Earth Brown at 60% */
}

/* Card Title in Header */
/* Used in: new_timeline-expectations.html */
.card-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

/* Card Footer - Data-driven footer with 2 columns */
/* Used in: new_timeline-expectations.html */
.card-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 2px solid transparent; /* Will be colored per medication type */
    background: rgba(0, 0, 0, 0.02); /* Subtle darker tint */
}

/* Card Footer Border Colors by Medication Type */
/* Used in: new_timeline-expectations.html */
.medication-card.stimulants .card-footer {
    border-top-color: #D4795B; /* Desert Clay */
}

/* Used in: new_timeline-expectations.html */
.medication-card.non-stimulants .card-footer {
    border-top-color: #9CAF88; /* Warm Sage */
}

/* Used in: new_timeline-expectations.html */
.medication-card.beta-blockers .card-footer {
    border-top-color: #E8B087; /* Sunrise Peach */
}

/* Used in: new_timeline-expectations.html */
.medication-card.ssris .card-footer {
    border-top-color: rgba(107, 83, 71, 0.6); /* Earth Brown at 60% */
}

/* Footer Data Point */
/* Used in: new_timeline-expectations.html */
.footer-data-point {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: background 0.2s ease;
}

/* Vertical divider between footer columns */
/* Used in: new_timeline-expectations.html */
.footer-data-point:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: rgba(107, 83, 71, 0.15);
}

/* Footer Data Point Hover Effect */
/* Used in: new_timeline-expectations.html */
.footer-data-point:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Footer Icon */
/* Used in: new_timeline-expectations.html */
.footer-icon {
    color: rgba(107, 83, 71, 0.5);
    margin-bottom: 4px;
}

/* Footer Data Label */
/* Used in: new_timeline-expectations.html */
.data-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(107, 83, 71, 0.6);
    margin-bottom: 2px;
}

/* Footer Data Value */
/* Used in: new_timeline-expectations.html */
.data-value {
    font-size: 15px;
    font-weight: 600;
    color: #6B5347; /* Earth Brown */
    line-height: 1.3;
}

/* Card Content Area */
/* Used in: new_timeline-expectations.html */
.card-content {
    padding: 24px 28px 28px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Card Content Paragraphs */
/* Used in: new_timeline-expectations.html */
.card-content p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(107, 83, 71, 0.9); /* Earth Brown at 90% */
    margin-bottom: 12px;
}

/* Used in: new_timeline-expectations.html */
.card-content p:last-child {
    margin-bottom: 0;
}

/* Sidebar icon styling */
/* Used in: new_timeline-expectations.html */
.sidebar-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    color: #9CAF88; /* Warm Sage */
}

/* "What Working Means" Section - Sidebar */
/* Used in: new_timeline-expectations.html */
.working-means-section {
    padding: 24px;
    background: rgba(156, 175, 136, 0.08); /* Warm Sage at 8% opacity */
    border-left: 4px solid #9CAF88; /* Warm Sage */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(107, 83, 71, 0.06), 0 6px 16px rgba(107, 83, 71, 0.04);
}

/* Used in: new_timeline-expectations.html */
.working-means-section h3 {
    font-size: 24px;
    font-weight: bold;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

/* Used in: new_timeline-expectations.html */
.working-means-section p {
    font-size: 16px;
    line-height: 1.6;
    color: #6B5347; /* Earth Brown */
}

/* Individual Variation Section - Sidebar */
/* Used in: new_timeline-expectations.html */
.individual-variation {
    padding: 24px;
    background: rgba(232, 176, 135, 0.08); /* Sunrise Peach at 8% opacity */
    border-left: 4px solid #E8B087; /* Sunrise Peach */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(107, 83, 71, 0.06), 0 6px 16px rgba(107, 83, 71, 0.04);
}

/* Color override for individual variation icon */
/* Used in: new_timeline-expectations.html */
.individual-variation .sidebar-icon {
    color: #E8B087; /* Sunrise Peach */
}

/* Used in: new_timeline-expectations.html */
.individual-variation h3 {
    font-size: 22px;
    font-weight: bold;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

/* Used in: new_timeline-expectations.html */
.individual-variation p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(107, 83, 71, 0.9); /* Earth Brown at 90% */
    margin-bottom: 12px;
}

/* Used in: new_timeline-expectations.html */
.individual-variation p:last-child {
    margin-bottom: 0;
}

/* Emphasis for Timeline */
/* Used in: new_timeline-expectations.html */
.emphasis-timeline {
    font-weight: bold;
    color: var(--clay-text); /* Desert Clay */
}

/* What to Track Section - Sidebar */
/* Used in: new_timeline-expectations.html */
.what-to-track {
    padding: 24px;
    background: rgba(140, 157, 181, 0.08); /* Sky Blue at 8% opacity */
    border-left: 4px solid #8C9DB5; /* Sky Blue */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(107, 83, 71, 0.06), 0 6px 16px rgba(107, 83, 71, 0.04);
}

/* Color override for what to track icon */
/* Used in: new_timeline-expectations.html */
.what-to-track .sidebar-icon {
    color: #8C9DB5; /* Sky Blue */
}

/* Used in: new_timeline-expectations.html */
.what-to-track h3 {
    font-size: 22px;
    font-weight: bold;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

/* Used in: new_timeline-expectations.html */
.what-to-track p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(107, 83, 71, 0.9); /* Earth Brown at 90% */
    margin-bottom: 12px;
}

/* Used in: new_timeline-expectations.html */
.what-to-track p:last-child {
    margin-bottom: 0;
}

/* ========================================
   RESPONSIVE: TABLET (768px - 1199px)
   ======================================== */

@media (max-width: 1199px) {
    .timeline-content-container {
        padding: 40px 30px;
    }

    .timeline-content-wrapper {
        flex-direction: column; /* Stack columns (flex container: grid-template-columns had no effect) */
        gap: 40px;
    }

    .medication-cards-column,
    .timeline-sidebar {
        flex: 0 0 auto; /* Drop the 60% / 35% desktop basis */
        width: 100%;
        min-width: 0;
    }

    .timeline-sidebar {
        position: static; /* Remove sticky */
    }

    .medication-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .medication-card {
        min-height: auto;
    }

    .card-header {
        padding: 18px 20px;
    }

    .card-content {
        padding: 20px 24px 24px 24px;
    }

    .timeline-expectations .section-header h2 {
        font-size: 35px;
    }

    .timeline-expectations .section-subheading {
        font-size: 18px;
    }

    .card-header h3 {
        font-size: 18px;
    }

    .card-content p {
        font-size: 14px;
    }

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

    .footer-data-point {
        padding: 14px 18px;
    }

    .data-label {
        font-size: 10px;
    }

    .data-value {
        font-size: 14px;
    }

    .working-means-section h3 {
        font-size: 22px;
    }

    .individual-variation h3 {
        font-size: 22px;
    }

    .what-to-track h3 {
        font-size: 22px;
    }

    .working-means-section p,
    .individual-variation p,
    .what-to-track p {
        font-size: 15px;
    }
}

/* ========================================
   RESPONSIVE: MOBILE (<768px)
   ======================================== */

@media (max-width: 767px) {
    .timeline-expectations {
        padding: 60px 16px;
    }

    .timeline-content-container {
        padding: 30px 20px;
        box-shadow: 0 2px 6px rgba(107, 83, 71, 0.06), 0 6px 16px rgba(107, 83, 71, 0.08);
    }

    .timeline-content-wrapper {
        flex-direction: column;
        gap: 32px;
    }

    .medication-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .timeline-sidebar {
        gap: 24px;
    }

    .medication-card {
        min-height: auto;
    }

    .card-header {
        padding: 16px 18px;
    }

    .card-content {
        padding: 18px 20px 20px 20px;
    }

    .timeline-expectations .section-header h2 {
        font-size: 30px;
    }

    .timeline-expectations .section-subheading {
        font-size: 18px;
    }

    .card-header h3 {
        font-size: 18px;
    }

    .card-content p {
        font-size: 15px;
    }

    /* Card Footer Mobile: Stack vertically */
    .card-footer {
        grid-template-columns: 1fr;
    }

    .footer-data-point {
        padding: 14px 18px;
    }

    /* Remove vertical divider on mobile since items stack */
    .footer-data-point:first-child::after {
        display: none;
    }

    /* Add horizontal divider instead */
    .footer-data-point:first-child {
        border-bottom: 1px solid rgba(107, 83, 71, 0.15);
    }

    .data-label {
        font-size: 10px;
    }

    .data-value {
        font-size: 14px;
    }

    .working-means-section,
    .individual-variation,
    .what-to-track {
        padding: 24px;
    }

    .working-means-section h3,
    .individual-variation h3,
    .what-to-track h3 {
        font-size: 20px;
    }

    .working-means-section p,
    .individual-variation p,
    .what-to-track p {
        font-size: 15px;
    }
}

/* ========================================
   WHAT'S INCLUDED SECTION
   ======================================== */

.whats-included-section {
    background: #F5F1E8; /* Sand */
    padding: 80px 5%;
}

.whats-included-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.whats-included-header {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.whats-included-header h2 {
    font-size: 38px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 12px;
}

.whats-included-underline {
    width: 120px;
    height: 3px;
    background: #D4795B;
    margin: 0 auto 24px;
}

.whats-included-intro {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(107, 83, 71, 0.85);
    max-width: 700px;
    margin: 0 auto;
}

/* White Card Container */
.whats-included-card {
    max-width: 900px;
    margin: 0 auto;
    background: #FFFFFF;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.1);
}

/* Service Row */
.included-service-row {
    position: relative;
    padding-left: 60px;
    margin-bottom: 32px;
}

.included-service-row:last-child {
    margin-bottom: 0;
}

/* Checkmark Icon */
.included-checkmark {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(212, 121, 91, 0.15);
    border: 2px solid #D4795B;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4795B;
    font-size: 20px;
    font-weight: bold;
}

/* Service Text */
.included-service-text {
    display: block;
}

.included-service-title {
    font-size: 20px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 8px;
    line-height: 1.4;
}

.included-service-description {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(107, 83, 71, 0.9);
    margin: 0;
}

/* Not Included Section */
.whats-not-included-box {
    max-width: 900px;
    margin: 50px auto 0;
    padding: 32px;
    background: rgba(107, 83, 71, 0.06);
    border-left: 4px solid rgba(107, 83, 71, 0.4);
    border-radius: 0;
}

.whats-not-included-title {
    font-size: 20px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 16px;
}

.whats-not-included-inline {
    font-size: 16px;
    color: #6B5347;
    line-height: 1.6;
    display: block;
    margin-bottom: 16px;
}

.whats-not-included-list {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.whats-not-included-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: #6B5347;
}

.whats-not-included-list li:last-child {
    margin-bottom: 0;
}

.not-included-x {
    color: rgba(212, 121, 91, 0.7);
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

/* ========================================
   RESPONSIVE: TABLET (768px - 1199px)
   ======================================== */

@media (max-width: 1199px) {
    .whats-included-section {
        padding: 60px 5%;
    }

    .whats-included-card {
        padding: 40px;
    }

    .whats-included-header h2 {
        font-size: 35px;
    }

    .whats-included-intro {
        font-size: 17px;
    }

    .included-checkmark {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .included-service-row {
        padding-left: 52px;
    }

    .included-service-title {
        font-size: 18px;
    }

    .included-service-description {
        font-size: 15px;
    }

    .whats-not-included-title {
        font-size: 18px;
    }

    .whats-not-included-inline {
        font-size: 15px;
    }
}

/* ========================================
   RESPONSIVE: MOBILE (<768px)
   ======================================== */

@media (max-width: 767px) {
    .whats-included-section {
        padding: 60px 16px;
    }

    .whats-included-card {
        padding: 24px;
    }

    .whats-included-header h2 {
        font-size: 30px;
    }

    .whats-included-intro {
        font-size: 15px;
    }

    .included-checkmark {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .included-service-row {
        padding-left: 50px;
        margin-bottom: 28px;
    }

    .included-service-title {
        font-size: 18px;
    }

    .included-service-description {
        font-size: 15px;
    }

    .whats-not-included-box {
        padding: 24px;
    }

    .whats-not-included-title {
        font-size: 18px;
    }

    /* Mobile: Adjust font sizes for list */
    .whats-not-included-list li {
        font-size: 15px;
    }
}

/* ============================================
   READY TO START CTA SECTION
   ============================================ */

.ready-to-start-cta {
    position: relative;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.90)),
        url("/staticfiles/images/Photos/L-MonumentValley.6a722d1bd507.jpg");
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 100px 5%;
    border-top: 1px solid rgba(107, 83, 71, 0.15);
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.ready-to-start-cta .section-header {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}

.ready-to-start-cta .section-header h2 {
    font-size: 48px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 16px;
}

.ready-to-start-cta .title-underline {
    width: 120px;
    height: 4px;
    background: #D4795B;
    margin: 0 auto 24px;
}

.ready-to-start-cta .intro-text {
    font-size: 20px;
    color: rgba(107, 83, 71, 0.85);
    line-height: 1.6;
}

/* CTA Options Grid */
.cta-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto 50px;
    align-items: stretch;
}

/* CTA Cards */
.cta-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: rgba(245, 241, 232, 0.5);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.08);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Desktop hover effects */
@media (hover: hover) {
    .cta-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 24px rgba(107, 83, 71, 0.12);
    }
}

.cta-card.primary-option {
    border-top: 5px solid #D4795B;
}

.cta-card.secondary-option {
    border-top: 5px solid #9CAF88;
}

.cta-card h3 {
    font-size: 24px;
    font-weight: bold;
    color: #6B5347;
    margin-bottom: 16px;
}

.cta-card p {
    flex-grow: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(107, 83, 71, 0.9);
    margin-bottom: 16px;
}

.cta-card p:last-of-type {
    flex-grow: 1;
    margin-bottom: 28px;
}

/* Pricing Meta - displays pricing info prominently */
.pricing-meta {
    font-size: 20px;
    font-weight: 700;
    color: var(--clay-deep);
    margin: 0 0 20px 0;
    flex-grow: 0;
}

.secondary-option .pricing-meta {
    color: var(--sage-text);
}

/* Buttons */
.btn-primary {
    margin-top: auto;
    background: #B85C3F;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 18px 36px;
    border-radius: 6px;
    border: none;
    box-shadow: 0 4px 12px rgba(212, 121, 91, 0.3);
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}

/* Desktop hover for primary button */
@media (hover: hover) {
    .btn-primary:hover {
        background: #C36A4F;
        transform: scale(1.02);
        box-shadow: 0 6px 16px rgba(212, 121, 91, 0.4);
    }
}

/* Mobile/touch active state for primary button */
.btn-primary:active {
    background: #C36A4F;
    transform: scale(0.98);
}

.btn-secondary {
    margin-top: auto;
    background: white;
    color: var(--clay-text);
    font-size: 16px;
    font-weight: bold;
    padding: 18px 36px;
    border-radius: 6px;
    border: 2px solid #D4795B;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}

/* Desktop hover for secondary button */
@media (hover: hover) {
    .btn-secondary:hover {
        background: rgba(212, 121, 91, 0.1);
    }
}

/* Mobile/touch active state for secondary button */
.btn-secondary:active {
    background: rgba(212, 121, 91, 0.15);
    transform: scale(0.98);
}

/* Anchor variants of the CTA card buttons (render like the former <button>s) */
.cta-card a.btn-primary,
.cta-card a.btn-secondary {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    line-height: normal;
}

.cta-card a.btn-primary,
.cta-card a.btn-primary:hover {
    color: white;
}

.cta-card a.btn-secondary,
.cta-card a.btn-secondary:hover {
    color: var(--clay-text);
}

/* Closing Statement */
.closing-statement {
    max-width: 700px;
    margin: 0 auto;
    padding: 32px;
    background: rgba(156, 175, 136, 0.08);
    border-radius: 8px;
    text-align: center;
}

.closing-statement p {
    font-size: 17px;
    line-height: 1.7;
    color: #6B5347;
    font-weight: 500;
}

/* Tablet Responsive (768-1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
    .cta-card {
        padding: 32px;
    }

    .cta-card p {
        font-size: 15px;
    }

    .pricing-meta {
        font-size: 18px;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 15px;
    }
}

/* Mobile Responsive (<768px) */
@media (max-width: 767px) {
    .ready-to-start-cta {
        background-attachment: scroll;
        padding: 60px 16px;
    }

    .ready-to-start-cta .section-header h2 {
        font-size: 36px;
    }

    .cta-options-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cta-card {
        padding: 28px;
    }

    .cta-card h3 {
        font-size: 22px;
    }

    .pricing-meta {
        font-size: 17px;
    }

    .btn-primary,
    .btn-secondary {
        margin: 0 16px;
        width: calc(100% - 32px);
    }

    .closing-statement {
        padding: 24px;
    }
}

/* ========================================
   Provider Path Section Styles
   ======================================== */

/* Desktop Styles (≥1024px) */
/* Used in: new_about_robert-BedsideToPrescriber.html */
.provider-path {
    background: #FFFFFF;
    padding: 100px 5% 90px;
}

/* Used in: new_about_robert-BedsideToPrescriber.html */
.provider-path-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Section Header */
/* Used in: new_about_robert-BedsideToPrescriber.html */
.provider-path-header {
    text-align: center;
    margin-bottom: 48px;
}

/* Used in: new_about_robert-BedsideToPrescriber.html */
.provider-path-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347;
    margin-bottom: 12px;
}

/* Used in: new_about_robert-BedsideToPrescriber.html */
.provider-path-header .header-underline {
    width: 80px;
    height: 4px;
    background-color: #D4795B;
    margin: 0 auto;
}

/* Featured Opening */
/* Used in: new_about_robert-BedsideToPrescriber.html */
.provider-path-feature {
    text-align: center;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(107, 83, 71, 0.1);
}

.feature-text {
    font-size: 20px;
    color: rgba(107, 83, 71, 0.6);
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}

.feature-emphasis {
    font-family: var(--accent-font);
    font-size: 36px;
    font-weight: 400;
    color: var(--clay-deep);
    margin: 0;
    line-height: 1.2;
}

/* Narrative Content */
/* Used in: new_about_robert-BedsideToPrescriber.html */
.provider-path-narrative {
    margin-bottom: 40px;
}

.provider-path-narrative p {
    font-size: 18px;
    line-height: 1.8;
    color: #6B5347;
    margin: 0 0 24px;
}

.provider-path-narrative p:last-child {
    margin-bottom: 0;
}

/* Reassurance Close */
/* Used in: new_about_robert-BedsideToPrescriber.html */
.provider-path-reassurance {
    background: linear-gradient(135deg, rgba(156, 175, 136, 0.1) 0%, rgba(156, 175, 136, 0.05) 100%);
    border-left: 3px solid #9CAF88;
    padding: 28px 32px;
    margin-top: 40px;
}

.provider-path-reassurance p {
    font-size: 17px;
    line-height: 1.7;
    color: #6B5347;
    margin: 0;
    font-style: italic;
}

/* Tablet Responsive (768px-1023px) */
@media (max-width: 1023px) {
    .provider-path {
        padding: 80px 5% 70px;
    }

    .provider-path-header h2 {
        font-size: 38px;
    }

    .feature-text {
        font-size: 18px;
    }

    .feature-emphasis {
        font-size: 32px;
    }

    .provider-path-narrative p {
        font-size: 17px;
    }
}

/* Mobile Responsive (<768px) */
@media (max-width: 767px) {
    .provider-path {
        padding: 60px 20px 50px;
    }

    .provider-path-header {
        margin-bottom: 36px;
    }

    .provider-path-header h2 {
        font-size: 32px;
    }

    .provider-path-header .header-underline {
        width: 60px;
        height: 3px;
    }

    .provider-path-feature {
        margin-bottom: 36px;
        padding-bottom: 36px;
    }

    .feature-text {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .feature-emphasis {
        font-size: 26px;
    }

    .provider-path-narrative {
        margin-bottom: 32px;
    }

    .provider-path-narrative p {
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 20px;
    }

    .provider-path-reassurance {
        padding: 24px;
        margin-top: 32px;
    }

    .provider-path-reassurance p {
        font-size: 15px;
    }
}

/* ========================================
   Inpatient Psychiatry Experience Section
   Timeline + Sidebar Layout
   ======================================== */

/* Desktop Styles (≥1024px) */
.inpatient-experience-section {
    background: #FFFFFF; /* White */
    padding: 100px 5% 80px 5%;
}

.inpatient-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.inpatient-header {
    text-align: center;
    margin-bottom: 60px;
}

.inpatient-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 12px;
}

.inpatient-header .header-underline {
    width: 40%;
    max-width: 300px;
    height: 4px;
    background-color: #D4795B; /* Desert Clay */
    margin: 0 auto;
}

/* Main Content Wrapper: Timeline + Sidebar */
.inpatient-content-wrapper {
    display: grid;
    grid-template-columns: 45% 50%;
    gap: 5%;
    align-items: start;
}

/* Left Column: Timeline */
.timeline-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    align-items: start;
}

.timeline-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border-left: 4px solid #D4795B; /* Desert Clay */
    background: #F5F1E8; /* Sand */
    min-height: 80px;
}

.timeline-marker .timeline-years {
    font-size: 20px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    line-height: 1.2;
    text-align: center;
}

.timeline-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 12px;
    line-height: 1.3;
}

.timeline-content p {
    font-size: 17px;
    line-height: 1.65;
    color: #6B5347; /* Earth Brown */
    font-weight: 400;
    margin: 0;
}

/* Right Sidebar: Key Learnings */
.learnings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.learning-block {
    padding: 24px;
    background: #F5F1E8; /* Sand */
    border-left: 4px solid #D4795B; /* Desert Clay */
}

.learning-block h3 {
    font-size: 20px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 10px;
    line-height: 1.3;
}

.learning-block p {
    font-size: 16px;
    line-height: 1.6;
    color: #6B5347; /* Earth Brown */
    font-weight: 400;
    margin: 0;
}

/* Tablet Responsive (768px-1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .inpatient-experience-section {
        padding: 70px 5% 60px 5%;
    }

    .inpatient-header {
        margin-bottom: 50px;
    }

    .inpatient-header h2 {
        font-size: 38px;
    }

    .inpatient-content-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .timeline-item {
        grid-template-columns: 100px 1fr;
        gap: 20px;
    }

    .timeline-marker {
        min-height: 70px;
        padding: 12px 8px;
    }

    .timeline-marker .timeline-years {
        font-size: 18px;
    }

    .timeline-content h3 {
        font-size: 20px;
    }

    .timeline-content p {
        font-size: 16px;
    }

    .learning-block {
        padding: 20px;
    }

    .learning-block h3 {
        font-size: 18px;
    }

    .learning-block p {
        font-size: 15px;
    }
}

/* Mobile Responsive (<768px) */
@media (max-width: 767px) {
    .inpatient-experience-section {
        padding: 50px 20px;
    }

    .inpatient-header {
        margin-bottom: 40px;
    }

    .inpatient-header h2 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .inpatient-header .header-underline {
        width: 40%;
        max-width: 200px;
        height: 3px;
    }

    .inpatient-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .timeline-column {
        gap: 32px;
    }

    .timeline-item {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .timeline-marker {
        min-height: auto;
        padding: 12px 16px;
        border-left: none;
        border-bottom: 4px solid #D4795B;
        width: fit-content;
    }

    .timeline-marker .timeline-years {
        font-size: 18px;
    }

    .timeline-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .timeline-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .learnings-sidebar {
        gap: 24px;
    }

    .learning-block {
        padding: 20px;
    }

    .learning-block h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .learning-block p {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* ========================================
   When Hospitalization Is Necessary Section
   Two-Column Layout with Parallax Desert Background
   ======================================== */

/* Desktop Styles (≥1024px) */
.hospitalization-section {
    /* Parallax background with heavy white overlay (87% opacity) */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)),
        url("/staticfiles/images/Photos/L-OwlCanyon.348ed7d53e42.jpg");
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* Parallax effect on desktop */
    background-repeat: no-repeat;
    padding: 120px 5% 100px 5%;
}

.hospitalization-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.hospitalization-header {
    text-align: center;
    margin-bottom: 60px;
}

.hospitalization-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 8px;
}

.hospitalization-header .header-underline {
    width: 40%;
    max-width: 300px;
    height: 4px;
    background-color: #9CAF88; /* Warm Sage */
    margin: 0 auto;
}

/* Two-Column Content Wrapper */
.hospitalization-content-wrapper {
    display: grid;
    grid-template-columns: 52% 43%;
    gap: 5%;
    align-items: start;
}

/* Left Column: Crisis Center Work (transparent over parallax) */
.crisis-work-column {
    display: flex;
    flex-direction: column;
}

.crisis-work-column p {
    font-size: 17px;
    line-height: 1.6;
    color: #6B5347; /* Earth Brown */
    font-weight: 400;
    margin-bottom: 1.25em;
}

.crisis-work-column p:last-child {
    margin-bottom: 0;
}

/* Right Column: Patient Benefit Callout Box (EMPHASIZED - floats above parallax) */
.patient-benefit-column {
    background: rgba(255, 255, 255, 0.92); /* White at 92% opacity */
    padding: 40px;
    border-left: 5px solid #D4795B; /* Desert Clay */
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(107, 83, 71, 0.16); /* Shadow for depth against parallax */
}

.patient-benefit-column p {
    font-size: 18px;
    line-height: 1.65;
    color: #6B5347; /* Earth Brown */
    font-weight: 400;
    margin: 0;
}

.patient-benefit-column strong {
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
}

/* Tablet Responsive (768px-1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .hospitalization-section {
        padding: 80px 5% 70px 5%;
    }

    .hospitalization-header {
        margin-bottom: 50px;
    }

    .hospitalization-header h2 {
        font-size: 38px;
    }

    .hospitalization-content-wrapper {
        grid-template-columns: 50% 45%;
        gap: 5%;
    }

    .crisis-work-column p {
        font-size: 17px;
        line-height: 1.6;
    }

    .patient-benefit-column {
        padding: 35px;
    }

    .patient-benefit-column p {
        font-size: 17px;
        line-height: 1.6;
    }
}

/* Mobile Responsive (<768px) */
@media (max-width: 767px) {
    .hospitalization-section {
        padding: 60px 20px 50px 20px;
        background-attachment: scroll; /* Disable parallax on mobile for performance */
    }

    .hospitalization-header {
        margin-bottom: 40px;
    }

    .hospitalization-header h2 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .hospitalization-header .header-underline {
        width: 40%;
        max-width: 200px;
        height: 3px;
    }

    .hospitalization-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .crisis-work-column p {
        font-size: 17px;
        line-height: 1.6;
        margin-bottom: 1.25em;
    }

    .patient-benefit-column {
        padding: 30px;
    }

    .patient-benefit-column p {
        font-size: 17px;
        line-height: 1.6;
    }
}

/* Used in: new_article_pull_quote.html */
/* Pull Quote Text */
.pull-quote {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--clay-deep); /* Desert Clay */
    letter-spacing: -0.5px;
}

/* =====================================================================
   RESPONSIVE DESIGN - Tablet (768px - 1023px)
   ===================================================================== */

@media (max-width: 1023px) and (min-width: 768px) {
    /* Used in: new_article_pull_quote.html */
    .pull-quote {
        font-size: 32px;
    }
}

/* =====================================================================
   RESPONSIVE DESIGN - Mobile (<768px)
   ===================================================================== */

@media (max-width: 767px) {
    /* Used in: new_article_pull_quote.html */
    .pull-quote {
        font-size: 28px;
    }
}

/* Four-Card Grid Layout */
.approach-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    position: relative;
}

/* Base Card Styles */
.approach-card {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(107, 83, 71, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.approach-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(107, 83, 71, 0.12);
}

/* Card Title */
.approach-card .card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--earth-brown);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

/* Card Content */
.approach-card .card-content {
    font-size: 16px;
    line-height: 1.6;
    color: var(--earth-brown);
    margin: 0;
}

/* Numbered Badges */
.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
}

.badge-sage {
    background-color: #667D58;
}

.badge-clay {
    background-color: #B85C3F;
}

/* Card 1: What I Learned to Avoid */
.approach-card.card-1 {
    background: linear-gradient(to bottom, #FFFFFF 0%, rgba(245, 241, 232, 0.05) 100%);
    border-top: 4px solid var(--warm-sage);
}

/* Card 2: Starting Broad */
.approach-card.card-2 {
    background: #FFFFFF;
    border-top: 4px solid var(--warm-sage);
}

/* Card 3: The Revelation (Special - Aha Moment) */
.approach-card.card-3 {
    background: linear-gradient(to bottom, rgba(156, 175, 136, 0.1) 0%, rgba(156, 175, 136, 0.05) 100%);
    border-top: 4px solid var(--desert-clay);
}

/* Card 4: Current Focus (EMPHASIZED) */
.approach-card.card-4 {
    background: linear-gradient(to bottom, rgba(212, 121, 91, 0.05) 0%, #FFFFFF 100%);
    border-top: 5px solid var(--desert-clay);
    box-shadow: 0 6px 16px rgba(107, 83, 71, 0.12);
}

/* =====================================================================
   RESPONSIVE DESIGN - Tablet (768px - 1023px)
   ===================================================================== */

@media (max-width: 1023px) and (min-width: 768px) {

    .approach-cards-grid {
        gap: 20px;
    }

    .approach-card {
        padding: 25px;
    }

    .approach-card .card-title {
        font-size: 18px;
    }

    .approach-card .card-content {
        font-size: 15px;
    }

    .card-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
        top: 15px;
        right: 15px;
    }
}

/* =====================================================================
   RESPONSIVE DESIGN - Mobile (<768px)
   ===================================================================== */

@media (max-width: 767px) {

    /* Single Column Stack */
    .approach-cards-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        position: relative;
    }

    .approach-card {
        padding: 25px;
    }

    .approach-card .card-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .approach-card .card-content {
        font-size: 16px;
        line-height: 1.6;
    }

    .card-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
        top: 15px;
        right: 15px;
    }
}

/* ========================================
   WHO THIS WORKS FOR SECTION - THREE-PANEL HORIZONTAL LAYOUT
   ======================================== */

/* Section Container */
.who-this-works-for {
    background: #FFFFFF;
    padding: 100px 0 90px;
}

.who-this-works-for-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Section Header */
.who-this-works-for-header {
    margin-bottom: 50px;
    text-align: left;
}

.who-this-works-for-header h2 {
    font-family: 'Merriweather', serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 15px;
    line-height: 1.2;
}

.who-this-works-for-header .title-underline {
    width: 40%;
    height: 4px;
    background: var(--warm-sage);
    margin: 0;
}

/* Three-Panel Container - Desktop Side-by-Side */
.three-panel-container {
    display: flex;
    flex-direction: row;
    gap: 2.5%;
    align-items: stretch;
    margin-bottom: 50px;
}

/* Panel Base Styles */
.panel {
    flex: 1;
    min-width: 0;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.panel h3 {
    font-family: 'Lato', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--earth-brown);
    margin-bottom: 20px;
    line-height: 1.3;
}

.panel p {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--earth-brown);
    margin: 0;
}

.panel-icon {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Panel 1: Positive Zone (Left) */
.panel-positive {
    background: rgba(156, 175, 136, 0.12);
    border-top: 5px solid var(--warm-sage);
}

/* Panel 2: Core Offering (Center) - Emphasized */
.panel-core {
    background: #FFFFFF;
    border-top: 5px solid var(--desert-clay);
    box-shadow: 0 6px 20px rgba(107, 83, 71, 0.14);
    transform: translateY(-4px);
}

/* Panel 3: Boundary Zone (Right) */
.panel-boundary {
    background: rgba(245, 241, 232, 0.6);
    border-top: 5px solid var(--earth-brown);
}

/* Bottom Line Section */
.bottom-line {
    max-width: 900px;
    margin: 50px auto 0;
    text-align: center;
}

.bottom-line p {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--earth-brown);
    margin: 0;
}

/* =====================================================================
   RESPONSIVE DESIGN - Tablet (768px - 1023px)
   ===================================================================== */

@media (max-width: 1023px) and (min-width: 768px) {
    .who-this-works-for {
        padding: 70px 0 60px;
    }

    .who-this-works-for-container {
        padding: 0 30px;
    }

    .who-this-works-for-header h2 {
        font-size: 36px;
    }

    .who-this-works-for-header {
        margin-bottom: 40px;
    }

    /* Stack Panels Vertically on Tablet */
    .three-panel-container {
        flex-direction: column;
        gap: 30px;
    }

    .panel {
        transform: none !important;
    }

    .panel-core {
        box-shadow: 0 4px 16px rgba(107, 83, 71, 0.10);
    }

    .bottom-line {
        margin-top: 40px;
    }

    .bottom-line p {
        font-size: 17px;
    }
}

/* =====================================================================
   RESPONSIVE DESIGN - Mobile (<768px)
   ===================================================================== */

@media (max-width: 767px) {
    .who-this-works-for {
        padding: 50px 0;
    }

    .who-this-works-for-container {
        padding: 0 20px;
    }

    .who-this-works-for-header {
        margin-bottom: 35px;
    }

    .who-this-works-for-header h2 {
        font-size: 32px;
    }

    .who-this-works-for-header .title-underline {
        width: 40%;
        max-width: 140px;
    }

    /* Stack Panels Vertically on Mobile */
    .three-panel-container {
        flex-direction: column;
        gap: 30px;
    }

    .panel {
        padding: 30px;
        transform: none !important;
    }

    .panel-core {
        box-shadow: 0 4px 16px rgba(107, 83, 71, 0.10);
    }

    .panel h3 {
        font-size: 20px;
    }

    .panel p {
        font-size: 16px;
    }

    .panel-icon svg {
        width: 28px;
        height: 28px;
    }

    .bottom-line {
        margin-top: 35px;
    }

    .bottom-line p {
        font-size: 17px;
        line-height: 1.6;
    }
}

/* ========================================
   SECTION 8: PREMIUM DUAL-PATH CTA SECTION
   Premium conversion section with two sophisticated CTA cards
   Used in: new_about-CTA.html, new_about_robert-CTA.html
   ======================================== */

/* Section Container */
.cta-section {
    position: relative;
    /* Background image with overlay set inline in HTML template using Django static */
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* Parallax effect on desktop */
    background-repeat: no-repeat;
    padding: 120px 60px 100px 60px;
}

/* Section Content Container */
.cta-section .section-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

/* Centered Section Header */
.section-header-center {
    text-align: center;
    margin-bottom: 40px;
}

.section-title-center {
    font-size: 42px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-underline-center {
    width: 40%;
    max-width: 200px;
    height: 4px;
    background-color: #D4795B; /* Desert Clay */
    margin: 0 auto;
    border-radius: 2px;
}

/* Part 1: Hero Introduction (Centered) */
.cta-hero-intro {
    max-width: 800px;
    margin: 0 auto 60px auto;
    text-align: center;
}

.cta-hero-intro p {
    font-size: 20px;
    line-height: 1.7;
    color: #6B5347; /* Earth Brown */
    margin: 0;
}

/* Part 2: CTA Cards Container */
.cta-cards-container {
    display: flex;
    gap: 4%;
    justify-content: center;
    margin-bottom: 60px;
}

/* Individual CTA Card Base Styles */
.cta-card {
    flex: 0 1 48%;
    padding: 45px;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

/* LEFT CARD: Free Consultation (Secondary) */
.cta-card-secondary {
    background-color: #FFFFFF;
    border-top: 4px solid #9CAF88; /* Warm Sage */
    box-shadow: 0 8px 24px rgba(107, 83, 71, 0.12);
}

.cta-card-secondary:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(107, 83, 71, 0.16);
}

/* RIGHT CARD: Initial Evaluation (Primary - Emphasized) */
.cta-card-primary {
    background-color: #FFFFFF; /* White background like secondary card */
    border-top: 5px solid #D4795B; /* Desert Clay - thicker border */
    box-shadow: 0 10px 28px rgba(107, 83, 71, 0.16);
    transform: translateY(-8px); /* Elevated at rest */
}

.cta-card-primary:hover {
    transform: translateY(-12px);
    box-shadow: 0 14px 36px rgba(107, 83, 71, 0.20);
}

/* Card Typography */
.cta-card-header {
    font-size: 24px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.cta-card-body {
    font-size: 17px;
    line-height: 1.65;
    color: #6B5347; /* Earth Brown */
    margin: 0 0 20px 0;
    flex-grow: 1; /* Pushes price and button to bottom */
}

.cta-card-price {
    font-size: 20px;
    font-weight: 700;
    margin: 25px 0;
}

.price-secondary {
    color: var(--sage-text); /* Warm Sage */
}

.price-primary {
    color: var(--clay-text); /* Desert Clay */
}

/* CTA Buttons */
.cta-button {
    display: inline-block;
    min-width: 250px;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
}

/* Secondary Button (Free Consultation) */
.cta-button-secondary {
    background-color: #FFFFFF;
    border: 2px solid #9CAF88; /* Warm Sage */
    color: var(--sage-text);
}

.cta-button-secondary:hover {
    background-color: #667D58;
    color: #FFFFFF;
}

/* Primary Button (Initial Evaluation) */
.cta-button-primary {
    background-color: #B85C3F; /* Desert Clay */
    border: none;
    color: #FFFFFF;
}

.cta-button-primary:hover {
    background-color: #C06A4F; /* Darker Desert Clay (brightness 0.9) */
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(212, 121, 91, 0.3);
}

/* Part 3: Closing Statement (Centered) */
.cta-closing-statement {
    max-width: 700px;
    margin: 60px auto 0 auto;
    text-align: center;
}

.cta-closing-statement p {
    font-size: 18px;
    line-height: 1.7;
    color: #6B5347; /* Earth Brown */
    font-style: italic; /* Softer feel */
    margin: 0;
}

/* ========================================
   RESPONSIVE: TABLET (768px - 1023px)
   ======================================== */
@media (max-width: 1023px) and (min-width: 768px) {
    .cta-section {
        padding: 90px 40px 80px 40px;
    }

    .section-title-center {
        font-size: 38px;
    }

    .cta-hero-intro p {
        font-size: 19px;
    }

    .cta-cards-container {
        gap: 8%;
    }

    .cta-card {
        flex: 0 1 46%;
        padding: 40px;
    }

    .cta-card-header {
        font-size: 22px;
    }

    .cta-card-body {
        font-size: 16px;
    }

    .cta-closing-statement p {
        font-size: 17px;
    }
}

/* ========================================
   RESPONSIVE: MOBILE (<768px)
   ======================================== */
@media (max-width: 767px) {
    .cta-section {
        padding: 70px 20px 60px 20px;
        background-attachment: scroll; /* Disable parallax on mobile for performance */
    }

    .section-title-center {
        font-size: 32px;
    }

    .section-underline-center {
        width: 50%;
        max-width: 160px;
    }

    .cta-hero-intro {
        margin-bottom: 50px;
    }

    .cta-hero-intro p {
        font-size: 18px;
    }

    /* Stack Cards Vertically */
    .cta-cards-container {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 50px;
    }

    .cta-card {
        flex: 0 1 100%;
        padding: 35px;
        transform: none !important; /* Remove elevation on mobile */
    }

    .cta-card-primary {
        transform: none !important; /* No elevation at rest on mobile */
    }

    /* Mobile: Only button color changes on hover, no card movement */
    .cta-card-secondary:hover,
    .cta-card-primary:hover {
        transform: none;
        box-shadow: 0 8px 24px rgba(107, 83, 71, 0.12); /* Reset to base shadow */
    }

    .cta-card-primary:hover {
        box-shadow: 0 10px 28px rgba(107, 83, 71, 0.16); /* Reset to base primary shadow */
    }

    .cta-card-header {
        font-size: 21px;
    }

    .cta-card-body {
        font-size: 16px;
    }

    .cta-card-price {
        font-size: 19px;
    }

    .cta-button {
        width: 100%;
        max-width: 100%;
        min-width: 250px;
        margin: 0 auto;
        display: block;
    }

    /* Mobile: Button hover only changes color, no transform */
    .cta-button-primary:hover {
        transform: none;
        box-shadow: none;
    }

    .cta-closing-statement {
        margin-top: 50px;
    }

    .cta-closing-statement p {
        font-size: 17px;
    }
}

/* ===================================================================
   CREDIBILITY BAR SECTION - SOPHISTICATED DESIGN
   =================================================================== */

/* Sophisticated Background Treatment */
.credibility-section {
    background: #F5F1E8; /* Sand */
    position: relative;
    padding: 100px 0;
}

/* Subtle noise texture for sophistication */
.credibility-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    mix-blend-mode: overlay;
    z-index: 1;
}

.credibility-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

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

/* Premium Card Design with Multi-Layer Depth */
.stat-card {
    background: linear-gradient(
        135deg,
        #FFFFFF 0%,
        #FEFDFB 100%
    );
    border-radius: 12px;
    padding: 48px 36px;
    min-height: 320px;
    box-shadow:
        0 2px 4px rgba(107, 83, 71, 0.04),
        0 8px 16px rgba(107, 83, 71, 0.08),
        0 16px 32px rgba(107, 83, 71, 0.08);
    border: 1px solid rgba(156, 175, 136, 0.1);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

/* Subtle inner glow for depth */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    z-index: 1;
}

.stat-card:nth-child(1)::before,
.stat-card:nth-child(3)::before {
    color: #D4795B; /* Desert Clay */
}

.stat-card:nth-child(2)::before,
.stat-card:nth-child(4)::before {
    color: #9CAF88; /* Warm Sage */
}

/* Corner accent marks */
.stat-card::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-top: 2px solid;
    border-right: 2px solid;
    opacity: 0.08;
    border-radius: 0 8px 0 0;
}

.stat-card:nth-child(1)::after,
.stat-card:nth-child(3)::after {
    border-color: #D4795B;
}

.stat-card:nth-child(2)::after,
.stat-card:nth-child(4)::after {
    border-color: #9CAF88;
}

/* Premium Hover State */
.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 4px 8px rgba(107, 83, 71, 0.06),
        0 16px 24px rgba(107, 83, 71, 0.12),
        0 24px 48px rgba(107, 83, 71, 0.12);
}

/* Sophisticated Icon Badge Treatment */
.stat-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    /* Multi-layer background */
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), transparent),
        linear-gradient(135deg, rgba(245, 241, 232, 0.9), rgba(245, 241, 232, 0.6));

    /* Premium shadow */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        0 4px 12px rgba(107, 83, 71, 0.12);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon ring effect */
.stat-icon::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 2px solid;
    opacity: 0.15;
}

.stat-card:nth-child(odd) .stat-icon::before {
    border-color: #D4795B; /* Desert Clay */
}

.stat-card:nth-child(even) .stat-icon::before {
    border-color: #9CAF88; /* Warm Sage */
}

/* Icon content styling */
.stat-icon-content {
    position: relative;
    z-index: 1;
    font-size: 28px;
    font-weight: 700;
    color: #6B5347;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text-based icon content (like "DNP") */
.stat-card:first-child .stat-icon-content {
    font-size: 22px;
    letter-spacing: 0.5px;
}

/* Icon hover effect */
.stat-card:hover .stat-icon {
    transform: scale(1.08);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        0 6px 16px rgba(107, 83, 71, 0.15);
}

/* Enhanced Typography with Premium Hierarchy */
.stat-main {
    font-size: 28px;
    font-weight: 700;
    color: #6B5347;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.8px;
}

.stat-main .highlight {
    color: var(--clay-text);
    font-weight: 800;
    display: inline-block;
    position: relative;
}

/* Subtle underline to highlighted text */
.stat-main .highlight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 121, 91, 0.3) 20%,
        rgba(212, 121, 91, 0.3) 80%,
        transparent 100%
    );
}

/* Highlight color change on card hover */
.stat-card:hover .stat-main .highlight {
    color: var(--clay-text-hover);
}

.stat-sub {
    font-size: 15px;
    font-weight: 500;
    color: #6B5347;
    line-height: 1.6;
    letter-spacing: 0.3px;
    max-width: 90%;
    margin: 0 auto;
}

/* Tablet responsive (768px - 1024px) */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .credibility-section {
        padding: 80px 0;
    }

    .stat-card {
        padding: 44px 32px;
        min-height: 300px;
    }
}

/* Mobile responsive (<768px) */
@media (max-width: 767px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .credibility-section {
        padding: 60px 0;
    }

    .stat-card {
        padding: 40px 30px;
        min-height: auto;
    }

    /* Maintain hover effects on mobile touch */
    .stat-card:active {
        transform: scale(0.98);
    }

    .stat-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 24px;
    }

    .stat-icon-content {
        font-size: 24px;
    }

    .stat-main {
        font-size: 24px;
        letter-spacing: -0.6px;
    }

    .stat-sub {
        font-size: 14px;
    }
}

/* ========================================
   DIFFERENTIATORS SECTION
   ======================================== */

/* Section Container */
.differentiators-section {
    background: white;
    padding: 120px 0;
}

/* Section Header */
.diff-section-header {
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 20px;
    text-align: center;
}

.diff-section-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clay-text);
    margin-bottom: 12px;
}

.diff-section-title {
    font-size: 48px;
    font-weight: 700;
    color: #6B5347;
    margin: 0;
}

/* Differentiator Container */
.differentiator-container {
    max-width: 1200px;
    margin: 0 auto 100px;
    padding: 0 20px;
    display: grid;
    gap: 5%;
    align-items: stretch;
}

/* Text content container */
.diff-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Photo container */
.diff-photo-container {
    position: relative;
    height: 100%;
    min-height: 450px;
    display: flex;
    align-items: stretch;
}

.differentiator-container:last-child {
    margin-bottom: 0;
}

/* Layout Variations */
.diff-layout-left {
    grid-template-columns: 60% 35%;
}

.diff-layout-right {
    grid-template-columns: 35% 60%;
}

/* Content Styling */
.diff-heading {
    font-size: 36px;
    font-weight: 700;
    color: #6B5347;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 3px solid;
    display: inline-block;
}

.diff-body {
    font-size: 17px;
    line-height: 1.7;
    color: #6B5347;
    margin-bottom: 24px;
    max-width: 90%;
}

/* Photo Styling */
.diff-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(107, 83, 71, 0.15);
    display: block;
}

/* Callout Box (Differentiator 1) */
.diff-callout {
    background: #F5F1E8;
    border-left: 4px solid #9CAF88;
    padding: 20px 24px;
    font-size: 16px;
    line-height: 1.6;
    border-radius: 0 8px 8px 0;
}

/* Timeline Comparison Container - Very Compact */
.timeline-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
    background: rgba(245, 241, 232, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(107, 83, 71, 0.1);
}

/* Timeline Columns */
.timeline-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-header {
    font-size: 15px;
    font-weight: 700;
    color: #6B5347;
    margin: 0 0 2px 0;
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 2px solid;
}

.timeline-typical .timeline-header {
    border-bottom-color: rgba(107, 83, 71, 0.2);
}

.timeline-solana .timeline-header {
    border-bottom-color: #D4795B;
}

/* Timeline Items */
.diff-timeline-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.diff-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    aspect-ratio: 1 / 1;
}

/* Marker States */
.diff-dot-inactive {
    background: rgba(107, 83, 71, 0.15);
    border: 2px solid rgba(107, 83, 71, 0.3);
    box-sizing: border-box;
}

.diff-dot-waiting {
    background: rgba(107, 83, 71, 0.05);
    border: 2px dashed rgba(107, 83, 71, 0.2);
    box-sizing: border-box;
}

.diff-dot-active {
    background: rgba(212, 121, 91, 0.15);
    border: 2px solid #D4795B;
    box-sizing: border-box;
}

.diff-dot-success {
    background: #D4795B;
    border: 2px solid #D4795B;
    box-shadow: 0 0 0 2px rgba(212, 121, 91, 0.15);
    box-sizing: border-box;
}

/* Timeline Content */
.diff-timeline-content {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
}

.timeline-week {
    font-size: 11px;
    font-weight: 600;
    color: var(--clay-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.timeline-action {
    font-size: 13px;
    font-weight: 500;
    color: #6B5347;
    line-height: 1.2;
}

.timeline-waiting {
    color: rgba(107, 83, 71, 0.5);
    font-style: italic;
}

/* VS Divider */
.timeline-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #6B5347;
    opacity: 0.3;
    writing-mode: vertical-lr;
    text-orientation: upright;
}

/* Photo Badge (Differentiator 2) */
.photo-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.2);
    font-size: 14px;
    font-weight: 600;
    color: #6B5347;
    letter-spacing: 1px;
    z-index: 10;
}

/* Assessment Scales Grid (Differentiator 2) */
.assessment-scales-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.scale-badge {
    background: #F5F1E8;
    border: 1px solid rgba(107, 83, 71, 0.15);
    padding: 16px 12px;
    text-align: center;
    border-radius: 6px;
}

.scale-name {
    font-size: 15px;
    font-weight: 700;
    color: #6B5347;
    margin-bottom: 4px;
}

.scale-purpose {
    font-size: 12px;
    font-weight: 400;
    color: rgba(107, 83, 71, 0.7);
    line-height: 1.3;
}

/* Scope Grid (Differentiator 1) - stacked: treat card on top, referral card full width below */
/* Used in: new_home-Differentiators.html */
.scope-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
}

.scope-column {
    padding: 24px;
    border-radius: 8px;
}

.scope-column h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: #6B5347;
}

.scope-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Used in: new_home-Differentiators.html */
.scope-column li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #6B5347;
}

.scope-column li:last-child {
    margin-bottom: 0;
}

/* Used in: new_home-Differentiators.html */
.scope-column li svg {
    flex-shrink: 0;
    margin-top: 4px;
}

.scope-column li span {
    line-height: 1.5;
}

.scope-column li strong {
    font-weight: 600;
}

.scope-treat {
    background: rgba(156, 175, 136, 0.1);
    border: 1px solid rgba(156, 175, 136, 0.2);
}

.scope-refer {
    background: rgba(107, 83, 71, 0.08);
    border: 1px solid rgba(107, 83, 71, 0.15);
}

/* Two-column list inside the referral scope card (collapses to 1 column at 1024px and below) */
/* Used in: new_home-Differentiators.html */
.scope-list--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 10px;
}

/* Used in: new_home-Differentiators.html */
.scope-list--two-col li {
    margin-bottom: 0;
}

/* Score and dose chart card (Differentiator 4); sized by its content, no fixed height */
/* Used in: new_home-Differentiators.html */
.diff-graphic-container {
    align-self: center;
    margin: 0;
    background: #F5F1E8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(107, 83, 71, 0.15);
    padding: 20px 20px 16px;
    box-sizing: border-box;
}

/* Used in: new_home-Differentiators.html */
.diff-chart {
    width: 100%;
    height: auto;
    display: block;
}

/* Taller, simpler chart variant swapped in at 767px and below */
/* Used in: new_home-Differentiators.html */
.diff-chart--mobile {
    display: none;
}

/* Used in: new_home-Differentiators.html */
.diff-chart-legend {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 12px 0 0;
    padding: 0;
    font-size: 13px;
    color: #6B5347;
}

/* Used in: new_home-Differentiators.html */
.diff-chart-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Used in: new_home-Differentiators.html */
.diff-chart-swatch {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}

/* Used in: new_home-Differentiators.html */
.diff-chart-swatch--score {
    background: #D4795B;
}

/* Used in: new_home-Differentiators.html */
.diff-chart-swatch--dose {
    background: #9CAF88;
}

/* Numbered explanations for the mobile chart (hidden on desktop, where labels sit on the chart) */
/* Used in: new_home-Differentiators.html */
.diff-chart-notes {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #6B5347;
}

/* Used in: new_home-Differentiators.html */
.diff-chart-notes b {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: #6B5347;
    color: white;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

/* Used in: new_home-Differentiators.html */
.diff-graphic-caption {
    margin: 10px 0 0;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    color: rgba(107, 83, 71, 0.7);
}

/* Second body paragraph spacing (Differentiator 4) */
/* Used in: new_home-Differentiators.html */
.diff-body + .diff-body {
    margin-top: -8px;
}

/* Tablet Responsive */
@media (max-width: 1024px) {
    .differentiators-section {
        padding: 100px 0;
    }

    .diff-section-title {
        font-size: 40px;
    }

    .differentiator-container {
        margin-bottom: 80px;
    }

    .diff-layout-left,
    .diff-layout-right {
        grid-template-columns: 55% 40%;
    }

    .diff-heading {
        font-size: 32px;
    }

    .diff-body {
        font-size: 16px;
    }

    .diff-photo-container {
        min-height: 420px;
    }

    .timeline-comparison {
        gap: 16px;
        padding: 18px;
    }

    /* Used in: new_home-Differentiators.html */
    .scope-list--two-col {
        grid-template-columns: 1fr;
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .differentiators-section {
        padding: 80px 0;
    }

    .diff-section-header {
        margin-bottom: 60px;
    }

    .diff-section-title {
        font-size: 32px;
    }

    .differentiator-container {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 60px;
    }

    .diff-layout-left .diff-photo-container,
    .diff-layout-right .diff-photo-container {
        order: -1; /* Photo always appears first on mobile */
    }

    .diff-photo-container {
        height: auto;
        min-height: 300px;
    }

    .diff-photo {
        height: 350px;
        max-height: 400px;
        object-fit: cover;
    }

    .diff-heading {
        font-size: 28px;
    }

    .diff-body {
        max-width: 100%;
    }

    .photo-badge {
        font-size: 12px;
        padding: 10px 16px;
        bottom: 12px;
        right: 12px;
    }

    .assessment-scales-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .scope-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Used in: new_home-Differentiators.html */
    .diff-layout-right .diff-graphic-container {
        order: -1;
        align-self: stretch;
        padding: 16px 12px 14px;
    }

    /* Used in: new_home-Differentiators.html */
    .diff-chart--desktop {
        display: none;
    }

    /* Used in: new_home-Differentiators.html */
    .diff-chart--mobile {
        display: block;
    }

    /* Used in: new_home-Differentiators.html */
    .diff-chart-notes {
        display: flex;
    }

    .timeline-comparison {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 16px;
    }

    .timeline-vs {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        padding: 6px 0;
        border-top: 1px solid rgba(107, 83, 71, 0.1);
        border-bottom: 1px solid rgba(107, 83, 71, 0.1);
    }

    .diff-timeline-item {
        gap: 6px;
    }

    .diff-timeline-dot {
        width: 14px;
        height: 14px;
        aspect-ratio: 1 / 1;
    }
}

/* ============================================================================
   SECTION: NEW HOME CTA - SOPHISTICATED TWO-PATH CONVERSION SECTION
   Used in: new_home-CTA.html
   ============================================================================ */

/* Section Container */
.newhome-cta-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #e8ddd0;
}

/* White overlay for readability over parallax background */
.newhome-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(245, 241, 232, 0.78) 100%
    );
    pointer-events: none;
}

.newhome-cta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Section Header */
.newhome-cta-header {
    text-align: center;
    margin-bottom: 64px;
}

.newhome-cta-title {
    font-size: 48px;
    font-weight: 700;
    color: #6B5347;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.newhome-cta-intro {
    font-size: 20px;
    color: rgba(107, 83, 71, 0.8);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Path Cards Grid */
.newhome-cta-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 48px;
}

/* Individual Path Card - PREMIUM STYLING */
.newhome-cta-card {
    background: white;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow:
        0 2px 8px rgba(107, 83, 71, 0.04),
        0 8px 24px rgba(107, 83, 71, 0.08),
        0 16px 48px rgba(107, 83, 71, 0.08);
}

.newhome-cta-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 4px 12px rgba(107, 83, 71, 0.06),
        0 16px 32px rgba(107, 83, 71, 0.12),
        0 24px 64px rgba(107, 83, 71, 0.12);
}

/* Primary card emphasis */
.newhome-cta-card-primary {
    border: 2px solid rgba(212, 121, 91, 0.2);
}

.newhome-cta-card-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(
        90deg,
        #D4795B 0%,
        #E8B087 100%
    );
}

.newhome-cta-card-secondary {
    border: 2px solid rgba(156, 175, 136, 0.15);
}

.newhome-cta-card-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(
        90deg,
        #9CAF88 0%,
        rgba(156, 175, 136, 0.6) 100%
    );
}

/* Card Badge */
.newhome-cta-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.newhome-cta-badge-primary {
    background: linear-gradient(135deg, #B85C3F, #A8502F);
    color: white;
    box-shadow: 0 4px 12px rgba(212, 121, 91, 0.3);
}

.newhome-cta-badge-secondary {
    background: rgba(156, 175, 136, 0.15);
    color: #6B5347;
    border: 1px solid rgba(156, 175, 136, 0.3);
}

/* Card Content */
.newhome-cta-card-content {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.newhome-cta-card-header {
    font-size: 28px;
    font-weight: 700;
    color: #6B5347;
    margin: 0 0 24px 0;
    letter-spacing: -0.5px;
}

/* Price Display - STRIKING */
.newhome-cta-price-display {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 32px;
    padding: 20px 0;
    border-top: 2px solid rgba(107, 83, 71, 0.1);
    border-bottom: 2px solid rgba(107, 83, 71, 0.1);
}

.newhome-cta-price-amount {
    font-size: 48px;
    font-weight: 700;
    color: var(--clay-deep);
    line-height: 1;
    letter-spacing: -1px;
}

.newhome-cta-price-free {
    color: var(--sage-text);
}

.newhome-cta-price-duration {
    font-size: 18px;
    color: rgba(107, 83, 71, 0.6);
    font-weight: 500;
}

/* Card Section */
.newhome-cta-card-section {
    margin-bottom: 28px;
    flex: 1;
}

.newhome-cta-section-label {
    font-size: 14px;
    font-weight: 700;
    color: #6B5347;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Included List */
.newhome-cta-included-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.newhome-cta-included-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #6B5347;
    line-height: 1.6;
}

.newhome-cta-included-list li:last-child {
    margin-bottom: 0;
}

.newhome-cta-included-list svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* When to Choose Callout */
.newhome-cta-when-to-choose {
    background: rgba(245, 241, 232, 0.5);
    padding: 20px 24px;
    border-radius: 8px;
    margin: 28px 0;
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
}

.newhome-cta-when-to-choose::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
}

.newhome-cta-when-to-choose-primary::before {
    background: linear-gradient(180deg, #D4795B, #E8B087);
}

.newhome-cta-when-to-choose-secondary::before {
    background: #9CAF88;
}

.newhome-cta-when-to-choose p {
    margin: 0;
    font-size: 15px;
    font-style: italic;
    color: rgba(107, 83, 71, 0.8);
    line-height: 1.6;
}

/* CTA Buttons - SOPHISTICATED & PROMINENT */
.newhome-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 36px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

/* Primary CTA - BOLD GRADIENT */
.newhome-cta-button-primary {
    background: linear-gradient(135deg, #B85C3F 0%, #A8502F 100%);
    color: white;
    box-shadow:
        0 4px 16px rgba(212, 121, 91, 0.3),
        0 8px 24px rgba(212, 121, 91, 0.2);
}

.newhome-cta-button-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s;
}

.newhome-cta-button-primary:hover::before {
    left: 100%;
}

.newhome-cta-button-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(212, 121, 91, 0.4),
        0 12px 32px rgba(212, 121, 91, 0.25);
}

.newhome-cta-button-primary:active {
    transform: translateY(0);
}

/* Secondary CTA - SOPHISTICATED OUTLINE */
.newhome-cta-button-secondary {
    background: white;
    color: var(--clay-text);
    border: 2px solid var(--clay-text);
    box-shadow:
        0 2px 8px rgba(107, 83, 71, 0.06),
        inset 0 0 0 0 var(--clay-text);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.newhome-cta-button-secondary:hover {
    box-shadow:
        0 4px 12px rgba(172, 83, 51, 0.2),
        inset 0 0 0 2px var(--clay-text);
    background: rgba(172, 83, 51, 0.06);
    transform: translateY(-2px);
}

.newhome-cta-button-secondary svg {
    transition: transform 0.3s;
}

.newhome-cta-button-secondary:hover svg {
    transform: translateX(4px);
}

/* Closing Statement */
.newhome-cta-closing-statement {
    text-align: center;
    margin-top: 48px;
}

.newhome-cta-closing-statement p {
    font-size: 16px;
    color: #6B5347;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border: 2px solid rgba(156, 175, 136, 0.4);
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.1);
}

/* Tablet Responsive */
@media (max-width: 1024px) and (min-width: 768px) {
    .newhome-cta-section {
        padding: 100px 0;
    }

    .newhome-cta-title {
        font-size: 42px;
    }

    .newhome-cta-cards-grid {
        gap: 32px;
    }

    .newhome-cta-card-content {
        padding: 40px 32px;
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .newhome-cta-section {
        padding: 80px 0;
    }

    .newhome-cta-header {
        margin-bottom: 48px;
    }

    .newhome-cta-title {
        font-size: 32px;
    }

    .newhome-cta-intro {
        font-size: 17px;
    }

    .newhome-cta-cards-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .newhome-cta-card-content {
        padding: 36px 28px;
    }

    .newhome-cta-card-header {
        font-size: 24px;
    }

    .newhome-cta-price-amount {
        font-size: 40px;
    }

    .newhome-cta-button {
        width: 100%;
        padding: 16px 28px;
    }

    .newhome-cta-closing-statement p {
        font-size: 15px;
        padding: 24px 24px;
    }
}

/* ========================================
   SECTION: SCHEDULE EVAL SUCCESS PAGE
   Sophisticated confirmation page after evaluation scheduling form submission
   Used in: new_schedule-eval-success.html
   ======================================== */

/* Section Wrapper */
/* ========================================
   SHARED SCHEDULING SUCCESS PAGE STYLES
   Used by: Evaluation, Consultation, Contact success pages
   ======================================== */

/* Section Wrapper */
.scheduling-success-section-wrapper {
    position: relative;
    width: 100%;
}

/* Page Background & Layout */
.scheduling-success-page {
    background-color: #F5F1E8; /* Sand */
    position: relative;
    padding: 80px 0 100px 0;
}

/* Content Container */
.scheduling-success-container {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

/* Success Status Indicator - Premium Hero Area */
.scheduling-success-status-indicator {
    text-align: center;
    margin-bottom: 64px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(107, 83, 71, 0.08);
    position: relative;
}

/* Success Icon Wrapper with Badge */
.scheduling-success-icon-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

/* Success Icon Badge - Enhanced Design */
.scheduling-success-icon-badge {
    position: relative;
    display: inline-block;
}

.scheduling-success-icon-badge svg {
    display: block;
    filter: drop-shadow(0 4px 12px rgba(156, 175, 136, 0.2));
}

/* Status Text Below Icon */
.scheduling-success-status-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sage-text); /* Warm Sage */
}

/* Visually Hidden Text for Screen Readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Header Group Container */
.scheduling-success-header-group {
    margin-bottom: 24px;
}

/* Success Header - Premium Typography */
.scheduling-success-header {
    font-size: 32px;
    font-weight: 700;
    color: #6B5347; /* Earth Brown */
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Title Underline - Elegant Accent */
.scheduling-success-title-underline {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #9CAF88, rgba(156, 175, 136, 0.5));
    margin: 0 auto;
    border-radius: 2px;
}

/* Confirmation Block Container */
.scheduling-success-confirmation-block {
    max-width: 580px;
    margin: 0 auto;
}

/* Opening Confirmation - Sophisticated Subheading */
.scheduling-success-confirmation {
    font-size: 18px;
    font-weight: 400;
    color: rgba(107, 83, 71, 0.8); /* Earth Brown at 80% opacity */
    text-align: center;
    line-height: 1.6;
    margin: 0 auto 20px auto;
}

/* Response Timeline Badge */
.scheduling-success-response-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: rgba(156, 175, 136, 0.1);
    border: 1px solid rgba(156, 175, 136, 0.3);
    border-radius: 24px;
    margin-top: 8px;
}

.scheduling-success-response-badge .badge-icon {
    display: flex;
    align-items: center;
}

.scheduling-success-response-badge .badge-text {
    font-size: 14px;
    font-weight: 500;
    color: #6B5347;
    letter-spacing: 0.01em;
}

/* Content Wrapper - Main Information Area */
.scheduling-success-content-wrapper {
    position: relative;
}

/* Contact Information Block */
.scheduling-success-contact-info {
    margin-bottom: 48px;
}

.scheduling-success-contact-text {
    font-size: 17px;
    font-weight: 400;
    color: #6B5347; /* Earth Brown */
    text-align: left;
    line-height: 1.7;
    margin: 0;
}

/* Elegant Section Divider */
.scheduling-success-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(107, 83, 71, 0) 0%,
        rgba(107, 83, 71, 0.15) 50%,
        rgba(107, 83, 71, 0) 100%
    );
    margin: 48px auto;
}

/* Next Steps Container */
.scheduling-success-next-steps {
    position: relative;
}

/* Information Block - Professional Card-like Styling */
.scheduling-success-info-block {
    margin-bottom: 40px;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(107, 83, 71, 0.06);
    transition: all 0.3s ease;
}

.scheduling-success-info-block:hover {
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.10);
    transform: translateY(-2px);
}

.scheduling-success-info-block:last-of-type {
    margin-bottom: 48px;
}

/* Section Headers - Refined Typography */
.scheduling-success-section-header {
    font-size: 20px;
    font-weight: 600;
    color: #6B5347; /* Earth Brown */
    text-align: left;
    margin-bottom: 16px;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

/* Section Body Text - Readable & Professional */
.scheduling-success-section-text {
    font-size: 17px;
    font-weight: 400;
    color: #6B5347; /* Earth Brown */
    text-align: left;
    line-height: 1.7;
    margin-bottom: 16px;
}

.scheduling-success-section-text:last-child {
    margin-bottom: 0;
}

/* ========================================
   PAGE-SPECIFIC STYLES: EVALUATION SUCCESS
   ======================================== */

/* Efficiency Note - Emphasized Text (Eval-specific) */
.eval-success-efficiency-note {
    font-style: italic;
    color: rgba(107, 83, 71, 0.85);
    margin-top: 20px;
}

/* Intake List - Clean, Professional List Design (Eval-specific) */
.eval-success-intake-list {
    list-style: none;
    padding-left: 0;
    margin: 20px 0 24px 0;
}

.eval-success-intake-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    color: #6B5347; /* Earth Brown */
    line-height: 1.6;
    margin-bottom: 12px;
    padding: 8px 0;
}

.eval-success-intake-list li:last-child {
    margin-bottom: 0;
}

/* SVG Marker in List Items */
.eval-success-intake-list li svg {
    flex-shrink: 0;
    margin-top: 6px;
}

.eval-success-intake-list li span {
    flex: 1;
}

/* Helpful Tip Block - Subtle Accent Styling (Eval-specific) */
.eval-success-helpful-tip {
    background-color: rgba(156, 175, 136, 0.08);
    border-left: 3px solid rgba(156, 175, 136, 0.4);
}

/* ========================================
   PAGE-SPECIFIC STYLES: CONSULTATION SUCCESS
   ======================================== */

/* Emphasis Note - No-Pressure Statement (Consult-specific) */
.consult-success-emphasis-note {
    padding: 16px 20px;
    background-color: rgba(245, 241, 232, 0.6); /* Sand at 60% */
    border-left: 3px solid #9CAF88; /* Warm Sage solid */
    border-radius: 6px;
    margin-top: 20px;
}

/* Optional Prep Section - Lighter Treatment (Consult-specific) */
.consult-success-optional-prep {
    background-color: rgba(156, 175, 136, 0.06);
    border-left: 3px solid rgba(156, 175, 136, 0.3);
}

/* ========================================
   SHARED SIGNATURE SECTION
   ======================================== */

/* Signature Section - Professional & Personal */
.scheduling-success-signature-section {
    margin-top: 64px;
    padding: 44px 0 0 0;
    position: relative;
}

/* Decorative Line Above Signature */
.signature-decorative-line {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg,
        #9CAF88 0%,
        rgba(156, 175, 136, 0.3) 100%
    );
    margin: 0 0 36px 0;
    border-radius: 2px;
}

/* Signature Content Layout */
.signature-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(107, 83, 71, 0.08);
}

/* Signature Message (Left Side) */
.signature-message {
    flex: 1;
}

.signature-closing {
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: rgba(107, 83, 71, 0.85);
    margin-bottom: 8px;
}

.signature-name-block {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.signature-dash {
    font-size: 18px;
    font-weight: 300;
    color: rgba(107, 83, 71, 0.5);
}

.signature-name {
    font-size: 20px;
    font-weight: 600;
    color: #6B5347; /* Earth Brown */
    letter-spacing: -0.2px;
}

/* Credentials Block (Right Side) */
.signature-credentials {
    text-align: right;
    padding: 12px 20px;
    background-color: rgba(156, 175, 136, 0.06);
    border-left: 2px solid rgba(156, 175, 136, 0.3);
    border-radius: 4px;
}

.credentials-text {
    font-size: 15px;
    font-weight: 600;
    color: #6B5347;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.credentials-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(107, 83, 71, 0.7);
    margin: 0;
}

/* Signature Footer Note */
.signature-footer-note {
    text-align: center;
}

.signature-footer-note p {
    font-size: 15px;
    font-weight: 400;
    color: rgba(107, 83, 71, 0.65);
    font-style: italic;
    margin: 0;
    line-height: 1.6;
}

/* Email Link in Signature */
.signature-email {
    color: var(--sage-text); /* Warm Sage */
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    border-bottom: 1px solid rgba(156, 175, 136, 0.3);
    transition: all 0.3s ease;
}

.signature-email:hover {
    color: #6B5347; /* Earth Brown */
    border-bottom-color: rgba(107, 83, 71, 0.5);
}

/* ========================================
   RESPONSIVE: TABLET (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) and (min-width: 768px) {
    .scheduling-success-page {
        padding: 60px 0 80px 0;
    }

    .scheduling-success-container {
        max-width: 600px;
    }

    .scheduling-success-info-block {
        padding: 28px;
    }

    .scheduling-success-status-indicator {
        margin-bottom: 56px;
        padding-bottom: 44px;
    }

    .scheduling-success-icon-badge svg {
        width: 68px;
        height: 68px;
    }

    .signature-content {
        gap: 24px;
    }

    .signature-credentials {
        padding: 10px 16px;
    }
}

/* ========================================
   RESPONSIVE: MOBILE (< 768px)
   ======================================== */
@media (max-width: 767px) {
    .scheduling-success-page {
        padding: 50px 0 70px 0;
    }

    .scheduling-success-container {
        width: 100%;
        padding: 0 20px;
    }

    /* Status Indicator - Mobile Adjustments */
    .scheduling-success-status-indicator {
        margin-bottom: 48px;
        padding-bottom: 40px;
    }

    /* Success Icon Wrapper - Mobile */
    .scheduling-success-icon-wrapper {
        gap: 12px;
        margin-bottom: 28px;
    }

    /* Success Icon - Smaller */
    .scheduling-success-icon-badge svg {
        width: 60px;
        height: 60px;
    }

    /* Status Text - Mobile */
    .scheduling-success-status-text {
        font-size: 12px;
    }

    /* Header Group - Mobile */
    .scheduling-success-header-group {
        margin-bottom: 20px;
    }

    /* Success Header - Smaller */
    .scheduling-success-header {
        font-size: 26px;
        margin-bottom: 10px;
    }

    /* Title Underline - Mobile */
    .scheduling-success-title-underline {
        width: 50px;
        height: 2px;
    }

    /* Opening Confirmation - Smaller */
    .scheduling-success-confirmation {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    /* Response Badge - Mobile Stack */
    .scheduling-success-response-badge {
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px;
        text-align: center;
    }

    .scheduling-success-response-badge .badge-text {
        font-size: 13px;
    }

    /* Contact Information */
    .scheduling-success-contact-info {
        margin-bottom: 36px;
    }

    .scheduling-success-contact-text {
        font-size: 16px;
    }

    /* Divider - Mobile */
    .scheduling-success-divider {
        width: 60px;
        margin: 36px auto;
    }

    /* Information Blocks - Mobile Spacing */
    .scheduling-success-info-block {
        padding: 24px 20px;
        margin-bottom: 28px;
    }

    .scheduling-success-info-block:last-of-type {
        margin-bottom: 36px;
    }

    /* Section Headers - Smaller */
    .scheduling-success-section-header {
        font-size: 18px;
        margin-bottom: 12px;
    }

    /* Section Body Text - Smaller */
    .scheduling-success-section-text {
        font-size: 16px;
        margin-bottom: 14px;
    }

    /* Intake List - Mobile Adjustments (Eval-specific) */
    .eval-success-intake-list {
        margin: 16px 0 20px 0;
    }

    .eval-success-intake-list li {
        font-size: 15px;
        gap: 10px;
        margin-bottom: 10px;
        padding: 6px 0;
    }

    .eval-success-intake-list li svg {
        margin-top: 5px;
    }

    /* Signature Section - Mobile */
    .scheduling-success-signature-section {
        margin-top: 52px;
        padding-top: 36px;
    }

    /* Signature Decorative Line - Mobile */
    .signature-decorative-line {
        width: 80px;
        margin-bottom: 28px;
    }

    /* Signature Content - Stack on Mobile */
    .signature-content {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    /* Signature Message - Mobile */
    .signature-closing {
        font-size: 17px;
    }

    .signature-name {
        font-size: 19px;
    }

    /* Credentials - Mobile */
    .signature-credentials {
        text-align: left;
        padding: 10px 16px;
        border-left: 2px solid rgba(156, 175, 136, 0.3);
    }

    .credentials-text {
        font-size: 14px;
    }

    .credentials-subtitle {
        font-size: 12px;
    }

    /* Signature Footer Note - Mobile */
    .signature-footer-note p {
        font-size: 14px;
    }
}

/* ============================================
   HEADER SLIM SECTION
   ============================================ */

/* Used in: new_header-slim */
.header-slim {
    width: 100%;
    height: 116px;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: -116px;
    padding-top: 116px;
    overflow: hidden;
}

/* Dark gradient overlay for better contrast */
/* Used in: new_header-slim */
.header-slim::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Tablet breakpoint - 90px height */
/* Used in: new_header-slim */
@media screen and (max-width: 1024px) {
    .header-slim {
        height: 90px;
        margin-top: -90px;
        padding-top: 90px;
    }
}

/* Mobile breakpoint - 90px height (mobile navigation is ~85px tall, same as tablet) */
/* Used in: new_header-slim */
@media screen and (max-width: 767px) {
    .header-slim {
        height: 90px;
        margin-top: -90px;
        padding-top: 90px;
    }
}

/* ========================================
   SECTION: CONTACT PAGE ENHANCED
   Sophisticated contact section with professional visual hierarchy
   Used in: contact.html
   ======================================== */

/* Section wrapper - Premium spacing and clean background */
.contact-enhanced-section-wrapper {
    background: #FDFCFA;
    padding: 80px 0 100px 0;
}

/* Main container with refined spacing */
.contact-enhanced-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 50px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(107, 83, 71, 0.06);
}

/* Header Section - Enhanced typography hierarchy */
.contact-enhanced-header {
    text-align: center;
    margin-bottom: 48px;
}

/* Eyebrow text - Brand color accent */
.contact-enhanced-eyebrow {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--clay-text);
    margin-bottom: 16px;
}

/* Main heading - Professional and commanding */
.contact-enhanced-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #2D2520;
    margin-bottom: 20px;
}

/* Decorative title underline */
.contact-enhanced-title-underline {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #D4795B, #E8B087);
    border-radius: 2px;
    margin: 0 auto 28px auto;
}

/* Introduction paragraph with refined spacing */
.contact-enhanced-intro {
    font-size: 17px;
    line-height: 1.6;
    color: #6B5347;
    max-width: 700px;
    margin: 0 auto 16px auto;
}

/* Signpost pair under the intro (booking pointer + scope line) - quiet hairline-framed, not a CTA */
/* Used in: contact */
.contact-enhanced-signposts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 780px;
    margin: 28px auto 0 auto;
    border-top: 1px solid rgba(107, 83, 71, 0.18);
    border-bottom: 1px solid rgba(107, 83, 71, 0.18);
}

/* Used in: contact */
.contact-enhanced-signpost {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    text-align: left;
}

/* Used in: contact */
.contact-enhanced-signpost + .contact-enhanced-signpost {
    border-left: 1px solid rgba(107, 83, 71, 0.18);
}

/* Used in: contact */
.contact-enhanced-signpost-icon {
    flex: 0 0 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F5F1E8;
    color: var(--clay-text);
    font-size: 14px;
}

/* Used in: contact */
.contact-enhanced-signpost p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #6B5347;
}

/* Used in: contact */
.contact-enhanced-signpost a {
    color: var(--clay-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* Used in: contact */
.contact-enhanced-signpost a:hover {
    color: var(--clay-text-hover);
}

/* Used in: contact */
.contact-enhanced-signpost a:focus-visible {
    outline: 2px solid var(--clay-text);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Form section with enhanced spacing */
.contact-enhanced-form-wrapper {
    margin-bottom: 56px;
}

.contact-enhanced-form {
    margin-top: 32px;
}

/* Form field enhancements - Professional styling */
.contact-enhanced-form .form-group {
    margin-bottom: 24px;
}

.contact-enhanced-form .form-control {
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #2D2520;
    background: #FDFCFA;
    border: 1.5px solid #E5DDD6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.contact-enhanced-form .form-control:focus {
    background: #FFFFFF;
    border-color: #9CAF88;
    box-shadow: 0 0 0 3px rgba(156, 175, 136, 0.1);
    outline: none;
}

.contact-enhanced-form textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

/* Persistent field label (stays visible while typing) */
/* Used in: contact, appointment */
.contact-enhanced-label,
.appointment-enhanced-form .form-group > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #2D2520;
    margin-bottom: 6px;
}

/* "Required" / "Email or phone" tag beside a label */
/* Used in: contact, appointment */
.contact-enhanced-label-tag,
.appointment-enhanced-form .field-tag {
    font-size: 13px;
    font-weight: 400;
    color: #6B5347;
    margin-left: 6px;
}

/* Note above the phone/email row (either field is enough) */
/* Used in: contact, appointment */
.contact-enhanced-field-note,
.appointment-enhanced-form .form-note {
    font-size: 14px;
    line-height: 1.5;
    color: #6B5347;
    margin: 0 0 12px 0;
}

/* Hint text between a label and its field */
/* Used in: contact */
.contact-enhanced-help {
    font-size: 14px;
    line-height: 1.5;
    color: #6B5347;
    margin: 0 0 8px 0;
}

/* Privacy promise - Enhanced visual presentation */
.contact-enhanced-privacy {
    padding: 20px 24px;
    background: rgba(156, 175, 136, 0.05);
    border-left: 3px solid #9CAF88;
    border-radius: 6px;
    margin-bottom: 28px;
}

.contact-enhanced-privacy p {
    font-size: 15px;
    line-height: 1.6;
    color: #6B5347;
    margin: 0;
}

.contact-enhanced-privacy strong {
    color: #2D2520;
    font-weight: 600;
}

/* Submit button - Premium styling */
.contact-enhanced-form .btn-default {
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #6B5347;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.contact-enhanced-form .btn-default:hover {
    background: #543F35;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 83, 71, 0.25);
}

.contact-enhanced-form .btn-default:active {
    transform: translateY(0);
}

/* Decorative section divider */
.contact-enhanced-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(107, 83, 71, 0.15) 20%,
        rgba(107, 83, 71, 0.15) 80%,
        transparent 100%
    );
    margin: 52px 0;
}

/* Contact info section - Sophisticated card design */
.contact-enhanced-info-section {
    margin-top: 56px;
}

.contact-enhanced-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
    margin-top: 40px;
}

/* Individual contact info cards */
.contact-enhanced-info-card {
    padding: 32px 28px;
    background: #FDFCFA;
    border: 1px solid #E5DDD6;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-enhanced-info-card:hover {
    background: #FFFFFF;
    border-color: #9CAF88;
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.08);
    transform: translateY(-2px);
}

/* Icon wrapper with custom SVG */
.contact-enhanced-icon-wrapper {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(156, 175, 136, 0.1);
    border-radius: 50%;
    margin-bottom: 20px;
}

.contact-enhanced-info-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2D2520;
    margin-bottom: 12px;
}

.contact-enhanced-info-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #6B5347;
    margin-bottom: 6px;
}

.contact-enhanced-info-card p:last-child {
    margin-bottom: 0;
}

.contact-enhanced-info-card .info-subtitle {
    font-size: 14px;
    opacity: 0.7;
}

/* Links within info cards - Clay Text, underlined at rest so they read as tappable */
.contact-enhanced-info-card a {
    color: var(--clay-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.contact-enhanced-info-card a:hover {
    color: var(--clay-text-hover);
}

.contact-enhanced-info-card a:focus-visible {
    outline: 2px solid var(--clay-text);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Emergency disclaimer - Critical notice styling */
.contact-enhanced-emergency {
    margin-top: 52px;
    padding: 24px 28px;
    background: rgba(107, 83, 71, 0.06);
    border-radius: 8px;
    border-left: 4px solid #D4795B;
}

.contact-enhanced-emergency p {
    font-size: 15px;
    line-height: 1.6;
    color: #6B5347;
    margin: 0;
}

.contact-enhanced-emergency strong {
    color: #2D2520;
    font-weight: 600;
}

/* ========================================
   RESPONSIVE BREAKPOINTS - CONTACT ENHANCED
   ======================================== */

/* Tablet breakpoint (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .contact-enhanced-section-wrapper {
        padding: 60px 0 80px 0;
    }

    .contact-enhanced-container {
        padding: 50px 40px;
    }

    .contact-enhanced-title {
        font-size: 38px;
    }

    .contact-enhanced-intro {
        font-size: 16px;
    }

    .contact-enhanced-info-grid {
        gap: 24px;
    }
}

/* Mobile breakpoint (max-width: 767px) */
@media screen and (max-width: 767px) {
    .contact-enhanced-section-wrapper {
        padding: 40px 0 60px 0;
    }

    .contact-enhanced-container {
        padding: 40px 24px;
        border-radius: 0;
    }

    .contact-enhanced-header {
        margin-bottom: 36px;
    }

    .contact-enhanced-eyebrow {
        font-size: 12px;
    }

    .contact-enhanced-title {
        font-size: 32px;
    }

    .contact-enhanced-title-underline {
        width: 60px;
        height: 2.5px;
        margin-bottom: 24px;
    }

    .contact-enhanced-intro {
        font-size: 15px;
    }

    .contact-enhanced-signposts {
        grid-template-columns: 1fr;
    }

    .contact-enhanced-signpost {
        padding: 16px 4px;
    }

    .contact-enhanced-signpost + .contact-enhanced-signpost {
        border-left: 0;
        border-top: 1px solid rgba(107, 83, 71, 0.18);
    }

    .contact-enhanced-signpost p {
        font-size: 14px;
    }

    .contact-enhanced-form-wrapper {
        margin-bottom: 44px;
    }

    .contact-enhanced-form .form-control {
        padding: 14px 16px;
        font-size: 15px;
    }

    .contact-enhanced-form textarea.form-control {
        min-height: 120px;
    }

    .contact-enhanced-privacy {
        padding: 16px 20px;
    }

    .contact-enhanced-privacy p {
        font-size: 14px;
    }

    .contact-enhanced-form .btn-default {
        width: 100%;
        padding: 14px 32px;
        font-size: 15px;
    }

    .contact-enhanced-divider {
        margin: 40px 0;
    }

    .contact-enhanced-info-section {
        margin-top: 44px;
    }

    .contact-enhanced-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 32px;
    }

    .contact-enhanced-info-card {
        padding: 28px 24px;
    }

    .contact-enhanced-icon-wrapper {
        width: 48px;
        height: 48px;
    }

    .contact-enhanced-info-card h3 {
        font-size: 17px;
    }

    .contact-enhanced-info-card p {
        font-size: 14px;
    }

    /* 44px tap target without changing the card's spacing */
    .contact-enhanced-info-card a {
        display: inline-block;
        padding: 11px 0;
        margin: -11px 0;
    }

    .contact-enhanced-emergency {
        margin-top: 40px;
        padding: 20px 24px;
    }

    .contact-enhanced-emergency p {
        font-size: 14px;
    }
}

/* ==========================================================================
   APPOINTMENT ENHANCED SECTION
   Sophisticated, calming appointment booking interface
   ========================================================================== */

/* Section wrapper - Calming off-white with green undertone */
.appointment-enhanced-section {
    background: #F9FAF7;
    padding: 80px 0 100px 0;
}

/* Two-column layout wrapper */
.appointment-enhanced-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: stretch;
}

/* Left column - Form container */
.appointment-enhanced-form-column {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 50px;
    box-shadow: 0 2px 16px rgba(107, 83, 71, 0.06);
}

/* Header section */
.appointment-enhanced-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Eyebrow text - Sage green accent */
.appointment-enhanced-eyebrow {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sage-text);
    margin-bottom: 16px;
}

/* Main heading */
.appointment-enhanced-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #2D2520;
    margin-bottom: 20px;
}

/* Decorative title underline - Sage gradient */
.appointment-enhanced-title-underline {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #9CAF88, #B8C5A8);
    border-radius: 2px;
    margin: 0 auto 24px auto;
}

/* Comfort badge - Reassuring messaging */
.appointment-enhanced-comfort-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(156, 175, 136, 0.08);
    border: 1px solid rgba(156, 175, 136, 0.2);
    border-radius: 24px;
    margin-top: 8px;
}

.appointment-enhanced-comfort-badge .badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.appointment-enhanced-comfort-badge .badge-text {
    font-size: 14px;
    font-weight: 500;
    color: #6B5347;
}

/* Form wrapper */
.appointment-enhanced-form-wrapper {
    margin-top: 32px;
}

/* Form styling */
.appointment-enhanced-form .form-group {
    margin-bottom: 20px;
}

.appointment-enhanced-form .form-control {
    padding: 14px 18px;
    font-size: 16px;
    line-height: 1.5;
    color: #2D2520;
    background: #FDFCFA;
    border: 1.5px solid #E5DDD6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.appointment-enhanced-form .form-control:focus {
    background: #FFFFFF;
    border-color: #9CAF88;
    box-shadow: 0 0 0 3px rgba(156, 175, 136, 0.12);
    outline: none;
}

.appointment-enhanced-form .form-control::placeholder {
    color: rgba(107, 83, 71, 0.5);
}

.appointment-enhanced-form textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.appointment-enhanced-form .form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B5347' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Privacy promise box */
.appointment-enhanced-privacy {
    padding: 18px 22px;
    background: rgba(156, 175, 136, 0.05);
    border-left: 3px solid #9CAF88;
    border-radius: 6px;
    margin-bottom: 24px;
    margin-top: 8px;
}

.appointment-enhanced-privacy p {
    font-size: 14px;
    line-height: 1.6;
    color: #6B5347;
    margin: 0;
}

.appointment-enhanced-privacy strong {
    color: #2D2520;
    font-weight: 600;
}

/* Submit button */
.appointment-enhanced-form .btn-default {
    width: 100%;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #6B5347;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.appointment-enhanced-form .btn-default:hover {
    background: #543F35;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 83, 71, 0.25);
}

.appointment-enhanced-form .btn-default:active {
    transform: translateY(0);
}

/* Right column - Info sidebar */
.appointment-enhanced-info-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Info header */
.appointment-enhanced-info-header {
    margin-bottom: 24px;
}

.appointment-enhanced-info-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2D2520;
    margin-bottom: 8px;
}

.appointment-enhanced-info-header p {
    font-size: 15px;
    line-height: 1.5;
    color: #6B5347;
    margin: 0;
}

/* Contact options container */
.appointment-enhanced-contact-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

/* Individual option cards */
.appointment-enhanced-option-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E5DDD6;
    border-radius: 10px;
    transition: all 0.25s ease;
    flex: 1;
}

.appointment-enhanced-option-card:hover {
    border-color: #9CAF88;
    box-shadow: 0 4px 12px rgba(156, 175, 136, 0.12);
    transform: translateY(-2px);
}

/* Icon wrapper in option cards */
.option-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(156, 175, 136, 0.1);
    border-radius: 10px;
}

/* Option card content */
.option-card-content {
    flex: 1;
    min-width: 0;
}

.option-card-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: #2D2520;
    margin: 0 0 4px 0;
}

.option-card-content p {
    font-size: 14px;
    color: #6B5347;
    margin: 0;
    word-break: break-word;
}

/* Contact option card links: Clay underlined at rest so they read as tappable (matches Contact info cards) */
/* Used in: appointment */
.option-card-content a {
    color: var(--clay-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease;
}

/* Used in: appointment */
.option-card-content a:hover {
    color: var(--clay-text-hover);
}

/* Used in: appointment */
.option-card-content a:focus-visible {
    outline: 2px solid var(--clay-text);
    outline-offset: 2px;
    border-radius: 2px;
}

/* 44px tap target without changing the card's spacing */
/* Used in: appointment */
@media (max-width: 767px) {
    .option-card-content a {
        display: inline-block;
        padding: 11px 0;
        margin: -11px 0;
    }
}

/* Value proposition box */
.appointment-enhanced-value-box {
    padding: 24px;
    background: rgba(156, 175, 136, 0.06);
    border-left: 4px solid #9CAF88;
    border-radius: 8px;
    margin-bottom: 32px;
}

.appointment-enhanced-value-box h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2D2520;
    margin: 0 0 12px 0;
}

.appointment-enhanced-value-box p {
    font-size: 15px;
    line-height: 1.6;
    color: #6B5347;
    margin: 0 0 12px 0;
}

.appointment-enhanced-value-box p:last-child {
    margin-bottom: 0;
}

.appointment-enhanced-value-box .value-box-reassurance {
    font-weight: 600;
    color: var(--sage-text);
    font-style: italic;
}

/* Options Reference Section */
.appointment-enhanced-options-reference {
    margin-bottom: 28px;
}

.appointment-enhanced-options-reference h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2D2520;
    margin: 0 0 16px 0;
}

.options-reference-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-reference-item {
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E5DDD6;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.option-reference-item:hover {
    border-color: #C9D4BC;
}

.option-reference-item.option-reference-featured {
    border-color: #9CAF88;
    background: rgba(156, 175, 136, 0.03);
}

/* Used in: appointment */
.option-reference-interactive {
    cursor: pointer;
    user-select: none;
}

/* Used in: appointment */
.option-reference-item.selected {
    border-color: #9CAF88;
    background: rgba(156, 175, 136, 0.08);
    box-shadow: 0 2px 8px rgba(156, 175, 136, 0.15);
    transform: translateY(-1px);
}

/* Used in: appointment */
.option-reference-item.dimmed {
    opacity: 0.5;
    filter: grayscale(20%);
}

.option-reference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.option-reference-label {
    font-size: 15px;
    font-weight: 600;
    color: #2D2520;
}

.option-reference-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--sage-text);
}

.option-reference-details {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.option-reference-details span {
    font-size: 13px;
    color: #6B5347;
    padding: 2px 8px;
    background: rgba(107, 83, 71, 0.06);
    border-radius: 4px;
}

.option-reference-item p {
    font-size: 13px;
    line-height: 1.5;
    color: #6B5347;
    margin: 0;
}

/* What Happens Next Section */
.appointment-enhanced-next-steps {
    margin-bottom: 28px;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E5DDD6;
    border-radius: 8px;
}

.appointment-enhanced-next-steps h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2D2520;
    margin: 0 0 16px 0;
}

.next-steps-list {
    margin: 0;
    padding-left: 20px;
    list-style: none;
    counter-reset: steps;
}

.next-steps-list li {
    position: relative;
    padding-left: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #6B5347;
    counter-increment: steps;
}

.next-steps-list li:last-child {
    margin-bottom: 0;
}

.next-steps-list li::before {
    content: counter(steps);
    position: absolute;
    left: -20px;
    top: 0;
    width: 18px;
    height: 18px;
    background: #667D58;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.next-steps-list li strong {
    color: #2D2520;
    font-weight: 600;
}

/* ==========================================================================
   APPOINTMENT ENHANCED - RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet breakpoint */
@media (max-width: 1199px) {
    .appointment-enhanced-wrapper {
        grid-template-columns: 1fr 340px;
        gap: 40px;
    }

    .appointment-enhanced-form-column {
        padding: 40px;
    }

    .appointment-enhanced-title {
        font-size: 34px;
    }
}

/* Stack to single column */
@media (max-width: 991px) {
    .appointment-enhanced-section {
        padding: 60px 0 80px 0;
    }

    .appointment-enhanced-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .appointment-enhanced-info-column {
        height: auto;
    }

    .appointment-enhanced-contact-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        flex-grow: 0;
    }

    .appointment-enhanced-option-card {
        flex: none;
    }

    .options-reference-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .appointment-enhanced-title {
        font-size: 32px;
    }
}

/* Mobile breakpoint */
@media (max-width: 767px) {
    .appointment-enhanced-section {
        padding: 50px 0 60px 0;
    }

    .appointment-enhanced-header {
        margin-bottom: 32px;
    }

    .appointment-enhanced-eyebrow {
        font-size: 12px;
    }

    .appointment-enhanced-title {
        font-size: 28px;
    }

    .appointment-enhanced-comfort-badge {
        padding: 8px 16px;
    }

    .appointment-enhanced-comfort-badge .badge-text {
        font-size: 13px;
    }

    .appointment-enhanced-form .form-control {
        padding: 12px 14px;
        font-size: 15px;
    }

    .appointment-enhanced-contact-options {
        grid-template-columns: 1fr;
        flex-grow: 0;
    }

    .appointment-enhanced-option-card {
        flex: none;
    }

    .options-reference-grid {
        grid-template-columns: 1fr;
    }

    .appointment-enhanced-next-steps {
        padding: 16px;
    }

    .next-steps-list li {
        font-size: 13px;
    }

    .option-card-icon {
        width: 40px;
        height: 40px;
    }

    .appointment-enhanced-value-box {
        padding: 20px;
    }

    .appointment-enhanced-value-box h4 {
        font-size: 16px;
    }

    .appointment-enhanced-value-box p {
        font-size: 14px;
    }

    .appointment-enhanced-info-header h3 {
        font-size: 20px;
    }

    .appointment-enhanced-privacy {
        padding: 14px 16px;
    }

    .appointment-enhanced-privacy p {
        font-size: 13px;
    }
}

/* Small mobile */
@media (max-width: 575px) {
    .appointment-enhanced-form .btn-default {
        padding: 14px 24px;
        font-size: 15px;
    }
}
/* ==========================================================================
   APPOINTMENT ENHANCED - PHASE 4 (Schedule persona findings)
   Two-path block, visit type field, shared form labels, errors, mobile order
   ========================================================================== */

/* Two ways to book: the block that sits under the H1 */
/* Used in: appointment */
.schedule-two-paths {
    margin: 28px 0 24px 0;
    text-align: left;
}

/* Used in: appointment */
.two-paths-lead {
    font-size: 17px;
    line-height: 1.5;
    color: #6B5347;
    text-align: center;
    margin: 0 0 16px 0;
}

/* Used in: appointment */
.two-paths-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    counter-reset: path;
}

/* Used in: appointment */
.two-path {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #FDFCFA;
    border: 1px solid #E5DDD6;
    border-radius: 10px;
    counter-increment: path;
}

/* The calendar is the primary path: sage tint and border */
/* Used in: appointment */
.two-path-calendar {
    background: rgba(156, 175, 136, 0.08);
    border-color: #9CAF88;
}

/* Used in: appointment */
.two-path-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #2D2520;
    margin: 0 0 8px 0;
}

/* Numbered circle, same look as the What Happens Next steps */
/* Used in: appointment */
.two-path-heading::before {
    content: counter(path);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #667D58;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50%;
}

/* Used in: appointment */
.two-path p {
    font-size: 15px;
    line-height: 1.6;
    color: #6B5347;
    margin: 0 0 16px 0;
}

/* Used in: appointment */
.two-path-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: auto;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 8px;
    border: 1.5px solid #6B5347;
    background: #FFFFFF;
    color: #6B5347;
    transition: all 0.25s ease;
}

/* Used in: appointment */
.two-path-button:hover,
.two-path-button:focus-visible {
    background: rgba(107, 83, 71, 0.08);
    color: #543F35;
}

/* Used in: appointment */
.two-path-calendar .two-path-button {
    background: #667D58;
    border-color: #667D58;
    color: #FFFFFF;
}

/* Used in: appointment */
.two-path-calendar .two-path-button:hover,
.two-path-calendar .two-path-button:focus-visible {
    background: #55694A;
    border-color: #55694A;
    color: #FFFFFF;
}

/* Payment and cancellation line under the badge */
/* Used in: appointment */
.payment-note {
    max-width: 620px;
    margin: 14px auto 0 auto;
    font-size: 14px;
    line-height: 1.6;
    color: #6B5347;
}

/* The form is the target of the "Request a Time" link */
/* Used in: appointment */
#appointmentForm {
    scroll-margin-top: 24px;
}

/* Visit type: its own labelled decision at the top of the form, beside the prices */
/* Used in: appointment */
.appointment-enhanced-form .visit-type-field {
    margin-bottom: 0;
    padding: 16px 18px;
    background: rgba(156, 175, 136, 0.07);
    border: 1px solid rgba(156, 175, 136, 0.35);
    border-radius: 10px;
}

/* Brief confirmation ring when a price card sets the visit type */
/* Used in: appointment */
.appointment-enhanced-form .visit-type-field.just-set {
    animation: visit-type-flash 1.4s ease-out 1;
}

@keyframes visit-type-flash {
    0%   { box-shadow: 0 0 0 0 rgba(102, 125, 88, 0.55); background: rgba(156, 175, 136, 0.22); }
    100% { box-shadow: 0 0 0 12px rgba(102, 125, 88, 0); background: rgba(156, 175, 136, 0.07); }
}

@media (prefers-reduced-motion: reduce) {
    .appointment-enhanced-form .visit-type-field.just-set {
        animation: none;
    }
}

/* Keyboard focus on the price cards (they are now buttons) */
/* Used in: appointment */
.option-reference-interactive:focus-visible {
    outline: 2px solid var(--sage-text);
    outline-offset: 2px;
}

/* Errors on the appointment form: field messages in clay, like Contact */
/* Used in: appointment */
.appointment-enhanced-form .help-block.with-errors {
    font-size: 14px;
    line-height: 1.4;
    color: var(--clay-text);
}

/* Used in: appointment */
.appointment-enhanced-form .help-block.with-errors:empty {
    display: none;
}

/* Used in: appointment */
.appointment-enhanced-form .help-block.with-errors:not(:empty) {
    margin-top: 6px;
}

/* Used in: appointment */
.appointment-enhanced-form .form-control.is-invalid {
    border-color: var(--clay-text);
}

/* Email-or-phone message sits between the note and the two fields */
/* Used in: appointment, contact */
.appointment-enhanced-form .validation-error,
.contact-enhanced-form .validation-error {
    margin: 0 0 16px 0;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--clay-text);
    background: rgba(184, 92, 63, 0.07);
    border-left: 3px solid var(--clay-text);
    border-radius: 6px;
}

/* What Happens Next: both lists show on load; the chosen visit gets an accent bar */
/* Used in: appointment */
.next-steps-content + .next-steps-content {
    margin-top: 18px;
}

/* Used in: appointment */
.next-steps-label {
    font-size: 14px;
    font-weight: 700;
    color: #2D2520;
    margin: 0 0 10px 0;
}

/* Used in: appointment */
.next-steps-content {
    padding-left: 12px;
    border-left: 3px solid transparent;
    transition: border-color 0.3s ease;
}

/* Used in: appointment */
.next-steps-content.active {
    border-left-color: #9CAF88;
}

/* Contact cards take only the room their content needs */
/* Used in: appointment */
.appointment-enhanced-wrapper {
    align-items: start;
}

/* Used in: appointment */
.appointment-enhanced-option-card {
    flex: none;
}

/* Used in: appointment */
.appointment-enhanced-contact-options {
    flex-grow: 0;
}

/* Used in: appointment */
.appointment-enhanced-info-column {
    height: auto;
}

/* Two paths stack on narrow screens */
/* Used in: appointment */
@media (max-width: 767px) {
    .two-paths-list {
        grid-template-columns: 1fr;
    }

    .two-path-button {
        width: 100%;
    }

    .two-path-heading {
        font-size: 18px;
    }
}

/* Single column below 992px: the white form card dissolves so the sections can be
   re-sequenced: booking header, prices, what happens next, form, reach out */
/* Used in: appointment */
@media (max-width: 991px) {
    .appointment-enhanced-wrapper {
        gap: 24px;
    }

    .appointment-enhanced-form-column,
    .appointment-enhanced-info-column {
        display: contents;
    }

    .appointment-enhanced-header,
    .appointment-enhanced-form-wrapper {
        background: #FFFFFF;
        border-radius: 12px;
        box-shadow: 0 2px 16px rgba(107, 83, 71, 0.06);
        padding: 36px;
        margin: 0;
    }

    .appointment-enhanced-header                 { order: 1; }
    .appointment-enhanced-value-box              { order: 2; margin-bottom: 0; }
    .appointment-enhanced-options-reference      { order: 3; margin-bottom: 0; }
    .appointment-enhanced-next-steps             { order: 4; margin-bottom: 0; }
    .appointment-enhanced-form-wrapper           { order: 5; }
    .appointment-enhanced-info-header            { order: 6; margin-bottom: 0; }
    .appointment-enhanced-contact-options        { order: 7; }
}

/* Used in: appointment */
@media (max-width: 767px) {
    .appointment-enhanced-header,
    .appointment-enhanced-form-wrapper {
        padding: 28px 20px;
        border-radius: 10px;
    }
}

/* Used in: appointment */
@media (max-width: 575px) {
    .appointment-enhanced-header,
    .appointment-enhanced-form-wrapper {
        padding: 24px 16px;
    }
}

/* Mobile quick-book bar: the online calendar stays in reach while she reads prices and steps.
   schedule-page.js hides it while the two-path block or the request form is on screen. */
/* Used in: appointment */
.schedule-quickbar {
    display: none;
}

/* Used in: appointment */
@media (max-width: 991px) {
    .schedule-quickbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #F5F1E8;
        border-top: 1px solid rgba(107, 83, 71, 0.2);
        box-shadow: 0 -4px 16px rgba(107, 83, 71, 0.15);
        transition: transform 0.3s ease;
    }

    .schedule-quickbar.is-hidden {
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }

    /* Same sage as the calendar path button, so the faster path keeps one look */
    .schedule-quickbar-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 560px;
        min-height: 48px;
        margin: 0 auto;
        padding: 8px 16px;
        border-radius: 10px;
        background: #667D58;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
    }

    .schedule-quickbar-button:hover,
    .schedule-quickbar-button:focus-visible {
        background: #55694A;
        color: #FFFFFF;
    }

    /* Keep the footer clear of the bar */
    body:has(.schedule-quickbar) {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/*==========================================================*/
/* Shared components left from the old About sections 4-7  */
/* (About V1.0.0 hub, 2026-10-07). Used across pages:       */
/* timeline/step: articles, services, policies;             */
/* .cross-ref-cta: About, bio, Home, Services, Approach;    */
/* .card-icon: Home conditions, appointment, Solana diff.   */
/*==========================================================*/

/* Timeline */

.timeline-step {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

.step-number {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #B85C3F 0%, #A8502F 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
}

.step-content {
    flex: 1;
    padding-bottom: 0;
}

.step-content h3 {
    font-family: var(--accent-font);
    font-size: 22px;
    font-weight: 400;
    color: #6B5347;
    margin-bottom: 12px;
}

.step-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #6B5347;
    margin: 0;
}

/* Cross-Reference CTA Link */
.cross-ref-cta {
    margin: 48px auto 0;
    text-align: center;
}

.cross-ref-cta p {
    font-size: 15px;
    color: rgba(107, 83, 71, 0.65);
    margin: 0;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.cross-ref-cta a {
    display: inline-block;
    color: #6B5347;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 10px 20px;
    margin-left: 6px;
    background: linear-gradient(135deg, rgba(245, 241, 232, 0.9) 0%, rgba(232, 176, 135, 0.15) 100%);
    border: 1px solid rgba(212, 121, 91, 0.25);
    border-radius: 24px;
    box-shadow:
        0 1px 2px rgba(107, 83, 71, 0.04),
        0 4px 8px rgba(107, 83, 71, 0.06);
    transition: all 0.3s ease;
    vertical-align: middle;
}

.cross-ref-cta a:hover {
    background: linear-gradient(135deg, #B85C3F 0%, #A8502F 100%);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow:
        0 2px 4px rgba(212, 121, 91, 0.15),
        0 8px 16px rgba(212, 121, 91, 0.20);
    transform: translateY(-1px);
}

.cross-ref-cta a::after {
    content: " →";
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.cross-ref-cta a:hover::after {
    transform: translateX(3px);
}


/* Card icon */

.card-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

/*==========================================================*/
/* SECTION 8: Who This Is For                               */
/* Persona Cards + Scope Boxes                               */
/*==========================================================*/

.audience-section {
    background: #F5F1E8;
    padding: 100px 5% 80px;
}

.audience-container {
    max-width: 1100px;
    margin: 0 auto;
}

.audience-header {
    text-align: center;
    margin-bottom: 50px;
}

.audience-header h2 {
    font-size: 42px;
    font-weight: 700;
    color: #6B5347;
    margin-bottom: 12px;
}

.audience-header .header-underline {
    width: 40%;
    max-width: 200px;
    height: 4px;
    background: #D4795B;
    margin: 0 auto;
}

/* Persona Cards Grid */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.persona-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    box-shadow:
        0 2px 4px rgba(107, 83, 71, 0.04),
        0 8px 24px rgba(107, 83, 71, 0.08);
    transition: all 0.3s ease;
}

.persona-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px rgba(107, 83, 71, 0.06),
        0 16px 40px rgba(107, 83, 71, 0.12);
}

.persona-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(212, 121, 91, 0.1) 0%, rgba(156, 175, 136, 0.1) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.persona-icon svg {
    width: 28px;
    height: 28px;
    color: #D4795B;
}

.persona-card:nth-child(2) .persona-icon svg {
    color: #9CAF88;
}

.persona-card:nth-child(3) .persona-icon svg {
    color: #6B5347;
}

.persona-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #6B5347;
    margin: 0;
}

/* Core Message */
.audience-core-message {
    max-width: 600px;
    margin: 0 auto 40px;
    text-align: center;
}

.message-emphasis {
    font-family: var(--accent-font);
    font-size: 28px;
    font-weight: 400;
    color: var(--clay-deep);
    margin: 0 0 8px;
}

.audience-core-message p:last-child {
    font-size: 17px;
    color: #6B5347;
    margin: 0;
}

/* Scope Statement Box */
.scope-statement {
    max-width: 700px;
    margin: 0 auto 50px;
}

.scope-box {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    border-left: 4px solid #9CAF88;
    box-shadow:
        0 2px 4px rgba(107, 83, 71, 0.04),
        0 8px 16px rgba(107, 83, 71, 0.06);
}

.scope-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sage-text);
    background: rgba(156, 175, 136, 0.12);
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.scope-box p {
    font-size: 16px;
    line-height: 1.6;
    color: #6B5347;
    margin: 0;
}

/* Subsection Grid (single referral card since About V1.0.0; matches the scope box width) */
/* Used in: new_about-WhoThisWorksFor.html */
.subsection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 700px;
    margin: 0 auto;
}

.scope-subsection {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow:
        0 2px 4px rgba(107, 83, 71, 0.04),
        0 8px 24px rgba(107, 83, 71, 0.08);
    transition: all 0.3s ease;
}

.scope-subsection:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px rgba(107, 83, 71, 0.06),
        0 16px 40px rgba(107, 83, 71, 0.12);
}

.subsection-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.subsection-redirect .subsection-icon {
    background: rgba(107, 83, 71, 0.08);
}

.subsection-redirect .subsection-icon svg {
    width: 24px;
    height: 24px;
    color: #6B5347;
}

.subsection-cta .subsection-icon {
    background: linear-gradient(135deg, rgba(212, 121, 91, 0.12) 0%, rgba(156, 175, 136, 0.12) 100%);
}

.subsection-cta .subsection-icon svg {
    width: 24px;
    height: 24px;
    color: #9CAF88;
}

.scope-subsection h3 {
    font-family: var(--accent-font);
    font-size: 22px;
    font-weight: 400;
    color: #6B5347;
    margin-bottom: 14px;
}

.scope-subsection p {
    font-size: 15px;
    line-height: 1.65;
    color: #6B5347;
    margin: 0;
}

.subsection-cta p {
    font-weight: 500;
}


/*==========================================================*/
/* RESPONSIVE: TABLET (768px - 991px)                       */
/*==========================================================*/

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

    /* Section 8: Audience */
    .persona-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .subsection-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


/*==========================================================*/
/* RESPONSIVE: MOBILE (<768px)                              */
/*==========================================================*/

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

    /* Section 4: Treatment Process */

    .timeline-step {
        gap: 20px;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .step-content h3 {
        font-size: 20px;
    }

    .cross-ref-cta {
        margin-top: 32px;
    }

    .cross-ref-cta p {
        font-size: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .cross-ref-cta a {
        margin-left: 0;
        font-size: 13px;
        padding: 10px 18px;
    }

    /* Section 8: Audience */
    .audience-section {
        padding: 70px 5% 60px;
    }

    .audience-header h2 {
        font-size: 32px;
    }

    .message-emphasis {
        font-size: 24px;
    }

    .scope-box {
        padding: 24px;
    }

    .scope-subsection {
        padding: 28px 24px;
    }
}


/* ========================================
   Provider Roster (About hub: Meet Our Providers) and Provider Cards
   Card grid scales to 2, 3, 4+ providers via auto-fit.
   ======================================== */

/* Used in: new_about-ProviderPath.html */
.provider-roster {
    background: #FFFFFF;
    padding: 100px 5% 90px;
    scroll-margin-top: 90px; /* #providers anchor clears the header */
}

/* Used in: new_about-ProviderPath.html */
.provider-roster-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Used in: new_about-ProviderPath.html */
.provider-roster-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Used in: new_about-ProviderPath.html */
.provider-roster-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347;
    margin-bottom: 12px;
}

/* Used in: new_about-ProviderPath.html */
.provider-roster-header .header-underline {
    width: 80px;
    height: 4px;
    background-color: #D4795B;
    margin: 0 auto;
}

/* Used in: new_about-ProviderPath.html */
.provider-roster-intro {
    max-width: 800px;
    margin: 0 auto 48px;
    text-align: center;
}

.provider-roster-intro p {
    font-size: 18px;
    line-height: 1.8;
    color: #6B5347;
    margin: 0 0 16px;
}

/* Solo roster (settings.PROVIDERS_ACTIVE has one slug): the --solo modifiers render only then, so multi output is unchanged.
   768-1023px: one wide horizontal card instead of a grid slot. */
@media (min-width: 768px) {
    /* Used in: new_about-ProviderPath.html */
    .provider-cards.provider-cards--solo {
        --card-w: 720px;
        max-width: var(--card-w);
    }

    /* Used in: new_about-ProviderPath.html */
    .provider-cards--solo .provider-card {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: 240px 1fr;
        grid-template-rows: auto auto 1fr;
        align-items: start;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-photo {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: stretch;
        height: auto;
        min-height: 300px;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-body {
        grid-column: 2;
        grid-row: 1;
        padding: 28px 32px 0;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-name {
        font-size: 28px;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-hook {
        grid-column: 2;
        grid-row: 2;
        padding: 0 32px 16px;
        font-size: 18px;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-cue {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
        padding: 0 32px 26px;
        font-size: 16px;
    }
}

/* Solo roster, 1024px and up: feature block. Card left as the subject, heading and intro right, left-aligned. */
@media (min-width: 1024px) {
    /* Used in: new_about-ProviderPath.html */
    .provider-roster-container--solo {
        display: grid;
        grid-template-columns: 360px 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 64px;
        align-content: center;
        align-items: start;
    }

    /* Used in: new_about-ProviderPath.html */
    .provider-roster-container--solo .provider-roster-header {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
    }

    /* Used in: new_about-ProviderPath.html */
    .provider-roster-container--solo .provider-roster-header .header-underline {
        margin: 0;
    }

    /* Used in: new_about-ProviderPath.html */
    .provider-roster-container--solo .provider-roster-intro {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        margin: 0;
        max-width: 560px;
    }

    /* Used in: new_about-ProviderPath.html */
    .provider-roster-container--solo .provider-cards {
        grid-column: 1;
        grid-row: 1 / span 2;
        --card-w: 360px;
        max-width: 360px;
        margin: 0;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-photo {
        align-self: auto;
        height: 360px;
        min-height: 0;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-body {
        padding: 22px 24px 0;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-name {
        font-size: 24px;
    }

    /* Used in: new_about-ProviderCard.html (solo About) */
    .provider-cards--solo .provider-card-hook,
    .provider-cards--solo .provider-card-cue {
        padding-inline: 24px;
        font-size: 16px;
    }
}

/* ----- Provider cards (shared list: mainsite/providers.py) -----
   One component for About roster, Home strip and bio-bottom section.
   Linked cards use a stretched link on the name; unlinked cards get no link, cue or hover. */

/* Grid: centered flex-wrap; the column cap follows the card count so a last row is never a lone card.
   1-3 cards: one row. 4: 2x2. 5-6: 3 across (last row centered). 7+: 4 across at 250px. */
/* Used in: new_about-ProviderPath.html, new_home-Providers.html, new_about-OtherProviders.html */
.provider-cards {
    --card-w: 320px;
    --gap: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    margin-inline: auto;
}

@media (min-width: 768px) {
    /* Used in: new_about-ProviderPath.html */
    .provider-cards {
        max-width: calc(3 * var(--card-w) + 2 * var(--gap));
    }

    /* Used in: new_about-ProviderPath.html */
    .provider-cards:has(> :nth-child(4):last-child) {
        max-width: calc(2 * var(--card-w) + var(--gap));
    }

    /* Used in: new_about-ProviderPath.html */
    .provider-cards:has(> :nth-child(7)) {
        --card-w: 250px;
        max-width: calc(4 * var(--card-w) + 3 * var(--gap));
    }

    /* Compact grid (Home strip, bio bottom): 1-2 cards at 488px; 3+ at 300px (below 768px), one 488px column (768-959px), stacked fluid cards (960px and up) */
    /* Used in: new_home-Providers.html, new_about-OtherProviders.html */
    .provider-cards.provider-cards--compact {
        --card-w: 488px;
        --gap: 24px;
        max-width: calc(2 * var(--card-w) + var(--gap));
    }

    /* Used in: new_home-Providers.html, new_about-OtherProviders.html */
    .provider-cards.provider-cards--compact:has(> :nth-child(3)) {
        --card-w: 300px;
        max-width: calc(3 * var(--card-w) + 2 * var(--gap));
    }

    /* Used in: new_home-Providers.html, new_about-OtherProviders.html */
    .provider-cards.provider-cards--compact:has(> :nth-child(4):last-child) {
        max-width: calc(2 * var(--card-w) + var(--gap));
    }

    /* Used in: new_home-Providers.html, new_about-OtherProviders.html */
    .provider-cards.provider-cards--compact:has(> :nth-child(7)) {
        --card-w: 250px;
        max-width: calc(4 * var(--card-w) + 3 * var(--gap));
    }
}

/* Used in: new_about-ProviderCard.html */
.provider-card {
    position: relative;
    flex: 0 0 var(--card-w);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(245, 241, 232, 0.9) 0%, rgba(232, 176, 135, 0.12) 100%);
    border: 1px solid rgba(212, 121, 91, 0.2);
    border-top: 4px solid #D4795B;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(107, 83, 71, 0.04), 0 6px 14px rgba(107, 83, 71, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Used in: new_about-ProviderCard.html */
.provider-card-photo {
    height: 240px;
    background: rgba(156, 175, 136, 0.15);
    overflow: hidden;
}

/* Used in: new_about-ProviderCard.html */
.provider-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Used in: new_about-ProviderCard.html */
.provider-card-body {
    display: flex;
    flex-direction: column;
    padding: 22px 24px 0;
}

/* Used in: new_about-ProviderCard.html */
.provider-card-name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #6B5347;
    margin: 0 0 6px;
}

/* Used in: new_about-ProviderCard.html (home-Providers, about-ProviderPath) */
.provider-card-credentials {
    display: block;
    margin-top: 4px;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--sage-text);
    white-space: nowrap;
}

/* Used in: new_about-ProviderCard.html (screen-reader-only comma between name and credentials) */
.provider-card-sep {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Used in: new_about-ProviderCard.html */
.provider-card-role {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clay-text);
    margin: 4px 0 0;
}

/* Used in: new_about-ProviderCard.html */
.provider-card-hook {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 1.6;
    color: #6B5347;
    margin: 12px 0 0;
    padding: 0 24px 24px;
}

/* Stretched link: the name anchor covers the whole card (single accessible name = name + credentials) */
/* Used in: new_about-ProviderCard.html */
.provider-card-link {
    color: inherit;
    text-decoration: none;
}

/* Used in: new_about-ProviderCard.html */
.provider-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Used in: new_about-ProviderCard.html */
.provider-card-link:focus-visible {
    outline: none;
}

/* Focus ring is drawn around the whole card */
/* Used in: new_about-ProviderCard.html */
.provider-card-link:focus-visible::after {
    outline: 3px solid var(--clay-text);
    outline-offset: 2px;
}

/* Linked cards only (bio exists) */
/* Used in: new_about-ProviderCard.html */
.provider-card--linked {
    cursor: pointer;
}

/* Used in: new_about-ProviderCard.html */
.provider-card--linked .provider-card-hook {
    padding-bottom: 12px;
}

/* Decorative cue (aria-hidden): text + arrow on desktop cards, arrow circle on mobile and compact cards */
/* Used in: new_about-ProviderCard.html */
.provider-card-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 0 24px 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--clay-text);
}

/* Used in: new_about-ProviderCard.html */
.provider-card-cue-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    /* Used in: new_about-ProviderCard.html */
    .provider-card--linked:hover {
        transform: translateY(-3px);
        box-shadow: 0 2px 4px rgba(107, 83, 71, 0.06), 0 14px 28px rgba(107, 83, 71, 0.14);
        border-color: rgba(212, 121, 91, 0.45);
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card--linked:hover .provider-card-cue {
        color: var(--clay-text-hover);
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card--linked:hover .provider-card-cue-arrow {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Used in: new_about-ProviderCard.html */
    .provider-card,
    .provider-card-cue-arrow {
        transition: none;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card--linked:hover,
    .provider-card--linked:hover .provider-card-cue-arrow {
        transform: none;
    }
}

/* Compact variant (Home strip, bio bottom): photo beside name and credentials; no role, hook or text cue */
/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
.provider-card--compact {
    flex-direction: row;
    align-items: stretch;
}

/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
.provider-card--compact .provider-card-photo {
    flex: 0 0 110px;
    height: auto;
    min-height: 120px;
}

/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
.provider-card--compact .provider-card-body {
    justify-content: center;
    padding: 20px 24px;
}

/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
.provider-card--compact.provider-card--linked .provider-card-body {
    padding-right: 60px;
}

/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
.provider-card--compact .provider-card-name {
    font-size: 20px;
    margin: 0;
}

/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
.provider-card--compact .provider-card-credentials {
    font-size: 14px;
    margin-top: 2px;
}

/* Arrow-circle cue: compact cards at every width, all cards on mobile */
/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
.provider-card--compact .provider-card-cue {
    position: absolute;
    top: 50%;
    right: 16px;
    margin: -16px 0 0;
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid rgba(212, 121, 91, 0.35);
}

/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
.provider-card--compact .provider-card-cue-text {
    display: none;
}

/* Compact strip, desktop: the arrow circle sits in the card's flow (not absolutely over the text), so the name can never run under it. */
/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
@media (min-width: 768px) {
    .provider-card--compact .provider-card-body,
    .provider-card--compact.provider-card--linked .provider-card-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 20px 12px 20px 24px;
    }

    .provider-card--compact:not(.provider-card--linked) .provider-card-body {
        padding-right: 24px;
    }

    .provider-card--compact .provider-card-cue {
        position: static;
        flex: 0 0 32px;
        align-self: center;
        margin: 0 16px 0 0;
    }
}

/* Compact strip, 3+ cards, below 960px: one column of the 488px row cards (three narrow columns would wrap the names). */
/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
@media (min-width: 768px) and (max-width: 959px) {
    .provider-cards.provider-cards--compact.provider-cards--compact:has(> :nth-child(3)) {
        --card-w: 488px;
        max-width: var(--card-w);
    }
}

/* Compact strip, 3+ cards, 960px and up: stacked card (photo banner over name row, arrow at the right of the name row). Exactly 3 cards share the row fluidly. */
/* Used in: new_home-Providers.html, new_about-OtherProviders.html */
@media (min-width: 960px) {
    .provider-cards--compact:has(> :nth-child(3)) .provider-card--compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .provider-cards--compact:has(> :nth-child(3)) .provider-card--compact .provider-card-photo {
        grid-column: 1 / -1;
        flex: none;
        width: 100%;
        height: 150px;
        min-height: 0;
    }

    .provider-cards--compact:has(> :nth-child(3)) .provider-card--compact .provider-card-photo img {
        object-position: center 20%;
    }

    .provider-cards--compact:has(> :nth-child(3)) .provider-card--compact .provider-card-body,
    .provider-cards--compact:has(> :nth-child(3)) .provider-card--compact.provider-card--linked .provider-card-body {
        grid-column: 1;
        padding: 18px 8px 18px 20px;
    }

    .provider-cards--compact:has(> :nth-child(3)) .provider-card--compact .provider-card-cue {
        grid-column: 2;
    }

    .provider-cards--compact:has(> :nth-child(3)) .provider-card--compact .provider-card-name {
        font-size: 19px;
    }

    .provider-cards.provider-cards--compact:has(> :nth-child(3):last-child) {
        --card-w: 316px;
    }

    .provider-cards--compact:has(> :nth-child(3):last-child) .provider-card--compact {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    /* Used in: new_about-ProviderPath.html, new_home-Providers.html, new_about-OtherProviders.html */
    .provider-cards {
        gap: 16px;
    }

    /* Mobile: 100px photo beside name block, hook full width below */
    /* Used in: new_about-ProviderCard.html */
    .provider-card {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: 100px 1fr;
        column-gap: 14px;
        row-gap: 10px;
        align-items: center;
        padding: 14px;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card-photo,
    .provider-card--compact .provider-card-photo {
        grid-column: 1;
        grid-row: 1;
        width: 100px;
        height: 100px;
        min-height: 0;
        border-radius: 12px;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card-body,
    .provider-card--compact .provider-card-body {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card--linked .provider-card-body,
    .provider-card--compact.provider-card--linked .provider-card-body {
        padding-right: 40px;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card-name,
    .provider-card--compact .provider-card-name {
        font-size: 19px;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card-credentials,
    .provider-card--compact .provider-card-credentials {
        font-size: 14px;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card-hook,
    .provider-card--linked .provider-card-hook {
        grid-column: 1 / -1;
        margin: 0;
        padding: 0;
        font-size: 15px;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card-cue,
    .provider-card--compact .provider-card-cue {
        position: absolute;
        top: 14px;
        right: 14px;
        margin: 0;
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        background: #FFFFFF;
        border: 1px solid rgba(212, 121, 91, 0.35);
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card--compact .provider-card-cue {
        top: 50%;
        margin-top: -16px;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card-cue-text {
        display: none;
    }

    /* Used in: new_about-ProviderCard.html */
    .provider-card .provider-card-monogram,
    .provider-card.provider-card--compact .provider-card-monogram {
        font-size: 34px;
    }
}

@media (max-width: 1023px) {
    .provider-roster {
        padding: 80px 5% 70px;
    }

    .provider-roster-header h2 {
        font-size: 38px;
    }
}

@media (max-width: 767px) {
    .provider-roster {
        padding: 60px 20px 50px;
    }

    .provider-roster-header h2 {
        font-size: 32px;
    }

    .provider-roster-header .header-underline {
        width: 60px;
        height: 3px;
    }

    .provider-roster-intro p {
        font-size: 16px;
        line-height: 1.75;
    }

}

/* ========================================
   Data, Not Guesswork (About Robert page)
   ======================================== */

/* Used in: new_about_robert-DataNotGuesswork.html */
.data-guesswork {
    background: #F5F1E8;
    padding: 100px 5% 90px;
}

/* Used in: new_about_robert-DataNotGuesswork.html */
.data-guesswork-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Used in: new_about_robert-DataNotGuesswork.html */
.data-guesswork-header {
    text-align: center;
    margin-bottom: 48px;
}

/* Used in: new_about_robert-DataNotGuesswork.html */
.data-guesswork-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347;
    margin-bottom: 12px;
}

/* Used in: new_about_robert-DataNotGuesswork.html */
.data-guesswork-header .header-underline {
    width: 80px;
    height: 4px;
    background-color: #D4795B;
    margin: 0 auto;
}

/* Used in: new_about_robert-DataNotGuesswork.html */
.data-guesswork-narrative p {
    font-size: 18px;
    line-height: 1.8;
    color: #6B5347;
    margin: 0 0 24px;
}

/* Used in: new_about_robert-DataNotGuesswork.html */
.data-guesswork-narrative .data-guesswork-lead {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.6;
    padding-left: 24px;
    border-left: 3px solid #D4795B;
}

@media (max-width: 1023px) {
    .data-guesswork {
        padding: 80px 5% 70px;
    }

    .data-guesswork-header h2 {
        font-size: 38px;
    }
}

@media (max-width: 767px) {
    .data-guesswork {
        padding: 60px 20px 50px;
    }

    .data-guesswork-header {
        margin-bottom: 36px;
    }

    .data-guesswork-header h2 {
        font-size: 32px;
    }

    .data-guesswork-narrative p {
        font-size: 16px;
        line-height: 1.75;
    }

    .data-guesswork-narrative .data-guesswork-lead {
        font-size: 18px;
        padding-left: 16px;
    }
}


/* ========================================
   HOME PAGE LAYOUT UPDATES (persona feedback F-03, F-04, F-08)
   ======================================== */

/* Hero eyebrow is the page's only <h1> but keeps the small eyebrow look of the theme's
   ".section-title h3" (dot, letter-spacing, caps, size, color). Rules below restate that look for h1. */
/* Used in: intro.html */
.hero-content .section-title h1.hero-eyebrow {
    display: inline-block;
    position: relative;
    font-family: var(--default-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--white-color);
    padding-left: 18px;
    margin-bottom: 15px;
    cursor: auto;
}

/* Used in: intro.html */
.hero-content .section-title h1.hero-eyebrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: var(--white-color);
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

/* Hero tagline is the display headline (h2): between the old h1 (70px) and old h5 (28px) */
/* Used in: intro.html */
.hero-content .section-title h2.hero-tagline {
    font-size: 44px;
    line-height: 1.2;
    margin-bottom: 0;
    cursor: auto;
    text-wrap: balance;
}

@media (max-width: 991px) {
    /* Used in: intro.html */
    .hero-content .section-title h2.hero-tagline {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    /* Used in: intro.html */
    .hero-content .section-title h1.hero-eyebrow {
        font-size: 14px;
        padding-left: 0;
        margin-bottom: 10px;
    }

    /* Used in: intro.html */
    .hero-content .section-title h1.hero-eyebrow::before {
        display: none;
    }

    /* Used in: intro.html */
    .hero-content .section-title h2.hero-tagline {
        font-size: 26px;
        padding: 6px 0;
    }

    /* Used in: intro.html */
    .hero-content .section-title h2.hero-tagline + p {
        margin-top: 18px;
    }
}

/* Text link at the bottom of a credibility card */
/* Used in: new_home-Credibility.html */
.stat-link {
    display: inline-block;
    margin-top: 14px;
    color: var(--clay-text);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

/* Used in: new_home-Credibility.html */
.stat-link:hover,
.stat-link:focus {
    color: var(--clay-text-hover);
    text-decoration: underline;
}

/* Providers strip section wrapper */
/* Used in: new_home-Providers.html */
.home-providers {
    background: #FFFFFF;
    padding: 70px 5% 60px;
}

/* Used in: new_home-Providers.html */
.home-providers-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Used in: new_home-Providers.html */
.home-providers-header {
    text-align: center;
    margin-bottom: 32px;
}

/* Used in: new_home-Providers.html */
.home-providers-header h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347;
    margin-bottom: 12px;
}

/* Used in: new_home-Providers.html */
.home-providers-header .header-underline {
    width: 80px;
    height: 4px;
    background-color: #D4795B;
    margin: 0 auto;
}

/* One line under the heading (multi roster only), same voice as the About hub intro. */
/* Used in: new_home-Providers.html */
.home-providers-intro {
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: #6B5347;
    margin: -12px auto 28px;
    max-width: 640px;
}

@media (max-width: 767px) {
    /* Used in: new_home-Providers.html */
    .home-providers {
        padding: 50px 20px 40px;
    }

    /* Used in: new_home-Providers.html */
    .home-providers-header h2 {
        font-size: 30px;
    }
}

/* Collapsible referral list in Differentiator 1 (open on desktop via inline script, closed on mobile) */
/* Used in: new_home-Differentiators.html */
.scope-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #6B5347;
    min-height: 44px;
}

/* Used in: new_home-Differentiators.html */
.scope-details > summary::-webkit-details-marker {
    display: none;
}

/* Used in: new_home-Differentiators.html */
.scope-details > summary::after {
    content: "+";
    font-size: 24px;
    line-height: 1;
    color: #D4795B;
}

/* Used in: new_home-Differentiators.html */
.scope-details[open] > summary::after {
    content: "\2212";
}

/* Used in: new_home-Differentiators.html */
.scope-details[open] > summary {
    margin-bottom: 12px;
}

/* Used in: new_home-Differentiators.html */
.scope-details > summary:focus-visible {
    outline: 2px solid #D4795B;
    outline-offset: 4px;
}

/* One-column list on phones inside the collapsible referral card */
@media (max-width: 767px) {
    /* Used in: new_home-Differentiators.html */
    .scope-details .scope-list--two-col {
        grid-template-columns: 1fr;
    }
}

/* Secondary-conditions note under the condition cards */
/* Used in: new_homepage_conditions.html */
.conditions-secondary-note {
    max-width: 700px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: #6B5347;
}

/* Small notes inside the two CTA cards */
/* Used in: new_home-CTA.html */
.newhome-cta-price-note {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: #6B5347;
}

/* Used in: new_home-CTA.html */
.newhome-cta-followup-note {
    margin: 12px 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: #6B5347;
}

/* Used in: new_home-CTA.html */
.newhome-cta-button-note {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: #6B5347;
}


/* ========================================
   LIVE-MOBILE REVIEW UPDATES (2026-10-05)
   F-01 monogram, F-04 action bar, F-05/F-06/F-07/F-08, sitewide clay contrast
   ======================================== */

/* F-01: monogram tile shown in place of a headshot until real photos exist */
/* Used in: new_about-ProviderCard.html */
.provider-card-monogram {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #F5F1E8 0%, rgba(156, 175, 136, 0.35) 100%);
    color: #6B5347;
    font-family: var(--accent-font);
    font-size: 64px;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Used in: new_home-Providers.html */
.provider-card--compact .provider-card-monogram {
    font-size: 40px;
}

/* F-04: mobile-only bottom booking bar (Home, About, bio pages). Hidden while the page's own booking buttons/CTA are on screen (data-hide-near). */
/* Used in: new_mobile-ActionBar.html (Home, About, About Robert, Approach, Services) */
.action-bar {
    display: none;
}

@media (max-width: 767px) {
    /* Used in: new_mobile-ActionBar.html */
    .action-bar {
        display: flex;
        gap: 8px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #F5F1E8;
        border-top: 1px solid rgba(107, 83, 71, 0.2);
        box-shadow: 0 -4px 16px rgba(107, 83, 71, 0.15);
        transition: transform 0.3s ease;
    }

    /* Used in: new_mobile-ActionBar.html */
    .action-bar.is-hidden {
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }

    /* Used in: new_mobile-ActionBar.html */
    .action-bar a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 8px 6px;
        border-radius: 10px;
        background: linear-gradient(135deg, #B85C3F 0%, #A8502F 100%);
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
    }

    /* Keep the footer clear of the bar */
    /* Used in: new_mobile-ActionBar.html */
    body:has(.action-bar) {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* F-06: badges move to the top-left and the card reserves room for them below 1025px */
@media (max-width: 1024px) {
    /* Used in: new_home-CTA.html */
    .newhome-cta-badge {
        top: 20px;
        left: 32px;
        right: auto;
    }

    /* Used in: new_home-CTA.html */
    .newhome-cta-card-content {
        padding-top: 76px;
    }
}

@media (max-width: 767px) {
    /* Used in: new_home-CTA.html */
    .newhome-cta-badge {
        left: 28px;
    }

    /* Used in: new_home-CTA.html */
    .newhome-cta-card-content {
        padding-top: 72px;
    }
}

/* F-07: tagline is Sand (#F5F1E8) with no box; a short Desert Clay rule under it is the only accent */
/* Used in: intro.html */
.hero-content .section-title .hero-tagline {
    background: transparent;
    color: #F5F1E8;
    text-shadow: none;
}

/* Used in: intro.html */
.hero-content .section-title .hero-tagline::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 14px;
    border-radius: 2px;
    background: #D4795B;
}

/* Hero treatment: a soft Earth Brown pool of shade centered behind the text column (eased, wide feather, no edges), over a light even Earth Brown tint. Both sit above the theme's overlay; the header area is left to the photo. */
/* Used in: intro.html */
.hero::before {
    background:
        radial-gradient(ellipse 135% 46% at 48% 38%,
            rgba(40, 31, 27, 0.49) 0%,
            rgba(40, 31, 27, 0.485) 34%,
            rgba(40, 31, 27, 0.47) 44%,
            rgba(40, 31, 27, 0.425) 54%,
            rgba(40, 31, 27, 0.34) 64%,
            rgba(40, 31, 27, 0.235) 74%,
            rgba(40, 31, 27, 0.135) 83%,
            rgba(40, 31, 27, 0.055) 91%,
            rgba(40, 31, 27, 0.015) 97%,
            rgba(40, 31, 27, 0.0) 100%),
        linear-gradient(rgba(107, 83, 71, 0.05), rgba(107, 83, 71, 0.05)),
        linear-gradient(1.91deg, rgba(38, 38, 38, 0.3) 64.59%, #262626 101.91%),
        linear-gradient(270deg, rgba(38, 38, 38, 0) 44.72%, #262626 117.07%),
        linear-gradient(180deg, rgba(38, 38, 38, 0) 68.75%, rgba(38, 38, 38, 0.8) 100%);
}

@media (min-width: 1024px) {
    /* Used in: intro.html */
    .hero::before {
        background:
            radial-gradient(ellipse 86% 62% at 38% 56%,
                rgba(40, 31, 27, 0.49) 0%,
                rgba(40, 31, 27, 0.485) 34%,
                rgba(40, 31, 27, 0.47) 44%,
                rgba(40, 31, 27, 0.425) 54%,
                rgba(40, 31, 27, 0.34) 64%,
                rgba(40, 31, 27, 0.235) 74%,
                rgba(40, 31, 27, 0.135) 83%,
                rgba(40, 31, 27, 0.055) 91%,
                rgba(40, 31, 27, 0.015) 97%,
                rgba(40, 31, 27, 0.0) 100%),
            linear-gradient(rgba(107, 83, 71, 0.05), rgba(107, 83, 71, 0.05)),
            linear-gradient(1.91deg, rgba(38, 38, 38, 0.3) 64.59%, #262626 101.91%),
            linear-gradient(270deg, rgba(38, 38, 38, 0) 44.72%, #262626 117.07%),
            linear-gradient(180deg, rgba(38, 38, 38, 0) 68.75%, rgba(38, 38, 38, 0.8) 100%);
    }
}

@media (max-width: 767px) {
    /* Used in: intro.html */
    .hero {
        padding-top: 130px;
    }
}

/* Sitewide clay contrast: white text on Desert Clay uses #B85C3F (4.53:1), gradients end at #A8502F (5.45:1).
   #D4795B stays for decorative lines, icons and large type. */
/* Used in: all pages using the theme button (header, forms, CTAs) */
.btn-default {
    background: #B85C3F;
}

/* Used in: theme templates using these components (services, blog, FAQ, pagination, step numbers, CTA boxes) */
.service-get-quote-text p span,
.service-catagery-list ul li:hover a,
.faq-catagery-list ul li:hover a,
.page-pagination ul li.active a,
.page-pagination ul li a:hover,
.post-tags .tag-links a,
.post-social-sharing ul li a,
.how-work-step-no,
.therapy-step-no,
.cta-box,
.faq-cta-box.sidebar-cta-box,
.pricing-box.highlight-box,
.main-menu ul ul {
    background-color: #B85C3F;
}


/* ========================================
   CLAY TEXT CONTRAST (sitewide)
   Desert Clay #D4795B stays for fills, rules, icons and decoration.
   Clay used as TEXT on Sand or white uses these tokens instead:
     --clay-text   #AC5333  normal text   4.61:1 on Sand, 5.20:1 on white
     --clay-deep   #B85C3F  large text    4.01:1 on Sand, 4.53:1 on white (AA large needs 3:1)
   ======================================== */
:root {
    --clay-text: #AC5333;
    --clay-text-hover: #8F4429;
    --clay-deep: #B85C3F;
    --clay-deep-hover: #A8502F;
    --sage-text: #5C7150; /* Warm Sage as text: 4.87:1 on Sand, 5.51:1 on white (Warm Sage #9CAF88 itself is only 2.4:1) */
    --sage-fill: #667D58; /* fill behind white text: 4.53:1 */
}

/* Theme (custom.css) clay text overridden here, since custom.css is read-only */
/* Used in: section eyebrows ("what we treat", "Our Approach to Treatment"), article cards, blog, pricing */
.section-title h3,
.readmore-btn,
.readmore-btn:hover,
.service-btn .readmore-btn:hover,
.service-get-quote-text a:hover,
.post-entry a,
.pricing-title h3 {
    color: var(--clay-text);
}

/* Used in: new_home-Differentiators.html (inline-style replacements), new_home-Credibility.html */
.diff-accent-text {
    color: var(--clay-text);
}

/* The hero keeps its own light eyebrow */
.hero-content .section-title h3 {
    color: #FFFFFF;
}

/* Used in: appointment and contact forms (validation messages from solana_misc.css / custom.css) */
body .validation-error,
.help-block.with-errors ul li {
    color: var(--clay-text);
}

/* Clay "$250" highlight in the credibility cards is 28px bold, so large-text clay applies */
/* Used in: new_home-Credibility.html */
.stat-main .highlight {
    color: var(--clay-deep);
}

/* Small glyphs that carry meaning (x, check, arrows) use the text-safe clay so they also pass as text */
/* Used in: approach and case study pages, article pages */
.included-checkmark,
.check-icon,
.checklist-item.no-fit .check-icon,
.divider-arrow,
.link-arrow,
.timeline-arrow {
    color: var(--clay-text);
}

/* Links styled as buttons inside policy copy must not inherit the clay link colour */
/* Used in: policy pages (Download PDF buttons) */
.policy-content a.btn-download-pdf,
.policy-content a.btn-download-pdf:hover,
.policy-content a.new-policy-btn-download,
.policy-content a.new-policy-btn-download:hover,
.policy-content a.btn-primary,
.policy-content a.btn-primary:hover {
    color: #FFFFFF;
}

/* Used in: policy pages (outline Download PDF button) */
.policy-content a.btn-secondary,
.policy-content a.btn-secondary:hover {
    color: #6B5347;
}

/* Policy copy sets its own h3 colour; the critical-notice title sits on a clay fill and stays white */
/* Used in: policy pages (Mandatory Reporting notice) */
.policy-critical-notice .critical-title {
    color: #FFFFFF;
}

/* Clay text on a clay-tinted pill or badge: the tint lowers contrast, so these use the darker hover clay (#8F4429, about 6:1) */
/* Used in: approach (measure tags), article timeline and step badges, contrast labels, access feature badges, article contact link */
.evidence-based .tag-adhd,
.not-included-x,
.step-badge,
.phase-time-label,
.contact-link {
    color: var(--clay-text-hover);
}

/* Warm Sage glyphs that act as text (check marks in lists) use the text-safe sage */
/* Used in: case study pages (assessment checklists, protocol steps) */
.checkmark,
.checklist-item.fit .check-icon {
    color: var(--sage-text);
}

/* Footer "Book" link: Desert Clay on the dark Earth Brown footer is only 2.3 to 2.8:1, so it uses Sand (6.3:1 or better) */
/* Used in: footer (base/footer.html), every page */
.footer-nav-link.footer-nav-link--book {
    color: #F5F1E8;
    font-weight: 600;
}

/* Used in: footer (base/footer.html), every page */
.footer-nav-link.footer-nav-link--book:hover {
    color: #FFFFFF;
}

/* Quiet centred line under the two CTA cards linking to the online calendar */
/* Used in: new_home-CTA.html */
.newhome-cta-calendar-line {
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 32px auto 0;
    padding: 10px 22px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: #6B5347;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
}

@media (max-width: 767px) {
    /* Used in: new_home-CTA.html */
    .newhome-cta-calendar-line {
        border-radius: 14px;
        padding: 12px 18px;
    }
}

/* Used in: new_home-CTA.html */
.newhome-cta-calendar-line a {
    color: var(--clay-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Used in: new_home-CTA.html */
.newhome-cta-calendar-line a:hover,
.newhome-cta-calendar-line a:focus {
    color: var(--clay-text-hover);
}


/* ========================================
   ABOUT HUB REDESIGN (Phase 3 layout, 2026-10-07)
   Single-column prose sections, checklist, bio-bottom providers, bio photo placeholder fix
   ======================================== */

/* Single-column prose section (alternates white / cream) */
/* Used in: new_about-Practice.html, new_about-HowWePractice.html, new_about-WorkingWithUs.html */
.about-prose {
    background: #FFFFFF;
    padding: 90px 5% 80px;
}

/* Used in: new_about-Practice.html, new_about-HowWePractice.html */
.about-prose--cream {
    background: #F5F1E8;
}

/* Used in: new_about-Practice.html, new_about-HowWePractice.html, new_about-WorkingWithUs.html */
.about-prose-container {
    max-width: 760px;
    margin: 0 auto;
}

/* Used in: new_about-Practice.html, new_about-HowWePractice.html, new_about-WorkingWithUs.html */
.about-prose-header {
    text-align: center;
    margin-bottom: 36px;
}

/* Used in: new_about-Practice.html, new_about-HowWePractice.html, new_about-WorkingWithUs.html */
.about-prose-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347;
    margin-bottom: 12px;
}

/* Used in: new_about-Practice.html, new_about-HowWePractice.html, new_about-WorkingWithUs.html */
.about-prose-header .header-underline {
    width: 80px;
    height: 4px;
    background-color: #D4795B;
    margin: 0 auto;
}

/* Used in: new_about-Practice.html, new_about-HowWePractice.html */
.about-prose-body p {
    font-size: 18px;
    line-height: 1.75;
    color: #6B5347;
    margin: 0 0 1.1em;
}

/* Used in: new_about-Practice.html, new_about-HowWePractice.html */
.about-prose-body p:last-child {
    margin-bottom: 0;
}

/* Pill link on its own (no lead-in sentence); the pill's own ::after adds the arrow */
/* Used in: new_about-HowWePractice.html */
.cross-ref-cta--solo {
    margin-top: 32px;
}

/* Used in: new_about-HowWePractice.html, new_about_robert-DataNotGuesswork.html */
.cross-ref-cta--solo a {
    margin-left: 0;
}

/* Scannable 5-item list: bold lead + short text, divider rows */
/* Used in: new_about-WorkingWithUs.html */
.about-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Used in: new_about-WorkingWithUs.html */
.about-checklist li {
    position: relative;
    padding: 16px 0 16px 34px;
    border-bottom: 1px solid rgba(107, 83, 71, 0.15);
    font-size: 17px;
    line-height: 1.65;
    color: #6B5347;
}

/* Used in: new_about-WorkingWithUs.html */
.about-checklist li:first-child {
    border-top: 1px solid rgba(107, 83, 71, 0.15);
}

/* Used in: new_about-WorkingWithUs.html */
.about-checklist li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 26px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D4795B;
}

/* Used in: new_about-WorkingWithUs.html */
.about-checklist strong {
    color: #6B5347;
    font-weight: 700;
}

/* Inline links stay at least 44px tall to tap */
/* Used in: new_about-WorkingWithUs.html */
.about-checklist a {
    color: var(--clay-text);
    font-weight: 600;
    text-decoration: underline;
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
}

/* Used in: new_about-WorkingWithUs.html */
.about-checklist a:hover {
    color: var(--clay-text-hover);
}

/* Bio bottom: "Also at Solana Psychiatry" */
/* Used in: new_about-OtherProviders.html */
.other-providers {
    background: #FFFFFF;
    padding: 70px 5% 60px;
}

/* Used in: new_about-OtherProviders.html */
.other-providers-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Used in: new_about-OtherProviders.html */
.other-providers-header {
    text-align: center;
    margin-bottom: 32px;
}

/* Used in: new_about-OtherProviders.html */
.other-providers-header h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #6B5347;
    margin-bottom: 12px;
}

/* Used in: new_about-OtherProviders.html */
.other-providers-header .header-underline {
    width: 80px;
    height: 4px;
    background-color: #D4795B;
    margin: 0 auto;
}

/* Bio headshot placeholder: monogram tile, no production text. */
/* Used in: new_about_robert-WhyIDo.html */
.photo-placeholder--monogram {
    padding-top: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(145deg, #F5F1E8 0%, rgba(156, 175, 136, 0.35) 100%);
}

/* Used in: new_about_robert-WhyIDo.html */
.photo-placeholder--monogram .provider-card-monogram {
    font-size: 72px;
    background: none;
}

@media (max-width: 767px) {
    /* Bio photo: a small portrait floated right of the opening paragraph, so the first paragraph is on the first screen.
       It needs an explicit width (the placeholder's padding-top ratio collapses to 0 without one). */
    /* Used in: new_about_robert-WhyIDo.html */
    .photo-column {
        float: right;
        width: 96px;
        max-width: none;
        margin: 4px 0 10px 16px;
    }

    /* Used in: new_about_robert-WhyIDo.html */
    .photo-placeholder--monogram .provider-card-monogram {
        font-size: 34px;
    }

    /* Used in: new_about-Practice.html, new_about-HowWePractice.html, new_about-WorkingWithUs.html */
    .about-prose {
        padding: 50px 20px 44px;
    }

    /* Used in: new_about-Practice.html, new_about-HowWePractice.html, new_about-WorkingWithUs.html */
    .about-prose-header {
        margin-bottom: 26px;
    }

    /* Used in: new_about-Practice.html, new_about-HowWePractice.html, new_about-WorkingWithUs.html */
    .about-prose-header h2 {
        font-size: 32px;
    }

    /* Used in: new_about-Practice.html, new_about-HowWePractice.html */
    .about-prose-body p {
        font-size: 16px;
        line-height: 1.7;
    }

    /* Used in: new_about-WorkingWithUs.html */
    .about-checklist li {
        font-size: 16px;
    }

    /* Used in: new_about-OtherProviders.html */
    .other-providers {
        padding: 50px 20px 40px;
    }

    /* Used in: new_about-OtherProviders.html */
    .other-providers-header h2 {
        font-size: 30px;
    }
}

/* ========================================
   Approach page: in-page anchors and decision-point action
   ======================================== */

/* Used in: approach.html (smooth jump to #process, #dose-rules, #data, #how-fast, #included, #not-included, #start) */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Used in: new_clinicalprocess, new_makingdecisions (#decisions, #dose-rules), new_whyevidencebased, new_timeline-expectations, new_whats-included, new_approach-cta (anchor targets clear the transparent header) */
#process,
#decisions,
#dose-rules,
#data,
#how-fast,
#included,
#not-included,
#start {
    scroll-margin-top: 100px;
}

@media (max-width: 767px) {
    /* Used in: same anchor targets, mobile header is shorter */
    #process,
    #decisions,
    #dose-rules,
    #data,
    #how-fast,
    #included,
    #not-included,
    #start {
        scroll-margin-top: 80px;
    }
}

/* Used in: new_makingdecisions (single booking action after the dose rules) */
.decision-action {
    max-width: 800px;
    margin: 36px auto 0;
    text-align: center;
}

/* ========================================
   Approach opener: "Enough, Measured"
   Dark Earth Brown band + sand Step-one strip.
   Contrast on Earth Brown (#6B5347, L 0.098): Sand text 6.3:1; Peach (#E8B087) only at 28px+ bold (3.7:1 on the band, higher on the darkened tiles).
   ======================================== */

/* Used in: new_approach-opener */
.approach-opener {
    background: #F5F1E8;
}

/* Used in: new_approach-opener */
.opener-band {
    background: #6B5347;
    color: #F5F1E8;
    padding: 72px 5% 72px;
}

/* Used in: new_approach-opener */
.opener-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 7/5 columns: text and tiles left, chart right */
/* Used in: new_approach-opener */
.opener-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-areas:
        "text chart"
        "tiles chart";
    column-gap: 64px;
    row-gap: 32px;
    align-items: center;
}

/* Used in: new_approach-opener */
.opener-text {
    grid-area: text;
    align-self: end;
}

/* Used in: new_approach-opener */
.opener-eyebrow {
    margin: 0 0 18px;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F5F1E8;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Used in: new_approach-opener */
.opener-eyebrow::before {
    content: "";
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: #E8B087;
}

/* Used in: new_approach-opener */
.opener-title {
    margin: 0 0 20px;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    color: #F5F1E8;
}

/* Used in: new_approach-opener */
.opener-subhead {
    margin: 0;
    max-width: 620px;
    font-size: 19px;
    line-height: 1.55;
    color: #F5F1E8;
}

/* Used in: new_approach-opener */
.opener-tiles {
    grid-area: tiles;
    align-self: start;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Used in: new_approach-opener */
.opener-tile {
    display: block;
    height: 100%;
    padding: 18px 18px 20px;
    border-radius: 12px;
    background: rgba(43, 37, 32, 0.28);
    border: 1px solid rgba(232, 176, 135, 0.35);
    color: #F5F1E8;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Used in: new_approach-opener */
.opener-tile:hover,
.opener-tile:focus-visible {
    background: rgba(43, 37, 32, 0.45);
    border-color: #E8B087;
    color: #F5F1E8;
}

/* Used in: new_approach-opener */
.opener-tile:focus-visible {
    outline: 3px solid #E8B087;
    outline-offset: 3px;
}

/* Used in: new_approach-opener */
.opener-btn:focus-visible,
.opener-scope:focus-visible {
    outline: 3px solid #6B5347;
    outline-offset: 3px;
}

/* Used in: new_approach-opener */
.opener-tile-token {
    display: block;
    margin-bottom: 6px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: #E8B087;
}

/* Used in: new_approach-opener */
.opener-tile-label {
    display: block;
    font-size: 15px;
    line-height: 1.4;
}

/* Used in: new_approach-opener */
.opener-chart-fig {
    grid-area: chart;
    margin: 0;
}

/* Used in: new_approach-opener */
.opener-chart-card {
    background: #F5F1E8;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    padding: 20px 20px 16px;
    box-sizing: border-box;
}

/* Used in: new_approach-opener */
.opener-chart {
    width: 100%;
    height: auto;
    display: block;
}

/* Compact re-proportioned drawing for phones (same data and labels as Home's chart) */
/* Used in: new_approach-opener */
.opener-chart--mobile {
    display: none;
}

/* Used in: new_approach-opener */
.opener-chart-legend {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 12px 0 0;
    padding: 0;
    font-size: 13px;
    color: #6B5347;
}

/* Used in: new_approach-opener */
.opener-chart-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Used in: new_approach-opener */
.opener-swatch {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}

/* Used in: new_approach-opener */
.opener-swatch--score {
    background: #D4795B;
}

/* Used in: new_approach-opener */
.opener-swatch--dose {
    background: #9CAF88;
}

/* Numbered explanations for the phone chart (desktop labels sit on the chart itself) */
/* Used in: new_approach-opener */
.opener-chart-notes {
    display: none;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.25;
    color: #6B5347;
}

/* Used in: new_approach-opener */
.opener-chart-notes b {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: #6B5347;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

/* Used in: new_approach-opener */
.opener-chart-caption {
    margin: 12px 0 0;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    color: #F5F1E8;
}

/* First-visit strip: wide card + segmented quick-link bar */
/* Used in: new_approach-opener */
.opener-visit {
    padding: 48px 5% 44px;
    border-bottom: 1px solid rgba(107, 83, 71, 0.15);
}

/* Used in: new_approach-opener */
.opener-visit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 40px;
    padding: 36px 44px;
    background: #FFFFFF;
    border-left: 5px solid #D4795B;
    box-shadow: 0 4px 16px rgba(107, 83, 71, 0.1);
}

/* Used in: new_approach-opener */
.opener-visit-label {
    margin: 0 0 10px;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #AC5333;
}

/* Used in: new_approach-opener */
.opener-visit-body {
    margin: 0;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.65;
    color: #6B5347;
}

/* Used in: new_approach-opener */
.opener-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 270px;
    padding-left: 36px;
    border-left: 1px solid rgba(107, 83, 71, 0.2);
}

/* Used in: new_approach-opener */
.opener-btn {
    display: block;
    box-sizing: border-box;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 2px solid #B85C3F;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Used in: new_approach-opener */
.opener-btn--primary {
    background: #B85C3F;
    color: #FFFFFF;
}

/* Used in: new_approach-opener */
.opener-btn--primary:hover {
    background: #A8502F;
    border-color: #A8502F;
    color: #FFFFFF;
}

/* Used in: new_approach-opener */
.opener-btn--ghost {
    background: transparent;
    border-color: #6B5347;
    color: #6B5347;
}

/* Used in: new_approach-opener */
.opener-btn--ghost:hover {
    background: #6B5347;
    color: #F5F1E8;
}

/* Used in: new_approach-opener */
.opener-nav {
    margin-top: 28px;
}

/* Used in: new_approach-opener */
.opener-nav-title {
    margin: 0 0 10px;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #AC5333;
}

/* Used in: new_approach-opener */
.opener-nav-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(107, 83, 71, 0.35);
    background: rgba(255, 255, 255, 0.55);
}

/* Used in: new_approach-opener */
.opener-nav-list li + li {
    border-left: 1px solid rgba(107, 83, 71, 0.25);
}

/* Used in: new_approach-opener */
.opener-nav-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 56px;
    padding: 10px 14px;
    color: #6B5347;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Used in: new_approach-opener */
.opener-nav-list a:hover {
    background: #6B5347;
    color: #F5F1E8;
}

/* Used in: new_approach-opener */
.opener-nav-list a:focus-visible {
    outline: 3px solid #6B5347;
    outline-offset: -3px;
}

/* Used in: new_approach-opener */
.opener-scope {
    display: block;
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.5;
    text-align: right;
    color: #6B5347;
    text-decoration: none;
}

/* Used in: new_approach-opener */
.opener-scope:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1100px) {
    /* Used in: new_approach-opener */
    .opener-title {
        font-size: 44px;
    }

    /* Used in: new_approach-opener */
    .opener-grid {
        column-gap: 40px;
    }

    /* Used in: new_approach-opener */
    .opener-tiles {
        gap: 10px;
    }

    /* Used in: new_approach-opener */
    .opener-tile {
        padding: 14px;
    }

    /* Used in: new_approach-opener */
    .opener-tile-token {
        font-size: 28px;
    }

    /* Used in: new_approach-opener */
    .opener-tile-label {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    /* Used in: new_approach-opener */
    .opener-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "chart"
            "tiles";
        row-gap: 24px;
    }

    /* Used in: new_approach-opener */
    .opener-text {
        align-self: start;
    }

    /* Used in: new_approach-opener */
    .opener-chart-fig {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
    }

    /* Used in: new_approach-opener */
    .opener-visit-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Used in: new_approach-opener */
    .opener-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(107, 83, 71, 0.2);
    }

    /* Used in: new_approach-opener */
    .opener-btn {
        flex: 1;
    }

    /* Used in: new_approach-opener */
    .opener-nav-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* Used in: new_approach-opener (3 cells on the first row, 2 wider cells below) */
    .opener-nav-list li:nth-child(-n+3) {
        grid-column: span 2;
    }

    /* Used in: new_approach-opener */
    .opener-nav-list li:nth-child(n+4) {
        grid-column: span 3;
        border-top: 1px solid rgba(107, 83, 71, 0.25);
    }

    /* Used in: new_approach-opener */
    .opener-nav-list li:nth-child(4) {
        border-left: 0;
    }
}

@media (max-width: 767px) {
    /* Used in: new_approach-opener */
    .opener-band {
        padding: 22px 16px 26px;
    }

    /* Used in: new_approach-opener */
    .opener-eyebrow {
        margin-bottom: 8px;
        font-size: 12px;
    }

    /* Used in: new_approach-opener */
    .opener-title {
        margin-bottom: 12px;
        font-size: 28px;
        line-height: 1.12;
    }

    /* Used in: new_approach-opener */
    .opener-subhead {
        font-size: 15px;
        line-height: 1.45;
    }

    /* Used in: new_approach-opener */
    .opener-grid {
        row-gap: 14px;
    }

    /* Used in: new_approach-opener */
    .opener-chart-card {
        padding: 10px 10px 10px;
    }

    /* Used in: new_approach-opener */
    .opener-chart--desktop {
        display: none;
    }

    /* Used in: new_approach-opener */
    .opener-chart--mobile {
        display: block;
    }

    /* Used in: new_approach-opener */
    .opener-chart-legend {
        display: none;
    }

    /* Used in: new_approach-opener */
    .opener-chart-notes {
        display: flex;
    }

    /* Used in: new_approach-opener */
    .opener-chart-caption {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.3;
    }

    /* Used in: new_approach-opener */
    .opener-tiles {
        gap: 8px;
    }

    /* Used in: new_approach-opener */
    .opener-tile {
        padding: 9px 9px 10px;
    }

    /* Used in: new_approach-opener */
    .opener-tile-token {
        font-size: 23px;
        margin-bottom: 4px;
    }

    /* Used in: new_approach-opener */
    .opener-tile-label {
        font-size: 13px;
        line-height: 1.3;
    }

    /* Used in: new_approach-opener */
    .opener-visit {
        padding: 32px 16px 36px;
    }

    /* Used in: new_approach-opener (copy wrapper dissolves so label, body and actions stack in grid areas) */
    .opener-visit-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "body"
            "actions";
        align-items: center;
        gap: 12px;
        padding: 24px 20px;
    }

    /* Used in: new_approach-opener */
    .opener-visit-copy {
        display: contents;
    }

    /* Used in: new_approach-opener */
    .opener-visit-label {
        grid-area: label;
        margin: 0;
    }

    /* Used in: new_approach-opener */
    .opener-visit-body {
        grid-area: body;
        font-size: 16px;
    }

    /* Used in: new_approach-opener */
    .opener-actions {
        grid-area: actions;
        flex-direction: column;
        min-width: 0;
        padding-top: 20px;
    }

    /* Used in: new_approach-opener */
    .opener-btn {
        flex: none;
        width: 100%;
    }

    /* Used in: new_approach-opener */
    .opener-nav-list {
        grid-template-columns: 1fr;
    }

    /* Used in: new_approach-opener */
    .opener-nav-list li:nth-child(n) {
        grid-column: auto;
        border-left: 0;
    }

    /* Used in: new_approach-opener */
    .opener-nav-list li + li {
        border-top: 1px solid rgba(107, 83, 71, 0.25);
    }

    /* Used in: new_approach-opener */
    .opener-nav-list a {
        justify-content: space-between;
        min-height: 48px;
        padding: 10px 16px;
        text-align: left;
    }

    /* Used in: new_approach-opener */
    .opener-nav-list a::after {
        content: "\2192";
        color: #AC5333;
    }

    /* Used in: new_approach-opener */
    .opener-scope {
        text-align: left;
    }
}

/* Pill link under Home's Enough Principle paragraph: left-aligned in the text column */
/* Used in: new_home-Differentiators.html */
.diff-content .cross-ref-cta--solo {
    margin: 8px 0 0;
    align-self: flex-start;
    text-align: left;
}


/* ========================================
   Services & Fees layout fixes (persona findings, 2026-10-08)
   Section: new_services_fees.html
   ======================================== */

/* Primary CTA gets the secondary's 2px border (transparent) so both card buttons are the same height at every width */
/* Used in: new_services_fees.html */
.btn-cta-primary {
    border: 2px solid transparent;
}

@media (min-width: 993px) {
    /* F-01: primary CTA label fits on one line */
    /* Used in: new_services_fees.html */
    .final-cta-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 880px;
    }

    /* Used in: new_services_fees.html */
    .final-cta-card .btn-cta {
        padding-left: 20px;
        padding-right: 20px;
        gap: 8px;
    }
}

@media (min-width: 993px) and (max-width: 1199px) {
    /* Used in: new_services_fees.html */
    .final-cta-card {
        padding-left: 24px;
        padding-right: 24px;
    }
}


/* ========================================
   Services & Fees: "Built Around One Job" Scope Plate
   Section: new_services_fees.html (Section 3)
   ======================================== */

/* Used in: new_services_fees.html */
.included-excluded-section {
    background: #F5F1E8; /* Sand: separates the white pricing and payment sections */
    padding: 90px 5%;
}

/* Used in: new_services_fees.html */
.plate-wrap {
    max-width: 1120px;
    margin: 0 auto;
}

/* Used in: new_services_fees.html */
.plate-header {
    text-align: center;
    margin-bottom: 48px;
}

/* Used in: new_services_fees.html */
.plate-header h2 {
    font-family: 'Marcellus', serif;
    font-size: 42px;
    font-weight: 400;
    color: #6B5347;
    margin: 0 0 12px;
}

/* Used in: new_services_fees.html */
.plate-header .whats-included-underline {
    margin-bottom: 20px;
}

/* Used in: new_services_fees.html */
.plate-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: #ffffff;
    border-top: 4px solid #9CAF88;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(107, 83, 71, 0.10);
    overflow: hidden;
}

/* Used in: new_services_fees.html */
.plate-in {
    display: flex;
    flex-direction: column;
    padding: 44px 44px 40px;
}

/* Used in: new_services_fees.html */
.plate-out {
    display: flex;
    flex-direction: column;
    padding: 44px 40px 40px;
    background: rgba(107, 83, 71, 0.06);
    border-left: 1px solid rgba(107, 83, 71, 0.15);
}

/* Used in: new_services_fees.html */
.plate-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Used in: new_services_fees.html */
.plate-h3 {
    font-family: 'Marcellus', serif;
    font-size: 26px;
    font-weight: 400;
    color: #6B5347;
    margin: 0 0 22px;
}

/* Used in: new_services_fees.html */
.plate-in .plate-h3 {
    color: #5C7150; /* Sage Text */
}

/* Used in: new_services_fees.html */
.plate-summary {
    list-style: none;
    cursor: pointer;
}

/* Used in: new_services_fees.html */
.plate-summary::-webkit-details-marker {
    display: none;
}

/* Used in: new_services_fees.html */
.plate-summary .plate-h3 {
    margin-bottom: 10px;
}

/* Used in: new_services_fees.html */
.plate-summary:focus-visible {
    outline: 2px solid #6B5347;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Used in: new_services_fees.html */
.plate-lede {
    font-size: 15px;
    line-height: 1.6;
    color: #6B5347;
    margin: 0 0 20px;
}

/* Used in: new_services_fees.html */
.plate-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Used in: new_services_fees.html */
.plate-in .plate-list {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Used in: new_services_fees.html */
.plate-list li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
    border-top: 1px solid rgba(107, 83, 71, 0.15);
}

/* Used in: new_services_fees.html */
.plate-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Used in: new_services_fees.html */
.plate-list strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #6B5347;
    margin-bottom: 3px;
}

/* Used in: new_services_fees.html */
.plate-list p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #6B5347;
}

/* Used in: new_services_fees.html */
.plate-num {
    font-family: 'Marcellus', serif;
    font-size: 28px;
    line-height: 1;
    color: #AC5333; /* Clay Text */
    min-width: 40px;
}

/* Used in: new_services_fees.html */
.plate-list--out li {
    align-items: center;
}

/* Used in: new_services_fees.html */
.plate-list--out svg {
    flex: none;
    color: #6B5347;
    opacity: 0.8;
}

/* Used in: new_services_fees.html */
.plate-list--out strong {
    font-size: 15.5px;
}

/* Used in: new_services_fees.html */
.plate-link {
    color: #AC5333; /* Clay Text: 5.0:1+ on the panel tint */
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Used in: new_services_fees.html */
.plate-link:hover {
    color: #8F4429;
}

/* Used in: new_services_fees.html */
.plate-link:focus-visible {
    outline: 2px solid #6B5347;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Used in: new_services_fees.html */
.plate-crisis {
    margin: 24px 0 0;
    padding: 16px 22px;
    background: #ffffff;
    border-left: 4px solid #D4795B;
    border-radius: 0 6px 6px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #6B5347;
    box-shadow: 0 2px 10px rgba(107, 83, 71, 0.06);
}

@media (min-width: 768px) {
    /* Used in: new_services_fees.html */
    .plate-summary {
        pointer-events: none;
        cursor: default;
    }
}

/* 993px+: 4 left rows stretch to the plate; the 3 right rows get roomier padding to match (no flex: <details> content is not a flex container in Firefox) */
@media (min-width: 993px) {
    /* Used in: new_services_fees.html */
    .plate-in .plate-list li {
        flex: 1 1 auto;
    }

    /* Used in: new_services_fees.html */
    .plate-lede {
        margin-bottom: 26px;
    }

    /* Used in: new_services_fees.html */
    .plate-list--out li {
        padding: 29px 0;
    }

    /* Used in: new_services_fees.html */
    .plate-list--out li:first-child {
        padding-top: 29px;
        border-top: 1px solid rgba(107, 83, 71, 0.15);
    }
}

@media (max-width: 991px) {
    /* Used in: new_services_fees.html */
    .plate-card {
        grid-template-columns: 1fr;
    }

    /* Used in: new_services_fees.html */
    .plate-out {
        border-left: 0;
        border-top: 1px solid rgba(107, 83, 71, 0.15);
    }
}

@media (max-width: 767px) {
    /* Used in: new_services_fees.html */
    .included-excluded-section {
        padding: 44px 16px 40px;
    }

    /* Used in: new_services_fees.html */
    .plate-header {
        margin-bottom: 22px;
    }

    /* Used in: new_services_fees.html */
    .plate-header h2 {
        font-size: 28px;
        margin-bottom: 8px;
    }

    /* Used in: new_services_fees.html */
    .plate-header .whats-included-underline {
        width: 80px;
        margin-bottom: 12px;
    }

    /* Used in: new_services_fees.html */
    .plate-header .whats-included-intro {
        font-size: 15px;
    }

    /* Used in: new_services_fees.html */
    .plate-in {
        padding: 22px 18px 8px;
    }

    /* Used in: new_services_fees.html */
    .plate-out {
        padding: 0 18px;
    }

    /* Used in: new_services_fees.html */
    .plate-h3 {
        font-size: 21px;
        margin-bottom: 12px;
    }

    /* Used in: new_services_fees.html */
    .plate-list li {
        padding: 11px 0;
        gap: 12px;
    }

    /* Used in: new_services_fees.html */
    .plate-num {
        font-size: 20px;
        min-width: 28px;
    }

    /* Used in: new_services_fees.html */
    .plate-list strong {
        font-size: 15px;
        margin-bottom: 1px;
    }

    /* Used in: new_services_fees.html */
    .plate-list p {
        font-size: 13.5px;
        line-height: 1.45;
    }

    /* Used in: new_services_fees.html */
    .plate-summary {
        padding: 16px 0;
    }

    /* Used in: new_services_fees.html */
    .plate-summary .plate-h3 {
        margin: 0;
    }

    /* Used in: new_services_fees.html */
    .plate-summary .plate-h3::after {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: 12px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-4px) rotate(45deg);
        transition: transform 0.2s ease;
    }

    /* Used in: new_services_fees.html */
    .plate-details[open] .plate-summary .plate-h3::after {
        transform: translateY(0) rotate(-135deg);
    }

    /* Used in: new_services_fees.html */
    .plate-details[open] .plate-lede {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* Used in: new_services_fees.html */
    .plate-details[open] .plate-list {
        padding-bottom: 12px;
    }

    /* Used in: new_services_fees.html */
    .plate-crisis {
        margin-top: 14px;
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* Used in: new_services_fees.html */
.plate-link:hover,
.plate-link:focus {
    text-decoration: underline;
}

/* Used in: new_404.html */
.notfound-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 20px;
    margin-top: 36px;
    text-align: center;
}

/* Used in: new_404.html */
.notfound-home-link {
    flex-basis: 100%;
    margin-top: 8px;
    font-weight: 600;
    color: var(--clay-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Used in: new_404.html */
.notfound-home-link:hover,
.notfound-home-link:focus-visible {
    color: #6B5347; /* Earth Brown */
}

/* Used in: new_404.html */
@media (max-width: 767px) {
    .notfound-links .cta-button {
        width: 100%;
        min-width: 0;
    }
}