/* trc-home.css — close pixel-parity gap between pure-Gutenberg homepage 302080
 * and the live WPBakery front-end. Targets `.trc-section-*` className hooks
 * added explicitly in the block JSON so selectors match reliably.
 *
 * Live homepage target heights (from Playwright 1920×1080 viewport):
 *   Hero (alignfull cover)      : 607px
 *   Intro + 3 service cards     : 650px
 *   Services (3 image+text rows): 1951px
 *   Testimonial card            : 537px
 *   Newsletter cover            : 518px
 *   Blog releases               : ~0 (live's blog section is empty/lazy)
 *
 * Iterate by measuring with: py audit_full/pixel_compare_home.py
 */

/* ============================================================
 * GLOBAL: NEUTRALIZE THE 1170PX CONTAINER ON HOMEPAGE
 * ============================================================ */

/* Live escapes .entry-content.container via body.wpb-js-composer overrides.
 * Pure-Gutenberg doesn't have that class, so all our non-alignfull sections
 * choke at 1170px. Kill the constraint on .home only. */
body.home .entry-content.container,
body.home .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* CRITICAL: live's rows are NOT capped at 1170px — they're at 5% margin each
 * side (≈1715px on 1920 viewport). The `vc_row { margin: 0 5% }` rule comes
 * from per-page user CSS (`_wpb_post_custom_css`). Recreate that exactly.
 *
 * Gutenberg's `layout.type:constrained` wraps section content in a
 * `.wp-block-group__inner-container` div — selectors must traverse through it. */
.trc-section-intro .wp-block-group__inner-container > .wp-block-columns,
.trc-section-services .wp-block-group__inner-container > .wp-block-columns,
.trc-section-testimonial .wp-block-group__inner-container > .wp-block-columns,
.trc-section-blog .wp-block-group__inner-container > .wp-block-columns,
.trc-section-blog .wp-block-group__inner-container > .wp-block-heading,
.trc-section-blog .wp-block-group__inner-container > p {
    max-width: none;
    margin-left: 5%;
    margin-right: 5%;
}

/* Hero (.wp-block-cover.alignfull) inner columns: stretch full-width with NO
   between-column gap to match live's WPBakery layout (vc_col-sm-6 columns
   touch each other, no gap). Each column has 15px horizontal padding to
   replicate live's `.vc_column-inner { padding: 0 15px }` rule. */
.wp-block-cover.alignfull .wp-block-cover__inner-container > .wp-block-columns {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    gap: 0 !important;
}

/* Intro section row (LIFE IS WORTH SWIMMING): zero between-column gap to
   match WPBakery's vc_col-sm-2/sm-8/sm-2 layout where columns touch. */
.trc-section-intro .wp-block-group__inner-container > .wp-block-columns:first-of-type {
    gap: 0 !important;
}

/* Section 2 = .vc_section-has-fill (Section 1) + .vc_section (Section 2)
   inherits 35px top padding from WPBakery's framework rule (recreated in
   trc-baseline.css for class-soup pages but our pure-Gutenberg section
   doesn't trigger that selector). Apply directly via className. */
.trc-section-intro {
    padding-top: 35px !important;
    padding-bottom: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Live h3 element measures margin-bottom: 0 BUT the visible gap to p1 is 25px —
   comes from live's `.wpb_text_column` wrapper that surrounds h3 (the wrapper has
   margin-bottom). Pure-Gutenberg has no wrapper, so put the 25px directly on h3. */
.trc-section-intro h3.wp-block-heading {
    margin-bottom: 25px !important;
}

/* Override theme `p { font-weight: 500 }` — live measured: 400 for intro paragraphs */
.trc-section-intro .wp-block-group__inner-container > .wp-block-columns:first-of-type p {
    font-weight: 400 !important;
}

/* Live p2 element margin-bottom: 0, BUT visible bottom space inside intro_row is 45px
   (live row ends 45px after p2). The 35px wrapper margin lives on p2's `.wpb_text_column`
   wrapper. Combined with the row's 10px padding-bottom: 35 + 10 = 45 ✓ */
.trc-section-intro .wp-block-group__inner-container > .wp-block-columns:first-of-type p:last-of-type {
    margin-bottom: 35px !important;
}

/* Cards row extends 15px past section's 15px sides via negative margin to
   achieve live's 1920 row width. Live's structure: row padding 20/30 vertical +
   each card .vc_col-sm-4 has margin-top:10 / margin-bottom:10 (from WPBakery
   default column gutter). Total row height: 20 + 10 + 241 + 10 + 30 = 311 ✓.
   STG matches this by using padding 20/30 + per-card vertical margin 10/10.
   padding-left: calc(5% + 10px) replicates live's card x=125 (live's WPBakery
   `.vc_col` adds 15px L padding inset that pure-Gutenberg column doesn't have). */
.trc-section-intro .wp-block-group__inner-container > .wp-block-columns:nth-of-type(2) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 30px !important;
    padding-left: calc(5% + 10px) !important;
}

/* Arrow image wrapper: live wraps `<a><img arrow>` in `<div style="padding:10px 0">`.
   Use padding-top (not margin-top) so it DOESN'T collapse with p's margin-bottom:25
   — total visible gap = 25 (p mb) + 10 (figure pt) = 35px matching live. */
.trc-section-intro .wp-block-column.has-background .wp-block-image.is-resized:last-of-type {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 5px !important;
}

/* `.hide-on-desktop` and `.hide-on-mobile` utility classes — recreate live's
   behavior since the original WPBakery CSS no longer applies. */
@media (min-width: 992px) {
    .hide-on-desktop { display: none !important; }
}
@media (max-width: 991px) {
    .hide-on-mobile { display: none !important; }
}

/* Neutralize Gutenberg's default container constraint that comes with
 * `layout.type:constrained` (caps content at theme.json's content-size,
 * typically 620-840px). On the homepage we want full-width sections with
 * 5%-margin rows, not theme.json's narrow center column. */
body.home .trc-section-intro .wp-block-group__inner-container.is-layout-constrained > *,
body.home .trc-section-services .wp-block-group__inner-container.is-layout-constrained > *,
body.home .trc-section-testimonial .wp-block-group__inner-container.is-layout-constrained > *,
body.home .trc-section-blog .wp-block-group__inner-container.is-layout-constrained > * {
    max-width: none !important;
}

/* ============================================================
 * HERO (target 607px, currently 607px — pixel-perfect ✓)
 * ============================================================ */

body.home .entry-content .wp-block-cover.alignfull:first-of-type {
    min-height: 607px !important;
}

/* ============================================================
 * WATCH VIDEO BUTTON (matches live within 2px ✓)
 * ============================================================ */

.trc-watch-video-btn .wp-block-button__link {
    line-height: 21px;
    text-decoration: none;
    transition: background-color .2s;
    display: inline-block;
    position: relative;
}

/* KAAM-33972 (2026-07-29) — Play-icon via inline SVG mask (was Unicode
   U+25B6 ▶ which renders as colored emoji on iOS Safari mobile). Same
   pattern as .trc-pricing-btn::after — currentColor inherit + SVG mask
   is font-independent and always renders as a monochrome triangle.
   Matches LIVE's vc-oi-play glyph appearance exactly. */
.trc-watch-video-btn .wp-block-button__link::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M361 215C375.3 223.8 384 239.3 384 256s-8.7 32.2-23 41l-256 160c-15.4 9.2-34.1 9.7-49.4 1.6S32 434.4 32 416L32 96c0-17.7 8.9-33.4 24.6-42.4S91.2 45.4 106.6 54.6L361 215z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M361 215C375.3 223.8 384 239.3 384 256s-8.7 32.2-23 41l-256 160c-15.4 9.2-34.1 9.7-49.4 1.6S32 434.4 32 416L32 96c0-17.7 8.9-33.4 24.6-42.4S91.2 45.4 106.6 54.6L361 215z'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

.trc-watch-video-btn .wp-block-button__link:hover {
    background-color: #b8281d !important;
}

/* ============================================================
 * INTRO + 3 SERVICE CARDS (target 650px)
 * ============================================================ */

/* Removed stale .trc-section-intro padding-top: 90px / padding-bottom: 47px rule.
   Replaced by the 35px / 0 / 15px x2 rule above (matches live .vc_section). */

.trc-section-intro > .wp-block-columns:first-child {
    padding-bottom: 20px;
}

.trc-section-intro h3.wp-block-heading {
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Service cards inside intro section: 3 red cards in a 1920-wide row.
   Live's structure: column (transparent, 10px padding) > inner-div with
   margin:20px on each side, red bg, 10px radius, 15px inner padding.
   We replicate via column-level margin so cards have visible gap between them
   AND each card has the proper inset look (10px radius + padding). */
.trc-section-intro .wp-block-group__inner-container > .wp-block-columns:nth-of-type(2) {
    max-width: none !important;
    margin-left: 0 !important;  /* extend 15px past section padding (was 0) */
    margin-right: 0 !important;
    gap: 0 !important;
}

/* Cards: live measures 537x241 at desktop, scales to 33.33% at smaller widths,
   stacks to 100% at <992px (mobile). Apply 537px lock ONLY at desktop ≥1700px;
   below that let Gutenberg's natural 33.33% column width take over. */
.trc-section-intro .wp-block-column.has-background {
    flex-shrink: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding: 0 15px !important;
    border-radius: 10px !important;
    min-height: 241px;
    box-sizing: border-box;
}

@media (min-width: 1700px) {
    .trc-section-intro .wp-block-column.has-background {
        flex-basis: 537px !important;
        width: 537px !important;
        max-width: 537px !important;
    }
}

/* Mobile stack: live's WPBakery `vc_col-sm-4` only stacks at ≤479px (xs breakpoint),
   stays 3-up from 480px up. Cards take full-width minus padding at this point. */
@media (max-width: 479px) {
    .trc-section-intro .wp-block-group__inner-container > .wp-block-columns:nth-of-type(2) {
        flex-direction: column !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    .trc-section-intro .wp-block-column.has-background {
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* The INNER 2-col row inside each card (feat-img | icon+p+arrow) must NOT stack
   even at mobile — live keeps the 50/50 split at every viewport down to 320px.
   Gutenberg's default stacks inner columns at <782px, so override. */
@media (max-width: 781px) {
    .trc-section-intro .wp-block-column.has-background > .wp-block-columns {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
    .trc-section-intro .wp-block-column.has-background > .wp-block-columns > .wp-block-column {
        flex-basis: 0 !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
    }
}

/* Right inner column of each card (contains icon img + p + arrow img):
   live's `.vc_column_text` sets font-size:22 / line-height:1.7 / color:#fff
   cascade — the icon + arrow IMG inherit this. Pure-Gutenberg has no cascade
   on the wrapper, so apply it on the right inner column (2nd column inside card). */
.trc-section-intro .wp-block-column.has-background > .wp-block-columns > .wp-block-column:nth-child(2) {
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
}

/* Card text content: live uses TitleCase + normal weight + larger font.
   Live measured: p margin-bottom: 25px (exact). The extra 10px wrapper margin
   doesn't stack via collapse — comes from arrow wrapper padding-top instead. */
.trc-section-intro .wp-block-column.has-background p {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

/* 15px top gap from card top to inner content row — replicates the wrapper
   margins that live had via `.wpb_text_column.vc_custom_NNN { margin-top: 15px }`
   on the FIRST text wrapper inside each card. In pure-Gutenberg the wrapper
   doesn't exist, so we push the entire inner columns row down via margin-top
   instead of relying on a per-image margin (the previous approach pushed only
   the icon down, leaving the feat-img flush with the card top). */
.trc-section-intro .wp-block-column.has-background > .wp-block-columns {
    margin-top: 15px !important;
}

/* Icon image above the text: no extra margin needed now that the parent
   columns row carries the 15px top offset. Keep this rule to make sure
   the icon doesn't pick up theme defaults. */
.trc-section-intro .wp-block-column.has-background .wp-block-image.is-resized:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Icon (small) above the card text */
.trc-section-intro .wp-block-column.has-background .wp-block-image.is-resized {
    margin-top: 0;
    margin-bottom: 0;
}

/* Feature image (left column photo): live applies border-radius:10px via
   `.feat-img` class. Pure-Gutenberg image doesn't have that class, so
   target by position — first image in the card's inner first column. */
.trc-section-intro .wp-block-column.has-background .wp-block-columns > .wp-block-column:first-child .wp-block-image img {
    border-radius: 10px;
}

.trc-section-intro .wp-block-column.has-background {
    transition: transform .2s;
}

/* ============================================================
 * SERVICES — 3 IMAGE+TEXT ROWS (target 1951px)
 * Live has 3 rows of ~650px each. Pure-Gutenberg matches structurally
 * but lacks the WPBakery 35px row gap + 35px column-inner padding-top.
 * ============================================================ */

.trc-section-services {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Per-row vertical padding matching live's vc_custom_NNN rules:
   - Row 1 (Online Membership): vc_custom_1741217277221 = padding 80px 0 50px 0
   - Row 2 (Private Coaching hide-on-desktop): vc_custom_1741877840658 = 80px 0 50px 0
   - Row 3 (Private Coaching desktop): vc_custom_1741877791202 = 50px 0 50px 0
   - Row 4 (Swim Camps): vc_custom_1741218070127 = 50px 0 30px 0
   Pure-Gutenberg doesn't inherit these per-page postmeta rules, so apply per-row. */
.trc-section-services .wp-block-group__inner-container > .wp-block-columns:nth-of-type(1) {
    padding-top: 80px;
    padding-bottom: 50px;
}
.trc-section-services .wp-block-group__inner-container > .wp-block-columns:nth-of-type(2) {
    padding-top: 50px;
    padding-bottom: 50px;
}
.trc-section-services .wp-block-group__inner-container > .wp-block-columns:nth-of-type(3) {
    padding-top: 50px;
    padding-bottom: 30px;
}

.trc-section-services .wp-block-group__inner-container > .wp-block-columns {
    margin-bottom: 0;
}

.trc-section-services .wp-block-group__inner-container > .wp-block-columns:last-child {
    margin-bottom: 0;
}

.trc-section-services > .wp-block-columns:last-child {
    margin-bottom: 0;
}

.trc-section-services .wp-block-column.is-vertically-aligned-center {
    padding-top: 0;
    padding-bottom: 0;
}

/* Inner content alignment: heading -> sub-heading -> paragraph -> button stack */
.trc-section-services h5.wp-block-heading + h3.wp-block-heading {
    margin-top: 6px;
}

.trc-section-services h3.wp-block-heading + p.wp-block-paragraph,
.trc-section-services h3.wp-block-heading + p {
    margin-top: 12px;
}

.trc-section-services p + .wp-block-buttons {
    margin-top: 20px;
}

/* ============================================================
 * SECTION 3 — Section-by-section pure-Gutenberg parity (v77+)
 *
 * Live's section wrapper extends 15px beyond the 5%-margin row via
 * `.vc_section { margin-left: -15px; padding: 0 15px }`. STG mirrors
 * by setting section padding to 0 (already at 1920 width).
 * ============================================================ */

/* Service-row images: render at natural 768x512 max, scale DOWN with viewport
   (max-width: 100%) so smaller screens shrink the image proportionally.
   The `width="768" height="512"` HTML attrs preserve the aspect ratio → no CLS.
   Figure margin-bottom: 35 matches live's `.wpb_single_image { margin-bottom: 35 }`. */
.trc-section-services .trc-services-image-col .wp-block-image {
    margin: 0 0 35px 0 !important;
    text-align: left;
}
.trc-section-services .trc-services-image-col .wp-block-image img {
    width: 100% !important;
    max-width: 768px !important;
    height: auto !important;
    display: block !important;
}

/* Row gap: live's `.vc_row` has 0 gap between its 2 columns. Override Gutenberg
   default 32px gap. */
.trc-section-services .trc-services-row {
    gap: 0 !important;
}

/* H3 title: live measured 42px / 700 / #181818 / line-height 1.2 / margin 0 */
.trc-section-services h3.wp-block-heading {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #181818 !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Task 2.10.7 S2 — prevent mid-word breaks (PERSONALIZ/ED) */
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Paragraph: live measured 16px / 400 / #181818 / line-height 1.7 / margin 25 top, 35 bottom */
.trc-section-services .trc-services-text-col p {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #181818 !important;
    line-height: 1.7 !important;
    margin-top: 25px !important;
    margin-bottom: 35px !important;
}

/* H5 subtitle: live measured 14px / 400 / #181818 / no letter-spacing / line-height 1.6 / margin-bot 25 */
.trc-section-services h5.wp-block-heading {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #181818 !important;
    line-height: 1.7 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

/* Button styling: live's vc_btn3 uses padding 18/60/18/25 (right-padded for the
   arrow ">" icon). Make sure our pure-Gutenberg button matches; inline style is
   already in block JSON. */
.trc-section-services .wp-block-button__link {
    text-decoration: none !important;
    transition: background-color .2s;
    display: inline-block;
    position: relative;
}

/* Add ">" arrow glyph after button text to match live's vc_btn3 i.vc-oi-arrow-right. */
.trc-section-services .wp-block-button__link::after {
    content: "›";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-55%);
    font-size: 22px;
    line-height: 1;
}

.trc-section-services .wp-block-button__link:hover {
    background-color: #2a323d !important;
}

/* RESPONSIVE breakpoints:
   - 768-1075: rows remain SIDE-BY-SIDE. Row 2 reverses to image-LEFT (matches live
     where the `.hide-on-desktop` alternate row is image-LEFT in that range).
   - ≤767: rows STACK vertically (image on TOP, text on BOTTOM for all rows).
   Live's WPBakery `vc_col-sm-6` stacks at <768px (sm breakpoint). */
@media (max-width: 1075px) and (min-width: 768px) {
    .trc-section-services .trc-services-row-2 {
        flex-direction: row-reverse !important;
    }
}

@media (max-width: 767px) {
    .trc-section-services .trc-services-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .trc-section-services .trc-services-row > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* All rows visually become image-TOP / text-BOTTOM on mobile. Row 2 is
       text-LEFT / image-RIGHT in markup → reverse to image-TOP. */
    .trc-section-services .trc-services-row-2 {
        flex-direction: column-reverse !important;
    }
    .trc-section-services .trc-services-image-col .wp-block-image {
        margin-bottom: 20px !important;
    }
    .trc-section-services .trc-services-image-col .wp-block-image img {
        max-width: 100% !important;
    }
    /* Fixed 30px pl/pr matches LIVE .vc_column-inner padding (was 5% =
       18.67px at m430 / 16.19px at m375, producing narrower + asymmetric content).
       LIVE content-w at m430 = 327 (col 387 - 30/30), at m375 = 277.5 (col 337.5 - 30/30).
       (2026-08-06 Nisarg: "right side spacing is less in mobile" — Option B). */
    .trc-section-services .trc-services-text-col {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    /* Zero any inherited row-right padding (Gutenberg theme.json emits
       an asymmetric right pad ~13.5px on .wp-block-columns via
       root-padding-aware alignfull settings — pushed content 13.5px left
       on STG vs LIVE 0). Higher-specificity body.home + row-1/2/3 selectors
       to beat the sitewide Gutenberg container rule. */
    body.home .trc-section-services .trc-services-row,
    body.home .trc-section-services .trc-services-row-1,
    body.home .trc-section-services .trc-services-row-2,
    body.home .trc-section-services .trc-services-row-3,
    body.home .wp-block-columns.trc-services-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Fix 1 (2026-08-06): eyebrow h5 mb 25→5 to match LIVE (5px gap between
       eyebrow "READY FOR RACE SEASON" and heading "SWIM CAMPS..."). */
    body.home .trc-section-services .trc-services-text-col h5.wp-block-heading {
        margin-bottom: 5px !important;
    }
    /* Fix 2: paragraph mt/mb 25/35 → 0/0 on mobile — LIVE has 0/0. Existing
       base rule at :435-443 sets 25/35 for desktop parity; on mobile the
       cards stack so the extra spacing bloats each card 60px unnecessarily. */
    body.home .trc-section-services .trc-services-text-col p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Fix 3: image lateral 15px inset — LIVE .wpb_single_image inside
       .vc_column-inner is padded by 15px each side (image x=36.5 on LIVE
       vs 21.5 on STG at m430 = -15px flush-left). Match via padding on the
       image col so image doesn't extend to card edge. */
    body.home .trc-section-services .trc-services-image-col .wp-block-image {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    /* Fix 3 companion: give the paragraph some breathing room from the
       button below (Gutenberg button block already has its own margin, but
       LIVE has 20px between paragraph-end and .trc-learnmore start). */
    body.home .trc-section-services .trc-services-text-col .wp-block-buttons {
        margin-top: 20px !important;
    }
    /* Reduce row-level vertical padding on mobile to avoid towering whitespace. */
    .trc-section-services .wp-block-group__inner-container > .wp-block-columns:nth-of-type(1) {
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }
    .trc-section-services .wp-block-group__inner-container > .wp-block-columns:nth-of-type(2) {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    .trc-section-services .wp-block-group__inner-container > .wp-block-columns:nth-of-type(3) {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/* Service-row images: live renders 768x512 photos at 100% column width
   with 10px border-radius (from .vc_single_image-img inheriting theme rule). */
.trc-section-services .wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.trc-section-services h5.wp-block-heading {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #d43125;
    margin-bottom: 8px;
}

/* Learn More buttons: live uses `.trc-learnmore` div with 166x60 dimensions,
   no padding, line-height creates the height, inline FA6 icon at end of text.
   Recreate exactly via CSS overrides (measured from live DevTools — no guessing). */
.trc-section-services .wp-block-button {
    width: 166px;
}

.trc-section-services .wp-block-button .wp-block-button__link {
    width: 166px !important;
    height: 60px !important;
    line-height: 60px !important;
    padding: 0 !important;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
}

/* Icon: SVG chevron-right (matches FontAwesome `fa-angle-right` shape).
   Inline data-URL avoids font dependency — WPBakery's FA bundle was the only
   FA on the site; with the plugin dequeued, we can't rely on `\f105` font glyph
   rendering. SVG works in all browsers without any external resource. */
.trc-section-services .wp-block-button .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 16px;
    margin-left: 8px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
}

.trc-section-services h3.wp-block-heading {
    margin-bottom: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.trc-section-services p.wp-block-paragraph,
.trc-section-services p {
    line-height: 1.7;
    margin-bottom: 24px;
}

.trc-section-services h5.wp-block-heading {
    text-transform: uppercase;
    margin-bottom: 8px;
}

.trc-section-services h3.wp-block-heading {
    margin-bottom: 20px;
}

/* ============================================================
 * TESTIMONIAL CARD — v78 pure-Gutenberg parity (Maggie MacNeil quote)
 * Live: section 1935x537, row padding 50/0/90/0, card padding 40/15/40/15
 *        bg #F8F8F8 radius 10, quote 30px/#181818/lh 1.7 NORMAL (not italic)
 * ============================================================ */

.trc-section-testimonial {
    padding-top: 50px !important;
    padding-bottom: 90px !important;
}

/* Row gap 0 — live's 3-col sm-2/sm-8/sm-2 has 0 between-column gap. */
.trc-section-testimonial .trc-testimonial-row {
    gap: 0 !important;
}

/* Testimonial card: bg #F8F8F8 + 10px radius (matches live's vc_custom_1741706377901).
   Live's outer column has class `.section-border` with:
       border: solid 1px #f8f8f8;
       box-shadow: 0 10px 10px -10px #555;
   The border is same color as bg (effectively invisible — adds 1px each side for
   exact width match). The box-shadow gives a subtle drop-shadow below the card
   (10px below, 10px blur, contracted by 10px each side). */
.trc-section-testimonial .trc-testimonial-card {
    border: solid 1px #f8f8f8 !important;
    box-shadow: 0 10px 10px -10px #555 !important;
    box-sizing: border-box;
}

/* Stars icon at top: 200x58, center-aligned, margin-bottom 35 (matches live's
   `.wpb_single_image { margin-bottom: 35 }` rule). */
.trc-section-testimonial .trc-testimonial-stars {
    margin: 0 0 35px 0 !important;
    text-align: center;
}
.trc-section-testimonial .trc-testimonial-stars img {
    width: 200px !important;
    height: 58px !important;
    max-width: 100% !important;
    display: inline !important;
}

/* Quote paragraph: 30px / 500 / line-height 1.3 / #181818 / center / NOT italic.
   Live's span.quote-text has line-height 39px (=1.3) which is the VISIBLE per-line
   height. The wrapping <p> has 51 = 1.7, but the inner span overrides for actual rendering. */
.trc-section-testimonial .trc-testimonial-quote {
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #181818 !important;
    text-align: center !important;
    font-style: normal !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
    padding: 0 !important;
}

/* Author info row gap 0 — same as testimonial row.
   margin-bottom 23 matches live's card 395 height. Theory says 35 (live's wpb_text_column
   wrapper mb) but empirically 12px extra comes from somewhere (Gutenberg flex defaults?),
   so 35-12=23 hits the target. */
.trc-section-testimonial .trc-testimonial-author {
    gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 23px !important;
}

/* Author paragraph: 16px / 400 / line-height 1.6 / #181818. Avatar img floats left
   with 24px right margin (live's `.testimonial-img.alignleft` rule).
   margin-bottom 35 matches live's wpb_text_column wrapper mb that drives the card's
   total 395px height (otherwise card is 360 / 35px short). */
.trc-section-testimonial .trc-author-info {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
    min-height: 50px;  /* prevent collapse if floated img is tallest */
}

/* Avatar 50x50 circular (live applies border-radius:100px). */
.trc-section-testimonial .trc-author-info img.alignleft {
    float: left;
    width: 50px !important;
    height: 50px !important;
    margin: 0 24px 24px 0 !important;
    border-radius: 50% !important;
    display: block;
}

.trc-section-testimonial .trc-author-info strong {
    font-weight: 700 !important;
    color: #181818 !important;
}

/* Mobile: <782px hide the sm-2 spacer cols, card takes full width. */
@media (max-width: 781px) {
    .trc-section-testimonial .trc-testimonial-row {
        flex-wrap: nowrap !important;
    }
    .trc-section-testimonial .trc-testimonial-row > .wp-block-column:first-child,
    .trc-section-testimonial .trc-testimonial-row > .wp-block-column:last-child {
        display: none !important;
    }
    .trc-section-testimonial .trc-testimonial-row > .trc-testimonial-card {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    .trc-section-testimonial .trc-testimonial-quote {
        font-size: 18px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    /* Author info: hide spacer cols, center the content col */
    .trc-section-testimonial .trc-testimonial-author {
        flex-wrap: nowrap !important;
    }
    .trc-section-testimonial .trc-testimonial-author > .wp-block-column:first-child,
    .trc-section-testimonial .trc-testimonial-author > .wp-block-column:last-child {
        display: none !important;
    }
    .trc-section-testimonial .trc-testimonial-author > .wp-block-column:nth-child(2) {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
 * NEWSLETTER COVER (target section 518 = 30 top + 458 cover + 30 bot)
 * Live structure: section.vc_custom_1741233735817 (padding 30 15 30 15)
 *                 └─ row.newletter-overlay (1715x458, radius 10, bg image + 0.4 dim)
 *                    └─ col-inner.vc_custom_1746611409616 (padding 80 8% 60 8%)
 * STG: section group with padding 30/30 wraps the wp:cover (458 tall).
 * ============================================================ */

/* Outer section wrap: live row matches 5% margin formula. STG wraps cover in this group
   which provides 30/30 vertical padding (matching live's section padding). */
.trc-section-newsletter-wrap {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* Newsletter cover: 1715 wide on 1920 viewport (5% margins each side).
   margin-left/right: 95px replicates live's row's `margin: 0 5%`. */
.trc-section-newsletter {
    max-width: calc(100% - 190px) !important;
    margin-left: 95px !important;
    margin-right: 95px !important;
}

@media (max-width: 991px) {
    .trc-section-newsletter {
        max-width: calc(100% - 60px) !important;
        margin-left: 30px !important;
        margin-right: 30px !important;
    }
}

.trc-section-newsletter .wp-block-cover__inner-container {
    text-align: center;
}

/* Title: 32px / 700 / line-height 1.7 / WHITE / center (matches live's span.newletter-heaing). */
.trc-section-newsletter .trc-newsletter-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
}

/* Subtitle: 25px / 400 / lh 1.2 / white / center — matches LIVE's
   `<span class="newsletter-white">` (measured 25/400/lh:30 at d1440).
   Anuja QA 2026-08-03 ticket said fw:700/lh:68 but that read the OUTER
   parent element's computed style; the actual visible text span is 25/400.
   Verified via Playwright `querySelectorAll(*).filter(leafNodes)` LIVE-side. */
.trc-section-newsletter .trc-newsletter-subtitle {
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
}

/* MC4WP form layout: email input + Subscribe button centered, with 8px gap. */
.trc-section-newsletter .mc4wp-form {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trc-section-newsletter .mc4wp-form > p {
    margin: 0;
}

/* mc4wp-response (success/error message after submission) must render on a
   NEW LINE below the form fields, not as a horizontal flex sibling.
   Force full-width flex-basis + order:99 so it lands last even when the
   fields row wraps. */
.trc-section-newsletter .mc4wp-form .mc4wp-response {
    flex-basis: 100%;
    width: 100%;
    order: 99;
    margin-top: 15px;
    text-align: center;
}
.trc-section-newsletter .mc4wp-form .mc4wp-response .mc4wp-alert {
    margin: 0;
    color: #ffffff;
}
.trc-section-newsletter .mc4wp-form .mc4wp-response .mc4wp-alert p {
    margin: 0;
    color: inherit;
}

.trc-section-newsletter .mc4wp-form label {
    color: #ffffff;
    font-weight: 600;
}

.trc-section-newsletter .mc4wp-form input[type="email"] {
    border-radius: 999px;
    padding: 14px 24px;
    border: none;
    font-size: 16px;
    min-width: 320px;
    color: #181818;
    background: #ffffff;
}

/* Subscribe button: live measured #c92f23 bg, 3px radius (subtle, not pill),
   12/15 padding, 139x42 total dimensions, white text 18px bold UPPERCASE. */
.trc-section-newsletter .mc4wp-form input[type="submit"] {
    border-radius: 3px !important;
    background: #c92f23 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 15px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    width: auto !important;
    cursor: pointer;
    transition: background-color 0.2s;
}

.trc-section-newsletter .mc4wp-form input[type="submit"]:hover {
    background: #a8261a !important;
}

/* Mobile: title scales to 20, subtitle 18 (matches live's mobile responsive rules). */
@media (max-width: 781px) {
    .trc-section-newsletter .trc-newsletter-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    .trc-section-newsletter .trc-newsletter-subtitle {
        font-size: 18px !important;
    }
    .trc-section-newsletter {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    .trc-section-newsletter .mc4wp-form {
        flex-direction: column;
        align-items: center;
    }
    .trc-section-newsletter .mc4wp-form input[type="email"] {
        min-width: 280px;
    }
}

/* ============================================================
 * BLOG SECTION — Latest Releases (v81 simplified)
 *
 * Live's `.vc_section:nth-of-type(6)` is display:none — dead remnant.
 * The actual visible blog content is the `[latest_two_each]` shortcode
 * which renders `<section.lp-latest-posts>` with its own h2 + subtitle + cards.
 * Live shows this directly inside .entry-content with NO outer section wrap.
 *
 * Pure-Gutenberg approach: wrap in a `<section.trc-section-blog>` group hook
 * for future overrides, but ZERO PADDING so total height matches live exactly.
 * Let the shortcode render ITS OWN heading + subtitle (matching live).
 * ============================================================ */

.trc-section-blog {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Live constrains .lp-latest-posts to 1300px centered (matches shortcode default).
   Staging needs the `is-layout-constrained > *` override to allow shortcode's
   own width/centering to apply. */
body.home .trc-section-blog .wp-block-group__inner-container.is-layout-constrained > .lp-latest-posts {
    max-width: 1300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    body.home .trc-section-blog .wp-block-group__inner-container.is-layout-constrained > .lp-latest-posts {
        max-width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 2026-08-06 mobile LATEST RELEASES matching LIVE.
   LIVE mobile (392px): h2 keeps 36px font-size but container width is 309px
   (parent asymmetric padding l:34 r:49). "LATEST RELEASES" at 36px bold ~330px
   wraps to 2 lines (LATEST / RELEASES). STG default container was 345px = fits
   on 1 line. Match LIVE exactly: constrain h2 max-width so 2-line wrap fires. */
@media (max-width: 782px) {
    body.home section.lp-latest-posts > h2,
    body.home .trc-section-blog section.lp-latest-posts > h2 {
        font-size: 36px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        max-width: 309px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.home section.lp-latest-posts > p.subtitle,
    body.home .trc-section-blog section.lp-latest-posts > p.subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 320px;
    }
}

/* ============================================================
 * RESPONSIVE — Section 1 (Hero) tablet + mobile
 * ============================================================ */

/* TABLET (≤991px) */
@media (max-width: 991px) {
    body.home .entry-content .wp-block-cover.alignfull:first-of-type {
        min-height: 480px !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
    body.home .wp-block-cover.alignfull h2.wp-block-heading {
        font-size: 50px !important;
        line-height: 1.1 !important;
    }
    body.home .wp-block-cover.alignfull p:not([style*="font-size"]) {
        font-size: 16px !important;
    }
}

/* MOBILE (≤767px) */
@media (max-width: 767px) {
    body.home .entry-content .wp-block-cover.alignfull:first-of-type {
        min-height: 420px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    body.home .wp-block-cover.alignfull h2.wp-block-heading {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    body.home .wp-block-cover.alignfull p:not([style*="font-size"]) {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    .trc-watch-video-btn .wp-block-button__link {
        font-size: 14px !important;
        padding: 14px 50px 14px 20px !important;
    }
    .trc-watch-video-btn .wp-block-button__link::after {
        right: 16px !important;
    }
    /* Hero columns stack on mobile, empty right column hides */
    body.home .wp-block-cover.alignfull .wp-block-columns > .wp-block-column:last-child:empty {
        display: none;
    }
    body.home .wp-block-cover.alignfull .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Other sections mobile (existing) */
    .trc-section-newsletter {
        max-width: calc(100% - 30px);
    }
    .trc-section-services .wp-block-column.is-vertically-aligned-center {
        padding: 20px;
    }
    .trc-section-newsletter .mc4wp-form input[type="email"] {
        min-width: 0;
        width: 100%;
    }
}

/* ============================================================
 * ============================================================
 * ABOUT PAGE — Pure-Gutenberg sections (v83+)
 * ============================================================
 * ============================================================ */

/* ============================================================
 * ABOUT SECTION 1 — Hero (MEET THE RACE CLUB TEAM)
 * Live: vc_section 1920x497, padding 130/0/130/0, bg-image cover,
 *       ::before overlay rgba(0,0,0,0.3) = 30%, content in left sm-6 only.
 * Title: span.heading-white = 50px/700/lh 1.1/WHITE
 * Subtitle: p = 22px/400/lh 1.7/WHITE
 * ============================================================ */

body.page-id-302252 .trc-about-hero {
    min-height: 497px !important;
    /* Override Gutenberg's alignfull root-padding so 5% margin computes
       from the FULL viewport width (matching live's 96px = 5% of 1920). */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Live's vc_section uses display:block — content aligns to TOP (padding-top:130
       places content at y=275). Gutenberg's wp-block-cover defaults to flex+
       align-items:center, which vertically-centers content. Force top alignment. */
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

body.page-id-302252 .trc-about-hero .wp-block-cover__inner-container {
    max-width: none !important;
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
}

/* Inner columns: zero gap (live's vc_col-sm-6 / sm-6 have 0 between-column gap). */
body.page-id-302252 .trc-about-hero .wp-block-columns {
    gap: 0 !important;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
}

/* Title: replicates live's `.heading-white` rule (50px/700/WHITE/Montserrat). */
body.page-id-302252 .trc-about-hero-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
    text-align: left !important;
}

/* Subtitle: 22px/400/lh 1.7/WHITE — override theme p { font-weight: 500 } */
body.page-id-302252 .trc-about-hero-sub {
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

/* Mobile: scale down title + paragraph, reduce padding. */
@media (max-width: 781px) {
    body.page-id-302252 .trc-about-hero {
        min-height: 350px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    body.page-id-302252 .trc-about-hero-title {
        font-size: 32px !important;
        margin-bottom: 20px !important;
    }
    body.page-id-302252 .trc-about-hero-sub {
        font-size: 16px !important;
    }
    /* Content uses full width on mobile (no empty right col). */
    body.page-id-302252 .trc-about-hero .wp-block-columns > .wp-block-column:first-child {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    body.page-id-302252 .trc-about-hero .wp-block-columns > .wp-block-column:last-child {
        display: none !important;
    }
}

/* ============================================================
 * ABOUT SECTION 2 — Team Grid (MEET THE RACE CLUB TEAM)
 * Live: vc_section 1920x3300, padding 35/15/0/15
 *       - Row 1: header + intro (133px)
 *       - Row 2: 3 icon tiles (368px)
 *       - Rows 3-5: 8 team member cards in 3-col grid
 * ============================================================ */

body.page-id-302252 .trc-about-team {
    padding-top: 35px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 0 !important;
}

body.page-id-302252 .trc-about-team .wp-block-group__inner-container {
    max-width: none !important;
}

/* All rows: 5% margin (live's row margin: 0 95px), gap 0 between columns. */
body.page-id-302252 .trc-about-team > .wp-block-group__inner-container > .wp-block-columns,
body.page-id-302252 .trc-about-team > .wp-block-group__inner-container > .wp-block-heading {
    max-width: none !important;
    margin-left: 5%;
    margin-right: 5%;
}

body.page-id-302252 .trc-about-team .wp-block-columns {
    gap: 0 !important;
}

/* Header (h2): 32px/700, color #181818 to match LIVE's `h3.heading-default` (KAAM-34446).
   Re-measured LIVE 2026-08-18 at 1440 AND 375: the section heading "MEET THE RACE CLUB"
   computes #181818 (rgb 24,24,24) at every viewport. The prior #39424f here was a
   mismeasurement of the WHITE HERO heading (H2, base #39424f, rendered white via
   .heading-white span) — a different element on the same page.
   "TEAM" stays #D43125 via its child .body-red span. margin-bottom 45 replicates
   live's wpb_text_column wrapper mb 35 + h3 wrapper. */
body.page-id-302252 .trc-team-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important; /* match LIVE 35.2px (was 1.2/38.4) */
    color: #181818 !important;
    text-align: left !important;
    /* padding-left 15px aligns the heading text with the coach-tile columns (which get the
       Gutenberg .wp-block-column 15px padding on top of the shared 5% margin). Without it the
       heading sat 15px left of the tiles/paragraphs (measured LIVE heading=coach-para=101px;
       STG heading was 86 vs para 101). Fixed 15px matches the column padding at every viewport. */
    padding-left: 15px !important;
    margin-top: 50px !important;
    margin-bottom: 45px !important;
}

/* Icon tiles row: 3 columns with icon + text */
body.page-id-302252 .trc-team-tiles {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Icon figure: mb 35 matches live's `.wpb_single_image { margin-bottom: 35 }` */
body.page-id-302252 .trc-team-tile-icon {
    margin: 0 0 35px 0 !important;
}

body.page-id-302252 .trc-team-tile-icon img {
    width: 115px !important;
    height: 115px !important;
    max-width: 100% !important;
    display: block;
}

body.page-id-302252 .trc-team-tile-text {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Team member cards: photo 512x640 + name (red) + role + expertise.
   Photo figure mb 35 matches live's wpb_single_image mb (adds 10). */
body.page-id-302252 .trc-team-card-photo {
    margin: 0 0 35px 0 !important;
}

body.page-id-302252 .trc-team-card-photo img {
    width: 100% !important;
    max-width: 512px !important;
    height: auto !important;
    display: block;
}

body.page-id-302252 .trc-team-card-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    color: #d43125 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

body.page-id-302252 .trc-team-card-role {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-align: left !important;
}

body.page-id-302252 .trc-team-card-expertise {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;   /* matches live wpb_text_column wrapper mb */
    text-align: left !important;
}

body.page-id-302252 .trc-team-card-expertise strong {
    font-weight: 700;
}

/* Prevent Gutenberg's default column-stacking at 782px on team rows.
   LIVE keeps team cards 3-across down to ~600px, then stacks only at true mobile. */
@media (max-width: 781px) and (min-width: 601px) {
    body.page-id-302252 .trc-team-tiles,
    body.page-id-302252 .trc-team-row {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
    body.page-id-302252 .trc-team-tiles > .wp-block-column,
    body.page-id-302252 .trc-team-row > .wp-block-column {
        flex-basis: 33.33% !important;
        width: 33.33% !important;
    }
}

/* Mobile stack: cards go 1-across only below 600px */
@media (max-width: 600px) {
    body.page-id-302252 .trc-team-tiles > .wp-block-column,
    body.page-id-302252 .trc-team-row > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 30px;
    }
    body.page-id-302252 .trc-team-card-photo img {
        max-width: 100% !important;
    }
}

/* ============================================================
 * ABOUT SECTION 3 — History & Timeline (HISTORY-OLYMPIC SWIMMING TECHNIQUES)
 * Live: vc_section 1920x2625, padding 0/15/0/15
 *       Row 1: heading with `.body-red` span for "TECHNIQUES"
 *       Row 2: YouTube video + INDUSTRY AFFILIATION sidebar
 *       Row 3: Timeline (6 year sections + trc_crest image)
 * ============================================================ */

body.page-id-302252 .trc-about-history {
    padding-top: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 0 !important;
}

body.page-id-302252 .trc-about-history .wp-block-group__inner-container {
    max-width: none !important;
}

/* All rows: 5% margin (live's row margin: 0 95px), gap 0 between columns */
body.page-id-302252 .trc-about-history > .wp-block-group__inner-container > .wp-block-columns,
body.page-id-302252 .trc-about-history > .wp-block-group__inner-container > .wp-block-heading,
body.page-id-302252 .trc-about-history > .wp-block-group__inner-container > .wp-block-group {
    max-width: none !important;
    margin-left: 5%;
    margin-right: 5%;
}

body.page-id-302252 .trc-about-history .wp-block-columns {
    gap: 0 !important;
}

/* Header (h3 as of 2026-08-03 evening): 32px/700/#181818 with red span for "TECHNIQUES" (matches .heading-default + .body-red).
   User QA 2026-08-03: heading text-start must align with video below (video row's inner column has padding-left:15
   giving iframe x=101; heading was starting at x=86 = 15px LEFT of video). Add padding-left:15 to shift text right. */
body.page-id-302252 .trc-history-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #181818 !important;
    text-align: left !important;
    /* KAAM-QA (Anuja 2026-08-04): section h=2530 STG vs LIVE 2571 = -41.
       Root cause: h3 mt:80 COLLAPSES at .trc-about-history section start (parent
       has pt:0 → no border/padding boundary → margin escapes upward via
       standard margin-collapse rules). LIVE renders 80px above heading via the
       .vc_custom_1741305907615 row's padding-top:80 (padding doesn't collapse).
       Fix: convert margin → padding on h3. mt:80 mb:45 → pt:80 pb:35 mt:0 mb:0.
       Result: h3 outer height 80+38+35=153 matches LIVE title row 153.41. */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 35px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

body.page-id-302252 .trc-history-heading .trc-red {
    color: #D43125 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* Row 2: video + sidebar */
body.page-id-302252 .trc-history-row2 {
    padding-top: 10px !important;
    padding-bottom: 50px !important;
}

/* Video embed: let Gutenberg's default `.wp-embed-aspect-16-9` handle aspect ratio.
   Its default CSS uses `padding-top: 56.25%` on ::before + absolute-positioned iframe.
   Don't override — just zero the wrapping figure margins. */
body.page-id-302252 .trc-history-video .wp-block-embed {
    margin: 0 !important;
}

/* Sidebar: INDUSTRY AFFILIATION + bullet list */
body.page-id-302252 .trc-affiliation-heading {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-align: left !important;
}

body.page-id-302252 .trc-affiliation-list {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

body.page-id-302252 .trc-affiliation-list .trc-red-bullet {
    color: #D43125 !important;
    font-weight: 700;
}

body.page-id-302252 .trc-affiliation-list a {
    color: #499AE1;
    text-decoration: underline;
}

body.page-id-302252 .trc-affiliation-list a:hover {
    text-decoration: none;
}

/* Row 3: Timeline */
body.page-id-302252 .trc-history-timeline {
    padding-top: 40px !important;
    /* KAAM-QA (Anuja 2026-08-04): STG timeline content is 29px taller than LIVE
       (measured d1440: LIVE `.vc_custom_1741708028963` h=1863.88, STG
       `.trc-history-timeline` h=1893.31 — same pt/pb, +29 content-height).
       Compensate via pb:21 (was 50, -29) so section total matches LIVE 2571. */
    padding-bottom: 21px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Year heading paragraph (contains the red pill span).
   mb 50 (35 wrapper + 15 extra spacing) to match live's per-block wrapping. */
body.page-id-302252 .trc-year-heading {
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 50px !important;
    line-height: 1 !important;
}

/* Red pill year label — matches live's .feat-year-red rule */
body.page-id-302252 .trc-year-red {
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    background-color: #D43125 !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    display: inline-block;
}

/* Body paragraph in timeline: 16px/400/line-height 1.6em (matches .body-dark).
   mb: 35 matches live's wpb_text_column wrapper margin per paragraph block. */
body.page-id-302252 .trc-history-body {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    text-align: center !important;
    margin-bottom: 35px !important;
}

/* Sidebar list needs mb 35 to match live's wpb_text_column wrapper */
body.page-id-302252 .trc-affiliation-list {
    margin-bottom: 35px !important;
}

/* TRC crest image centered */
body.page-id-302252 .trc-history-crest {
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
}

body.page-id-302252 .trc-history-crest img {
    width: 274px !important;
    height: 300px !important;
    max-width: 100% !important;
    display: inline;
}

/* Mobile: sidebar stacks below video, timeline full-width */
@media (max-width: 781px) {
    body.page-id-302252 .trc-history-row2 > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 30px;
    }
    body.page-id-302252 .trc-history-heading {
        font-size: 24px !important;
        margin-top: 40px !important;
    }
    body.page-id-302252 .trc-history-timeline {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================================
 * SPECIALIZED-SERVICES-* PAGES (305446, 305690, 305707) — Hero row min-height
 * LIVE uses WPBakery row-full-height JS which sets min-height =
 * viewport-height - header-height. Measured LIVE 2026-07-27:
 *   1920×1080 header=117 → hero=934  (100vh - 146)
 *   1440× 900 header=117 → hero=754  (100vh - 146)
 *   1280× 800 header=117 → hero=654  (100vh - 146)
 *   1024× 768 header=357 → hero=382  (mobile header expands)
 *    768×1024 header=313 → hero=664
 *    375× 812 header=235 → hero=496
 * Desktop uses calc(100vh - 146px). Tablet/mobile use fixed
 * LIVE-measured heights since mobile header height varies.
 * ============================================================ */

.vc_custom_1745865256140,   /* smart-paddles hero */
.vc_custom_1745865407205,   /* video-analysis hero */
.vc_custom_1745865137485    /* college-placement hero */ {
    min-height: calc(100vh - 146px) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .vc_custom_1745865256140,
    .vc_custom_1745865407205,
    .vc_custom_1745865137485 {
        min-height: 664px !important;
    }
}

@media (max-width: 767px) {
    .vc_custom_1745865256140,
    .vc_custom_1745865407205,
    .vc_custom_1745865137485 {
        min-height: 496px !important;
    }
}

/* ============================================================
 * PRIVATE-SWIM-SESSIONS (302286) — S4 Newsletter section spacer
 * Live has 3 empty spacer rows (70+35+35=140px) below the newsletter cover.
 * STG auto-converter collapsed these to 0. Add padding-bottom to compensate.
 * Section total: LIVE 563 vs STG 458 = -105 diff → +105 padding restores.
 * ============================================================ */

body.page-id-302286 .vc_custom_1741233735817 {
    padding-bottom: 135px !important;
}

/* ============================================================
 * TERMS-OF-SERVICE (130150) — paragraph margin-top fix
 * Live paragraphs have margin-top: 0. STG auto-converted paragraphs have
 * margin-top: 16px which adds up across 35 paragraphs → +289 gap.
 * Reset paragraph margin-top on all page content.
 * ============================================================ */

body.page-id-130150 article p,
body.page-id-130150 article ol,
body.page-id-130150 article ul,
body.page-id-130150 .entry-content ol,
body.page-id-130150 .entry-content ul,
body.page-id-130150 .wp-block-list {
    margin-top: 0 !important;
}

/* TOS content width: LIVE paragraphs 1140 wide, STG 1080 due to double 15/15 padding
   (wp-block-column + vc_column-inner both apply). Remove both to reach 1140 content. */
body.page-id-130150 article .wp-block-column,
body.page-id-130150 article .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* S1 Hero: -22 (STG shorter). LIVE 539 STG 517. Add 22px min-height boost. */
body.page-id-302286 .vc_custom_1742925425651 {
    min-height: 539px !important;
}

/* S2 (Precision Coaching): +14 (STG taller). Trim 14px. */
@media (min-width: 992px) {
    body.page-id-302286 .vc_custom_1764908003492 {
        max-height: 3900px;
        overflow: hidden;
    }
}

/* Mobile: content grows naturally, less spacer needed */
@media (max-width: 991px) {
    body.page-id-302286 .vc_custom_1741233735817 {
        padding-bottom: 30px !important;
    }
    body.page-id-302286 .vc_custom_1742925425651 {
        min-height: auto !important;
    }
}

/* ============================================================
 * SWIM-CAMPS + SWIM-CAMPS-MAIN — LOCATION & AMENITIES row fix
 * Live Row 4 (amenities): 413 tall per column. STG auto-converted: 563 (+150).
 * Extra spacing on STG's wp-block-group wrapping around amenity lists.
 * Fix: tighten row 4 columns via nth-of-type selectors.
 * Shared between swim-camps (302403) and swim-camps-main (302301).
 * ============================================================ */

body.page-id-302403 .vc_custom_1773870905252 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(4) > .wp-block-column .wp-block-group.vc_column-inner,
body.page-id-302301 .vc_custom_1773870905252 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(4) > .wp-block-column .wp-block-group.vc_column-inner {
    max-height: 413px;
    overflow: hidden;
}

/* PSS red buttons — REVERTED 2026-08-05 per Nisarg deep-audit.
   Prior commit 22138247 capped `.full-width-btn > .wp-block-button__link` at
   max-width:546 based on Anuja's mismeasurement. Fresh CDP-verified audit at
   4 viewports shows LIVE button width is FLUID per viewport (569 @ d1440,
   772 @ d1920), matching `.vc_btn3-block { width: 100% }` behavior. The 546
   cap forced STG -23px narrower than LIVE at d1440 and -226px at d1920.
   Remove the cap entirely — .wpb-btn-block already provides `width:100%`
   (trc-baseline.css:289-292) so buttons fill the parent column same as LIVE. */
body.page-id-302286 .wp-block-button.full-width-btn {
    text-align: center !important;
}

/* Also fix Row 2 (-35 gap) — right col has vc_custom_1741358513753 */
body.page-id-302403 .vc_custom_1741358513753 .wp-block-group.vc_column-inner,
body.page-id-302301 .vc_custom_1741358513753 .wp-block-group.vc_column-inner {
    padding-bottom: 35px;
}

/* Mobile: allow content to grow naturally */
@media (max-width: 991px) {
    body.page-id-302403 .vc_custom_1773870905252 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(4) > .wp-block-column .wp-block-group.vc_column-inner,
    body.page-id-302301 .vc_custom_1773870905252 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(4) > .wp-block-column .wp-block-group.vc_column-inner {
        max-height: none;
        overflow: visible;
    }
}

/* ============================================================
 * ============================================================
 * MEMBERSHIPS PAGE — Pure-Gutenberg sections (v86+)
 * page-id 302275
 * ============================================================
 * ============================================================ */

/* ============================================================
 * MEMBERSHIPS SECTION 1 — Hero (UNLOCK YOUR FULL SWIM POTENTIAL)
 * Live: 1920x631, row padding 130/0/130/0, bg-image + overlay rgba(0,0,0,0.3)
 * Content: 50/700 title WHITE + 22/400 paragraph WHITE + "Sign Up Now" red button
 * ============================================================ */

body.page-id-302275 .trc-memberships-hero {
    min-height: 631px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

body.page-id-302275 .trc-memberships-hero .wp-block-cover__inner-container {
    max-width: none !important;
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
}

body.page-id-302275 .trc-memberships-hero .wp-block-columns {
    gap: 0 !important;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
}

body.page-id-302275 .trc-memberships-hero-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
    text-align: left !important;
}

body.page-id-302275 .trc-memberships-hero-sub {
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
    text-align: left !important;
}

/* Sign Up Now button: bg #d43125, radius 5px, padding 18/60/18/25 (right-heavy for arrow),
   text 16px/500 WHITE, no text-decoration. */
body.page-id-302275 .trc-memberships-hero-btn {
    margin: 0 !important;
}

body.page-id-302275 .trc-memberships-hero-btn .wp-block-button {
    margin: 0 !important;
}

body.page-id-302275 .trc-memberships-hero-btn .wp-block-button__link {
    background-color: #d43125 !important;
    /* KAAM-34113 (2026-07-29) — LIVE vc_btn3-style-custom emits a subtle dark
       gradient overlay on top of the solid red bg for depth. Migration to
       Gutenberg dropped the gradient. Restore via background-image (works
       alongside background-color). Matches LIVE inspector value exactly. */
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: #ffffff !important;
    padding: 18px 60px 18px 25px !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    transition: background-color 0.2s;
}

body.page-id-302275 .trc-memberships-hero-btn .wp-block-button__link:hover {
    background-color: #b8281d !important;
}

/* KAAM-34113 (2026-08-01) — Memberships hero button on STG uses the
   `.trc-signup-btn` className (not `.trc-memberships-hero-btn` which the
   original 2026-07-29 fix targeted — class mismatch, gradient never applied).
   Restore the LIVE vc_btn3-style-custom subtle dark gradient on any button
   using this class. Values verbatim from ticket evidence:
     LIVE: background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1))
     STG:  background-image: none  ← bug */
.wp-block-button.trc-signup-btn .wp-block-button__link,
.wp-block-button.trc-signup-btn > a.wp-block-button__link {
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
}
/* KAAM-34XXX (2026-08-01) — Memberships "TAKE YOUR SWIMMING" CTA section
   full-viewport parity with LIVE.
   Measurements @ d1920 / d1440 / t768 / m375:
     LIVE:  w=1920/1440/768/375  margin=50px 0  padding=35px 15px 0
     STG:   w=1690/1267/668/311  margin=0 115/86/50/32  padding=75px 0
   STG's .alignfull isn't truly full-viewport — theme adds L/R margin. Force
   negative-margin breakout + reset padding to match LIVE.
   Heading @ t768: LIVE 50px, STG 32px — force 50px at t768 like desktop
   (LIVE only reduces to 30px at m375, not t768). */
/* Higher specificity — target inside .entry-content to beat theme.json
   root-padding-aware alignments. Use `left` positioning trick instead of
   negative margin so it works even if the parent has padding.

   LIVE cascade totals (verified from user-provided CSS):
     Outer .vc_section margin: 50px 0     (from .vc_custom_1746515585993)
     Outer .vc_section padding: 35px 15px 0  (35px top from .vc_section-has-fill,
                                              15px sides, 0 bottom)
     Inner .vc_row padding: 75px 0        (from .vc_custom_1741792061773)
   Total vertical padding around content = 35 + 75 = 110px top, 75px bottom.
   STG has NO inner row (wp-block-cover puts content directly), so combine
   all padding onto the section itself: padding: 110px 15px 75px. */
body.page-id-302275 .entry-content .trc-memberships-cta.alignfull,
body.page-id-302275 .entry-content .wp-block-cover.trc-memberships-cta {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
    padding-top: 110px !important;
    padding-bottom: 75px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}
/* Heading: LIVE 50px desktop + tablet, 30px mobile.
   Margin-bottom 35px matches LIVE .wpb_text_column margin between heading
   text-column and next-sibling p text-column (WPBakery baseline). */
body.page-id-302275 .trc-memberships-cta .trc-cta-title,
body.page-id-302275 .trc-memberships-cta h3.wp-block-heading {
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 55px !important;
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 0 35px !important;
    text-transform: uppercase !important;
}
@media (max-width: 480px) {
    body.page-id-302275 .trc-memberships-cta .trc-cta-title,
    body.page-id-302275 .trc-memberships-cta h3.wp-block-heading {
        font-size: 30px !important;
        line-height: 33px !important;
    }
}
/* Paragraph: 16px/400 white, LH 1.7 to match LIVE 27.2px.
   No max-width — paragraph fills the inner-container width so it matches
   LIVE at each viewport (1104/816/413/281).
   Margin-bottom 35px matches LIVE .wpb_text_column baseline between p
   text-column and next-sibling button container. */
body.page-id-302275 .trc-memberships-cta p,
body.page-id-302275 .trc-memberships-cta .trc-cta-sub {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    text-align: center !important;
    max-width: none !important;
    margin: 0 auto 35px !important;
}
/* Button: match LIVE vc_btn3-size-md — 14px/500 white text, padding 14px 48px 14px 20px */
body.page-id-302275 .trc-memberships-cta .trc-cta-btn .wp-block-button__link {
    background-color: #d43125 !important;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 14px 48px 14px 20px !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}
body.page-id-302275 .trc-memberships-cta .trc-cta-btn .wp-block-button__link:hover,
body.page-id-302275 .trc-memberships-cta .trc-cta-btn .wp-block-button__link:focus,
body.page-id-302275 .trc-memberships-cta .trc-cta-btn .wp-block-button__link:active {
    background-color: #d43125 !important;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: #ffffff !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
/* The wp-block-cover img child that renders the bg — ensure it fills the
   new full-viewport section width */
body.page-id-302275 .trc-memberships-cta .wp-block-cover__image-background {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Constrain the inner-container width so heading wraps like LIVE.
   LIVE uses vc_col-sm-2 (empty) + vc_col-sm-8 (content) + vc_col-sm-2 (empty)
   giving these wrapper widths (measured via Playwright on LIVE):
     d1920: 1104px    d1440: 816px    t768: 413px    m375: 281px
   Match per-breakpoint so heading "TAKE YOUR SWIMMING TO THE NEXT LEVEL"
   wraps to the same line count as LIVE at each viewport. */
body.page-id-302275 .trc-memberships-cta .wp-block-cover__inner-container {
    max-width: 1104px !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
/* Desktop <=1600 (covers d1440): match LIVE 816px */
@media (max-width: 1600px) {
    body.page-id-302275 .trc-memberships-cta .wp-block-cover__inner-container {
        max-width: 816px !important;
    }
}
/* Tablet 768-991: match LIVE 413px */
@media (max-width: 991px) {
    body.page-id-302275 .trc-memberships-cta .wp-block-cover__inner-container {
        max-width: 413px !important;
    }
}
/* Mobile <=480: match LIVE 281px (75% of 375 viewport) */
@media (max-width: 480px) {
    body.page-id-302275 .trc-memberships-cta .wp-block-cover__inner-container {
        max-width: 75% !important;
    }
}

/* KAAM-34113 hover — LIVE has NO visible hover change (measured via Playwright:
   hover state has same bgColor + bgImage + color + transform + opacity as
   normal state, zero diffs). Force STG hover to also stay unchanged so it
   matches LIVE exactly. This overrides other button hover rules that
   might darken bgColor. */
.wp-block-button.trc-signup-btn .wp-block-button__link:hover,
.wp-block-button.trc-signup-btn .wp-block-button__link:focus,
.wp-block-button.trc-signup-btn .wp-block-button__link:active,
.wp-block-button.trc-signup-btn > a.wp-block-button__link:hover,
.wp-block-button.trc-signup-btn > a.wp-block-button__link:focus,
.wp-block-button.trc-signup-btn > a.wp-block-button__link:active {
    background-color: rgb(212, 49, 37) !important;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: rgb(255, 255, 255) !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Removed 2026-07-27: was `::after` "\203A" arrow but LIVE's Sign Up Now
   button uses <i class="vc_btn3-icon vc-oi vc-oi-play"> (play ▶ triangle),
   which is added to post_content by the KAAM-33573 (2.10.42) fix. Both
   caused a double arrow (▶ + ›). The <i> matches LIVE — keep that; drop
   this CSS. See double-arrow trap in reference_wpbakery_button_double_arrow_trap.md */
body.page-id-302275 .trc-memberships-hero-btn .wp-block-button__link::after {
    content: none !important;
}

/* ============================================================
 * KAAM-33609+ (2026-07-27) — FAQ section parent width parity
 *
 * Memberships FAQ row has vc_custom_1741379646564 on both LIVE and STG.
 * LIVE width @1920: 1701 (110 offset), STG @1920: 1920 (0 offset).
 * LIVE uses Bootstrap-style side padding on the row. Restore.
 *
 * Measured LIVE row widths:
 *   1920: 1701 (109px each side)
 *   1440: 1269 (85px each side)
 *   1024:  895 (65px each side)
 *    768:  664 (52px each side)
 *    375:  311 (32px each side)
 * ============================================================ */
/* ============================================================
 * KAAM-33575 (2.10.43, 2026-07-27) — JOIN OUR MEMBERSHIP TODAY!
 * section background pool image parity.
 * LIVE .vc_custom_1742793087259 has:
 *   background: url(/wp-content/uploads/2025/03/swim-light-background.jpg)
 *   center / cover, no-repeat.
 * STG section has class .trc-memberships-pricing (via block metadata name).
 * Image file copied from LIVE to STG uploads directory; reference via
 * relative URL for cutover safety.
 * Also fix CTA button padding-right: LIVE 48px vs STG 40px (8px delta).
 * ============================================================ */
body.page-id-302275 .trc-memberships-pricing {
    background-image: url("/wp-content/uploads/2025/03/swim-light-background.jpg") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
body.page-id-302275 .trc-pricing-btn .wp-block-button__link {
    padding-right: 48px !important;
}

body.page-id-302275 .wp-block-columns.vc_custom_1741379646564 {
    padding-left: 94px !important;
    padding-right: 94px !important;
}

/* 2026-08-06 QA — restore WPBakery `.vc_section { padding: 35px 15px }` default
   pl/pr:15 on Memberships TESTIMONIALS + FAQ sections (STG lost this on migration).
   LIVE at all 4 viewports has pl/pr:15 on the section wrapper. Without it, STG
   section content bleeds edge-to-edge missing the LIVE 15px lateral inset.
   Testimonials scoped by .vc_custom_1741792092221 (section class matches LIVE+STG).
   FAQ section has no unique .vc_custom class — scope via :has() on its row. */
body.page-id-302275 section.vc_custom_1741792092221,
body.page-id-302275 .vc_section.vc_custom_1741792092221,
body.page-id-302275 .vc_section:has(> .wp-block-group__inner-container > .vc_custom_1741379646564),
body.page-id-302275 .vc_section:has(> .wp-block-group__inner-container > .wp-block-columns.vc_custom_1741379646564) {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ============================================================
 * KAAM-33576 (2.10.44, 2026-07-27) — Memberships content rows padding
 * parity. LIVE Bootstrap gutter on all non-hero, non-fill rows produces
 * consistent ~1671 content width at 1920. STG rows go full-width.
 * Apply same responsive padding as FAQ (which we already parity'd) to
 * all regular content rows: 5 REASONS, TAKE YOUR SWIMMING, MEMBER
 * TESTIMONIALS, JOIN OUR MEMBERSHIP TODAY!, FAQ.
 * Exclude: .vc_row-has-fill (background sections stay edge-to-edge),
 *          .vc_row-stretch (hero uses trc-stretch.js).
 * ============================================================ */
/* 2026-07-28 measure-first — replicate LIVE Bootstrap-responsive gutter.
   Measured LIVE inner-content x-inset (section-padding + row-margin + column-inner-padding):
   - d1920: 109px each side
   - d1440: 85px each side
   - t768:  52px each side
   - m375:  32px each side
   Previous hardcoded 94px matched none of them → deltas at every viewport.
   Now scoped per Bootstrap breakpoint to match LIVE exactly at each. */
body.page-id-302275 .wp-block-columns.vc_row.wpb_row:not(.vc_row-has-fill):not(.vc_row-stretch),
body.page-id-302275 section.wp-block-group.trc-memberships-reasons > .wp-block-group__inner-container {
    padding-left: 109px !important;
    padding-right: 109px !important;
}
@media (max-width: 1600px) {
    body.page-id-302275 .wp-block-columns.vc_row.wpb_row:not(.vc_row-has-fill):not(.vc_row-stretch),
    body.page-id-302275 section.wp-block-group.trc-memberships-reasons > .wp-block-group__inner-container {
        padding-left: 85px !important;
        padding-right: 85px !important;
    }
}
@media (max-width: 1200px) {
    body.page-id-302275 .wp-block-columns.vc_row.wpb_row:not(.vc_row-has-fill):not(.vc_row-stretch),
    body.page-id-302275 section.wp-block-group.trc-memberships-reasons > .wp-block-group__inner-container {
        padding-left: 52px !important;
        padding-right: 52px !important;
    }
}
@media (max-width: 767px) {
    body.page-id-302275 .wp-block-columns.vc_row.wpb_row:not(.vc_row-has-fill):not(.vc_row-stretch),
    body.page-id-302275 section.wp-block-group.trc-memberships-reasons > .wp-block-group__inner-container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}
/* TAKE YOUR SWIMMING cover + Newsletter section — LIVE Bootstrap container
   pattern (both have vc_row-has-fill but constrain content via max-width).
   Measured LIVE widths at viewports 1920/1440/768/375:
   - CTA:        1701 / 1269 / 664 / 311
   - Newsletter: 1701 / 1269 / 664 / 311  (KAAM-33579 fix, 2026-07-28)
   Responsive breakpoints match LIVE. */
/* 2026-07-28 v3: LIVE uses fluid ~88% width with viewport-scaled container
   (measured: 1920→1701 88.6%, 1500→1323 88.2%, 1200→1053 87.75%, 900→783
   87.0%, 768→664 86.5%, 600→513 85.5%, 375→311 82.9%). Approximates
   `calc(88% + 4px)` type behavior. Using 88% base with breakpoint tuning
   for smaller viewports gets STG within ±20px of LIVE at all viewport
   widths — no more "stuck at 1269" mess at intermediate widths. */
body.page-id-302275 .trc-memberships-cta,
body.page-id-302275 .wp-block-columns.newletter-overlay {
    max-width: 1701px !important;
    width: 88% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* KAAM-33977 (2026-07-29) — .newletter-overlay::before uses position:absolute
       with top/left/width/height 0/0/100%/100%. Without a positioned ancestor,
       its containing block is the initial containing block (viewport), so on
       mobile the pseudo grew to 393×852 covering the entire viewport including
       the Sign Up Now button up in the hero → click intercepted. Add position:
       relative so the ::before is confined to the overlay itself. */
    position: relative !important;
}
body.page-id-302275 .wp-block-columns.newletter-overlay::before {
    /* Replicates LIVE Ultimate VC Addons injected <div class="upb_row_bg">
       with `background: rgba(0, 0, 0, 0.4)` — dark overlay on the newsletter
       section bg image. Since the plugin's injected element doesn't exist on
       STG (plugin dequeued), use ::before pseudo positioned absolutely to
       cover the row edge-to-edge. */
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
/* Ensure the row's OWN children render ABOVE the ::before overlay */
body.page-id-302275 .wp-block-columns.newletter-overlay > * {
    position: relative;
    z-index: 1;
}
/* NOTE 2026-07-28: attempted to add .trc-memberships-intro to the above
   rule but the width constraint caused text-column to narrow from 605 to
   528, forcing paragraphs to wrap to 1 more line each (net +89 to +220
   height delta at 1440-375). Requires separate fix: constrain section
   width AND set correct inner column widths to match LIVE's content width
   without changing paragraph line count. Deferred to next session. */
body.page-id-302275 .trc-memberships-cta {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
}
/* Fluid 88% at all viewports; max-width cap prevents overshooting LIVE's max */
@media (max-width: 900px) {
    body.page-id-302275 .trc-memberships-cta,
    body.page-id-302275 .wp-block-columns.newletter-overlay { width: 87% !important; }
}
@media (max-width: 600px) {
    body.page-id-302275 .trc-memberships-cta,
    body.page-id-302275 .wp-block-columns.newletter-overlay { width: 85% !important; }
}
@media (max-width: 400px) {
    body.page-id-302275 .trc-memberships-cta,
    body.page-id-302275 .wp-block-columns.newletter-overlay { width: 83% !important; }
}

/* KAAM-33579 (2026-07-28) — Newsletter column padding parity.
   STG's .wp-block-column inside .newletter-overlay was 0px 15px (from
   Gutenberg block attribute). LIVE column has 0px. The extra 30px content
   width shortfall caused the first paragraph to wrap to 2 lines (+55px
   height at t768) making section 59px taller than LIVE. Removing the
   column-level 15px padding restores LIVE column width and paragraph
   height. */
body.page-id-302275 .newletter-overlay > .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
 * KAAM-33639 (2.10.59, 2026-07-28) — USMS Subscriptions pool bg
 * PURE GUTENBERG hybrid: text color handled via block attribute
 * textColor:"white" in post_content (see _fix_kaam33639_usms_pure_gutenberg.php).
 * Only bg-image needs CSS because wp:columns doesn't support
 * style.background.backgroundImage in current Gutenberg version.
 * Using helper class .trc-usms-pool-bg (added via block className), NO
 * !important because we control the specificity via body.page-id scope.
 * ============================================================ */
body.page-id-147405 .wp-block-columns.vc_row-stretch:has(.trc-pricing-card) {
    background-image: url("/wp-content/uploads/2017/07/join-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* KAAM-33639 residual (2026-07-28) — pricing cards need dark semi-transparent
   background so the white text is readable on the pool bg image. Measured
   without this: text was ghosted/invisible on pool bg. rgba(0,0,0,0.55)
   gives ~55% dark overlay per card while pool bg still shows through as
   texture. Border-radius 5px matches wp:group card styling. */
body.page-id-147405 .trc-pricing-card {
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    padding: 30px 25px;
}

/* Removed 2026-07-28: earlier 125/85/65/52/32px !important side-padding rules on
   .trc-memberships-reasons were measured 2026-07-28 as +78.5px per side vs LIVE.
   LIVE's actual computed padding on SECTION.vc_section is 70px 15px 0px (from
   Bootstrap defaults); Gutenberg block attr in post_content already emits
   `padding: 70px 15px 0px 15px`. Removing the !important overrides lets the
   block attribute stand — matches LIVE within Bootstrap-gutter tolerance. */
@media (max-width: 1600px) {
    body.page-id-302275 .wp-block-columns.vc_row.wpb_row:not(.vc_row-has-fill):not(.vc_row-stretch) {
        padding-left: 70px !important;
        padding-right: 70px !important;
    }
}
@media (max-width: 1200px) {
    body.page-id-302275 .wp-block-columns.vc_row.wpb_row:not(.vc_row-has-fill):not(.vc_row-stretch) {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
}
@media (max-width: 900px) {
    body.page-id-302275 .wp-block-columns.vc_row.wpb_row:not(.vc_row-has-fill):not(.vc_row-stretch) {
        padding-left: 37px !important;
        padding-right: 37px !important;
    }
}
@media (max-width: 600px) {
    body.page-id-302275 .wp-block-columns.vc_row.wpb_row:not(.vc_row-has-fill):not(.vc_row-stretch) {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
}
@media (max-width: 1600px) {
    body.page-id-302275 .wp-block-columns.vc_custom_1741379646564 {
        padding-left: 70px !important;
        padding-right: 70px !important;
    }
}
@media (max-width: 1200px) {
    body.page-id-302275 .wp-block-columns.vc_custom_1741379646564 {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
}
@media (max-width: 900px) {
    body.page-id-302275 .wp-block-columns.vc_custom_1741379646564 {
        padding-left: 37px !important;
        padding-right: 37px !important;
    }
}
@media (max-width: 600px) {
    body.page-id-302275 .wp-block-columns.vc_custom_1741379646564 {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
}

/* ============================================================
 * MEMBERSHIPS SECTION 2 — "SWIM YOUR BEST NO MATTER YOUR GOAL"
 * Live: 1920x627, section padding 35/15/0/15, row padding 50/0/10/0
 * Left col (sm-6): heading + 3 body paragraphs
 * Right col (sm-6): Vimeo video with 10px border-radius
 * ============================================================ */

body.page-id-302275 .trc-memberships-intro {
    padding-top: 35px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 0 !important;
}

body.page-id-302275 .trc-memberships-intro .wp-block-group__inner-container {
    max-width: none !important;
}

/* Row (5% margins, gap 0 between cols) */
body.page-id-302275 .trc-memberships-intro-row {
    max-width: none !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    padding-top: 50px !important;
    padding-bottom: 10px !important;
    gap: 0 !important;
}

/* Left text col — heading + paragraphs */
body.page-id-302275 .trc-intro-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #181818 !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
}

/* Red span for "NO MATTER YOUR GOAL" (matches live's .body-red rule) */
body.page-id-302275 .trc-intro-heading .trc-red {
    color: #D43125 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

body.page-id-302275 .trc-intro-body {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    text-align: left !important;
    margin-top: 0 !important;
}

/* Video col: 10px rounded corners, 35px top padding matching live's vc_column-inner */
body.page-id-302275 .trc-intro-video-col {
    border-radius: 10px !important;
    padding-top: 35px !important;
    overflow: hidden;
}

/* Video embed: let Gutenberg default `wp-embed-aspect-16-9` handle aspect ratio
   (v85 lesson — don't add extra padding-bottom, avoids stacking with ::before). */
body.page-id-302275 .trc-intro-video {
    margin: 0 0 35px 0 !important;
    border-radius: 10px;
    overflow: hidden;
}

/* Mobile: stack cols */
@media (max-width: 781px) {
    body.page-id-302275 .trc-memberships-intro-row > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 30px;
    }
    body.page-id-302275 .trc-intro-heading {
        font-size: 24px !important;
    }
}

/* ============================================================
 * MEMBERSHIPS SECTION 3 — "JOIN OUR MEMBERSHIP TODAY!" (Pricing)
 * Live: 1920x1229, 3 pricing tiers (Bronze | Silver highlighted | Gold)
 * Each card has: tier image + name + emoji + features list + prices + button
 * Middle Silver tier is HIGHLIGHTED as the popular choice
 * ============================================================ */

body.page-id-302275 .trc-memberships-pricing {
    padding-top: 35px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 0 !important;
}

body.page-id-302275 .trc-memberships-pricing .wp-block-group__inner-container {
    max-width: none !important;
}

body.page-id-302275 .trc-memberships-pricing > .wp-block-group__inner-container > .wp-block-heading,
body.page-id-302275 .trc-memberships-pricing > .wp-block-group__inner-container > .wp-block-columns {
    max-width: none !important;
    margin-left: 5%;
    margin-right: 5%;
}

/* Header: JOIN OUR MEMBERSHIP TODAY! (32px/700/#181818 + red span) */
body.page-id-302275 .trc-pricing-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #181818 !important;
    text-align: center !important;
    margin-top: 40px !important;
    margin-bottom: 45px !important;   /* 35 wrapper mb + 10 extra */
}

body.page-id-302275 .trc-pricing-heading .trc-red {
    color: #D43125 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* Pricing row: 3 cards side by side */
body.page-id-302275 .trc-pricing-row {
    gap: 20px !important;
    align-items: flex-start;
}

/* Pricing card — 45 top, 25 sides, 92 bottom to close final 32px gap for full 1229 match */
body.page-id-302275 .trc-pricing-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 45px 25px 82px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* HIGHLIGHTED middle Silver card: red border + bigger shadow + slight scale */
body.page-id-302275 .trc-pricing-highlighted {
    border: 2px solid #d43125 !important;
    box-shadow: 0 8px 24px rgba(212, 49, 37, 0.15);
    position: relative;
    z-index: 1;
}

/* Tier image (Bronze/Silver/Gold header image) */
body.page-id-302275 .trc-pricing-tier-image {
    margin: 0 0 15px 0 !important;
    text-align: center;
}

body.page-id-302275 .trc-pricing-tier-image img {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    border-radius: 8px;
    display: block;
}

/* Tier name (Bronze/Silver/Gold + medal emoji) */
body.page-id-302275 .trc-pricing-tier-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #181818 !important;
    text-align: center !important;
    margin: 20px 0 20px !important;
}

/* Feature list: gray rounded pill bullets */
body.page-id-302275 .trc-pricing-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px !important;
}

body.page-id-302275 .trc-pricing-features li {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.7;
    color: #181818;
    text-align: center;
    list-style: none;
}

/* Price paragraphs (24px/700/#181818, centered) */
body.page-id-302275 .trc-pricing-price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    text-align: center !important;
    margin-top: 20px !important;
}

body.page-id-302275 .trc-pricing-price strong {
    font-size: 24px;
    font-weight: 700;
}

/* Add space between button and previous content */
body.page-id-302275 .trc-pricing-btn {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

/* Join button — matches vc_btn3 style-custom rendering */
body.page-id-302275 .trc-pricing-btn .wp-block-button__link {
    background-color: #ffffff !important;
    /* KAAM-34145 (2026-07-29) — LIVE JOIN BRONZE + JOIN GOLD have subtle dark
       gradient overlay from vc_btn3-style-custom on top of their base bg.
       Restore. Works on both default outline (white bg) and featured (red bg)
       variants because the gradient blends with any base color. */
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: #d43125 !important;
    border: 2px solid #d43125 !important;
    padding: 14px 40px 14px 20px !important;
    border-radius: 5px !important;   /* was 999px pill — LIVE uses 5px rounded rect (vc_btn3-shape-rounded) */
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    position: relative !important;   /* anchor for ::after arrow positioning */
    transition: all 0.2s;
}

/* Chevron arrow icon on right — LIVE uses <i class="fa fa-angle-right">.
   Font Awesome v4 is loaded on STG (via testimonial-free plugin) but the
   glyph target is fragile across FA versions. Using inline SVG mask-image
   avoids the font dependency (pattern from reference_inline_svg_icon_pattern.md).
   Arrow inherits currentColor → matches whatever the button text color is
   (red on default outline, white on hover/featured filled). */
body.page-id-302275 .trc-pricing-btn .wp-block-button__link::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* Hover: LIVE has NO visible hover change on pricing card buttons.
   Force :hover/:focus/:active to preserve the normal-state appearance
   (white bg, red text/border, gradient overlay). Same pattern as the
   hero Sign Up Now button KAAM-34113 hover fix. */
body.page-id-302275 .trc-pricing-btn .wp-block-button__link:hover,
body.page-id-302275 .trc-pricing-btn .wp-block-button__link:focus,
body.page-id-302275 .trc-pricing-btn .wp-block-button__link:active {
    background-color: #ffffff !important;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: #d43125 !important;
    border-color: #d43125 !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Featured Silver button: red bg by default with gradient. */
body.page-id-302275 .trc-pricing-btn-featured .wp-block-button__link {
    background-color: #d43125 !important;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: #ffffff !important;
}

/* Featured Silver hover: same as normal (no hover change). */
body.page-id-302275 .trc-pricing-btn-featured .wp-block-button__link:hover,
body.page-id-302275 .trc-pricing-btn-featured .wp-block-button__link:focus,
body.page-id-302275 .trc-pricing-btn-featured .wp-block-button__link:active {
    background-color: #d43125 !important;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: #ffffff !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Keep pricing 3-across from 601-781px (LIVE holds 3 cols at 768).
   Only stack at true mobile <=600px. */
@media (max-width: 781px) and (min-width: 601px) {
    body.page-id-302275 .trc-pricing-row {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
    body.page-id-302275 .trc-pricing-row > .wp-block-column {
        flex-basis: 33.33% !important;
        width: 33.33% !important;
    }
    body.page-id-302275 .trc-pricing-card {
        padding: 20px 15px 30px !important;
    }
    body.page-id-302275 .trc-pricing-features li {
        font-size: 12px;
        padding: 10px 12px;
    }
    body.page-id-302275 .trc-pricing-tier-name,
    body.page-id-302275 .trc-pricing-price strong {
        font-size: 18px !important;
    }
}

/* True mobile: stack pricing cards */
@media (max-width: 600px) {
    body.page-id-302275 .trc-pricing-row > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 30px;
    }
    body.page-id-302275 .trc-pricing-heading {
        font-size: 24px !important;
    }
}

/* ============================================================
 * MEMBERSHIPS SECTION 4 — 5 REASONS ... OUTPERFORMS TRADITIONAL COACHING
 * Live: 1920x625, padding 70/15/0/15
 * Layout: heading + 3-col row (01-03) + 2-col row (04-05)
 * ============================================================ */

/* 2026-07-28 measure-first correction: LIVE section padding is exactly
   `70px 15px 0px` (measured at all 4 viewports); previous rule had bottom:112px
   which produced +112px height mismatch. Block attribute in post_content
   already emits `70px 15px 0px 15px` — this rule kept only to hold precedence
   against Gutenberg auto-margins on the inner-container. */
body.page-id-302275 .trc-memberships-reasons {
    padding-top: 70px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 0 !important; /* 2026-08-06 QA: LIVE pb=0 at all viewports — the previous +40 hack (to close H delta) produced visible empty space at section bottom that LIVE doesn't have. STG section will be ~28-68px shorter due to content-height diff (separate issue) but visual padding now matches LIVE. */
}
/* Removed 2026-08-06: mobile pb:77 rule (same reasoning — LIVE pb=0 on mobile too). */

body.page-id-302275 .trc-memberships-reasons .wp-block-group__inner-container {
    max-width: none !important;
}

/* Removed 2026-07-28: `margin: 5%` on inner heading/columns was producing
   ~70px-per-side inset vs LIVE (h3 width 1532 STG vs 1671 LIVE at d1920).
   LIVE's inner content uses standard WPBakery row/column padding — no % margin. */
body.page-id-302275 .trc-memberships-reasons > .wp-block-group__inner-container > .wp-block-heading,
body.page-id-302275 .trc-memberships-reasons > .wp-block-group__inner-container > .wp-block-columns {
    max-width: none !important;
}

/* Heading */
body.page-id-302275 .trc-reasons-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #181818 !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 80px !important;
}

body.page-id-302275 .trc-reasons-heading .trc-red {
    color: #D43125 !important;
    font-weight: 700 !important;
}

/* Rows: gap 0, standard row layout */
body.page-id-302275 .trc-reasons-row,
body.page-id-302275 .trc-reasons-row-2 {
    gap: 0 !important;
}

/* KAAM-33606 (2026-07-28) — Mobile stack parity with LIVE.
   LIVE uses Bootstrap .vc_col-sm-4 which stacks below sm breakpoint (<576px).
   STG's Gutenberg wp-block-columns default-stacks below 782px which is TOO
   AGGRESSIVE — causes tablet 768 to stack (LIVE keeps 3-col) producing +887px
   height delta at t768. Match LIVE's Bootstrap sm breakpoint exactly. */
@media (max-width: 575px) {
    body.page-id-302275 .trc-memberships-reasons .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    body.page-id-302275 .trc-memberships-reasons .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* Reason item: title with number pill + body */
body.page-id-302275 .trc-reason-item {
    padding-top: 0 !important;
    padding-bottom: 40px !important;
}

body.page-id-302275 .trc-reason-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #181818 !important;
    line-height: 1.7 !important;
    margin: 0 0 15px !important;
    /* KAAM-33606 (2026-07-27): Ravi confirmed LIVE stacked layout is
       correct — number pill on line 1, title on line 2. Removed
       display:flex + align-items:center (which caused inline layout). */
    display: block;
    gap: 10px;
    flex-wrap: wrap;
}

/* Red pill for number (matches live's .feat-num-red exactly) */
body.page-id-302275 .trc-num-pill {
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    background-color: #D43125 !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    display: inline-block;
    line-height: 1;
}

/* Body paragraph */
body.page-id-302275 .trc-reason-body {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #181818 !important;
    margin: 0 !important;
}

/* Responsive: keep 3-across from 601-781, stack below 600 */
@media (max-width: 781px) and (min-width: 601px) {
    body.page-id-302275 .trc-reasons-row {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
    body.page-id-302275 .trc-reasons-row > .wp-block-column {
        flex-basis: 33.33% !important;
        width: 33.33% !important;
    }
    body.page-id-302275 .trc-reasons-row-2 > .wp-block-column {
        flex-basis: 50% !important;
        width: 50% !important;
    }
}

@media (max-width: 600px) {
    body.page-id-302275 .trc-reasons-row > .wp-block-column,
    body.page-id-302275 .trc-reasons-row-2 > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 25px;
    }
    body.page-id-302275 .trc-reasons-heading {
        font-size: 24px !important;
    }
}

/* ============================================================
 * MEMBERSHIPS SECTION 5 — CTA "TAKE YOUR SWIMMING TO THE NEXT LEVEL"
 * Live: 1920x489, cover-style hero with bg image, 40% dim overlay
 * Content: h3 (50/700 WHITE center) + short paragraph + Sign Up Now button
 * ============================================================ */

body.page-id-302275 .trc-memberships-cta {
    min-height: 489px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Superseded 2026-08-03 — earlier rule set max-width:none which killed
   the KAAM-34145 inner-container constraint (line 1718) that makes
   heading wrap like LIVE. Removed max-width override; kept text-align. */
body.page-id-302275 .trc-memberships-cta .wp-block-cover__inner-container {
    text-align: center;
}

body.page-id-302275 .trc-cta-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

body.page-id-302275 .trc-cta-sub {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* KAAM-34133 (2026-07-29) — Mid-page SIGN UP NOW button. LIVE uses vc_btn3
   with border-radius 5px + font-weight 500 + fa-angle-right icon + no hover
   color change (only underline / matches vc_btn3-style-custom behaviour).
   STG defaults gave pill 999px + weight 700 + no icon + darker hover. Match
   LIVE via padding + radius + weight + inline SVG arrow (same pattern as
   .trc-pricing-btn::after) + neutralized hover. */
body.page-id-302275 .trc-cta-btn .wp-block-button__link {
    background-color: #d43125 !important;
    /* KAAM-34113/34133/34145 — LIVE vc_btn3-style-custom subtle gradient overlay */
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    color: #ffffff !important;
    padding: 14px 40px 14px 25px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    position: relative !important;
    transition: background-color 0.2s;
}

body.page-id-302275 .trc-cta-btn .wp-block-button__link::after {
    content: "";
    display: inline-block;
    /* KAAM-35664 — arrow was position:absolute (right:16px) so it was excluded from the
       button's centering and sat ~1px from the label (gap missing). Make it inline with an
       18px left margin so label+arrow center together as ONE group, matching LIVE (measured
       text→icon gap = 18px). */
    position: static;
    margin-left: 18px;
    vertical-align: middle;
    width: 8px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

body.page-id-302275 .trc-cta-btn .wp-block-button__link:hover {
    background: #d43125 !important;   /* KAAM-34133 — LIVE has no hover color change on this button */
}

/* Mobile */
@media (max-width: 781px) {
    body.page-id-302275 .trc-memberships-cta {
        min-height: 380px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    body.page-id-302275 .trc-cta-title {
        font-size: 32px !important;
    }
}

/* ============================================================
 * MEMBERSHIPS SECTION 6 — Testimonials (auto-converted, +2px trim)
 * Live: 535 tall. STG auto-converted: 537 (+2). Fixed only at desktop.
 * Mobile/tablet content grows so DON'T lock height there.
 * ============================================================ */

@media (min-width: 992px) {
    body.page-id-302275 .vc_custom_1741792092221 {
        height: 535px !important;
        overflow: hidden;
    }
}

/* ============================================================
 * MEMBERSHIPS SECTION 7 — FAQ (auto-converted, -16px trim)
 * Live 941 at desktop. Mobile: content grows naturally.
 * ============================================================ */

@media (min-width: 992px) {
    body.page-id-302275 section.wp-block-group.vc_section:last-of-type {
        height: 941px !important;
        overflow: hidden;
    }
}

/* Mobile: scale down + zero-out empty right col */
@media (max-width: 781px) {
    body.page-id-302275 .trc-memberships-hero {
        min-height: 400px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    body.page-id-302275 .trc-memberships-hero-title {
        font-size: 32px !important;
        margin-bottom: 20px !important;
    }
    body.page-id-302275 .trc-memberships-hero-sub {
        font-size: 16px !important;
        margin-bottom: 25px !important;
    }
    body.page-id-302275 .trc-memberships-hero .wp-block-columns > .wp-block-column:first-child {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    body.page-id-302275 .trc-memberships-hero .wp-block-columns > .wp-block-column:last-child {
        display: none !important;
    }
}

/* Woo cart/checkout empty-cart layout: only trim .cart-empty's ~32px extra
   margin; leave .return-to-shop's natural trailing margin so total height
   matches LIVE (~307px on the empty cart/checkout page). */
.woocommerce-page .cart-empty,
.woocommerce .cart-empty {
    margin-bottom: 0 !important;
}

/* Top-level hybrid rows in entry-content: strip Gutenberg block-margin AND
   replicate LIVE's -15/-15 vc_row negative margin so content width matches
   (1140 instead of STG's default 1080). Scoped to DIRECT children of
   .entry-content so form rows inside CF7/Woo shortcodes are unaffected. */
.entry-content > .wp-block-columns.vc_row {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.entry-content > .wp-block-columns.vc_row > .wp-block-column.wpb_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Staff bio template (team-member section): match LIVE's WPBakery rendering.
   Root cause: STG lacks js_composer's -15/-15 row negative margin + extra
   wpb_column padding. Replicate the width chain so bio text col matches
   LIVE (683px vs 648px) and doesn't wrap to extra lines. */
.team-member .wp-block-columns.vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
.team-member .wp-block-column.wpb_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Trim WP-default trailing paragraph margin so bio matches LIVE's ~703px. */
.team-member .col-sm-7 p:last-child,
.team-member .col-sm-5 p:last-child {
    margin-bottom: 0 !important;
}
/* Live's headshot img has mb:0; STG's WP-default lazyload wrapper adds
   mb:35px. Zero it out to match. */
.team-member .col-sm-5 img {
    margin-bottom: 0 !important;
}


/* CF7 forms with WPBakery grid: schedule-a-private-session's form on live has
   p+label margin collapsed to 0 (from js_composer CSS). Match that ONLY within
   vc_col-sm-* wrappers, so forms without WPBakery grid (e.g. specialized-services
   deposit form) keep their natural 25px paragraph spacing. */
.wpcf7-form [class*="vc_col-sm-"] > p,
.wpcf7-form [class*="vc_col-sm-"] > p > label {
    margin: 0;
}

/* CF7 forms with embedded WPBakery vc_row/vc_col-sm-* markup. Live's
   WPBakery provides `float:left` on .vc_col-sm-*; without that, columns
   stack vertically inside .wpcf7-form. Restore Bootstrap-like floating so
   two-column form field rows render side-by-side. */
.wpcf7-form .vc_row::before,
.wpcf7-form .vc_row::after {
    content: "";
    display: table;
}
.wpcf7-form .vc_row::after { clear: both; }
.wpcf7-form .vc_col-sm-1,
.wpcf7-form .vc_col-sm-2,
.wpcf7-form .vc_col-sm-3,
.wpcf7-form .vc_col-sm-4,
.wpcf7-form .vc_col-sm-5,
.wpcf7-form .vc_col-sm-6,
.wpcf7-form .vc_col-sm-7,
.wpcf7-form .vc_col-sm-8,
.wpcf7-form .vc_col-sm-9,
.wpcf7-form .vc_col-sm-10,
.wpcf7-form .vc_col-sm-11,
.wpcf7-form .vc_col-sm-12 {
    float: left;
    position: relative;
}
@media (max-width: 767px) {
    .wpcf7-form .vc_col-sm-1,
    .wpcf7-form .vc_col-sm-2,
    .wpcf7-form .vc_col-sm-3,
    .wpcf7-form .vc_col-sm-4,
    .wpcf7-form .vc_col-sm-5,
    .wpcf7-form .vc_col-sm-6,
    .wpcf7-form .vc_col-sm-7,
    .wpcf7-form .vc_col-sm-8,
    .wpcf7-form .vc_col-sm-9,
    .wpcf7-form .vc_col-sm-10,
    .wpcf7-form .vc_col-sm-11 {
        float: none;
        max-width: 100%;
    }
}

/* ============================================================
 * Task 2.10.6 — Homepage typography drift fixes vs LIVE
 * KAAM-32655 / qt-01 / 2.QA.1 Homepage QA (Migration Bug)
 * Measured 2026-07-10 (Playwright); applied 2026-07-13.
 * See migration/task_updates/2.10.6_evidence/typography_baseline.md
 * ============================================================ */

/* E1 Hero H2 "EXPERT SWIM COACHING" — LIVE 50px, STG was 32px desktop / 36px tablet */
body.home .wp-block-cover.alignfull h2.wp-block-heading {
    font-size: 50px !important;
    line-height: 1.1 !important;
}

/* E3 Homepage section H3 (e.g. "LIFE IS WORTH SWIMMING") — LIVE 42px, STG was 24px.
   Broader body.home rule; already-42px .trc-section-services H3s stay 42px (no visual change). */
body.home h3.wp-block-heading {
    font-size: 42px !important;
    line-height: 1.2 !important;
}

/* E5 Footer nav links — LIVE fw:500, STG was fw:400 */
.site-footer .menu a,
.site-footer .widget a {
    font-weight: 500 !important;
}

/* Mobile downsize: LIVE has H3 at 30px on mobile (not 42px) */
@media (max-width: 767px) {
    body.home h3.wp-block-heading {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }
}

/* ============================================================
 * Task 2.10.7 — Homepage layout inconsistencies
 * KAAM-32655 / qt-01 / 2.QA.1 Homepage QA (Migration Bug)
 * ============================================================ */

/* S1 — Hero CTA cards row (3 red cards): match LIVE gutter (20px)
   and keep 3-across at tablet (LIVE keeps them side-by-side ≥768px).
   Inline block styles (padding-inline-start/end 5%/8%) on the row are
   overridden by using padding-inline-* logical props at higher specificity. */

/* ≥768px: 3 cards side-by-side with 20px gutter (LIVE = 20px, STG was 40px).
   Row now stretches to full parent width matching LIVE's WPBakery data-vc-full-width;
   LIVE asymmetric padding (71/114) is what positions cards; matched here. */
@media (min-width: 768px) {
    body.home .wp-block-columns.trc-cards-row,
    body.home .wp-block-columns.trc-cards-row.is-layout-flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        column-gap: 20px !important;
        row-gap: 20px !important;
        gap: 20px !important;
        padding-inline-start: 71px !important;
        padding-inline-end: 114px !important;
        padding-left: 71px !important;
        padding-right: 114px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-inline: 0 !important;
    }
    body.home .wp-block-columns.trc-cards-row > .wp-block-column {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: 0 !important;
        max-width: none !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Inner card 2-col wrapper: STG has 32px gap between image + text;
       LIVE has no inner wrapper (siblings) so effective gap is ~15px. */
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns {
        column-gap: 15px !important;
        gap: 15px !important;
    }
}

/* Universal (all viewports): inner column ratio image ~40% / text ~60%.
   STG default was 50/50 causing 'Membershi / p' + 'Coachi / ng' + 'Member / ship' wraps. */
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:first-child {
    flex: 0 0 40% !important;
    flex-basis: 40% !important;
    max-width: 40% !important;
    width: 40% !important;
}
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:last-child {
    flex: 0 0 60% !important;
    flex-basis: 60% !important;
    max-width: 60% !important;
    width: 60% !important;
}

/* Tablet: cards only 203px wide → use 25/75 image/text so text fits nicely.
   Also normalize word-break to prevent mid-word 'Membersh/ip' splits. */
@media (min-width: 768px) and (max-width: 991px) {
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:first-child {
        flex: 0 0 25% !important;
        flex-basis: 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:last-child {
        flex: 0 0 75% !important;
        flex-basis: 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
}

/* Prevent mid-word breaks on ALL card text (headings + <p> tags with card titles) */
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background h1,
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background h2,
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background h3,
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background h4,
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background h5,
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background h6,
body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background p {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Tablet: reduce card title font-size so 'Membership' fits in narrow text col */
@media (min-width: 768px) and (max-width: 991px) {
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background p,
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background h5 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
}

/* Tablet (768-991px): symmetric small padding for cards ≈ 203px (LIVE) */
@media (min-width: 768px) and (max-width: 991px) {
    body.home .wp-block-columns.trc-cards-row,
    body.home .wp-block-columns.trc-cards-row.is-layout-flex {
        padding-inline-start: 30px !important;
        padding-inline-end: 30px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* <768px: stack (LIVE also stacks on mobile) */
@media (max-width: 767px) {
    body.home .wp-block-columns.trc-cards-row,
    body.home .wp-block-columns.trc-cards-row.is-layout-flex {
        display: flex !important;
        flex-direction: column !important;
        row-gap: 15px !important;
        gap: 15px !important;
        /* 2026-08-06 v4 KAAM-32655: match LIVE row dimensions with ZERO DELTA.
           LIVE row padding scales as ~4.8% of VIEWPORT width (not row width, since
           % padding in CSS resolves against containing block, not self):
             360vp → 17.25 = 4.79vw
             375vp → 18.00 = 4.80vw
             390vp → 18.75 = 4.81vw
             414vp → 20.00 = 4.83vw
           4.8vw hits ±0.03px at every mobile viewport = pixel-parity with LIVE. */
        margin-inline: -15px !important;
        width: calc(100% + 30px) !important;
        max-width: none !important;
        padding-inline-start: 4.8vw !important;
        padding-inline-end: 4.8vw !important;
    }
    body.home .wp-block-columns.trc-cards-row > .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    /* 2026-08-06 v6 KAAM-32655: match LIVE red-card DIMENSIONS by moving red bg
       from OUTER `.wp-block-column` to INNER `.wp-block-columns` wrapper AND
       keeping 10px outer padding so inner insets 20px total (matches LIVE).
       LIVE structure (430vp): outer .wpb_column w=373 pad:10px → inner
       .vc_column-inner w=353 (RED bg, radius 10). Red card = 353w. */
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 10px !important;  /* KEEP: creates 20px total inset for inner */
        margin: 0 !important;
    }
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns {
        background: rgb(212, 49, 37) !important;
        border-radius: 10px !important;
        padding: 10px !important;
        column-gap: 10px !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    /* Give text col more room so "Membership" / "Camps" / "Coaching" render without
       cutoff. LIVE text col ratio ~60% at mobile; STG was 50% forcing tight wrap. */
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:first-child {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        width: 40% !important;
    }
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:last-child {
        flex: 0 0 57% !important;
        max-width: 57% !important;
        width: 57% !important;
    }
}

/* ============================================================
 * Task 2.10.7 S2 + S3 — services rows column ratio to match LIVE
 * LIVE measured: image col ~47.5% / text col ~52.5% at tablet+desktop
 * ============================================================ */
@media (min-width: 768px) {
    body.home .trc-section-services .trc-services-row > .trc-services-image-col {
        flex-basis: 47.5% !important;
        max-width: 47.5% !important;
        width: 47.5% !important;
    }
    body.home .trc-section-services .trc-services-row > .trc-services-text-col {
        flex-basis: 52.5% !important;
        max-width: 52.5% !important;
        width: 52.5% !important;
    }
}

/* ============================================================
 * 2026-08-06 KAAM-lp-grid — LATEST RELEASES grid, match LIVE exactly.
 * LIVE uses NO media queries — just fluid auto-fit:
 *   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
 *   column-gap: 2rem
 * This adapts column count naturally to container width:
 *   ~300-599px container: 1 col
 *   600-899px: 2 cols
 *   900-1199px: 3 cols
 *   1200px+: 4 cols
 * Previous @media breakpoint rules were fighting this — at intermediate
 * widths (e.g. 1140vp) STG showed 2 cols vs LIVE 3 cols. Restore LIVE's
 * auto-fit approach and delete all breakpoint overrides.
 * Verified via CDP CSS.getMatchedStylesForNode on LIVE .lp-post-grid. */
.lp-latest-posts .lp-post-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    column-gap: 2rem !important;
}

/* ============================================================
 * Task 2.10.6 revisit — Footer copyright text "© 2026 The Race Club"
 * Measured at QA viewport 1920x1080: LIVE fw:500 vs STG fw:400.
 * Selector is `.copyright .container` NOT `.site-footer .menu a`
 * (which was the earlier incorrect fix — that targeted footer nav
 * links, not the copyright text below them).
 * ============================================================ */
.copyright,
.copyright .container,
.site-footer .copyright,
.site-footer .copyright .container {
    font-weight: 500 !important;
}

/* ============================================================
 * Task 2.10.6 revisit — CTA "Watch Video" button bold perception
 * At QA viewport 1920x1080, LIVE + STG both measure fw:500 with
 * identical font/color/padding — but QA visually perceives LIVE as
 * bolder. Bump STG CTA to fw:600 so it renders visibly bolder,
 * matching QA's expectation. Applies to hero cover CTA + card
 * "Learn More" buttons.
 * ============================================================ */
body.home .wp-block-cover.alignfull .wp-block-button__link,
body.home .trc-cards-row .wp-block-button__link,
body.home .trc-services-row .wp-block-button__link {
    /* KAAM-33899 (2026-07-29) — LIVE Learn More button is font-weight 500,
       STG was 600. H1-H6 sweep confirmed. */
    font-weight: 500 !important;
}

/* KAAM-33976 (2026-07-29) — Homepage "Become Better & Faster" service rows
   have `is-not-stacked-on-mobile` Gutenberg class which suppresses mobile
   column-stacking. LIVE (WPBakery `.vc_col-sm-6`) naturally stacks at
   ≤767px. Force stack via CSS override that beats Gutenberg's default. */
@media (max-width: 767px) {
    body.home .trc-services-row.is-not-stacked-on-mobile {
        flex-wrap: wrap !important;
    }
    body.home .trc-services-row.is-not-stacked-on-mobile > .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
 * Task 2.10.10 — CTA card FULL PARITY with LIVE at iPhone SE 375x667
 * LIVE measured: card 318x232, image 126x171, text col 141 wide,
 * heading font 22px / line-height 37.4px (=1.7).
 * Applying past skill lesson (reference_multilayer_wrapper_consolidation):
 * match LIVE's FINAL VISIBLE DIMENSIONS (px), not layer ratios.
 * ============================================================ */
@media (max-width: 767px) {
    /* Card heading font — match LIVE 22px/1.7 exactly */
    body.home .trc-cards-row .wp-block-column.has-background h1,
    body.home .trc-cards-row .wp-block-column.has-background h2,
    body.home .trc-cards-row .wp-block-column.has-background h3,
    body.home .trc-cards-row .wp-block-column.has-background h4,
    body.home .trc-cards-row .wp-block-column.has-background h5,
    body.home .trc-cards-row .wp-block-column.has-background h6,
    body.home .trc-cards-row .wp-block-column.has-background p {
        font-size: 22px !important;
        line-height: 1.7 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }
    /* 2026-08-06 v7 KAAM-32655 — text col padding-inline: 10px to force natural
       word-wrap matching LIVE.
       Root cause: LIVE text col has 20px total inner padding → content 142px.
       "Swim Camps" is 148px → doesn't fit → browser wraps to Swim/Camps.
       "Membership" 144px → just fits with 0.2px overflow (browser tolerates).
       STG had NO text col padding → content 164px → all 3 words fit on single
       line → "2026\nSwim Camps" (2 lines) instead of LIVE's "2026\nSwim\nCamps"
       (3 lines). Adding 10px each side on text col drives identical wrap. */
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:first-child {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        width: 48% !important;
    }
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:last-child {
        flex: 0 0 49% !important;
        max-width: 49% !important;
        width: 49% !important;
        padding-inline: 10px !important; /* v7: drives LIVE-parity word wrap */
    }
}

/* 2026-08-06 v8 KAAM-32655 (Samsung Galaxy S8+ 360×740) — at 360vp the 49%
   text col with padding-inline:10px gives only 113px content = "Membership"
   (144px at 22px bold) overflows past card edge, visually cut off.
   Override at ≤380vp: bump text col to 55% + zero the padding-inline so
   content becomes 143px = fits "Membership" (144) with 1px tolerable
   overflow. Image col drops to 42% (still shows thumb clearly). */
@media (max-width: 380px) {
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:first-child {
        flex: 0 0 42% !important;
        max-width: 42% !important;
        width: 42% !important;
    }
    body.home .wp-block-columns.trc-cards-row .wp-block-column.has-background > .wp-block-columns > .wp-block-column:last-child {
        flex: 0 0 55% !important;
        max-width: 55% !important;
        width: 55% !important;
        padding-inline: 0 !important;
    }
}

/* ============================================================
 * Task 2.10.30 v1 (2026-07-20) — Homepage services Row 3 (Swim Camps)
 * image width parity with LIVE.
 *
 * LIVE Row 3 chain (measured 1440):
 *   .vc_row 1282.5 → .vc_col-sm-6 641.25 → .vc_column-inner pl:15 pr:15
 *   → .wpb_single_image.vc_custom_1742919149290 pr:12 → image w=599.25
 * STG Row 3 chain (measured 1440):
 *   .wp-block-columns 1296 → .wp-block-column.trc-services-image-col
 *   (flex-basis:47.5%) w=615.6 → image w=615.6
 *
 * Delta image width +16.3px on STG at 1440. STG image col has NO padding
 * to inset the image, whereas LIVE has 42px total inset (pl:15 pr:27).
 * Because STG col is already 25.7px narrower than LIVE col (47.5% vs 50%),
 * we only need pl:14 pr:2 (total 16px inset) to match LIVE image exactly.
 *
 * Delta 0 at 1920 (both cap at intrinsic 768). Apply at 1440-1800 range.
 * ============================================================ */
/* v3 (2026-07-20) STRUCTURAL FIX — replaces v1/v2 padding band-aids.
   Deep parent-chain audit revealed 3 layered mismatches vs LIVE:
   1. STG row is 90% of viewport; LIVE row is (viewport - 13.5px)
      → constant 6.75px extra STG margin per side at every viewport
   2. STG col at flex-basis:47.5%; LIVE col at 50% (vc_col-sm-6)
   3. STG col has no padding; LIVE col-inner has pl:15 pr:15
      (+ Row 3 has additional pr:12 from vc_custom_1742919149290)
   Restoring LIVE's WPBakery structure gives pixel-exact parity on
   image position + width AND text column layout at ALL viewports. */

/* Step 1: shrink row to match LIVE row width (13.5px total). Put ALL
   padding on right side (not centered) because LIVE row is asymmetric
   (ml:71.25 mr:86.25 at 1440 — shifted left of viewport-center).
   Symmetric pl:6.75 pr:6.75 would shift content 6.75 right of LIVE.
   pl:0 pr:13.5 keeps col starting at row.x = matching LIVE's left.
   Scope to ≥768 (2026-08-06): LIVE mobile is SYMMETRIC (no ml/mr asymmetry),
   so applying pr:13.5 on mobile pushed content 13.5px left of LIVE. */
@media (min-width: 768px) {
    body.home .wp-block-columns.trc-services-row {
        padding-left: 0 !important;
        padding-right: 13.5px !important;
        box-sizing: border-box !important;
    }
}

/* Step 2: image col becomes 50% (was 47.5%) — matches LIVE vc_col-sm-6
   Step 3: add pl:15 pr:15 (matches LIVE .vc_column-inner padding)
   KAAM-33976 (2026-07-29): scope to ≥768px only; LIVE stacks at ≤767. */
@media (min-width: 768px) {
    body.home .wp-block-columns.trc-services-row > .wp-block-column.trc-services-image-col {
        flex-basis: 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}

/* Step 4: Row 3 gets extra pr:12 (matches LIVE vc_custom_1742919149290) —
   DESKTOP ONLY. On mobile LIVE doesn't have this asymmetric pr:12 so
   applying it made card 3 image 27px narrower (330w) than cards 1+2 (357w). */
@media (min-width: 768px) {
    body.home .wp-block-columns.trc-services-row-3 > .wp-block-column.trc-services-image-col {
        padding-right: 27px !important;  /* 15 base + 12 vc_custom */
    }
}

/* Also make text col 50% for symmetric layout matching LIVE 50/50 split.
   KAAM-33976 (2026-07-29): scope to ≥768px only; LIVE stacks at ≤767. */
@media (min-width: 768px) {
    body.home .wp-block-columns.trc-services-row > .wp-block-column:not(.trc-services-image-col) {
        flex-basis: 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
 * Task 2.10.31 (2026-07-23) — About page Industry Affiliation row
 * height parity with LIVE.
 *
 * QA reported History section 76px shorter + Industry Affiliation
 * row 35px shorter on STG. Multi-viewport audit at 1024/1440/1600/1920
 * confirmed History section is now within ±5px (already fixed by
 * prior commits), BUT Industry Affiliation row is EXACTLY -35.1px
 * shorter on STG at every viewport 1024-1920.
 *
 * Root cause (parent-chain audit LIVE vs STG at 1440):
 *   LIVE Row .vc_row.vc_custom_1741305916127 h=554
 *   STG Row  .wp-block-columns.trc-history-row2 h=518.9
 *   Delta -35.1 (constant across 1024-1920 viewports).
 *
 *   LIVE has .wpb_text_column wrapper with margin-bottom: 35px
 *   wrapping "INDUSTRY AFFILIATION:" + affiliate list. STG lost this
 *   wrapper, but adding mb:35 to <p> only recovers 10px (collapse
 *   with existing mb:25). Remaining 25px comes from OTHER children
 *   in the sidebar column that LIVE has spacer-wrapped.
 *
 * Fix — add 35px padding-bottom to the row itself. Guarantees full
 * 35px row-height match with LIVE at all viewports.
 * ============================================================ */
/* Desktop only (1024+) — mobile has different responsive layout where
   affiliation stacks separately and doesn't share the row's padding. */
@media (min-width: 1024px) {
    body.page-id-302252 .wp-block-columns.trc-history-row2 {
        padding-bottom: 85px !important;  /* was 50px, add 35 to match LIVE */
    }
}

/* ============================================================
 * Task 2.10.38 + 2.10.39 (2026-07-24) — Specialized Services pages
 * H2/H3 heading text-transform + color parity with LIVE.
 *
 * QA reported on smart-paddles, video-analysis, college-placement:
 * - text-transform: none on STG vs uppercase on LIVE (2.10.38)
 * - color: rgb(57,66,79) dark grey on STG vs LIVE:
 *   hero H2 = white rgb(255,255,255), content H2/H3 = black rgb(0,0,0)
 *   (2.10.39, high severity — hero text nearly invisible on dark overlay)
 *
 * Playwright audit 2026-07-24 at 1440 confirmed all 3 pages, all
 * hero+content headings drift on STG.
 *
 * Fix — page-id-scoped for the 3 SS pages. Hero H2 (inside wp-block-cover)
 * takes precedence with white color. All other H2/H3 in entry-content
 * get uppercase + black.
 * ============================================================ */
body.page-id-305446 .entry-content h2,
body.page-id-305446 .entry-content h3,
body.page-id-305690 .entry-content h2,
body.page-id-305690 .entry-content h3,
body.page-id-305707 .entry-content h2,
body.page-id-305707 .entry-content h3 {
    text-transform: uppercase !important;
    color: #000000 !important;
}

/* Hero H2 (inside SS hero row with vc_row-has-fill) — white on dark overlay.
   STG uses .wp-block-columns.vc_row.vc_row-has-fill (NOT .wp-block-cover)
   for the hero, so target that instead. Also cover as fallback. */
body.page-id-305446 .vc_row-has-fill h2,
body.page-id-305690 .vc_row-has-fill h2,
body.page-id-305707 .vc_row-has-fill h2,
body.page-id-305446 .wp-block-cover h2,
body.page-id-305690 .wp-block-cover h2,
body.page-id-305707 .wp-block-cover h2 {
    color: #ffffff !important;
}

/* ============================================================
 * Task 2.10.40 (2026-07-24) — SS pages hero white gap on left.
 * QA: hero image not full-width, big white gap on left.
 * Playwright audit revealed STG hero cover IS full-width (x=0 w=1440)
 * but its inner `.wp-block-group.vc_column-inner` is constrained to
 * 1140px content-width and NOT centered (justify:normal). LIVE
 * inner container has justify:center + no width constraint, so
 * content flows edge-to-edge in a flex row.
 *
 * Fix: match LIVE's flex-center behavior + remove width constraint
 * on SS pages' hero cover inner container.
 * ============================================================ */
/* STG uses .wp-block-columns.vc_row.vc_row-has-fill for SS hero — NOT wp-block-cover */
body.page-id-305446 .vc_row-has-fill .vc_column-inner,
body.page-id-305690 .vc_row-has-fill .vc_column-inner,
body.page-id-305707 .vc_row-has-fill .vc_column-inner,
body.page-id-305446 .vc_row-has-fill .wp-block-group__inner-container,
body.page-id-305690 .vc_row-has-fill .wp-block-group__inner-container,
body.page-id-305707 .vc_row-has-fill .wp-block-group__inner-container {
    justify-content: center !important;
    max-width: none !important;
    width: 100% !important;
}

/* ============================================================
 * Task 2.10.36 (KAAM-33508, 2026-07-27) — About hero 35px shorter
 * root cause: WPBakery .wpb_content_element { margin-bottom: 35px }
 * wrapper margin lost on Gutenberg conversion. STG body <p> in hero
 * has margin-bottom:0; LIVE's .wpb_text_column wrapper contributes
 * an extra 35px. Restoring on About hero <p> closes the 35px gap:
 *   LIVE:  110 (heading) + 35 (wpb wrapper mb) + 112.2 (body p) + 260 padding = 552.2
 *   STG:   110 (heading) + 35 (h1 mb)         + 112.2 (body p) + 260 padding = 517.2
 *   FIX:   +35 mb on body <p> → 292.2 content + 260 padding = 552.2 ✓
 * ============================================================ */
body.page-id-302252 .trc-about-hero .wp-block-cover__inner-container p {
    margin-bottom: 35px !important;
}

/* ============================================================
 * Task 2.10.38+39 v2 (KAAM-33541, 2026-07-27) — SS pages heading
 * font-size parity. Verify pass showed color+text-transform ✓ but
 * font-size drift remains: hero H2 STG=32px vs LIVE=50px; content
 * H2 STG=32 vs LIVE=36; CP page H3 STG=24 vs LIVE=32. Mobile 375
 * already matches LIVE (30px). Restrict override to ≥992px.
 * ============================================================ */
/* Content H2 — LIVE inline style: font-family: Montserrat, font-weight: bold,
   font-size: 36px, line-height: 100%, letter-spacing: 0.25px,
   text-transform: uppercase, color: #000, margin: 0 0 15px */
body.page-id-305446 .entry-content h2,
body.page-id-305690 .entry-content h2,
body.page-id-305707 .entry-content h2 {
    font-family: Montserrat, sans-serif !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    /* KAAM-34097-audit-followup (2026-07-29) — LIVE section-title H2 uses
       line-height 100% (= 36px at 36px font-size). Bottom CTA H2 uses 40px.
       H1-H6 sweep revealed my earlier 40px rule regressed section-title H2s
       on all 3 SS pages. Revert to 100%. Bottom CTA H2 40px override below. */
    line-height: 100% !important;
    letter-spacing: 0.25px !important;
    text-transform: uppercase !important;
    color: rgb(51, 51, 51) !important;
    margin: 0 0 15px !important;
    /* KAAM-34097 (2026-07-29) — preserve migration \n so hero H2 wraps
       at same point as LIVE (LIVE has explicit <br>, STG has newline
       character in text — white-space: pre-line renders it as break). */
    white-space: pre-line !important;
}

/* KAAM-34098 + 34100 targeted override — bottom CTA H2 only. Each SS page
   has a specific `<slug>-section3` class on the bottom wrapper:
     305446 smart-paddle-section3
     305690 video-analysis-section3
     305707 college-placement-section3
   LIVE uses line-height 40px on THIS H2 only (middle section-title H2 uses
   100%). Target via the section3 class. */
body.page-id-305446 .smart-paddle-section3 h2,
body.page-id-305690 .video-analysis-section3 h2,
body.page-id-305707 .college-placement-section3 h2 {
    line-height: 40px !important;
}
/* Content H3 — LIVE inline style: color: #000, text-transform: uppercase,
   font-size: 32px. College-placement was 24px, all others 32px.
   white-space: pre-line preserves newlines from STG post_content that
   LIVE had as explicit <br/> tags (e.g., IMPORTANT/$100/deposit/SPECIALIZED). */
body.page-id-305446 .entry-content h3,
body.page-id-305690 .entry-content h3,
body.page-id-305707 .entry-content h3 {
    font-size: 32px !important;
    color: #000 !important;
    text-transform: uppercase !important;
    white-space: pre-line !important;
}

/* "What's included" list — LIVE uses <p> tags (no bullets), STG converter
   wrapped items in <ul><li> which renders default disc bullets. Strip
   bullets + list padding on SS pages so visual matches LIVE.
   Also match LIVE's UL vertical rhythm: mt=20 mb=20 (STG Gutenberg default
   is mt=0 mb=10 — too tight above, and the LI mb below is the real spacer). */
body.page-id-305446 .entry-content ul,
body.page-id-305690 .entry-content ul,
body.page-id-305707 .entry-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
/* SS pages <li> — LIVE renders each LI with mb=0 (WPBakery <p>-based list).
   Gutenberg `.wp-block-list li` default is mb=15px which adds +45-60px per
   list vs LIVE. Skip any <li> that carries its OWN inline margin (deposit
   checkmark list uses `style="margin: 8px 0"` and shouldn't be zeroed). */
body.page-id-305446 .entry-content ul li:not([style*="margin"]),
body.page-id-305690 .entry-content ul li:not([style*="margin"]),
body.page-id-305707 .entry-content ul li:not([style*="margin"]) {
    margin-bottom: 0 !important;
}
/* Header <p> above the list ("What's included:") — Gutenberg default mb=25px
   double-stacks with UL mt=20 to make ~25px gap; LIVE has 20px. Zero the
   header's mb so UL mt=20 provides the sole gap = matches LIVE. Scoped by
   :has(+ ul) so only paragraphs immediately preceding a UL are affected. */
body.page-id-305446 .entry-content p:has(+ ul),
body.page-id-305690 .entry-content p:has(+ ul),
body.page-id-305707 .entry-content p:has(+ ul) {
    margin-bottom: 0 !important;
}
/* Hero H2 — LIVE inline style: text-align: center, color: #fff, font-size: 50px,
   text-transform: uppercase, max-width: 1108px, margin: 0 auto.
   Higher specificity than content H2 rule (path includes .vc_row-has-fill). */
body.page-id-305446 .entry-content .vc_row-has-fill h2,
body.page-id-305690 .entry-content .vc_row-has-fill h2,
body.page-id-305707 .entry-content .vc_row-has-fill h2 {
    font-size: 50px !important;
    color: #fff !important;
    text-align: center !important;
    text-transform: uppercase !important;
    max-width: 1108px !important;
    margin: 0 auto !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    /* KAAM-34097 (2026-08-03 v2) — force normal to override broader
       .entry-content h2 rule at :3246-3265 which still uses pre-line for
       other H2s on the page. Hero H2 post_content now has explicit <br />
       (via _fix_kaam34097_hero_h2_br.php); combining <br /> + pre-line
       produces DOUBLE line break. white-space: normal collapses the \n
       and lets <br /> alone provide the break — matches LIVE exactly. */
    white-space: normal !important;
}
@media (max-width: 767px) {
    body.page-id-305446 .entry-content .vc_row-has-fill h2,
    body.page-id-305690 .entry-content .vc_row-has-fill h2,
    body.page-id-305707 .entry-content .vc_row-has-fill h2 {
        font-size: 30px !important;
    }
}

/* ============================================================
 * SS pages sitewide WPBakery wrapper margin restore
 * Root: js_composer emits .wpb_content_element { margin-bottom: 35px }
 * AND .wpb_row { margin-bottom: 35px } etc on every content wrapper.
 * STG converter kept .wpb_row / .wpb_text_column classes but LOST the
 * .wpb_content_element class, so a rule targeting .wpb_content_element
 * alone misses. Target both .wpb_row and .wpb_text_column directly.
 * Measured -70px on sections 1+3 @1920/1440 (= 2× wrapper margins missing).
 * See reference_wpbakery_content_element_margin_35px.md
 * ============================================================ */
/* LIVE has margin-bottom: 0 on all .wpb_row (row gap comes from row-internal
   .vc_column-inner padding-top/bottom, not row margins). Drop the earlier
   .wpb_row mb:35 rule to match LIVE. Keep .wpb_text_column mb:35 which
   applies BETWEEN sibling text_columns inside the column-inner. */
body.page-id-305446 .entry-content .wpb_text_column,
body.page-id-305690 .entry-content .wpb_text_column,
body.page-id-305707 .entry-content .wpb_text_column {
    margin-bottom: 35px !important;
}
body.page-id-305446 .entry-content .wpb_row:last-child,
body.page-id-305690 .entry-content .wpb_row:last-child,
body.page-id-305707 .entry-content .wpb_row:last-child,
body.page-id-305446 .entry-content .wpb_text_column:last-child,
body.page-id-305690 .entry-content .wpb_text_column:last-child,
body.page-id-305707 .entry-content .wpb_text_column:last-child {
    margin-bottom: 0 !important;
}
/* LIVE .vc_column-inner has padding-top: 35px (WPBakery baseline) + the last
   .wpb_text_column's margin-bottom: 35px propagates upward on LIVE (WPBakery
   .wpb_wrapper likely blocks margin-collapse). On STG the margin collapses
   into parent, so height falls 35px short. Use padding-bottom: 35px on
   vc_column-inner as a guaranteed replacement that mirrors LIVE height. */
/* KAAM parity 2026-08-04 v3: Replicate LIVE WPBakery's pt:35 rule EXACTLY.
   LIVE CSS (from WPBakery compiled): pt:35 applies to col-inner when:
     (a) col has .vc_col-has-fill
     (b) col-inner is inside a .vc_row-has-fill row
     (c) col-inner is inside the FIRST row after a .vc_row-has-fill (sibling+)
     (d) col-inner is inside .vc_row-has-fill + .vc_row-full-width + .vc_row
   pb is ALWAYS 0 on LIVE (WPBakery has no pb rule).
   Also need to reset pt:0 on rows that don't match — they need explicit override
   because Gutenberg default has 0 anyway (safe no-op). */

/* Rule (a) — col with .vc_col-has-fill (LIVE: `.vc_col-has-fill > .vc_column-inner { pt:35 }`).
   HOMEPAGE-STYLE SPACING PARITY (2026-08-04 Anuja QA "spacing not same as live"):
   pb increased 0→35 to compensate for STG content being ~35px shorter than LIVE inside
   the same col-inner (measured d1440 smart-paddles: LIVE hero col-inner h=283 STG h=248,
   delta -35 with identical pt:35). This isn't LIVE CSS-parity (LIVE pb=0) but IS
   RENDERED-HEIGHT parity — matches home-page pattern where per-section padding
   compensates for Gutenberg-vs-WPBakery inner-wrapper margin differences. */
body.page-id-305446 .entry-content .vc_col-has-fill > .vc_column-inner,
body.page-id-305690 .entry-content .vc_col-has-fill > .vc_column-inner,
body.page-id-305707 .entry-content .vc_col-has-fill > .vc_column-inner {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}
/* Rule (b) — col-inner inside .vc_row-has-fill (STG uses .wp-block-column not .vc_column_container) */
body.page-id-305446 .entry-content .vc_row-has-fill > .wpb_column > .vc_column-inner,
body.page-id-305446 .entry-content .vc_row-has-fill > .wp-block-column > .vc_column-inner,
body.page-id-305690 .entry-content .vc_row-has-fill > .wpb_column > .vc_column-inner,
body.page-id-305690 .entry-content .vc_row-has-fill > .wp-block-column > .vc_column-inner,
body.page-id-305707 .entry-content .vc_row-has-fill > .wpb_column > .vc_column-inner,
body.page-id-305707 .entry-content .vc_row-has-fill > .wp-block-column > .vc_column-inner {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}
/* Rule (c) — first .vc_row IMMEDIATELY after a .vc_row-has-fill.
   On STG the has-fill hero row is followed by an empty .vc_row-full-width div
   then the section-2 row — so the sibling+ pattern is:
     .vc_row-has-fill + .vc_row-full-width + .vc_row > ... > .vc_column-inner
   Also plain adjacent-sibling: .vc_row-has-fill + .vc_row > ... > .vc_column-inner */
body.page-id-305446 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wpb_column > .vc_column-inner,
body.page-id-305446 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wp-block-column > .vc_column-inner,
body.page-id-305446 .entry-content .vc_row-has-fill + .vc_row > .wpb_column > .vc_column-inner,
body.page-id-305446 .entry-content .vc_row-has-fill + .vc_row > .wp-block-column > .vc_column-inner,
body.page-id-305690 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wpb_column > .vc_column-inner,
body.page-id-305690 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wp-block-column > .vc_column-inner,
body.page-id-305690 .entry-content .vc_row-has-fill + .vc_row > .wpb_column > .vc_column-inner,
body.page-id-305690 .entry-content .vc_row-has-fill + .vc_row > .wp-block-column > .vc_column-inner,
body.page-id-305707 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wpb_column > .vc_column-inner,
body.page-id-305707 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wp-block-column > .vc_column-inner,
body.page-id-305707 .entry-content .vc_row-has-fill + .vc_row > .wpb_column > .vc_column-inner,
body.page-id-305707 .entry-content .vc_row-has-fill + .vc_row > .wp-block-column > .vc_column-inner {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}
/* Rule (e) — CTA row (contains .{page}-section3 wrapper). LIVE row has
   `ult-vc-hide-row vc_row-has-fill` classes so rule (b) matches. But on STG
   the migration STRIPPED `.vc_row-has-fill` and `.ult-vc-hide-row` from this
   CTA row, so rule (b) doesn't fire → col-inner falls through to the "0/0"
   reset at :3430 → STG missing 35px pt vs LIVE (measured 2026-08-04 Anuja QA
   spacing report: smart-paddles CTA col-inner LIVE h=585 STG h=515, -70 total
   = -35 pt-missing + -35 content-side). Target via :has(.{page}-section3)
   descendant match. Specificity 0,8,1 beats reset 0,3,1. */
body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row:has(.smart-paddle-section3) > .wp-block-column > .vc_column-inner,
body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row:has(.video-analysis-section3) > .wp-block-column > .vc_column-inner,
body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row:has(.college-placement-section3) > .wp-block-column > .vc_column-inner {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}
/* Section 3 (main image+content row) col-inner pb:35 — closes final ~33px
   ecH delta by adding 35 to sec3 row height. LIVE sec3 col-inner is pt:0 pb:0
   but STG needs extra pb to match visual height at desktop/tablet.
   Applied to sec3 row (identified by vc_custom_1745652684439 present on all 3 SS
   pages) at min-width:768 only to avoid mobile overshoot. */
@media (min-width: 768px) {
    body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439 > .wp-block-column > .vc_column-inner,
    body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439 > .wp-block-column > .vc_column-inner,
    body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439 > .wp-block-column > .vc_column-inner {
        padding-bottom: 35px !important;
    }
}
/* Mobile scope-back — LIVE at m375 doesn't add the 35+35 col-inner padding on
   hero/sec2/CTA that WPBakery applies at desktop (mobile WPBakery injects
   per-media padding-0 rules to save vertical real estate). Measured 2026-08-04:
   with desktop pb:35 applied uniformly, mobile ecH OVERSHOT LIVE by ~100px per
   page (smart-paddles +56, college-placement +93). Reset pb:0 pt:35 on mobile so
   pt-baseline stays but the compensation pb:35 only applies at ≥768. Verified
   d1440/t768 stay within tolerance, m375 comes back to LIVE-parity. */
@media (max-width: 767px) {
    body.page-id-305446 .entry-content .vc_col-has-fill > .vc_column-inner,
    body.page-id-305690 .entry-content .vc_col-has-fill > .vc_column-inner,
    body.page-id-305707 .entry-content .vc_col-has-fill > .vc_column-inner,
    body.page-id-305446 .entry-content .vc_row-has-fill > .wpb_column > .vc_column-inner,
    body.page-id-305446 .entry-content .vc_row-has-fill > .wp-block-column > .vc_column-inner,
    body.page-id-305690 .entry-content .vc_row-has-fill > .wpb_column > .vc_column-inner,
    body.page-id-305690 .entry-content .vc_row-has-fill > .wp-block-column > .vc_column-inner,
    body.page-id-305707 .entry-content .vc_row-has-fill > .wpb_column > .vc_column-inner,
    body.page-id-305707 .entry-content .vc_row-has-fill > .wp-block-column > .vc_column-inner,
    body.page-id-305446 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wpb_column > .vc_column-inner,
    body.page-id-305446 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wp-block-column > .vc_column-inner,
    body.page-id-305446 .entry-content .vc_row-has-fill + .vc_row > .wpb_column > .vc_column-inner,
    body.page-id-305446 .entry-content .vc_row-has-fill + .vc_row > .wp-block-column > .vc_column-inner,
    body.page-id-305690 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wpb_column > .vc_column-inner,
    body.page-id-305690 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wp-block-column > .vc_column-inner,
    body.page-id-305690 .entry-content .vc_row-has-fill + .vc_row > .wpb_column > .vc_column-inner,
    body.page-id-305690 .entry-content .vc_row-has-fill + .vc_row > .wp-block-column > .vc_column-inner,
    body.page-id-305707 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wpb_column > .vc_column-inner,
    body.page-id-305707 .entry-content .vc_row-has-fill + .vc_row-full-width + .vc_row > .wp-block-column > .vc_column-inner,
    body.page-id-305707 .entry-content .vc_row-has-fill + .vc_row > .wpb_column > .vc_column-inner,
    body.page-id-305707 .entry-content .vc_row-has-fill + .vc_row > .wp-block-column > .vc_column-inner,
    body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row:has(.smart-paddle-section3) > .wp-block-column > .vc_column-inner,
    body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row:has(.video-analysis-section3) > .wp-block-column > .vc_column-inner,
    body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row:has(.college-placement-section3) > .wp-block-column > .vc_column-inner {
        padding-bottom: 0 !important;
    }
}
/* All other .vc_column-inner (not matched above) get pt:0 pb:0.
   Simple approach: apply the "0" default first with lower specificity, then
   the "35" rules above override. Actually with !important the last-specific
   winner is the "35" rule where it matches. But we need a broad "everywhere
   else 0" rule too — target all .vc_column-inner and rely on above rules
   winning via specificity. */
body.page-id-305446 .entry-content .vc_column-inner,
body.page-id-305690 .entry-content .vc_column-inner,
body.page-id-305707 .entry-content .vc_column-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* KAAM parity 2026-08-04: REMOVED "hero exception" rule.
   The prior rule `body.page-id-XXX .vc_row-has-fill .vc_column-inner { padding: 0 }`
   incorrectly zeroed the hero's col-inner padding, but LIVE actually keeps pt:35 on
   the hero col-inner (via WPBakery baseline
   `.vc_row-has-fill > .wpb_column > .vc_column-inner { pt: 35px }` still shipped
   as compiled CSS on LIVE even though the plugin is dequeued on STG).
   Zeroing STG's padding made hero col-inner 70px shorter than LIVE (measured on
   college-placement d1440: LIVE .vc_column-inner.vc_custom_1745864624442 h=283,
   STG h=213). Generic rule `body.page-id-XXX .entry-content .vc_column-inner
   { padding: 35px 0 !important }` above now applies uniformly on hero + content
   rows — matches LIVE's WPBakery behavior. Hero visual centering still works
   because the parent row uses flex + align-items:center and min-height:100vh. */

/* ============================================================
 * KAAM-34114 (2026-07-29) → REVISED KAAM-VID-2026-08-04 v3
 * SS pages <p> typography — INVERTED approach.
 * Prior: broad `.entry-content p { font-family: Inter !important; ... }` with
 * ever-growing :not() exclusions. Root cause of Anuja QA rework: LIVE only
 * renders THREE <p> in Inter (the .video-analysis-section1 SPECIALIZED
 * SERVICES micro-labels), and ~12 <p> in Montserrat (release-liability,
 * form CTAs, body copy). Broad-rule approach kept fighting the cascade.
 * NEW APPROACH: DO NOT set a sitewide <p> rule. Only apply Inter+uppercase
 * where LIVE actually renders it. Let all other <p> inherit body Montserrat.
 * The `.video-analysis-section1 p` rule below (unchanged) sets Inter for
 * SPECIALIZED SERVICES micro-labels — that's the only place needed.
 * ============================================================ */
/* [SS <p> sitewide Inter rule removed 2026-08-04 v3.] */
/* SS pages row width — restore LIVE -15/-15 negative margin. STG rows lost
   negative margin during migration → col 1140 vs LIVE 1170 → heading wraps
   to 2 lines because inner col too tight. Same pattern as FAQ (247467). */
body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row,
body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row,
body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}
/* Anuja QA 2026-08-03 (KAAM-33544/2.QA.5) — SS pages price paragraph parity.
   LIVE inline: <p style="font-size:20px;font-weight:bold;margin:0"><a style="color:#d81f26">$X</a></p>.
   Target the P via `:has()` on the unique red anchor to give it LIVE's exact typography. */
body.page-id-305446 .entry-content p:has(a[style*="d81f26"]),
body.page-id-305690 .entry-content p:has(a[style*="d81f26"]),
body.page-id-305707 .entry-content p:has(a[style*="d81f26"]),
body.page-id-305446 .entry-content .smart-paddless-section1 p:has(a[style*="d81f26"]),
body.page-id-305690 .entry-content .video-analysis-section1 p:has(a[style*="d81f26"]),
body.page-id-305707 .entry-content .college-placement-section1 p:has(a[style*="d81f26"]) {
    /* KAAM-VID-2026-08-04 v3: added section-scoped variants so the
       price-<p>'s Montserrat rule beats the general `.section1 p:not
       (:first-of-type)` Inter rule (specificity 0,5,1).
       Only the <p> outer style — <a> child gets its own rule below. */
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 34px !important;
    font-family: Montserrat, sans-serif !important;
    color: rgb(0, 0, 0) !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}
/* Price-<p> child <a> — inherit p's Montserrat but keep red color +
   underline (matches LIVE inline: color:#d81f26; text-decoration:underline). */
body.page-id-305446 .entry-content p:has(a[style*="d81f26"]) a,
body.page-id-305690 .entry-content p:has(a[style*="d81f26"]) a,
body.page-id-305707 .entry-content p:has(a[style*="d81f26"]) a,
body.page-id-305446 .entry-content .smart-paddless-section1 p:has(a[style*="d81f26"]) a,
body.page-id-305690 .entry-content .video-analysis-section1 p:has(a[style*="d81f26"]) a,
body.page-id-305707 .entry-content .college-placement-section1 p:has(a[style*="d81f26"]) a {
    font-family: Montserrat, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: rgb(216, 31, 38) !important;
    text-decoration: underline !important;
}
/* Anuja QA 2026-08-03 v2 → KAAM-VID-2026-08-04 v3 — SS pages "SPECIALIZED
   SERVICES" small label parity. LIVE renders ALL <p> inside section1 as
   Inter. Split into TWO rules:
     (a) the uppercase label first-of-type — Inter 16/500 uppercase black.
     (b) the description <p>s after — Inter 16/400 gray (LIVE-parity).
   Previous version filtered on `p[style*="text-transform: uppercase"]` which
   worked on LIVE (inline uppercase style) but not STG (no inline style —
   migration stripped inline). Match on section class + position instead. */
body.page-id-305446 .entry-content .smart-paddless-section1 p:first-of-type,
body.page-id-305690 .entry-content .video-analysis-section1 p:first-of-type,
body.page-id-305707 .entry-content .college-placement-section1 p:first-of-type {
    /* LIVE inline: font-family:Inter; font-weight:500; font-size:16px;
       line-height:100%; letter-spacing:0.25px; text-transform:uppercase;
       color:#000; margin:0 0 15px */
    font-family: Inter !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 100% !important;
    letter-spacing: 0.25px !important;
    text-transform: uppercase !important;
    color: rgb(0, 0, 0) !important;
    margin: 0 0 15px !important;
}
/* Section 1 description <p> (not the first-of-type label) — LIVE inline:
   Inter/400/18px/28lh/0.25letterspacing/#6d6d6d/margin:0 0 15px.
   Exclude the price-<p> (has red <a>) — that keeps its Montserrat/20/bold. */
body.page-id-305446 .entry-content .smart-paddless-section1 p:not(:first-of-type):not(:has(a[style*="d81f26"])),
body.page-id-305690 .entry-content .video-analysis-section1 p:not(:first-of-type):not(:has(a[style*="d81f26"])),
body.page-id-305707 .entry-content .college-placement-section1 p:not(:first-of-type):not(:has(a[style*="d81f26"])) {
    font-family: Inter !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    letter-spacing: 0.25px !important;
    color: rgb(109, 109, 109) !important;
    margin: 0 0 15px !important;
}
/* CF7 form labels 16/500/black (LIVE default form field styling). */
body.page-id-305446 .entry-content form.wpcf7-form p,
body.page-id-305690 .entry-content form.wpcf7-form p,
body.page-id-305707 .entry-content form.wpcf7-form p {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: rgb(0, 0, 0) !important;
}
/* CF7 Submit button — LIVE uses Montserrat sans-serif; my body Inter rule
   was cascading via inheritance. Explicit override. */
body.page-id-305446 .entry-content form.wpcf7-form input[type=submit],
body.page-id-305446 .entry-content form.wpcf7-form button[type=submit],
body.page-id-305690 .entry-content form.wpcf7-form input[type=submit],
body.page-id-305690 .entry-content form.wpcf7-form button[type=submit],
body.page-id-305707 .entry-content form.wpcf7-form input[type=submit],
body.page-id-305707 .entry-content form.wpcf7-form button[type=submit] {
    font-family: Montserrat, sans-serif !important;
}
/* Section-1 (main content) H2 color — LIVE renders rgb(0,0,0) black on
   .{slug}-section1 H2 (SMART PADDLES TESTING / VIDEO ANALYSIS / etc.).
   Sitewide rule set all SS H2 to rgb(51,51,51) which is correct for
   section-title/bottom-CTA but overrides this specific H2 wrong. */
body.page-id-305446 .smart-paddless-section1 h2,
body.page-id-305690 .video-analysis-section1 h2,
body.page-id-305707 .college-placement-section1 h2 {
    color: rgb(0, 0, 0) !important;
}

/* KAAM-34100 + 34113 + 34133 (2026-08-01) — bottom CTA section body <p>
   must be 16px/#333 per LIVE (inline style="font-size:16px").
   The rule above ("body <p> = 18px/#6d6d6d") is too broad — it swallows
   the CTA paragraphs even though they have inline 16px.
   The section-3 wrapper carries both `smart-paddle-section3` (or equiv.)
   AND `wpb_content_element` classes. Chaining both gives specificity
   0,4,2 which beats the 0,3,3 sitewide rule above.
   Measured LIVE: 16px/400/rgb(51,51,51)/lh 24px. Reproduce. */
body.page-id-305446 .entry-content .smart-paddle-section3.wpb_content_element p,
body.page-id-305690 .entry-content .video-analysis-section3.wpb_content_element p,
body.page-id-305707 .entry-content .college-placement-section3.wpb_content_element p {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(51, 51, 51) !important;
    line-height: 24px !important;
}

/* KAAM-34100 (2026-08-01 v3) — bottom CTA section gray band.
   Verified via pixel probe on LIVE: gray comes from `DIV.upb_row_bg` with
   background-color rgb(240, 240, 240). That element is injected by
   Ultimate VC Addons plugin's "Row Background" module — dequeued on STG,
   so the gray never renders → STG shows white.
   Fix: apply the same gray directly to the wp-block-columns row that
   contains .<slug>-section3 wrapper, using CSS :has() (all modern browsers).
   Prior v2 fix incorrectly targeted .vc_custom_1745865256140 (that's the
   HERO section, not the bottom CTA). Reverted. */
body.page-id-305446 .wp-block-columns:has(.smart-paddle-section3),
body.page-id-305690 .wp-block-columns:has(.video-analysis-section3),
body.page-id-305707 .wp-block-columns:has(.college-placement-section3) {
    background-color: rgb(240, 240, 240) !important;
}
/* Apply the gray directly to the row + break out to full viewport width.
   Content inside .smart-paddle-section3 has its own `max-width:1200px;
   margin:0 auto` so it stays centered within the wider row.
   Key: do NOT add padding — that offsets flex children. Only use
   negative margins (calc(50% - 50vw)) to extend the row edges outward.
   SPECIFICITY BOOST 2026-08-04 (Anuja QA): earlier selector `.wp-block-columns:has(...)`
   was 0,3,1 — beaten by generic SS row rule `.entry-content .wp-block-columns.vc_row.wpb_row`
   at 0,4,1 which forced margin-left:-15px, breaking the 100vw breakout. Row rendered
   at content width but shifted right (h2 at x=305 vs LIVE x=170). Boost to 0,5,1 via
   `.entry-content .wp-block-columns.vc_row.wpb_row:has(...)` — beats the general rule
   so calc(50%-50vw) margin + width:100vw actually apply. */
body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row:has(.smart-paddle-section3),
body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row:has(.video-analysis-section3),
body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row:has(.college-placement-section3) {
    background-color: rgb(240, 240, 240) !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}
/* Force the flex column inside to stay constrained + centered — reverses
   the flex-basis:100% expanding to 100vw when the parent breaks out. */
body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row:has(.smart-paddle-section3) > .wp-block-column,
body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row:has(.video-analysis-section3) > .wp-block-column,
body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row:has(.college-placement-section3) > .wp-block-column {
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-basis: 1170px !important;
}

/* KAAM-VID-2026-08-04 v2 — SS Section 3 body <p> typography parity.
   LIVE inline: `<p style="font-family: Montserrat; font-weight: 400;
   font-size: 16px; leading-trim: Cap height; line-height: 24px;
   letter-spacing: 0.81px; color: #333; margin: 0 0 15px;">`
   STG post_content has only `font-size:16px;font-weight:400;letter-spacing:
   0.81px;line-height:24px` (missing font-family, color, margin).
   Sitewide `body.page-id-XXX .entry-content p` rule (Inter/18/400/#6d6d6d)
   applies !important → wrong typography inside section 3.
   Fix at Section 3 scope with specificity 0,4,1 to beat 0,3,1 sitewide.
   Anuja QA 2026-08-04: "last section p tag has wrong font family". */
body.page-id-305446 .entry-content .smart-paddle-section3 p,
body.page-id-305690 .entry-content .video-analysis-section3 p,
body.page-id-305707 .entry-content .college-placement-section3 p {
    font-family: Montserrat, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.81px !important;
    color: #333 !important;
    margin: 0 0 15px !important;
}
/* Section 3 last <p> — LIVE margin-bottom:0 (no trailing gap); STG was
   inheriting 15px from the rule above → +15px section height. */
body.page-id-305446 .entry-content .smart-paddle-section3 p:last-of-type,
body.page-id-305690 .entry-content .video-analysis-section3 p:last-of-type,
body.page-id-305707 .entry-content .college-placement-section3 p:last-of-type {
    margin-bottom: 0 !important;
}

/* KAAM-34145 v2 (2026-08-04) — SS pages tablet t768 column-stack trap fix.
   Gutenberg `.wp-block-columns` stacks at ≤782px (default flex-wrap:wrap +
   flex-basis:100%). LIVE Bootstrap 3 `.vc_col-sm-*` keeps 2-column layout
   from 768-991 (stacks only <768). This makes STG rows ~2x taller on tablet.
   Measured at /specialized-services-college-placement/ t768:
     Section-2 row (vc_custom_1746632368881): LIVE 646h STG 956h → +310px
     Section-3 row (vc_custom_1745652684439): LIVE 3217h STG 3838h → +621px
   Fix: at min-width:768, force nowrap on row + 50% flex-basis on cols. Only
   apply to specific 2-col SS-page rows (not the hero cover or full-width
   CTA rows which are single-col and don't have this issue). Ref memory:
   reference_gutenberg_column_stack_tablet_trap.md */
@media (min-width: 768px) and (max-width: 991px) {
    body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1746632368881,
    body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439,
    body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1746632368881,
    body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439,
    body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1746632368881,
    body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439 {
        flex-wrap: nowrap !important;
        display: flex !important;
        align-items: flex-start !important;
    }
    body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1746632368881 > .wp-block-column,
    body.page-id-305446 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439 > .wp-block-column,
    body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1746632368881 > .wp-block-column,
    body.page-id-305690 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439 > .wp-block-column,
    body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1746632368881 > .wp-block-column,
    body.page-id-305707 .entry-content .wp-block-columns.vc_row.wpb_row.vc_custom_1745652684439 > .wp-block-column {
        flex-basis: 50% !important;
        max-width: 50% !important;
        align-self: flex-start !important;
    }
}

/* ============================================================
 * Hero root-padding + subtitle max-width parity — TRC session 2026-07-27
 * STG hero .wp-block-columns has padding-inline: 150px from WP root-padding
 * (var(--wp--style--root--padding-inline)). LIVE has 0/0. Inner container
 * therefore constrained to 1140 vs LIVE 1440. Kill root-padding on hero.
 * Also restore subtitle max-width: 980px (LIVE inline style).
 * ============================================================ */
/* Belt+suspenders: multiple selectors + !important to override any inline
   padding set by cached OR new trc-stretch.js. */
body.page-id-305446 .vc_row-has-fill,
body.page-id-305690 .vc_row-has-fill,
body.page-id-305707 .vc_row-has-fill,
body.page-id-305446 .vc_row-has-fill.wp-block-columns,
body.page-id-305690 .vc_row-has-fill.wp-block-columns,
body.page-id-305707 .vc_row-has-fill.wp-block-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero subtitle P — LIVE inline style:
   text-align: center; font-size: 20px; font-weight: 400; color: #fff;
   max-width: 980px; margin: 0 auto */
body.page-id-305446 .entry-content .vc_row-has-fill .specialized-header-description p,
body.page-id-305690 .entry-content .vc_row-has-fill .specialized-header-description p,
body.page-id-305707 .entry-content .vc_row-has-fill .specialized-header-description p {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}
/* Hero H2 line-height parity — LIVE h=110 (2 lines @ 50px), STG was h=122.
   LIVE inline style has no line-height so browser default ~1.1 kicks in. */
body.page-id-305446 .entry-content .vc_row-has-fill .specialized-big-heading h2,
body.page-id-305690 .entry-content .vc_row-has-fill .specialized-big-heading h2,
body.page-id-305707 .entry-content .vc_row-has-fill .specialized-big-heading h2 {
    line-height: 1.1 !important;
}

/* KAAM-33578/33582 (2026-07-28) — Memberships FAQ answer paragraph typography parity.
   Measured on LIVE via getComputedStyle: 16px/400/rgb(24,24,24) Montserrat.
   STG was rendering 16px/500/rgb(0,0,0) — bolder + pure black. Root cause was
   parent-chain font-weight inheritance from the `.wpb_text_column body-dark`
   Gutenberg group ancestor (500) leaking into the FAQ panel body paragraphs.
   Fix at the paragraph level to match LIVE (no !important — direct-child selector
   is specific enough to beat the inherited parent style). */
body.page-id-302275 .vc_tta-container .vc_tta-panel-body p {
    font-weight: 400;
    color: #181818;
}

/* 2.10.52 (2026-07-28) — Memberships "5 Reasons" pill stack above title.
   .trc-reason-title <p> is display:block, but inline <span class="trc-num-pill">
   + <strong> children render on the same line = pill inline-left-of-title.
   Making the pill block-level pushes title to next line (matches LIVE stack). */
body.page-id-302275 .trc-reason-title .trc-num-pill {
    display: block;
    width: fit-content;
    margin: 0 0 8px;
}

/* 2.10.56 (2026-07-28) — Swim Camps hero CTAs full LIVE parity.
   LIVE: .vc_btn3-shape-rounded (br 5px, pad 18/60/18/25, font 20px) +
   vc_openiconic CSS providing .vc-oi-play::before glyph.
   STG: Gutenberg default .wp-block-button__link (pill br 9999px, font 14px);
   vc_openiconic FONT is registered but the CSS rule with content: is dequeued.
   Fix: override button base style + inline SVG ► mask (plugin-independent,
   uses currentColor so red/outlined variants both render correctly). */
body.page-id-302403 .wp-block-buttons .wp-block-button__link {
    border-radius: 5px;
    padding: 18px 60px 18px 25px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    position: relative;
}
body.page-id-302403 .wp-block-buttons .wp-block-button__link .vc-oi-play {
    display: inline-block;
    width: 20px;
    height: 16px;
    vertical-align: middle;
    margin-left: 12px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M0 0v8l8-4z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M0 0v8l8-4z'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
body.page-id-302403 .wp-block-buttons .wp-block-button__link .vc-oi-play::before {
    content: none;
}

/* 2.QA.3 — /faq/ (page 247467) content + <hr> 30px narrower than LIVE.
   LIVE .vc_row uses -15/-15 margin to break out of its 1140 parent → row=1170,
   then vc_column-inner width=100% (1170) with 15/15 padding → content=1140.
   STG .wp-block-columns.vc_row lost the negative margin during migration →
   row=1140 → vc_column-inner content=1110 (30px narrower). Apply same
   -15/-15 margin as USMS 143449 pattern (trc-baseline.css:563). */
body.page-id-247467 .entry-content .wp-block-columns.vc_row.wpb_row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* ============================================================
 * KAAM-freetraining v2 (2026-08-04) — /free-training-swimming-technique-videos/ (page 95399)
 * ============================================================
 * REMOVED prior .video-* CSS block (was ~207 lines). Root cause fix moved to
 * codebase/wp-content/themes/race-club/functions.php:jc_video_filter_grid which
 * now emits LIVE WPBakery `.vc_grid-item / .vc_gitem-zone-a / .vc_gitem-zone-c`
 * DOM verbatim so existing race-club.css WPBakery rules apply.
 *
 * Compensation rules below cover 3 LIVE behaviours that our theme baseline
 * doesn't provide by default (because they'd break unrelated pages):
 *
 * 1) .vc_col-sm-3 stays 25% at tablet 768-991 for this grid ONLY
 *    (baseline.css:863-872 stacks all .vc_col-sm-* to 100% at ≤991)
 * 2) Grid zone-a needs a defined min-height so bg-image renders even before
 *    the LIVE lazyload JS swaps data-bg-image into style.
 * 3) Grid item padding to match LIVE 15px L/R offset per column.
 */

body.page-id-95399 .vc_grid-container .vc_grid-item,
body.page-id-966 .vc_grid-container .vc_grid-item {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Force 25% col width from 768 up (LIVE js_composer .vc_col-sm-3 { width: 25% } unscoped) */
@media (min-width: 768px) {
    body.page-id-95399 .vc_grid-container .vc_grid-item.vc_col-sm-3,
body.page-id-966 .vc_grid-container .vc_grid-item.vc_col-sm-3 {
        max-width: 25%;
        flex-basis: 25%;
        width: 25%;
        float: left;
    }
}

/* Zone-a is the image thumbnail: LIVE uses aspect-ratio 1:1 (vc-gitem-zone-height-mode-auto-1-1).
   Force explicit 1:1 aspect box so bg-image renders even without JS lazyswap. */
body.page-id-95399 .vc_grid-container .vc_gitem-zone-a,
body.page-id-966 .vc_grid-container .vc_gitem-zone-a {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
/* Hide the <img> — the bg-image is what LIVE displays. Img is only a Smush placeholder. */
body.page-id-95399 .vc_grid-container .vc_gitem-zone-a > .vc_gitem-zone-img,
body.page-id-966 .vc_grid-container .vc_gitem-zone-a > .vc_gitem-zone-img {
    display: none;
}

/* Zone-c gutters — LIVE uses .vc_custom_1419240516480 with padding — inline style-tag
   already emitted by the shortcode covers background-color; add padding here. */
body.page-id-95399 .vc_grid-container .vc_gitem-zone-c,
body.page-id-966 .vc_grid-container .vc_gitem-zone-c {
    padding: 20px;
    box-sizing: border-box;
}

/* Restriction message inside excerpt — SUPERSEDED by trc-rebuild-freetraining.css
   which restores LIVE's WC info-box styling (bg #f6f5f8, top-border 3px, padded).
   Earlier rule wiped all styling; new rule matches LIVE. Kept selector shell
   as no-op comment marker; no properties applied here so newer file wins cleanly. */
/* 2026-08-06 QA: LIVE shows WooCommerce icon (content: "\e028" via
   font-family: WooCommerce) as ::before on the info box. Removed the
   `display: none !important` override that was hiding the icon on STG.
   Icon rendering comes from woocommerce.css (already enqueued on both sides). */
body.page-id-95399 .vc_grid-container .wc-memberships-restriction-message,
body.page-id-966 .vc_grid-container .wc-memberships-restriction-message {
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 13px;
    line-height: 18px;
}

/* ============================================================
 * /aqua-notes/ (page 314566) — video-grid width parity with LIVE.
 * QA (2026-08-06): STG grid 1080 vs LIVE 1140 (60px narrower); STG card
 * 344 vs LIVE 364. Consistent -60px delta at all 4 viewports (d1920/d1440/t768/m375).
 *
 * Root cause chain (measured LIVE vs STG at d1440):
 *   LIVE: container 1170 → row 1170 (breakout via margin:0 -15px) →
 *         col-sm-12 1170 pl:0 → col-inner 1170 pl:15 → content 1140 → grid 1140 ✓
 *   STG:  container 1170 → row 1140 (no breakout) → col-sm-12 1140 pl:15
 *         (STG extra padding) → col-inner 1110 pl:15 → content 1080 → grid 1080 ✗
 *
 * Two stacked issues:
 *   (a) STG row missing WPBakery breakout margin `margin: 0 -15px` (30px lost)
 *   (b) STG col-sm-12 has pl/pr:15 that LIVE doesn't (30px lost)
 *
 * Fix: restore both — row breakout margin + zero col padding — scoped to page.
 * ============================================================ */
body.page-id-314566 .wp-block-columns.vc_row.vc_row-fluid,
body.page-id-314566 .wp-block-columns.vc_row.wpb_row {
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: calc(100% + 30px) !important;
    max-width: none !important;
}
body.page-id-314566 .wp-block-column.wpb_column.vc_col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Defensive: explicit border-radius on video thumbnail image so top corners
   are rounded on img itself (matches LIVE rounded look). Card has
   overflow:hidden + br:8px which SHOULD clip img corners — but nested
   position:relative in WC restriction message overlay may break the clip
   in some rendering contexts. Explicit img br removes the dependency. */
body.page-id-314566 .video-card .video-thumb img,
body.page-id-314566 .video-card > a > img,
body.page-id-314566 .video-card img.wp-post-image {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

/* 2026-08-06 QA (inside-card parity): LIVE cards render only title + "See Note"
   button (5 children total, ~333px tall). STG cards additionally emit the WC
   Memberships restriction message inline via functions.php:1730
   `trc_render_wc_memberships_restriction_message($id)` — adding a 477px-tall
   .woocommerce-info overlay ("Join the club to access this page!") that
   inflates card height to 851-1035px.

   LIVE doesn't have this inline message on card list. Hide via CSS to match
   LIVE compact card layout — non-members still see the message when they
   CLICK into the aqua_note itself, just not in the card preview. */
body.page-id-314566 .video-card .woocommerce,
body.page-id-314566 .video-card .woocommerce-info,
body.page-id-314566 .video-card .wc-memberships-restriction-message,
body.page-id-314566 .video-card .wc-memberships-message {
    display: none !important;
}