/*
Theme Name: Orchestrate Publishing
Theme URI: https://orchestratepublishing.com
Author: Orchestrate Publishing
Author URI: https://orchestratepublishing.com
Description: Custom theme for Orchestrate Publishing, a nonfiction ghostwriting service for business owners and indie publishers. Deep navy and warm gold aesthetic with premium typography.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orchestrate
*/

/* ========================================
   CSS RESET & BASE
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #2D2D2D;
    background-color: #FFFFFF;
}

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

a {
    color: #C4943D;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #B87333;
}

ul, ol {
    list-style: none;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.25rem;
    color: #0A1628;
}

h2 {
    font-size: 1.75rem;
    color: #0A1628;
}

h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: #162D50;
}

h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #162D50;
}

p {
    margin-bottom: 1rem;
    max-width: 75ch;
}

strong {
    font-weight: 600;
}

blockquote {
    border-left: 3px solid #C4943D;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #5A6B7A;
}

/* ========================================
   LAYOUT
   ======================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.section {
    padding: 5rem 0;
}

.section--navy {
    background-color: #0A1628;
    color: #F5F5F0;
}

.section--navy h2,
.section--navy h3,
.section--navy h4 {
    color: #FFFFFF;
}

.section--navy p {
    color: #F5F5F0;
}

.section--cream {
    background-color: #FAF8F5;
}

.section--light {
    background-color: #F5F5F0;
}

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

.section-header p {
    margin: 0.75rem auto 0;
    color: #5A6B7A;
    font-size: 1.125rem;
    max-width: 640px;
}

.gold-rule {
    width: 60px;
    height: 1px;
    background-color: #C4943D;
    border: none;
    margin: 1.5rem auto;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    display: inline-block;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.875rem 2rem;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    letter-spacing: 0.025em;
}

.btn--primary {
    background-color: #C4943D;
    color: #FFFFFF;
}

.btn--primary:hover {
    background-color: #B87333;
    color: #FFFFFF;
}

.btn--outline {
    background-color: transparent;
    color: #C4943D;
    border: 1.5px solid #C4943D;
}

.btn--outline:hover {
    background-color: #C4943D;
    color: #FFFFFF;
}

.btn--white {
    background-color: #FFFFFF;
    color: #0A1628;
}

.btn--white:hover {
    background-color: #F5F5F0;
    color: #0A1628;
}

.btn--navy {
    background-color: #0A1628;
    color: #FFFFFF;
}

.btn--navy:hover {
    background-color: #162D50;
    color: #FFFFFF;
}

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

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

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #FFFFFF;
    border-bottom: 1px solid #F5F5F0;
    transition: box-shadow 0.3s ease;
}

.site-header--scrolled {
    box-shadow: 0 2px 20px rgba(10, 22, 40, 0.08);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.site-logo {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #0A1628;
    letter-spacing: -0.01em;
}

.site-logo span {
    color: #C4943D;
}

.site-logo:hover {
    color: #0A1628;
}

.site-logo--image {
    display: flex;
    align-items: center;
}

.site-logo--image .custom-logo-link {
    display: inline-block;
    line-height: 0;
}

.site-logo--image img.custom-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 240px;
}

@media (max-width: 768px) {
    .site-logo--image img.custom-logo {
        height: 36px;
        max-width: 180px;
    }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-menu a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #2D2D2D;
    position: relative;
    padding: 0.25rem 0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background-color: #C4943D;
    transition: width 0.2s ease;
}

.nav-menu a:hover {
    color: #0A1628;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu .current-menu-item a,
.nav-menu .current_page_item a {
    color: #0A1628;
}

.nav-menu .current-menu-item a::after,
.nav-menu .current_page_item a::after {
    width: 100%;
}

.nav-cta {
    margin-left: 0.5rem;
}

/* Nav CTA button. The body prefix bumps selector specificity above the
   default Customizer Additional CSS override specificity, so this rule wins
   the cascade regardless of what's left in Customizer. Combined with
   !important on padding, this fixes the cramped-button bug for good.
   Fixed 2026-04-26 — prior threads kept editing the wrong layer. */
body .nav-cta .btn {
    padding: 0.9375rem 2.5rem !important;
    font-size: 1rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1.2;
}

body .nav-cta .btn::after {
    display: none;
}

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

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #0A1628;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
    padding: 10rem 0 6rem;
    background: linear-gradient(135deg, #0A1628 0%, #162D50 100%);
    color: #FFFFFF;
}

.hero__content {
    max-width: 720px;
}

.hero__label {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C4943D;
    margin-bottom: 1.25rem;
}

.hero h1 {
    font-size: 2.75rem;
    color: #FFFFFF;
    margin-bottom: 1.25rem;
    line-height: 1.15;
}

/* SEO headline — semantically primary (h1) but visually subordinated to the tagline */
.hero__seo-headline {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C4943D;
    margin: 0 0 1.25rem 0;
    line-height: 1.4;
}

/* Tagline — visually dominant brand statement */
.hero__tagline {
    font-family: 'Playfair Display', serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.15;
    margin: 0 0 1.25rem 0;
}

.hero--page .hero__tagline {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.hero__text {
    font-size: 1.125rem;
    color: #F5F5F0;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 600px;
    opacity: 0.9;
}

.hero__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Page-level hero (shorter, for inner pages) */
.hero--page {
    padding: 8rem 0 4rem;
}

.hero--page h1 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.hero--page .hero__text {
    font-size: 1rem;
}

/* ========================================
   SERVICE PATHS (Homepage)
   ======================================== */

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

.service-card {
    padding: 3rem 2.75rem;
    background-color: #FFFFFF;
    border: 1px solid #E8D5A6;
    border-top: 4px solid #C4943D;
    border-radius: 4px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    box-shadow: 0 8px 32px rgba(10, 22, 40, 0.12);
    transform: translateY(-2px);
}

.service-card h3 {
    font-size: 1.625rem;
    line-height: 1.25;
}

.service-card__label {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C4943D;
    margin-bottom: 1.25rem;
}

.service-card p {
    color: #5A6B7A;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
    flex-grow: 1;
}

.service-card__price {
    font-size: 1.1875rem;
    font-weight: 700;
    color: #0A1628;
    margin-bottom: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid #F5F0E6;
}

.service-card .btn {
    align-self: flex-start;
    padding: 1rem 2.25rem;
    font-size: 1rem;
}

/* ========================================
   HOW IT WORKS (Homepage)
   ======================================== */

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

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

.step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0A1628;
    color: #C4943D;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.step h3 {
    color: #0A1628;
    margin-bottom: 0.75rem;
}

.step p {
    color: #5A6B7A;
    margin: 0 auto;
}

/* ========================================
   SOCIAL PROOF
   ======================================== */

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

.testimonial {
    padding: 2rem;
    background-color: #FAF8F5;
    border-left: 3px solid #C4943D;
    border-radius: 0 2px 2px 0;
}

.testimonial__quote {
    font-size: 1.0625rem;
    font-style: italic;
    color: #2D2D2D;
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.testimonial__author {
    font-weight: 600;
    color: #0A1628;
    font-size: 0.9375rem;
}

.testimonial__title {
    color: #5A6B7A;
    font-size: 0.875rem;
}

/* ========================================
   WHO WE SERVE
   ======================================== */

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

.audience-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}

.audience-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #C4943D;
    margin-top: 2px;
}

.audience-item p {
    margin-bottom: 0;
    color: #5A6B7A;
}

/* ========================================
   CTA SECTIONS
   ======================================== */

.cta-section {
    text-align: center;
    padding: 5rem 0;
    background: linear-gradient(135deg, #0A1628 0%, #162D50 100%);
    color: #FFFFFF;
}

.cta-section h2 {
    color: #FFFFFF;
    margin-bottom: 0.75rem;
}

.cta-section p {
    color: #F5F5F0;
    opacity: 0.9;
    margin: 0 auto 2rem;
}

/* ========================================
   SERVICES PAGE — PRICING
   ======================================== */

.pricing-tier {
    padding: 2.5rem;
    background-color: #FFFFFF;
    border: 1px solid #F5F5F0;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.3s ease;
}

.pricing-tier:hover {
    box-shadow: 0 4px 24px rgba(10, 22, 40, 0.08);
}

.pricing-tier--featured {
    border-color: #C4943D;
    position: relative;
}

.pricing-tier--featured::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 2.5rem;
    background-color: #C4943D;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 1rem;
    border-radius: 2px;
}

.pricing-tier__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.pricing-tier__name {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #0A1628;
}

.pricing-tier__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #C4943D;
}

.pricing-tier__desc {
    color: #5A6B7A;
    margin-bottom: 1.5rem;
}

.pricing-tier__includes h4 {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5A6B7A;
    margin-bottom: 0.75rem;
}

.pricing-tier__list {
    display: grid;
    gap: 0.5rem;
}

.pricing-tier__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: #2D2D2D;
}

.pricing-tier__list li::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4943D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.pricing-section-label {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C4943D;
    margin-bottom: 0.75rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* 1-card grid (cross-sell on detail pages): center the card at a comfortable width */
.pricing-grid:has(> .pricing-tier:nth-child(1):last-child),
.pricing-grid:has(> .op-pricing-card:nth-child(1):last-child) {
    grid-template-columns: minmax(280px, 380px);
    justify-content: center;
}

/* 2-card grid (Publishers page): center the pair with capped card width */
.pricing-grid:has(> .pricing-tier:nth-child(2):last-child),
.pricing-grid:has(> .op-pricing-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(280px, 380px));
    justify-content: center;
}

/* 3-card grid (Business Owners page): force 3 columns at desktop, collapse to 1 column on mobile */
.pricing-grid:has(> .pricing-tier:nth-child(3):last-child),
.pricing-grid:has(> .op-pricing-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Mobile: force ALL pricing grids to single column regardless of card count.
   Uses !important to override any inline grid-template-columns set on the wrapper. */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
        gap: 1.5rem !important;
    }
}

.pricing-grid .pricing-tier {
    margin-bottom: 0;
}

/* Comparison section */
.comparison-box {
    padding: 2.5rem;
    background-color: #FAF8F5;
    border-radius: 2px;
    margin-top: 2rem;
}

.comparison-box h3 {
    margin-bottom: 1rem;
}

/* ========================================
   FAQ SECTION
   ======================================== */

.faq-list {
    max-width: 820px;
    margin-inline: auto;
}

.faq-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid #F5F5F0;
}

.faq-item:first-child {
    padding-top: 0;
}

.faq-item h3 {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0A1628;
    margin-bottom: 0.75rem;
}

.faq-item p {
    color: #5A6B7A;
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* Quality validation */
.quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.quality-card {
    padding: 2rem;
    background-color: #FFFFFF;
    border: 1px solid #F5F5F0;
    border-radius: 2px;
}

.quality-card h3 {
    margin-bottom: 0.75rem;
}

.quality-card p {
    color: #5A6B7A;
    font-size: 0.9375rem;
}

/* ========================================
   ABOUT PAGE
   ======================================== */

.about-content {
    max-width: 720px;
}

.about-content p {
    color: #5A6B7A;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

/* Cap at 4 columns at desktop so 4-card sections don't spill 3+1 */
@media (min-width: 1100px) {
    .values-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .values-grid > .value-card:nth-child(n+5) {
        /* Reserved capacity for future 5+ card sections */
    }
}

/* Section utility classes */
.section-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
    color: #5A6B7A;
    font-size: 1.0625rem;
}

.section-close {
    text-align: center;
    max-width: 720px;
    margin: 2rem auto 0;
    font-size: 1.0625rem;
    color: #5A6B7A;
}

.value-card {
    padding: 2rem;
}

.value-card h3 {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
}

.value-card p {
    color: #5A6B7A;
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* ========================================
   CONTACT PAGE
   ======================================== */

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

.contact-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0A1628;
    margin-bottom: 0.375rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: 0.9375rem;
    color: #2D2D2D;
    background-color: #FFFFFF;
    border: 1px solid #F5F5F0;
    border-radius: 2px;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #C4943D;
}

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

.contact-form .btn {
    width: 100%;
}

.contact-info h3 {
    margin-bottom: 0.75rem;
}

.contact-info p {
    color: #5A6B7A;
}

.expect-list {
    margin: 1.5rem 0;
}

.expect-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.375rem 0;
    color: #5A6B7A;
    font-size: 0.9375rem;
}

.expect-list li::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4943D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.calendly-placeholder {
    background-color: #FAF8F5;
    border: 2px dashed #C4943D;
    border-radius: 2px;
    padding: 3rem 2rem;
    text-align: center;
    margin-top: 2rem;
}

.calendly-placeholder p {
    color: #5A6B7A;
    margin: 0 auto;
}

/* ========================================
   BLOG — INDEX
   ======================================== */

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

.post-card {
    background-color: #FFFFFF;
    border: 1px solid #F5F5F0;
    border-radius: 2px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.post-card:hover {
    box-shadow: 0 4px 24px rgba(10, 22, 40, 0.08);
}

.post-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #F5F5F0;
}

.post-card__body {
    padding: 1.5rem;
}

.post-card__meta {
    font-size: 0.8125rem;
    color: #5A6B7A;
    margin-bottom: 0.75rem;
}

.post-card__meta span + span::before {
    content: '\00B7';
    margin: 0 0.5rem;
}

.post-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.post-card h3 a {
    color: #0A1628;
}

.post-card h3 a:hover {
    color: #C4943D;
}

.post-card__excerpt {
    color: #5A6B7A;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

.post-card__link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #C4943D;
}

.post-card__link:hover {
    color: #B87333;
}

/* ========================================
   BLOG — SINGLE POST
   ======================================== */

.single-post-content {
    max-width: 720px;
    margin: 0 auto;
}

.single-post-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.single-post-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.single-post-content p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #2D2D2D;
    margin-bottom: 1.25rem;
    max-width: none;
}

.single-post-content ul,
.single-post-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

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

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

.single-post-content li {
    margin-bottom: 0.5rem;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.single-post-content img {
    margin: 2rem 0;
    border-radius: 2px;
}

.single-post-content a {
    color: #C4943D;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-meta {
    font-size: 0.875rem;
    color: #5A6B7A;
    margin-bottom: 2rem;
}

.post-meta span + span::before {
    content: '\00B7';
    margin: 0 0.5rem;
}

/* Post footer CTA */
.post-cta {
    margin-top: 3rem;
    padding: 2.5rem;
    background-color: #FAF8F5;
    border-left: 3px solid #C4943D;
    border-radius: 0 2px 2px 0;
}

.post-cta h3 {
    margin-bottom: 0.75rem;
}

.post-cta p {
    font-size: 1rem;
    color: #5A6B7A;
    margin-bottom: 1.5rem;
}

/* Force-correct CTA button colors inside .post-cta. The body-prefix bumps
   selector specificity (0,3,1) above the typical Customizer Additional CSS
   override specificity (0,3,0), so this rule wins the cascade regardless of
   what's left in Customizer. Combined with !important, this fixes the
   2026-04-25 same-color-as-background bug for good. */
body .post-cta .btn.btn--primary {
    background-color: #C4943D !important;
    color: #FFFFFF !important;
}

body .post-cta .btn.btn--primary:hover {
    background-color: #B87333 !important;
    color: #FFFFFF !important;
}

/* Post navigation */
.post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #F5F5F0;
}

.post-nav a {
    font-size: 0.9375rem;
    color: #5A6B7A;
}

.post-nav a:hover {
    color: #C4943D;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    font-size: 0.9375rem;
    color: #5A6B7A;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.pagination a:hover {
    background-color: #F5F5F0;
    color: #0A1628;
}

.pagination .current {
    background-color: #0A1628;
    color: #FFFFFF;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    background-color: #0A1628;
    color: #F5F5F0;
    padding: 4rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
    max-width: 300px;
}

.footer-brand .site-logo {
    color: #FFFFFF;
    font-size: 1.25rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: rgba(245, 245, 240, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer-col h4 {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #C4943D;
    margin-bottom: 1.25rem;
}

.footer-col a {
    display: block;
    font-size: 0.875rem;
    color: rgba(245, 245, 240, 0.7);
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: #FFFFFF;
}

.footer-bottom {
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 0.8125rem;
    color: rgba(245, 245, 240, 0.5);
    margin-bottom: 0;
}

/* ========================================
   RESPONSIVE — TABLET
   ======================================== */

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

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

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

@media (max-width: 768px) {
    .container {
        padding: 0 1.25rem;
    }

    .section {
        padding: 3.5rem 0;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    /* Header mobile */
    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: #FFFFFF;
        padding: 1.5rem;
        gap: 0;
        border-bottom: 1px solid #F5F5F0;
        box-shadow: 0 4px 20px rgba(10, 22, 40, 0.08);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu a {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid #F5F5F0;
    }

    .nav-menu a::after {
        display: none;
    }

    .nav-cta {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .nav-cta .btn {
        width: 100%;
        text-align: center;
    }

    /* Hero mobile */
    .hero {
        padding: 7rem 0 4rem;
    }

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

    .hero__tagline {
        font-size: 2rem;
    }

    .hero--page .hero__tagline {
        font-size: 1.75rem;
    }

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

    /* Grids mobile */
    .service-paths,
    .steps,
    .testimonials,
    .audience-list,
    .values-grid,
    .contact-layout,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile form-first reorder for checkout pages.
       Mirrors the .op-hero-asymmetric--mobile-aside-first
       pattern. Switches the .contact-layout grid into a
       column-reverse flex on mobile so the order form
       (second child in source order) renders first under
       the visitor's thumb. Used on
       page-outline-package.php and
       page-manuscript-package.php. */
    .contact-layout--mobile-form-first {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    /* Pricing mobile */
    .pricing-tier__header {
        flex-direction: column;
    }

    /* Post nav mobile */
    .post-nav {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .btn {
        text-align: center;
    }
}

/* ========================================
   WORDPRESS UTILITIES
   ======================================== */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1rem;
}

.wp-caption-text {
    font-size: 0.8125rem;
    color: #5A6B7A;
    margin-top: 0.5rem;
}

/* Sidebar widget area */
.widget-area {
    padding: 2rem 0;
}

.widget {
    margin-bottom: 2rem;
}

.widget h4 {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0A1628;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #F5F5F0;
}

.widget ul li {
    padding: 0.375rem 0;
}

.widget ul li a {
    color: #5A6B7A;
    font-size: 0.9375rem;
}

.widget ul li a:hover {
    color: #C4943D;
}

/* Category/tag badges */
.post-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #C4943D;
    margin-bottom: 0.5rem;
}

/* ========================================
   MIGRATED FROM CUSTOMIZER 2026-04-26

   Bulk migration of permanent brand styling that previously lived in WP
   Customizer Additional CSS. Moved into theme source so the rules survive
   theme rebuilds and live in version control. Pre-migration verbatim
   snapshot is at brand/website/customizer-additional-css-snapshot-2026-04-26.css
   (SHA-256 verified against the live Customizer setting captured 2026-04-26).
   Full migrate / keep / delete audit at brand/website/customizer-css-audit-2026-04-26.md.

   Block ordering preserves original Customizer source order so cascade
   behavior is identical to pre-migration rendering. Migration block lives
   at the bottom of style.css so migrated rules come after every existing
   theme rule, preserving the "Customizer-loaded-last" cascade property
   they had before the move.
   ======================================== */


/* Migrated from Customizer 2026-04-26 — OP Editorial Layer (v3) */
/* === OP Editorial Layer (v3 — restored 2026-04-26) — gives inline colors priority === */

/* Soft cream page background on single posts */
body.single-post,
body.single-format-standard {
  background-color: #fbf8f1 !important;
}

article.single-post-content {
  background-color: #fbf8f1;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Default body text — soft navy-charcoal. NO !important so inline color styles win in callout boxes. */
article.single-post-content p,
article.single-post-content li,
article.single-post-content td {
  color: #1f2a44;
  line-height: 1.75;
}

/* Constrained reading width on top-level body blocks */
article.single-post-content > p,
article.single-post-content > ul,
article.single-post-content > ol,
article.single-post-content > h2,
article.single-post-content > h3,
article.single-post-content > .wp-block-pullquote,
article.single-post-content > .wp-block-quote,
article.single-post-content > .wp-block-group,
article.single-post-content > figure.wp-block-table {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Wide elements (hero, summary table) break out */
article.single-post-content > figure.wp-block-image.alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero image — gold rule beneath */
article.single-post-content > figure.wp-block-image:first-child,
article.single-post-content > figure.wp-block-image.alignwide:first-of-type {
  margin-top: 0;
  margin-bottom: 2.25em;
  border-bottom: 1px solid #e5dcc4;
  padding-bottom: 1.5em;
}

/* Drop cap on first body paragraph */
article.single-post-content > figure.wp-block-image:first-child + p::first-letter,
article.single-post-content > p:first-of-type::first-letter {
  float: left;
  font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
  font-size: 4.4em;
  line-height: .85;
  font-weight: 700;
  color: #1d3557;
  margin: .08em .12em -.08em 0;
  padding: 0;
}

/* H2 typography */
article.single-post-content h2.wp-block-heading {
  font-size: 1.85em;
  line-height: 1.25;
  color: #1d3557;
  font-weight: 700;
  margin-top: 2.75em;
  margin-bottom: .75em;
  padding-top: 0;
  border-top: none;
  position: relative;
}
article.single-post-content h2.wp-block-heading::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: #c9a449;
  margin-bottom: .9em;
}

/* Eyebrow paragraph */
article.single-post-content p.eyebrow {
  font-size: .8em;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: #b08524;
  margin-top: 3em;
  margin-bottom: .35em;
  text-align: left;
  line-height: 1.4;
}
article.single-post-content p.eyebrow + h2.wp-block-heading {
  margin-top: 0;
}
article.single-post-content p.eyebrow + h2.wp-block-heading::before {
  display: none;
}

/* H3 typography — but NOT inside callout groups (they have their own color) */
article.single-post-content h3.wp-block-heading {
  font-size: 1.3em;
  line-height: 1.3;
  color: #1d3557;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: .65em;
}

/* Inside dark callout groups, text colors come from inline styles */
article.single-post-content .wp-block-group.has-background h2,
article.single-post-content .wp-block-group.has-background h3,
article.single-post-content .wp-block-group.has-background p,
article.single-post-content .wp-block-group[style*="background-color"] h2,
article.single-post-content .wp-block-group[style*="background-color"] h3,
article.single-post-content .wp-block-group[style*="background-color"] p {
  color: inherit;
}
article.single-post-content .wp-block-group.has-background h2.wp-block-heading::before,
article.single-post-content .wp-block-group[style*="background-color"] h2.wp-block-heading::before {
  display: none;
}

/* Step-number badge on H3s with data-step (only outside callout groups) */
article.single-post-content > h3.wp-block-heading[data-step] {
  display: flex;
  align-items: center;
  gap: .55em;
}
article.single-post-content > h3.wp-block-heading[data-step]::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85em;
  height: 1.85em;
  border-radius: 50%;
  background: #c9a449;
  color: #fff;
  font-weight: 700;
  font-size: .9em;
  flex-shrink: 0;
  font-family: Georgia, serif;
}

/* Section divider */
article.single-post-content p.section-divider {
  text-align: center;
  letter-spacing: .8em;
  color: #c9a449;
  font-size: 1.5em;
  margin: 3em auto 2.75em;
  font-weight: 700;
}

/* TL;DR block */
article.single-post-content p.tldr-block {
  background: #f4ecd8;
  border-left: 4px solid #c9a449;
  padding: 1.1em 1.4em;
  font-size: 1.02em;
  border-radius: 4px;
  color: #1d3557;
}

/* Speakable answer */
article.single-post-content p.speakable-answer {
  font-size: 1.1em;
  color: #1d3557;
  font-weight: 500;
}

/* Summary table */
article.single-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em auto;
  font-size: .95em;
}
article.single-post-content table th {
  background: #1d3557;
  color: #fbf8f1;
  text-align: left;
  padding: .85em 1em;
  font-weight: 600;
  letter-spacing: .03em;
  font-size: .9em;
  text-transform: uppercase;
}
article.single-post-content table td {
  padding: .85em 1em;
  border-bottom: 1px solid #e5dcc4;
  vertical-align: top;
}
article.single-post-content table tr:nth-child(even) td {
  background: rgba(244, 236, 216, .35);
}

/* Pullquote */
article.single-post-content figure.wp-block-pullquote {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Inline links — gold underline (skip buttons) */
article.single-post-content p a:not(.wp-block-button__link):not(.wp-element-button) {
  color: #b08524;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
article.single-post-content p a:not(.wp-block-button__link):not(.wp-element-button):hover {
  color: #1d3557;
}
article.single-post-content .wp-block-group.has-background p a {
  color: inherit;
  text-decoration-color: rgba(255,255,255,.4);
}

/* Resources list */
article.single-post-content ol.wp-block-list {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5em;
}
article.single-post-content ol.wp-block-list li {
  margin-bottom: .9em;
  line-height: 1.65;
}


/* Migrated from Customizer 2026-04-26 — Post-CTA button utility (font-weight + no-underline) */
/* The Customizer's bg-color and hover rules for body .post-cta .btn.btn--primary
   were intentionally NOT re-migrated. They already exist in the BLOG — SINGLE POST
   section above (with the same selectors and values), so re-migrating would create
   redundant duplicates. Only this font-weight + text-decoration utility was unique
   to the Customizer and needed to move. */
.post-cta .btn.btn--primary,
.post-cta a.btn--primary,
.section .post-cta .btn--primary {
  font-weight: 600;
  text-decoration: none;
}


/* Migrated from Customizer 2026-04-26 — Patch: constrain div-wrapped speakable + tldr blocks to book column */

/* Constrain div-wrapped editorial blocks to 720px book column */
article.single-post-content > div.speakable-answer,
article.single-post-content > div.tldr-block,
article.single-post-content > .speakable-answer,
article.single-post-content > .tldr-block {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Apply tldr visual treatment to div.tldr-block (was only on p.tldr-block) */
article.single-post-content > div.tldr-block,
article.single-post-content div.tldr-block {
  background: #f4ecd8;
  border-left: 4px solid #c9a449;
  padding: 1.1em 1.4em;
  font-size: 1.02em;
  border-radius: 4px;
  color: #1d3557;
}
article.single-post-content div.tldr-block p {
  color: #1d3557;
  margin-bottom: .6em;
}
article.single-post-content div.tldr-block p:last-child {
  margin-bottom: 0;
}

/* Apply speakable-answer visual treatment to div.speakable-answer (was only on p.speakable-answer) */
article.single-post-content > div.speakable-answer,
article.single-post-content div.speakable-answer {
  font-size: 1.1em;
  color: #1d3557;
  font-weight: 500;
}
article.single-post-content div.speakable-answer p {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

/* Apply pullquote className styling consistent with .pullquote className */
article.single-post-content figure.wp-block-pullquote.pullquote {
  margin-top: 2em;
  margin-bottom: 2em;
}
article.single-post-content figure.wp-block-pullquote blockquote p {
  font-size: 1.45em;
  line-height: 1.4;
  color: #1d3557;
  font-weight: 500;
  font-style: italic;
}


/* Migrated from Customizer 2026-04-26 — FAQ section containment. Subtle visual separator. */

/* The FAQ section gets wrapped in a wp:group with className "faq-section".
   Style as a soft cream-darker container with gold top rule, slightly inset. */
article.single-post-content .wp-block-group.faq-section {
  background: rgba(244, 236, 216, 0.4);
  border-top: 2px solid #c9a449;
  border-bottom: 1px solid #e5dcc4;
  padding: 2.5em 2.25em 1.75em;
  margin-top: 4em;
  margin-bottom: 3em;
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
  border-radius: 4px;
}

/* FAQ section H2 — slightly smaller, no gold rule above (the container has its own) */
article.single-post-content .wp-block-group.faq-section h2.wp-block-heading {
  font-size: 1.55em;
  margin-top: 0;
  margin-bottom: 1em;
  padding-top: 0;
}
article.single-post-content .wp-block-group.faq-section h2.wp-block-heading::before {
  display: none;
}

/* FAQ section H3 — questions, slightly tighter spacing */
article.single-post-content .wp-block-group.faq-section h3.wp-block-heading {
  font-size: 1.15em;
  margin-top: 1.6em;
  margin-bottom: .4em;
  color: #1d3557;
}
article.single-post-content .wp-block-group.faq-section h3.wp-block-heading:first-of-type {
  margin-top: 0;
}

/* FAQ section paragraphs — slightly smaller, tighter */
article.single-post-content .wp-block-group.faq-section p {
  font-size: .96em;
  line-height: 1.7;
  margin-bottom: .9em;
  max-width: 100%;
}

/* FAQ section nested constraint — child blocks stretch to container width, not 720px */
article.single-post-content .wp-block-group.faq-section > * {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}


/* Migrated from Customizer 2026-04-26 — Patch: drop cap fix */

/* Reset drop cap on special-class paragraphs (eyebrow, section-divider, TL;DR, speakable) */
article.single-post-content > p.eyebrow::first-letter,
article.single-post-content > p.section-divider::first-letter,
article.single-post-content > p.tldr-block::first-letter,
article.single-post-content > p.speakable-answer::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* Re-apply drop cap ONLY to body paragraphs (not eyebrow/divider/tldr/speakable) using :not() */
article.single-post-content > p:not(.eyebrow):not(.section-divider):not(.tldr-block):not(.speakable-answer):first-of-type::first-letter,
article.single-post-content > figure.wp-block-image:first-child + p:not(.eyebrow):not(.section-divider):not(.tldr-block):not(.speakable-answer)::first-letter {
  float: left;
  font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
  font-size: 4.4em;
  line-height: .85;
  font-weight: 700;
  color: #1d3557;
  margin: .08em .12em -.08em 0;
  padding: 0;
}

/* Belt-and-suspenders: target first body paragraph that follows H1 + eyebrow chain */
article.single-post-content > h1.wp-block-heading ~ p:not(.eyebrow):not(.section-divider):not(.tldr-block):not(.speakable-answer):first-of-type::first-letter {
  float: left;
  font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
  font-size: 4.4em;
  line-height: .85;
  font-weight: 700;
  color: #1d3557;
  margin: .08em .12em -.08em 0;
  padding: 0;
}

/* =============================================================
   OP DESIGN LANGUAGE (v12 — added 2026-04-28)

   Ports the deployed framework page's design moves into the main
   theme inside the locked OP brand kit. Reference page:
   /landing-pages/framework/index.html (corrected to brand-kit
   typography in this same run).

   Brand-kit binding: Playfair Display headings, Source Sans 3
   body, Cormorant Garamond as italic accent face. Navy #0A1628 /
   Midnight #162D50 / Gold #C4943D / Copper #B87333 / Cream
   #FAF8F5 / Light Gray #F5F5F0 / Charcoal #2D2D2D / Slate
   #5A6B7A. NO Crimson Pro, NO Inter.

   These classes layer on top of the existing theme rather than
   replacing it. Existing pages keep working until the page-*.php
   templates are updated to use the new classes.
   ============================================================= */

/* Cormorant Garamond is loaded via @import here in case the
   theme functions.php enqueue list hasn't been updated yet. The
   font CSS is small and only fetched once. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap");

/* ----- Color tokens reused below (mirrors brand kit) ----- */
:root {
    --op-navy: #0A1628;
    --op-navy-deep: #162D50;
    --op-gold: #C4943D;
    --op-copper: #B87333;
    --op-charcoal: #2D2D2D;
    --op-slate: #5A6B7A;
    --op-light-gray: #F5F5F0;
    --op-cream: #FAF8F5;
    --op-cream-warm: #F4ECD8; /* deepest cream used in editorial moments */
    --op-cream-light: #FBF8F1; /* layered cream — slightly warmer than #FAF8F5 */
    --op-rule: #E5DCC4; /* warm-cream divider */
    --op-rule-soft: rgba(196, 148, 61, 0.28); /* gold @ 28% — used for structural rules */
}

/* ----- .op-eyebrow — small caps marker
   Replaces the old "section-header h2 + .gold-rule" repetition.
   Use sparingly — at most one per major section. Pair with
   .op-accent-rule when a divider is wanted, NOT every time.
   Variants exist for cream-on-dark and dark-on-cream contexts. */
.op-eyebrow {
    display: block;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--op-gold);
    margin: 0 0 1rem;
    line-height: 1.4;
}

.op-eyebrow--on-navy {
    color: var(--op-gold);
}

.op-eyebrow--on-cream {
    color: var(--op-copper); /* slightly more readable on cream than gold */
}

/* ----- .op-accent-rule — 60px gold rule
   Replaces the universal <hr class="gold-rule"> repetition. Use
   only on sections that earn a section header — never on every
   <h2>. Aligns left by default; modifier centers it. */
.op-accent-rule {
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--op-gold);
    border: 0;
    margin: 0 0 2rem;
}

.op-accent-rule--center {
    margin-left: auto;
    margin-right: auto;
}

/* ----- .op-bg-cream and .op-bg-cream-light — layered cream
   Two cream tones for subtle layering rather than the
   alternating cream/white pattern that gives the current site
   its templated rhythm. Apply to <section> wrappers. */
.op-bg-cream {
    background-color: var(--op-cream);
    color: var(--op-charcoal);
}

.op-bg-cream-light {
    background-color: var(--op-cream-light);
    color: var(--op-charcoal);
}

.op-bg-cream + .op-bg-cream-light,
.op-bg-cream-light + .op-bg-cream {
    border-top: 1px solid var(--op-rule);
}

.op-bg-cream--ruled,
.op-bg-cream-light--ruled {
    border-top: 1px solid var(--op-rule);
    border-bottom: 1px solid var(--op-rule);
}

/* ----- .op-watermark — giant italic Playfair watermark
   Per-page typographic watermark that sits behind hero copy at
   ~4% opacity. Each page sets the character via the
   --op-watermark-char custom property OR via a modifier class.
   Playfair italic at this scale reads more theatrical than
   Crimson Pro did on the framework page — closer to a Vanity
   Fair drop cap than the Crimson Didone we replaced. */
.op-watermark {
    position: absolute;
    pointer-events: none;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, 0.045);
    z-index: 0;
    user-select: none;
    -webkit-user-select: none;
}

.op-watermark--right {
    right: -3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32rem;
}

.op-watermark--left {
    left: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32rem;
}

.op-watermark--bottom-right {
    right: -1.5rem;
    bottom: -4rem;
    font-size: 24rem;
}

.op-watermark--on-cream {
    color: rgba(10, 22, 40, 0.045);
}

@media (max-width: 768px) {
    .op-watermark--right,
    .op-watermark--left {
        font-size: 16rem;
        right: -1.25rem;
    }

    .op-watermark--bottom-right {
        font-size: 11rem;
    }
}

/* ----- .op-hero-asymmetric — asymmetric hero grid
   Replaces the centered-text-and-buttons hero pattern. The
   copy column is slightly wider than the aside column at
   desktop. On mobile, columns stack — each page can opt in to
   reorder via .op-hero-asymmetric--mobile-aside-first. */
.op-hero-asymmetric {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 900px) {
    .op-hero-asymmetric {
        grid-template-columns: 1.05fr 1fr;
        gap: 4rem;
    }
}

.op-hero-asymmetric__copy {
    max-width: 600px;
}

.op-hero-asymmetric__aside {
    position: relative;
}

@media (max-width: 768px) {
    .op-hero-asymmetric--mobile-aside-first {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .op-hero-asymmetric--mobile-aside-first .op-hero-asymmetric__aside {
        order: 1;
    }

    .op-hero-asymmetric--mobile-aside-first .op-hero-asymmetric__copy {
        order: 2;
    }
}

/* ----- .op-display — Playfair display headline
   For hero headlines and major section openers. Larger and
   tighter than the existing .hero h1. Italic-accent variant
   uses Cormorant for emphasized words within. */
.op-display {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    line-height: 1.05;
    color: var(--op-navy);
    margin: 0 0 1.25rem;
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.op-display--on-navy {
    color: #FFFFFF;
}

.op-display em,
.op-display .op-display-em {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--op-gold);
    font-size: 1.04em; /* visually balance the Cormorant strokes */
}

.op-subtitle {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: rgba(245, 245, 240, 0.85);
    line-height: 1.5;
    margin: 0 0 1.75rem;
}

.op-subtitle--on-cream {
    color: var(--op-slate);
}

/* ----- .op-bars-grid — 3-column gold-bordered groups
   Replaces .values-grid for sections that want the framework-
   page bars treatment. Each .op-bars-grid__group gets a gold
   top-border, italic Cormorant subtitle, and items numbered
   in italic Cormorant. */
.op-bars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .op-bars-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

.op-bars-grid--two-up {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .op-bars-grid--two-up {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

.op-bars-grid__group {
    border-top: 2px solid var(--op-gold);
    padding-top: 1.5rem;
}

.op-bars-grid__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-navy);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.op-bars-grid__sub {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--op-slate);
    margin: 0 0 1.5rem;
    line-height: 1.4;
}

.op-bars-grid__bar {
    margin-bottom: 1.25rem;
}

.op-bars-grid__bar-num {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    color: var(--op-gold);
    font-size: 0.95rem;
    margin-right: 0.5rem;
    letter-spacing: 0.02em;
}

.op-bars-grid__bar-name {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-weight: 600;
    color: var(--op-navy);
    font-size: 1rem;
}

.op-bars-grid__bar-desc {
    font-size: 0.95rem;
    color: var(--op-slate);
    margin: 0.2rem 0 0;
    line-height: 1.5;
    max-width: none;
}

/* ----- .op-editorial-card — sample-bar editorial treatment
   Replaces FAQ-item / pricing-tier card / values-grid card
   patterns when a page wants the framework page's "one bar in
   full treatment" feel. Eyebrow → italic Playfair name →
   labeled "Definition / What it covers / Who it's for"
   sections with eyebrow labels in caps + italic body. */
.op-editorial-card {
    background: var(--op-cream-light);
    border-top: 3px solid var(--op-gold);
    padding: 2.5rem 2rem;
    max-width: 760px;
}

.op-editorial-card--on-cream {
    background: #FFFFFF;
}

.op-editorial-card__meta {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    color: var(--op-gold);
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.op-editorial-card__name {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.1;
    font-weight: 700;
    color: var(--op-navy);
    margin: 0 0 1.5rem;
}

.op-editorial-card__label {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--op-gold);
    font-weight: 600;
    margin: 1.75rem 0 0.5rem;
    display: block;
}

.op-editorial-card__definition {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--op-navy);
    line-height: 1.4;
    max-width: none;
    margin: 0;
}

.op-editorial-card__body {
    font-size: 1rem;
    color: var(--op-charcoal);
    line-height: 1.7;
    margin: 0 0 1rem;
    max-width: none;
}

.op-editorial-card__body:last-child {
    margin-bottom: 0;
}

/* ----- .op-pull-quote — display-size italic pull quote
   For the About page founder story moment. Cormorant italic
   at display size, gold accent rule on left, considered
   spacing. Sits inside .about-content. */
.op-pull-quote {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.3;
    color: var(--op-navy);
    border-left: 3px solid var(--op-gold);
    padding-left: 1.75rem;
    margin: 2.5rem 0;
    max-width: 720px;
}

.op-pull-quote__attribution {
    display: block;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--op-gold);
    font-style: normal;
    margin-top: 1.25rem;
    font-weight: 600;
}

/* ----- .op-attribution — hero attribution mark
   Small caps, letter-spaced, gold. Used in hero footer slot
   for a subtle brand presence ("Orchestrate Publishing · 2026"
   on the framework page). */
.op-attribution {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.75rem;
    color: rgba(196, 148, 61, 0.78);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 2rem;
    font-weight: 600;
}

/* ----- .op-pricing-display — designed price moment
   Replaces the "<div style='background: #F5F0E6'>" beige
   rectangle on the manuscript and outline pages. Playfair
   Display at display size, gold accent, considered spacing. */
.op-pricing-display {
    background: var(--op-navy);
    color: #FFFFFF;
    padding: 2.5rem 2rem;
    border-top: 3px solid var(--op-gold);
    border-radius: 2px;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.op-pricing-display__eyebrow {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--op-gold);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.op-pricing-display__amount {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.75rem, 5vw, 3.75rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

.op-pricing-display__amount em {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--op-gold);
    font-size: 0.9em;
}

.op-pricing-display__terms {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(245, 245, 240, 0.85);
    margin: 0;
    max-width: none;
}

/* ----- .op-trust-bar — designed trust strip
   Replaces the flex-row of three sentences on the manuscript
   and outline pages with a structured component: numerals +
   considered hierarchy + thin gold rule above. */
.op-trust-bar {
    background: var(--op-cream);
    border-top: 1px solid var(--op-rule);
    border-bottom: 1px solid var(--op-rule);
    padding: 2rem 0;
}

.op-trust-bar__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .op-trust-bar__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.op-trust-bar__item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.op-trust-bar__num {
    flex-shrink: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    color: var(--op-gold);
    font-size: 1.4rem;
    line-height: 1;
    padding-top: 0.1em;
}

.op-trust-bar__text {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--op-charcoal);
    line-height: 1.5;
    margin: 0;
    max-width: none;
}

/* ----- .op-comparison-table — structured comparison
   Replaces .comparison-box paragraph-in-styled-div pattern
   with an actual structured comparison: alternating rows,
   gold accent header, considered cell padding. */
.op-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    background: #FFFFFF;
    border: 1px solid var(--op-rule);
}

.op-comparison-table thead th {
    background: var(--op-navy);
    color: var(--op-cream);
    text-align: left;
    padding: 1rem 1.25rem;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.op-comparison-table tbody td {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--op-rule);
    vertical-align: top;
    color: var(--op-charcoal);
    line-height: 1.5;
}

.op-comparison-table tbody tr:nth-child(even) td {
    background: rgba(244, 236, 216, 0.35);
}

.op-comparison-table tbody td:first-child {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    color: var(--op-navy);
    width: 28%;
}

.op-comparison-table tbody td.op-comparison-table__highlight {
    color: var(--op-gold);
    font-weight: 600;
}

/* Mobile: shrink padding and font so 4-column comparison fits, plus
   horizontal-scroll fallback container for very narrow screens. */
@media (max-width: 768px) {
    .op-comparison-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1.5rem 0;
    }

    .op-comparison-table {
        font-size: 0.82rem;
        margin: 0;
    }

    .op-comparison-table thead th {
        padding: 0.625rem 0.75rem;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }

    .op-comparison-table tbody td {
        padding: 0.625rem 0.75rem;
        line-height: 1.4;
    }

    .op-comparison-table tbody td:first-child {
        width: auto;
    }
}

/* ----- .op-form-card — designed form treatment
   Replaces the default wpforms output styling. Labels above,
   helper text below, distinct focus state, distinct success
   state. The wpforms shortcode rendering inside .op-form-card
   inherits the styles via cascade. */
.op-form-card {
    background: #FFFFFF;
    border: 1px solid var(--op-rule);
    border-top: 3px solid var(--op-gold);
    padding: 2rem 1.75rem;
    border-radius: 2px;
    box-shadow: 0 8px 32px rgba(10, 22, 40, 0.06);
}

.op-form-card__header {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-navy);
    line-height: 1.2;
    margin: 0 0 0.4rem;
}

.op-form-card__sub {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--op-slate);
    margin: 0 0 1.25rem;
    max-width: none;
}

/* wpforms-specific overrides — surgical, label/helper/focus
   only. Keeps wpforms' own structural CSS intact. */
.op-form-card .wpforms-field-label,
.op-form-card label {
    font-family: "Source Sans 3", Arial, sans-serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--op-navy) !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
}

.op-form-card .wpforms-field-description,
.op-form-card .wpforms-field-sublabel {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic;
    font-size: 0.95rem !important;
    color: var(--op-slate) !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400 !important;
}

.op-form-card input[type="text"],
.op-form-card input[type="email"],
.op-form-card input[type="tel"],
.op-form-card input[type="number"],
.op-form-card select,
.op-form-card textarea {
    border: 1px solid var(--op-rule) !important;
    border-radius: 2px !important;
    padding: 0.75rem 0.875rem !important;
    font-family: "Source Sans 3", Arial, sans-serif !important;
    font-size: 0.95rem !important;
    background: var(--op-cream-light) !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.op-form-card input:focus,
.op-form-card select:focus,
.op-form-card textarea:focus {
    outline: none !important;
    border-color: var(--op-gold) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(196, 148, 61, 0.18) !important;
}

.op-form-card .wpforms-submit,
.op-form-card button[type="submit"] {
    background: var(--op-gold) !important;
    color: #FFFFFF !important;
    font-family: "Source Sans 3", Arial, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    padding: 0.95rem 2.25rem !important;
    border-radius: 2px !important;
    border: 0 !important;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.op-form-card .wpforms-submit:hover,
.op-form-card button[type="submit"]:hover {
    background: var(--op-copper) !important;
    transform: translateY(-1px);
}

.op-form-card .wpforms-confirmation-container,
.op-form-card .wpforms-confirmation-container-full {
    background: var(--op-cream) !important;
    border: 1px solid var(--op-gold) !important;
    border-left-width: 3px !important;
    color: var(--op-navy) !important;
    padding: 1.25rem 1.5rem !important;
}

/* ----- .op-inline-cta — editorial CTA strip
   Cream-bordered above + below, italic Cormorant lead,
   single CTA. Used as a light-touch CTA between sections. */
.op-inline-cta {
    background: var(--op-cream);
    border-top: 1px solid var(--op-rule);
    border-bottom: 1px solid var(--op-rule);
    padding: 2.75rem 2rem;
    text-align: center;
}

.op-inline-cta__lead {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.35rem;
    color: var(--op-slate);
    margin: 0 auto 1.25rem;
    line-height: 1.5;
    max-width: 640px;
}

/* ----- .op-cta-button — designed gold CTA with hover lift
   Kept as a parallel utility to existing .btn so it can be
   used inside the new design moments without conflicting with
   the existing button system. */
.op-cta-button {
    display: inline-block;
    background: var(--op-gold);
    color: var(--op-navy);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    padding: 0.95rem 2.25rem;
    border-radius: 2px;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    border: 0;
    cursor: pointer;
}

.op-cta-button:hover {
    background: #d6b87b;
    color: var(--op-navy);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(10, 22, 40, 0.18);
}

.op-cta-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 148, 61, 0.4);
}

.op-cta-button--ghost {
    background: transparent;
    color: var(--op-gold);
    border: 1.5px solid var(--op-gold);
}

.op-cta-button--ghost:hover {
    background: var(--op-gold);
    color: var(--op-navy);
}

/* ----- .op-hero — variant hero treatments per page
   Each page-level hero gets its own modifier instead of
   sharing the .hero pattern. The base class keeps the navy
   gradient + ample padding; modifiers add the watermark and
   asymmetric grid. */
.op-hero {
    position: relative;
    overflow: hidden;
    padding: 9rem 0 6rem;
    background: linear-gradient(135deg, var(--op-navy) 0%, var(--op-navy-deep) 100%);
    color: #FFFFFF;
}

.op-hero--page {
    padding: 8rem 0 4.5rem;
}

.op-hero--cream {
    background: var(--op-cream-light);
    color: var(--op-charcoal);
}

.op-hero--cream .op-display {
    color: var(--op-navy);
}

.op-hero__inner {
    position: relative;
    z-index: 2;
}

.op-hero p,
.op-hero .op-subtitle,
.op-hero .op-display {
    color: rgba(250, 248, 245, 0.92);
}

.op-hero .op-display {
    color: #FFFFFF;
}

.op-hero ul.op-hero__bullets {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    max-width: 540px;
}

.op-hero__bullets li {
    font-size: 0.98rem;
    color: rgba(245, 245, 240, 0.85);
    padding: 0.4rem 0 0.4rem 1.5rem;
    position: relative;
    line-height: 1.5;
}

.op-hero__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 14px;
    height: 2px;
    background: var(--op-gold);
}

@media (max-width: 768px) {
    .op-hero {
        padding: 7rem 0 4rem;
    }

    .op-hero--page {
        padding: 6.5rem 0 3rem;
    }
}

/* ----- .op-section-rule — section separator
   Thin warm-cream rule used between adjacent same-cream
   sections. Sparingly. */
.op-section-rule {
    height: 1px;
    background: var(--op-rule);
    border: 0;
    margin: 0;
}

/* ----- .op-final-cta — designed final CTA block
   Replaces the universal .cta-section pattern. Per-page
   modifiers vary the visual moment (watermark, accent,
   structured columns). */
.op-final-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--op-navy) 0%, var(--op-navy-deep) 100%);
    color: #FFFFFF;
    padding: 6rem 0;
    text-align: center;
}

.op-final-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
}

.op-final-cta .op-eyebrow {
    color: var(--op-gold);
}

.op-final-cta .op-display {
    color: #FFFFFF;
    margin-bottom: 1.25rem;
}

.op-final-cta p {
    color: rgba(245, 245, 240, 0.85);
    margin: 0 auto 2rem;
    font-size: 1.0625rem;
}

.op-final-cta--cream {
    background: var(--op-cream-light);
    color: var(--op-charcoal);
}

.op-final-cta--cream .op-display {
    color: var(--op-navy);
}

.op-final-cta--cream p {
    color: var(--op-slate);
}

/* ----- .op-pricing-card — elevated pricing tier
   Replaces .pricing-tier on Publisher and Business Owner
   pages where we want a designed treatment. Featured
   variant gets a gold accent border, MOST POPULAR eyebrow,
   slightly larger hierarchy. */
.op-pricing-card {
    background: #FFFFFF;
    border: 1px solid var(--op-rule);
    border-top: 3px solid var(--op-rule-soft);
    padding: 2.5rem 2.25rem;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.op-pricing-card:hover {
    box-shadow: 0 12px 36px rgba(10, 22, 40, 0.1);
    transform: translateY(-2px);
}

.op-pricing-card--featured {
    border-top: 3px solid var(--op-gold);
    box-shadow: 0 8px 32px rgba(10, 22, 40, 0.08);
}

.op-pricing-card--featured::before {
    content: "Most Popular";
    position: absolute;
    top: -12px;
    left: 2rem;
    background: var(--op-gold);
    color: var(--op-navy);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: 2px;
}

.op-pricing-card__name {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-navy);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.op-pricing-card__price {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--op-gold);
    line-height: 1;
    margin: 0 0 0.25rem;
}

.op-pricing-card__terms {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--op-slate);
    margin: 0 0 1.5rem;
}

.op-pricing-card__desc {
    font-size: 0.98rem;
    color: var(--op-charcoal);
    line-height: 1.65;
    margin: 0 0 1.5rem;
    max-width: none;
}

.op-pricing-card__includes-label {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--op-gold);
    margin: 0 0 0.875rem;
}

.op-pricing-card__list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.op-pricing-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.95rem;
    color: var(--op-charcoal);
    line-height: 1.5;
}

.op-pricing-card__list li::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4943D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.op-pricing-card .btn,
.op-pricing-card .op-cta-button {
    align-self: flex-start;
    margin-top: auto;
}

/* ----- Header eyebrow bar — tiny brand presence above logo
   Optional eyebrow row pinned above the existing site-header
   that matches the framework page's quiet brand presence. */
.op-header-eyebrow {
    background: var(--op-navy);
    color: var(--op-gold);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.45rem 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.op-header-eyebrow a {
    color: var(--op-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.op-header-eyebrow a:hover {
    color: #FFFFFF;
}

body:has(.op-header-eyebrow) .site-header {
    top: 32px; /* push fixed header below the eyebrow on desktop */
    transition: top 0.2s ease, box-shadow 0.3s ease;
}

/* Once scrolled past the eyebrow, snap the header flush to the
   viewport top so we don't get a "floating" gap above the nav. */
body:has(.op-header-eyebrow) .site-header.site-header--scrolled {
    top: 0;
}

@media (max-width: 768px) {
    .op-header-eyebrow {
        font-size: 0.62rem;
        padding: 0.35rem 0.75rem;
        letter-spacing: 0.16em;
    }

    body:has(.op-header-eyebrow) .site-header {
        top: 26px;
    }

    body:has(.op-header-eyebrow) .site-header.site-header--scrolled {
        top: 0;
    }
}

/* ----- Footer revisions — designed footer
   Augments .site-footer rather than replacing it — the
   existing rules still apply, but these add a designed
   header strip with eyebrow + framework CTA. */
.site-footer .op-footer-mark {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    color: var(--op-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.78rem;
    margin: 0 0 0.6rem;
    font-weight: 600;
}

.site-footer .op-footer-feature {
    border-top: 1px solid rgba(196, 148, 61, 0.25);
    padding-top: 2.5rem;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.site-footer .op-footer-feature__copy {
    max-width: 540px;
}

.site-footer .op-footer-feature__copy h4 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.4rem;
    color: #FFFFFF;
    margin: 0 0 0.4rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.site-footer .op-footer-feature__copy p {
    color: rgba(245, 245, 240, 0.78);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    margin: 0;
}

.site-footer .op-footer-feature .op-cta-button {
    flex-shrink: 0;
}

/* ----- Mobile-first design utilities
   Per-page mobile design moments. Apply on the page template
   to opt in to a specific mobile treatment. */
.op-mobile-cta-sticky {
    /* Reserved for a future sticky-mobile-CTA implementation;
       wired here so theme upgrades don't lose the hook. */
}

@media (max-width: 768px) {
    .op-mobile-typography-rescale .op-display {
        font-size: clamp(1.85rem, 7vw, 2.5rem);
    }

    .op-mobile-typography-rescale .op-subtitle {
        font-size: 1.05rem;
    }
}

/* ----- Universal interaction states
   Apply to any .btn that doesn't already have a defined hover.
   Adds the framework page's translateY(-1px) lift. */
.btn--primary,
.btn--white,
.btn--navy {
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary:hover,
.btn--white:hover,
.btn--navy:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(10, 22, 40, 0.14);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 148, 61, 0.4);
}

/* ----- .op-section padding utility (8px grid)
   Brand-kit-spec'd 80px desktop section padding. Use on
   sections that aren't already inside .section. */
.op-section {
    padding: 5rem 0;
}

@media (min-width: 1024px) {
    .op-section {
        padding: 80px 0;
    }
}

/* ----- Safety: disable values-grid heavy borders on pages
   that adopt op-bars-grid. Prevents accidental double-bordering
   when a template still has a values-grid sibling. */
.op-bars-grid + .values-grid,
.values-grid + .op-bars-grid {
    margin-top: 4rem;
}

/* ========================================
   LEGAL PAGE (Terms of Service, Privacy, Cookie Policy)
   Added 2026-04-29 — Senior Director of UX

   Goals:
   - Quiet, sober tone — legal pages should not market.
   - Generous line-length, comfortable reading rhythm.
   - Sticky in-page TOC on desktop (>=1024px) so any clause
     stays one click away.
   - Numbered headings with anchor-friendly scroll-margin so
     direct links (e.g., #section-9) don't get hidden behind
     a sticky header in the future.
   - WCAG 2.2 AA contrast on every text-on-background pair.
   - Keyboard focus visible on all TOC links.
   ======================================== */

.op-hero--legal {
    padding: 4rem 0 3rem;
}

.op-legal-hero__copy {
    max-width: 760px;
}

.op-legal-hero__meta {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    color: rgba(245, 245, 240, 0.85);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.op-legal-hero__meta li {
    /* Keep each label:value pair on its own line. Long values
       (the LLC line and the email address) no longer cause
       awkward orphan-line wraps. */
    overflow-wrap: anywhere;
}

.op-legal-hero__meta-label {
    display: inline-block;
    min-width: 5.25rem;
    font-weight: 600;
    color: rgba(245, 245, 240, 0.95);
    /* Aligns the values into a soft column on desktop. */
}

.op-legal-hero__meta a {
    color: #E8C36F;
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Allows long email tokens to break gracefully on narrow
       viewports instead of pushing the line. */
    overflow-wrap: anywhere;
}

.op-legal-hero__meta a:hover,
.op-legal-hero__meta a:focus-visible {
    color: #FFFFFF;
}

@media (max-width: 480px) {
    .op-legal-hero__meta-label {
        min-width: 0;
        margin-right: 0.35rem;
    }
}

.legal-page {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
}

.legal-page__toc {
    background: #FFFFFF;
    border: 1px solid #E5E0D7;
    border-left: 3px solid #C4943D;
    border-radius: 2px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
}

.legal-page__toc-title {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #C4943D;
    margin: 0 0 1rem;
}

.legal-page__toc-list {
    list-style: decimal inside;
    padding: 0;
    margin: 0;
    columns: 1;
    column-gap: 2rem;
    font-size: 0.95rem;
    line-height: 1.7;
}

.legal-page__toc-list li {
    margin-bottom: 0.25rem;
    break-inside: avoid;
    color: #5A6B7A;
}

.legal-page__toc-list a {
    color: #162D50;
    text-decoration: none;
    transition: color 0.15s ease;
}

.legal-page__toc-list a:hover {
    color: #C4943D;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-page__toc-list a:focus-visible {
    outline: 2px solid #C4943D;
    outline-offset: 2px;
    border-radius: 2px;
}

.legal-page__content {
    background: #FFFFFF;
    padding: 3rem 2.5rem;
    border: 1px solid #E5E0D7;
    border-radius: 2px;
    max-width: none;
}

.legal-page__intro {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #2D2D2D;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #E5E0D7;
}

.legal-page__section {
    /* Anchor-jump padding so direct links land cleanly under any
       future sticky header without burying the heading. */
    scroll-margin-top: 2rem;
    padding-top: 1.5rem;
}

.legal-page__section + .legal-page__section {
    border-top: 1px solid #F0EDE6;
    margin-top: 1rem;
}

.legal-page__section h2 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #0A1628;
    margin: 0 0 1rem;
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
}

.legal-page__num {
    color: #C4943D;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    min-width: 1.6rem;
}

.legal-page__section p {
    font-size: 1rem;
    line-height: 1.75;
    color: #2D2D2D;
    margin-bottom: 1rem;
    max-width: none;
}

.legal-page__section a {
    color: #B87333;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-page__section a:hover,
.legal-page__section a:focus-visible {
    color: #0A1628;
}

.legal-page__footer-note {
    margin-top: 3rem;
    padding: 1.5rem 1.75rem;
    background: #FAF8F5;
    border-left: 3px solid #C4943D;
    border-radius: 0 2px 2px 0;
}

.legal-page__footer-note p {
    margin: 0;
    color: #2D2D2D;
    font-size: 0.98rem;
    line-height: 1.7;
}

/* Sticky TOC on desktop — TOC sits in left rail, content
   flows in right rail. Below 1024px the TOC reverts to a
   normal block above the content (mobile source-order
   stays correct: TOC -> content). */
@media (min-width: 1024px) {
    .legal-page {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 3rem;
        align-items: start;
    }

    .legal-page__toc {
        position: sticky;
        top: 2rem;
        margin-bottom: 0;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }

    .legal-page__content {
        padding: 3.5rem 3rem;
    }
}

@media (max-width: 640px) {
    .op-hero--legal {
        padding: 3rem 0 2rem;
    }

    .legal-page__toc {
        padding: 1.25rem 1.25rem;
    }

    .legal-page__content {
        padding: 2rem 1.25rem;
    }

    .legal-page__section h2 {
        font-size: 1.2rem;
    }
}

/* ========================================
   FOOTER LEGAL LINKS STRIP
   Added 2026-04-29 — extends .footer-bottom with a
   middle-aligned legal-links nav. Standard pattern;
   matches the framework landing page treatment.
   ======================================== */

.footer-bottom--with-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    row-gap: 0.75rem;
}

.footer-bottom__copy {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    flex: 0 1 auto;
}

.footer-legal-links a {
    font-size: 0.8125rem;
    color: rgba(245, 245, 240, 0.7);
    text-decoration: none;
    transition: color 0.15s ease;
    padding: 0.25rem 0;
    /* Min 44x44 touch target via padding on parent flex row */
}

.footer-legal-links a:hover {
    color: #FFFFFF;
}

.footer-legal-links a:focus-visible {
    outline: 2px solid #C4943D;
    outline-offset: 2px;
    border-radius: 2px;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .footer-bottom--with-legal {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-legal-links {
        order: 2;
    }
}