/* =========================================================
   CMO CONSULTING PAGE — section-scoped styles only
   All selectors prefixed with .cmo-* (per CLAUDE.md no-cross-section rule).
   The rebranded podcast band reuses .podcast/.podcast-grid from podcast.css;
   any CMO-only override goes under .cmo-podcast or .cmo-page below.
   ========================================================= */

/* ===== HEADER (page-scoped — light variant) ===== */
.cmo-page .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }

/* ===== HERO =====
   Full-bleed team photo as background. Soft white veil tints the image so
   the headline + body sit clearly on top. Header (.site-header--light) is
   absolute over the top edge of the section. */
.cmo-hero {
    position: relative;
    background-color: var(--clr-cream);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 28%;
    overflow: hidden;
    padding: 220px 0 120px;
    min-height: 720px;
}

.cmo-hero-veil {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    z-index: 0;
}

.cmo-hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 clamp(24px, 6vw, 80px);
}

.cmo-hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 4.3vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--clr-navy);
    margin: 0 0 26px;
    max-width: 880px;
}

.cmo-hero-title .line { display: block; }
.cmo-hero-sub .line { display: block; }

/* Lavender-blue underline on specified lines (rule 5 from feedback) */
.cmo-hero-underline {
    text-decoration: underline;
    text-decoration-color: #b2baff;
    text-decoration-thickness: 5px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.cmo-hero-sub {
    max-width: 820px;
    margin: 0 0 36px;
}

/* Hero CTA — taller pill */
.cmo-hero .btn-red {
    padding: 22px 34px;
}

/* ===== STATEMENT ===== */
.cmo-statement {
    background-color: #e8e9ff;
    background-image: url('../assets/images/2x/banded-bg@2x.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: var(--section-py-lg) 0;
    text-align: center;
}

.cmo-statement-headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.25vw, 3.75rem);
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: var(--clr-navy);
    max-width: 1040px;
    margin: 0 auto;
}

.cmo-statement-headline .line { display: block; }

/* ===== LISTEN (left text + bullets / right photo) ===== */
.cmo-listen {
    background: #ffffff;
    padding: var(--section-py) 0;
    position: relative;
}

/* Repeating decorative shape divider at the section's bottom edge.
   background-size at 50% guarantees ≥2 repeats horizontally; bottom offset
   nudges past the subpixel aliasing line that shows at exactly 0. */
.cmo-listen::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 18px;
    background-image: url('../assets/images/1x/shape-border.png');
    background-repeat: repeat-x;
    background-size: auto 18px;
    background-position: left center;
    pointer-events: none;
}

.cmo-listen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.cmo-listen-text { max-width: 540px; }

/* Excludes the two opening lines (.cmo-listen-lede / .cmo-listen-second),
   which use the .section-sublede typography from style.css. */
.cmo-listen-text p:not(.cmo-listen-lede):not(.cmo-listen-second) {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--clr-navy);
    margin-bottom: 18px;
    letter-spacing: 1.2px;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.cmo-listen-text p.cmo-listen-lede,
.cmo-listen-text p.cmo-listen-second {
    margin-bottom: 26px;
}

.cmo-listen-eyebrow {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
}
.cmo-listen-eyebrow strong { font-weight: 500; }

.cmo-listen-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 22px;
}

.cmo-listen-list li {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--clr-navy);
    margin-bottom: 4px;
    letter-spacing: 1.2px;
}

.cmo-listen-image {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 32px;
    overflow: hidden;
}

.cmo-listen-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ===== CLARITY CONSULTING ===== */
.cmo-clarity {
    background: #ffffff;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.cmo-clarity-grid,
.cmo-clarity-content { background: #ffffff; }

.cmo-clarity-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 0;
    align-items: stretch;
    /* Full-bleed grid (no container) — image fills left edge-to-edge,
       text column is slightly wider so the body copy fits on 3 lines
       per paragraph as designed. */
}

/* Photo flush top + bottom of section (no aspect-ratio constraint, fills row) */
.cmo-clarity-image {
    overflow: hidden;
    border-radius: 0;
    align-self: stretch;
    min-height: 540px;
}

/* Both the legacy <img> and the new <video> fill the frame and crop with
   object-fit:cover so swapping img→video doesn't change the visible
   geometry of the clarity section. */
.cmo-clarity-image img,
.cmo-clarity-image .cmo-clarity-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

.cmo-clarity-content {
    max-width: 720px;
    padding: var(--section-py) clamp(24px, 4vw, 56px) var(--section-py) clamp(40px, 5vw, 64px);
    align-self: center;
}

.cmo-clarity-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.2vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: var(--clr-navy);
    text-transform: uppercase;
    margin: 0 0 22px;
}

.cmo-clarity-title .line { display: block; }

.cmo-clarity-content p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 18px;
    color: var(--clr-navy);
    letter-spacing: 1.2px;
}

/* Yellow CTA — explicit white text + roomier padding */
.cmo-clarity-content .btn {
    margin-top: 14px;
    color: #fff;
    padding: 18px 36px;
    font-weight: 500;
}
.cmo-clarity-content .btn:hover { color: #fff; }

/* ===== WHAT'S INCLUDED ===== */
.cmo-included {
    position: relative;
    background-color: var(--clr-cream);
    background-image: url('../assets/images/cmo-included-pattern.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: var(--section-py) 0 var(--section-py-lg);
    overflow: hidden;
}

.cmo-included-container {
    position: relative;
    z-index: 1;
}

.cmo-included-header {
    text-align: center;
    margin-bottom: 44px;
}

.cmo-included-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.6rem, 4.5vw, 4rem);
    line-height: 1.05;
    color: var(--clr-navy);
    margin-bottom: 10px;
    display: inline-block;
}

/* Yellow brushstroke under "What's Included" */
.cmo-included-title .fx-included {
    position: relative;
    display: inline-block;
    font-weight: 500;
    padding: 0 0.05em;
}
.cmo-included-title .fx-included::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: -0.1em;
    height: 0.3em;
    background-image: url('../assets/images/marketing-effect.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: -1;
}

.cmo-included-sub {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.1;
    color: var(--clr-navy);
}

.cmo-included-card {
    background: #fff;
    border-radius: 22px;
    max-width: 725px;
    margin: 0 auto;
    padding: clamp(32px, 3.5vw, 48px) clamp(24px, 4vw, 56px);
    box-shadow: 0 4px 24px rgba(26, 31, 54, 0.04);
}

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

.cmo-included-list li {
    padding: 14px 0;
    text-align: center;
}

.cmo-included-list li:first-child { padding-top: 4px; }
.cmo-included-list li:last-child { padding-bottom: 4px; }

.cmo-included-list h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.2rem, 1.5vw, 1.4rem);
    line-height: 1.2;
    color: var(--clr-navy);
    margin-bottom: 6px;
}

.cmo-included-list p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--clr-navy);
    max-width: 440px;
    margin: 0 auto;
    letter-spacing: 0.6px;
}

.cmo-included-totals {
    margin-top: 36px;
    display: flex;
    justify-content: center;
}

.cmo-included-totals-svg {
    width: 100%;
    max-width: 540px;
    height: auto;
}

/* ===== HOW TO GET STARTED — 3 colored circles =====
   Background is a light periwinkle (matches the brand's soft blue band).
   Each step stacks: STEP eyebrow → serif title → colored brushstroke
   underline → solid colored circle holding only body copy in white. */
.cmo-steps {
    background: #ebeefc;
    padding: var(--section-py-lg) 0 var(--section-py);
}

.cmo-steps-container { text-align: center; }

.cmo-steps-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.1;
    color: var(--clr-navy);
    margin-bottom: 48px;
}

.cmo-steps-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
    max-width: 1180px;
}

.cmo-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cmo-step-num {
    font-size: 0.78rem;
    color: var(--clr-navy);
    margin-bottom: 10px;
    letter-spacing: 0.18em;
}

/* Eyebrow + title bottom-align together inside a fixed-height slot so the
   "Step X" eyebrow always sits directly above the title's first line
   (regardless of how many lines each title needs), and the underline that
   follows lands on the same horizontal axis across all 3 steps. */
.cmo-step-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Font-size mirrors .cmo-step-title so the em-based min-height below
       scales with title size across breakpoints. */
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1;
    /* Reserve room for the tallest title (3 lines) + eyebrow + 10px gap */
    min-height: calc(3em + 0.78rem + 10px);
    margin-bottom: 14px;
}

.cmo-step-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1;
    color: var(--clr-navy);
    margin: 0;
    text-align: center;
}
.cmo-step-title .line { display: block; }

/* Brushstroke-style underline beneath the title — colored per step */
.cmo-step-underline {
    display: block;
    width: 140px;
    height: 6px;
    border-radius: 3px;
    margin: 0 0 28px;
}
.cmo-step--yellow .cmo-step-underline { background: #d6a017; }
.cmo-step--blue   .cmo-step-underline { background: #8090ff; }
.cmo-step--red    .cmo-step-underline { background: var(--clr-red); }

.cmo-step-circle {
    width: 340px;
    height: 340px;
    max-width: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 78px;
    border: 1px solid #000;
}

.cmo-step--yellow .cmo-step-circle { background: #d6a017; }
.cmo-step--blue   .cmo-step-circle { background: #8090ff; }
.cmo-step--red    .cmo-step-circle { background: var(--clr-red); }

.cmo-step-body {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: #fff;
    max-width: 185px;
    letter-spacing: 0.3px;
}

.cmo-steps-cta { margin-top: 12px; }

/* ===== STRATEGIC PARTNER ===== */
.cmo-partner {
    background: #fff;
    padding: var(--section-py) 0 var(--section-py-lg);
    position: relative;
    overflow: hidden;
}

.cmo-partner-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
}

.cmo-partner-row {
    display: grid;
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
}

/* Row 1: headline + body in one stacked left column, photo on the right.
   align-items:center vertically centers the whole stack with the photo. */
.cmo-partner-row--top {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.cmo-partner-text-stack { max-width: 540px; }

.cmo-partner-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 4.25vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--clr-navy);
    margin: 0 0 28px;
}
.cmo-partner-title .line { display: block; }

/* Excludes the eyebrow line (.cmo-partner-eyebrow), which uses the
   .section-sublede typography from style.css. */
.cmo-partner-text-stack p:not(.cmo-partner-eyebrow) {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 16px;
    letter-spacing: 0.4px;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.cmo-partner-eyebrow {
    margin-bottom: 18px;
}
.cmo-partner-eyebrow strong { font-weight: 500; }

/* Photo wrappers — rounded radius matches the listen section pattern */
.cmo-partner-image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: visible; /* decor shapes can extend past the photo edge */
    border-radius: 32px;
}

/* Top photo is shorter — squarer aspect ratio so it doesn't tower over the text */
.cmo-partner-image--top { aspect-ratio: 1 / 1; }

.cmo-partner-image > img:not(.cmo-partner-decor),
.cmo-partner-image-frame > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 32px;
    display: block;
}

/* Inner clipping frame — lets us scale/zoom the photo to crop unwanted
   detail (e.g. the iMac cord on the top portrait) while keeping the
   parent's overflow:visible so .cmo-partner-decor shapes can extend
   beyond the photo edge. */
.cmo-partner-image-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 32px;
}

/* Zoom in on the top portrait so the iMac stand + white power cable
   crossing the desk drop out of frame. Anchored top-center so Kathy's
   face stays at roughly the same vertical position; bottom (where the
   cord is) gets cropped. */
.cmo-partner-image--top .cmo-partner-image-frame > img {
    transform: scale(1.18);
    transform-origin: 58% top;
}

.cmo-partner-row--bottom {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.cmo-partner-image--bottom { aspect-ratio: 4 / 5; }

/* Decor shapes */
.cmo-partner-decor {
    position: absolute;
    pointer-events: none;
}

/* Solid red circle on the bottom-left edge of the top photo */
.cmo-partner-decor--red-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--clr-red);
    bottom: 22%;
    left: -28px;
}

/* Lavender-blue half-circle, rotated, sitting between the two rows on the right */
.cmo-partner-decor--blue-half {
    position: absolute;
    width: 70px;
    height: 70px;
    background: #8090ff;
    border-radius: 70px 0 0 70px;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 0;
}

/* Inverted blue triangle (CSS-only) — sits on the photo's right edge,
   vertically centered, half on / half off the photo. Blue matches the
   "Get In Touch" CTA in the steps section above (#0152f5). */
.cmo-partner-decor--tri {
    width: 0;
    height: 0;
    border-left: 44px solid transparent;
    border-right: 44px solid transparent;
    border-top: 70px solid #0152f5;
    top: 50%;
    right: -44px;
    transform: translate(0, -50%);
}

/* Yellow striped sphere — bottom-left edge of the bottom photo */
.cmo-partner-decor--yellow-stripe {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    bottom: -28px;
    left: -36px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--clr-yellow) 0,
            var(--clr-yellow) 6px,
            transparent 6px,
            transparent 11px
        );
}

.cmo-partner-bullets { max-width: 520px; }

.cmo-partner-bullets-eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--clr-navy);
    margin-bottom: 14px;
    letter-spacing: 0.4px;
}

.cmo-partner-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 22px;
}
.cmo-partner-list li {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--clr-navy);
    margin-bottom: 4px;
    letter-spacing: 0.4px;
}

.cmo-partner-close {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--clr-navy);
    margin-bottom: 22px;
    letter-spacing: 0.4px;
}

/* ===== WINS TESTIMONIAL =====
   Light periwinkle band with a giant faint W-squiggle SVG behind the
   quote, large red curly quote glyphs flanking the body copy. */
.cmo-wins {
    position: relative;
    background: #ebeefc;
    padding: var(--section-py-lg) 0 var(--section-py);
    overflow: hidden;
}

/* SVG squiggle backdrop — covers the section width, faded behind everything */
.cmo-wins::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../assets/images/SVG/squigly-quote.svg');
    background-repeat: no-repeat;
    background-size: 140% auto;
    background-position: center center;
    pointer-events: none;
    z-index: 0;
}

.cmo-wins-stripe { display: none; } /* legacy — superseded by ::before */

.cmo-wins-container {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 960px;
}

.cmo-wins-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 2.7vw, 2.3rem);
    line-height: 1.15;
    color: var(--clr-navy);
    margin-bottom: 56px;
    white-space: nowrap;
}

.cmo-wins-quote {
    position: relative;
    margin: 0 auto 28px;
    padding: 0 clamp(28px, 5vw, 60px);
    max-width: 920px;
}

/* Large red curly quote marks */
.cmo-wins-mark {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(5.5rem, 10vw, 9rem);
    line-height: 1;
    color: var(--clr-red);
}
.cmo-wins-mark--open  { left: 0; top: -28px; }
.cmo-wins-mark--close { right: 0; bottom: -70px; }

.cmo-wins-body {
    margin: 0;
    border: 0;
    padding: 0;
}

/* Typography from .section-sublede (style.css). No layout overrides needed. */

.cmo-wins-attr {
    display: block;
    font-size: 0.7rem;
    margin-top: 14px;
    color: var(--clr-navy);
    letter-spacing: 0.18em;
}

.cmo-wins-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
}
.cmo-wins-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--clr-navy);
    opacity: 0.7;
}
.cmo-wins-dots span:first-child,
.cmo-wins-dots span:last-child {
    width: 0;
    height: 0;
    background: transparent;
    border-radius: 0;
    opacity: 1;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.cmo-wins-dots span:first-child { border-right: 8px solid var(--clr-navy); }
.cmo-wins-dots span:last-child  { border-left: 8px solid var(--clr-navy); }

/* ===== CLOSE / CTA (3 shapes left + content right) ===== */
.cmo-close {
    background: #fff;
    padding: var(--section-py-lg) 0 var(--section-py);
}

.cmo-close-grid {
    display: grid;
    grid-template-columns: 0.55fr 1fr;
    gap: clamp(48px, 7vw, 110px);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.cmo-close-shapes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
}

.cmo-close-shape { display: block; }

.cmo-close-shape--circle {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    background: var(--clr-blue);
}
.cmo-close-shape--triangle {
    width: 0;
    height: 0;
    border-left: 57px solid transparent;
    border-right: 57px solid transparent;
    border-top: 91px solid var(--clr-yellow);
}
/* Red half-circle — flat side faces RIGHT (curve bulges left) */
.cmo-close-shape--half {
    width: 52px;
    height: 104px;
    background: var(--clr-red);
    border-radius: 104px 0 0 104px;
}

.cmo-close-content {
    max-width: 540px;
}

.cmo-close-lede,
.cmo-close-question {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    line-height: 1.15;
    color: var(--clr-navy);
}

.cmo-close-lede { margin-bottom: 44px; }
.cmo-close-question { margin-bottom: 36px; }
.cmo-close-lede .line,
.cmo-close-question .line { display: block; }

/* Desktop .podcast styling is inherited wholesale from the shared podcast.css
   (homepage-spec) — no CMO override. The previous override set a Y position of
   `calc(7% + 24px)`, but since the photo uses `background-size: auto 100%` (it
   already fills the section height) the +24px only shoved it down, exposing a
   24px strip of the section background at the top. Inheriting the base rule's
   `center` Y removes that bar and keeps a single source of truth. */

/* Mobile CMO override: drop the top-banner pattern (where padding-top
   pushed all the text down past the photo) and treat the photo as a
   true full-section background. background-size: cover guarantees the
   image fills both dimensions of the section with no purple gap at top
   or bottom; bg-position chooses where Kathy sits in the visible window.
   Text content overlays the photo. The cursive "Rebranded" wordmark is
   re-shown as the podcast title and inverted to white for legibility. */
@media (max-width: 1024px) {
    .cmo-page .podcast {
        background-size: cover;
        /* Source has Kathy at source cols 100-440 (left third), empty
           lavender right two-thirds. Section is much taller than wide,
           so cover scales the image by HEIGHT, leaving the image much
           wider than the container. bg-position 8% top shifts the
           visible window so Kathy lands roughly on the right side of
           the container, leaving the empty-lavender portion of the
           photo visible on the left for the text to overlay against. */
        background-position: 8% top;
        padding: 56px 24px var(--section-py-sm);
        min-height: 0;
    }
    /* Readability overlay: darken the LEFT side of the section (where
       the white text sits) and fade to transparent on the right (where
       Kathy is) so the photo still reads. Sits between the bg image
       and the content via stacking context — content gets z-index above
       to render on top of the gradient. */
    .cmo-page .podcast::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(26, 31, 54, 0.55) 0%,
            rgba(26, 31, 54, 0.38) 55%,
            rgba(26, 31, 54, 0.12) 100%
        );
        pointer-events: none;
        z-index: 1;
    }
    .cmo-page .podcast-grid {
        position: relative;
        z-index: 2;
    }
    .cmo-page .podcast-script-img {
        display: block;
        width: clamp(180px, 52vw, 260px);
        margin: 0 0 10px 0;
        filter: brightness(0) invert(1);
    }
}
@media (max-width: 480px) {
    .cmo-page .podcast {
        background-size: cover;
        background-position: 8% top;
        padding: 48px 20px var(--section-py-sm);
        min-height: 0;
    }
}

/* =========================================================
   RESPONSIVE — 1024 / 768 / 480
   ========================================================= */

@media (max-width: 1024px) {
    /* Hero: tighter padding, lower min-height for tablet */
    .cmo-hero {
        padding: 160px 0 80px;
        min-height: 560px;
        background-position: center 30%;
    }
    .cmo-hero-veil { background: rgba(255, 255, 255, 0.55); }

    .cmo-statement { padding: var(--section-py) 0; }

    .cmo-listen-grid,
    .cmo-clarity-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .cmo-clarity-image {
        order: -1;
        aspect-ratio: 5 / 4;
        min-height: 0;
    }
    .cmo-clarity-content { padding: 48px 24px; }

    .cmo-included { padding: var(--section-py) 0; }
    .cmo-included-card { padding: 28px 22px; }
    .cmo-included-totals { grid-template-columns: 1fr; }

    .cmo-steps-list { grid-template-columns: 1fr; gap: 56px; }
    .cmo-step-circle { width: 320px; height: 320px; padding: 64px; }
    .cmo-step-head,
    .cmo-step-title { font-size: 1.6rem; }
    .cmo-step-body { font-size: 1rem; max-width: 220px; }

    .cmo-partner-row--top,
    .cmo-partner-row--bottom {
        grid-template-columns: 1fr;
    }
    .cmo-partner-image--top { order: -1; }
    .cmo-partner-image--top,
    .cmo-partner-image--bottom { aspect-ratio: 5 / 4; }

    /* The desktop "between-rows" placement of this half-circle lands mid-
       content on mobile (where rows stack), looking like a misplaced
       button. Anchor it to the section's bottom-right corner instead so
       it reads as a decorative accent. Slightly smaller too. */
    .cmo-partner-decor--blue-half {
        top: auto;
        bottom: -28px;
        right: 0;
        transform: none;
        width: 56px;
        height: 56px;
        border-radius: 56px 0 0 56px;
    }

    .cmo-close-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cmo-close-shapes { flex-direction: row; justify-content: center; }
    .cmo-close-content { margin: 0 auto; }
}

@media (max-width: 768px) {
    .cmo-hero { padding: 120px 0 64px; min-height: 480px; }
    .cmo-hero-title  { font-size: clamp(2rem, 8vw, 2.8rem); }
    .cmo-hero-sub    { font-size: clamp(1.05rem, 4vw, 1.3rem); }
    .cmo-hero-underline { text-decoration-thickness: 4px; text-underline-offset: 6px; }
    .cmo-statement-headline { font-size: clamp(2rem, 7.5vw, 2.6rem); }
    .cmo-clarity-title { font-size: clamp(2rem, 8vw, 2.8rem); }
    /* Mobile: bump h3 above the description's font-size so the header
       clearly outranks the body copy that follows it. Weight stays at the
       brand bold of 500 (per CLAUDE.md hard rule #6). */
    .cmo-included-list h3 { font-size: 1.2rem; }
    .cmo-included-list p { font-size: 0.9rem; }

    .cmo-step-circle { width: 280px; height: 280px; padding: 56px; }
    .cmo-step-head,
    .cmo-step-title { font-size: 1.45rem; }
    .cmo-step-body { font-size: 0.95rem; max-width: 200px; }

    /* Desktop locks the title to one line via white-space: nowrap. At
       tablet/phone widths that pushes the right half of the line off the
       viewport — release the nowrap so it wraps naturally. */
    .cmo-wins-title {
        white-space: normal;
        font-size: clamp(1.4rem, 5.6vw, 1.9rem);
        line-height: 1.2;
        margin-bottom: 40px;
        padding: 0 16px;
    }

    .cmo-wins-quote { padding: 0 32px; }
    .cmo-wins-mark--open  { left: -4px; }
    .cmo-wins-mark--close { right: -4px; }

    .cmo-close-shape--circle   { width: 76px; height: 76px; }
    .cmo-close-shape--triangle { border-left-width: 42px; border-right-width: 42px; border-top-width: 68px; }
    .cmo-close-shape--half     { width: 38px; height: 76px; border-radius: 76px 0 0 76px; }
}

@media (max-width: 480px) {
    .cmo-hero { padding: 110px 0 56px; min-height: 440px; }
    .cmo-hero-title { font-size: clamp(1.85rem, 9vw, 2.4rem); }
    .cmo-hero-sub { font-size: 1.05rem; }
    .cmo-statement { padding: 64px 0; }

    .cmo-included-list { padding: 0; }
    .cmo-included-list li { padding: 12px 0; }

    .cmo-step-circle { width: 260px; height: 260px; padding: 48px; }
    .cmo-step-head,
    .cmo-step-title { font-size: 1.3rem; }
    .cmo-step-body { font-size: 0.92rem; max-width: 180px; }
}