/* ========================================
   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;
}

/* About hero (Superstition Mountains, backgrounds/v1.1.0): the art is bright peach and cream on the left,
   so a flat 65% #262626 wash keeps the white headline above WCAG AA. Navbar gradient kept on top. */
/* Used in: about.html via header.html (HeaderVariant) */
.page-header.page-header-enhanced.page-header-about::before {
    background:
        linear-gradient(180deg, rgba(38, 38, 38, 0.9) 0%, rgba(38, 38, 38, 0.5) 20%, transparent 45%),
        rgba(38, 38, 38, 0.65) !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;
    }

    html {
        background: #FFFFFF;
    }

    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.5), rgba(245, 241, 232, 0.5)),
        url("/staticfiles/images/Backgrounds/hero-approach-2400x1341.5de9ba3f2c7d.webp");
    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.5), rgba(255, 255, 255, 0.5)),
        url("/staticfiles/images/Backgrounds/hero-approach-2400x1341.5de9ba3f2c7d.webp");
    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;
    }
}

/* 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.5) 0%,
        rgba(245, 241, 232, 0.5) 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%);
}

/* F-05: on phones the unpicked card reads "not selected", not "switched off" */
/* Used in: appointment */
@media (max-width: 991px) {
    .option-reference-item.dimmed {
        opacity: 1;
        filter: none;
        background: #FFFFFF;
        border-color: #E5DDD6;
        box-shadow: none;
        transform: none;
    }
}

.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;
    }
}

/* F-05: the visit she picked in the action bar, confirmed on the first screen (phones and tablets only) */
/* Used in: appointment */
.schedule-chosen {
    display: none;
}

/* Used in: appointment */
@media (max-width: 991px) {
    .schedule-chosen:not([hidden]) {
        display: block;
        max-width: 560px;
        margin: 0 auto 24px;
        padding: 12px 14px;
        background: rgba(156, 175, 136, 0.14);
        border: 1px solid #9CAF88;
        border-radius: 10px;
        text-align: left;
    }

    .schedule-chosen-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4px 12px;
    }

    .schedule-chosen-line[hidden] {
        display: none;
    }

    .schedule-chosen-text {
        margin: 0;
        font-size: 15px;
        line-height: 1.4;
        color: #2D2520;
    }

    .schedule-chosen-change {
        min-height: 44px;
        padding: 0;
        background: none;
        border: 0;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        color: #4A5E3F;
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }

    .schedule-chosen-change:focus-visible {
        outline: 2px solid #4A5E3F;
        outline-offset: 2px;
        border-radius: 4px;
    }
}

/* 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: #2F2A27;
        border-top: 1px solid rgba(245, 241, 232, 0.14);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
        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;
        box-shadow: inset 0 0 0 1.5px #F5F1E8;
    }

    .schedule-quickbar-button:focus-visible {
        outline: 2px solid #F5F1E8;
        outline-offset: 2px;
    }

    /* Keep the footer clear of the bar: brown space inside the footer, not a body strip */
    /* Used in: appointment */
    body:has(.schedule-quickbar) .solana-footer {
        padding-bottom: 76px;
    }
}

/*==========================================================*/
/* 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 P2: mobile-only bottom booking bar. A dark bar (#2F2A27, the edge color, so Safari's bottom tint matches) with the free consultation as the outline secondary and the evaluation as the solid primary. Hidden while the page's own booking buttons or the footer 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 max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        background: #2F2A27;
        border-top: 1px solid rgba(245, 241, 232, 0.14);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
        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;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        column-gap: 0.3em;
        min-height: 48px;
        padding: 8px 6px;
        border-radius: 10px;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
    }

    /* Used in: new_mobile-ActionBar.html */
    .action-bar a:focus-visible {
        outline: 2px solid #F5F1E8;
        outline-offset: 2px;
    }

    /* F-07: `a.` raises specificity above `.action-bar a { flex: 1 1 0 }` so the primary really is 1.3 : 1. nowrap keeps "$250" on the "Initial evaluation" line. */
    /* Used in: new_mobile-ActionBar.html */
    .action-bar a.action-bar-btn--primary {
        flex: 1.3 1 0;
        flex-wrap: nowrap;
        white-space: nowrap;
        background: #A8502F;
    }

    /* F-07: at 320-359px the primary's label plus price needs a little less type and padding to fit on one line */
    @media (max-width: 359px) {
        /* Used in: new_mobile-ActionBar.html */
        .action-bar {
            gap: 6px;
        }

        /* Used in: new_mobile-ActionBar.html */
        .action-bar a {
            font-size: 13px;
            padding: 8px 4px;
        }
    }

    /* Used in: new_mobile-ActionBar.html */
    .action-bar-btn--secondary {
        background: transparent;
        border: 1.5px solid #F5F1E8;
        color: #F5F1E8;
    }

    /* Keep the footer clear of the bar: brown space inside the footer, not a body strip (the footer's own bottom padding adds the safe area) */
    /* Used in: new_mobile-ActionBar.html */
    body:has(.action-bar) .solana-footer {
        padding-bottom: 76px;
    }
}

/* 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;
    }
}

/* ========================================
   PAGE VISUALS PHASE P2 (APPROACH)
   Photo bands, stage trail, decision fork, onset ladder, What's Included icons
   ======================================== */

/* Full-bleed photo band between sections. Params come from _photo_break.html (--photo-pos). Never inside a section. */
/* Used in: _photo_break.html (approach.html) */
.photo-break {
    display: block;
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    background: #EBE7DC;
}

/* Used in: _photo_break.html (approach.html) */
.photo-break picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Used in: _photo_break.html (approach.html) */
.photo-break__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--photo-pos, 50% 50%);
}

@media (min-width: 768px) {
    /* Used in: _photo_break.html (approach.html) */
    .photo-break { height: 280px; }
}

@media (min-width: 1024px) {
    /* Used in: _photo_break.html (approach.html) */
    .photo-break { height: 320px; }
}

/* Stage trail: four-node SVG strip above the stage cards, 768px and up. Phone shows a CSS rail instead. */
/* Used in: new_clinicalprocess.html */
.stage-trail {
    display: none;
}

@media (min-width: 768px) {
    /* Used in: new_clinicalprocess.html */
    .stage-trail {
        display: block;
        max-width: 900px;
        margin: 0 auto 56px;
    }

    /* Used in: new_clinicalprocess.html */
    .stage-trail svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }
}

/* Used in: new_clinicalprocess.html */
.stage-trail__line {
    stroke: #B85C3F; /* Desert Clay, text-safe */
    stroke-width: 4;
    stroke-linecap: round;
}

/* Dotted connector = weekly check-ins */
/* Used in: new_clinicalprocess.html */
.stage-trail__dots {
    stroke: #B85C3F;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 0 14;
}

/* Used in: new_clinicalprocess.html */
.stage-trail__bracket {
    fill: none;
    stroke: #6B5347; /* Earth Brown */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Used in: new_clinicalprocess.html */
.stage-trail__node circle {
    fill: #FFFFFF;
    stroke: #B85C3F;
    stroke-width: 4;
}

/* Used in: new_clinicalprocess.html */
.stage-trail__node text {
    fill: #B85C3F;
    font-size: 20px;
    font-weight: 700;
}

/* Used in: new_clinicalprocess.html */
.stage-trail__label text {
    fill: #6B5347;
    font-size: 18px;
    font-weight: 700;
}

/* Used in: new_clinicalprocess.html */
.stage-trail__text {
    fill: #6B5347;
    font-size: 18px;
    font-weight: 700;
}

/* Used in: new_clinicalprocess.html */
.stage-trail__text--small {
    fill: #AC5333; /* clay-text */
    font-size: 16px;
    font-weight: 400;
}

/* Phone: continuous clay rail down the badge column. It shows only in the gaps between cards and joins the cards' 5px clay left border. */
@media (max-width: 767px) {
    /* Used in: new_clinicalprocess.html */
    .stages-container {
        position: relative;
    }

    /* Used in: new_clinicalprocess.html */
    .stages-container::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: #D4795B; /* Desert Clay, same as .stage-card border */
    }
}

/* Onset ladder: ordinal bars (not to scale) above the medication cards */
/* Used in: new_timeline-expectations.html */
.onset-ladder {
    margin: 0 0 32px;
    padding: 20px 24px 8px;
    background: rgba(245, 241, 232, 0.7); /* Sand at 70%, as .medication-card */
    border-radius: 8px;
}

/* Used in: new_timeline-expectations.html */
.onset-ladder__title {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--clay-text);
}

/* Used in: new_timeline-expectations.html */
.onset-ladder__row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 4px;
    margin-bottom: 14px;
}

/* Used in: new_timeline-expectations.html */
.onset-ladder__name {
    font-size: 15px;
    font-weight: 700;
    color: #6B5347;
}

/* Used in: new_timeline-expectations.html */
.onset-ladder__value {
    font-size: 15px;
    color: #6B5347;
}

/* Used in: new_timeline-expectations.html */
.onset-ladder__bar {
    grid-column: 1 / -1;
    display: block;
    height: 12px;
    border-radius: 6px;
    background: #B85C3F; /* clay-deep: one colour, the length carries the meaning */
}

/* Bar lengths are ordinal: the two "4-6 weeks" medications are equal */
/* Used in: new_timeline-expectations.html */
.onset-ladder__bar--beta    { width: 12%; }

/* Used in: new_timeline-expectations.html */
.onset-ladder__bar--stim    { width: 32%; }

/* Used in: new_timeline-expectations.html */
.onset-ladder__bar--nonstim { width: 100%; }

/* Used in: new_timeline-expectations.html */
.onset-ladder__bar--ssri    { width: 100%; }

/* What's Included icons: the SVG replaces the check glyph inside .included-checkmark (colour comes from the existing clay-text rule) */
/* Used in: new_whats-included.html */
.included-icon {
    display: block;
    width: 56%;
    height: 56%;
}

/* ========================================
   PAGE VISUALS PHASE P3 (ABOUT)
   Practice photo split (S-17)
   ======================================== */

/* Wider container for a section that carries a split; the prose container stays 760px elsewhere */
/* Used in: new_about-Practice.html */
.about-prose-container--wide {
    max-width: 1100px;
}

/* Text beside a photo. Phone: photo first, 4:3 crop. 768px and up: text left, photo right (about 40%). */
/* Used in: new_about-Practice.html */
.split-photo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

/* Used in: new_about-Practice.html */
.split-photo__media {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(107, 83, 71, 0.15);
    background: #EBE7DC;
}

/* Used in: new_about-Practice.html */
.split-photo__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Used in: new_about-Practice.html */
.split-photo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
}

@media (min-width: 768px) {
    /* Used in: new_about-Practice.html */
    .split-photo {
        grid-template-columns: minmax(0, 1fr) 40%;
        gap: 56px;
    }

    /* Used in: new_about-Practice.html */
    .split-photo__media {
        grid-column: 2;
        grid-row: 1;
        aspect-ratio: 4 / 5;
    }

    /* Used in: new_about-Practice.html */
    .split-photo__text {
        grid-column: 1;
        grid-row: 1;
    }

    /* Used in: new_about-Practice.html */
    .split-photo__img {
        object-position: 50% 30%;
    }
}