/* ============================================================
 * Momentum OP - Reusable Components  (mop-components.css v1.19.1)
 * Manifest:  MOP-RCM-20261018  (AVADA-COMPONENTS v3.4 + GRAVITY-FORMS-INITIAL v4.5
 *            + AVADA-NATIVE-GLOBAL-HEADER v5.3
 *            + AVADA-NATIVE-GLOBAL-FOOTER v5.4
 *            + AVADA-TABLET-MOBILE-HEADER v4.5
 *            + SINGLE-CPT-TEMPLATE v6.1: mop-bars
 *            + AVADA-PAGE-SECTION v5.5: page section helpers
 *            + AVADA-PAGE-SECTION v5.6: class tile, video viewer
 *            + AVADA-PAGE-SECTION v5.7: link list, lead-in
 *            + AVADA-PAGE-SECTION: legal pages
 *            + AVADA-PAGE-SECTION v5.7: Home page media, class format
 *              card, accent words, schedule host
 *            + AVADA-PAGE-SECTION: Coach Match quiz
 *            + AVADA-PAGE-SECTION v6.1: FAQ list, portrait class
 *              format grid (About Us page)
 *            + AVADA-PAGE-SECTION v6.1: page hero fade, partner card,
 *              value tabs (Partners page)
 *            + AVADA-PAGE-SECTION v6.1: map embed, hours grid days
 *              color (Contact Us page)
 *            + AVADA-PAGE-SECTION v6.1: perk card (Member Perks page)
 *            + AVADA-PAGE-SECTION v6.1: plan cards and plan tabs
 *              (Memberships page)
 *            + AVADA-PAGE-SECTION v6.1: class chips (Schedule page)
 *            + AVADA-PAGE-SECTION v6.1: class link card (Welcome page)
 *            + AVADA-PAGE-SECTION v6.1: arrow CTAs in inset cards on
 *              the narrowest phones (Workplace Wellness page))
 * Inherits:  MOP-DSM-20261015  (Avada Global Options)
 * Loaded by: inc/site-assets.php  (after Avada styles)
 * ============================================================
 * This file is the ONLY home for component rules. Never copy them
 * into Avada > Options > Custom CSS (an Options import wipes it).
 *
 *  1. Shared tokens and icons
 *  2. Button system (Avada Button + Gravity Forms submit hosts)
 *     2a. Component API defaults per host
 *     2b. Modifiers
 *     2c. Shared visual rules
 *     2d. Arrow chip (decorative, CSS owned)
 *     2e. Fill and rolling label (parts added by mop-components.js)
 *     2f. Gravity Forms adapter (Orbital ID-level overrides)
 *     2g. No-script fallback, focus, reduced motion
 *  3. Eyebrow label
 *  4. Long-form prose
 *  5. Entrance motion (hero rise, scroll reveal)
 *  6. Gravity Forms form layer (fields, choices, footer note)
 *  7. Desktop header (logo, menu chevron, Classes dropdown, Join Now)
 *  8. Global footer (centering, logo, link lists, app badges, legal row)
 *  9. Tablet and mobile header (bar, menu button, panel, class cards,
 *     main list, CTAs; markup from inc/site-mobile-menu.php)
 * 10. Bar graphic (animated bars behind CTA cards and heroes)
 * 11. Page section helpers (text flow, inset card, link card)
 * 12. Class tile Post Card and shared video viewer
 * 13. Studio hours grid ([mop_hours layout="grid"])
 * 14. Directions link ([mop_directions])
 * 15. Link list and lead-in (mop-link-row, mop-lead-in)
 * 16. Legal pages ([mop_terms_of_service], [mop_privacy_policy],
 *     [mop_accessibility])
 * 17. Media fades, class format card, accent words, schedule host
 *     (Home page)
 * 18. Coach Match quiz ([mop_coach_match], Find Your Coach page)
 * 19. FAQ list ([mop_faqs], About Us page and later Builder pages)
 * 20. Partner card Post Card ("MOP Partner Card", Partners page)
 * 21. Value tabs ([mop_value_tabs], Partners page)
 * 22. Map embed ([mop_map], Contact Us page)
 * 23. Perk card Post Card ("MOP Perk Card", Member Perks page)
 * 24. Plan cards and plan tabs ([mop_plans], [mop_plan_tabs],
 *     Memberships page)
 * 25. Class chips ([mop_class_chips], Schedule page)
 * 26. Class link card Post Card ("MOP Class Link Card", Welcome page)
 *
 * Colors come only from AWB palette variables (MOP-DSM-20261015).
 * Tints use Avada's own --awb-colorN-h/-s/-l channel variables so
 * they stay tied to the palette slot.
 * ============================================================ */


/* ============================================================
 * 1. SHARED TOKENS AND ICONS
 * Reuse these in later prompts (menus, cards, footer) instead of
 * redrawing the arrow or inventing new motion curves.
 * ============================================================ */

:root {
    --mop-ease: cubic-bezier(.2, .8, .2, 1);      /* buttons, chips, arrows */
    --mop-ease-out: cubic-bezier(.16, 1, .3, 1);  /* entrances */
    --mop-dur: .55s;

    /* Arrow, pointing right (east). Mask only: paint it with background-color.
       Components rotate it -45deg at rest (up-right) and 0deg on hover. */
    --mop-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-7-7 7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ============================================================
 * 2. BUTTON SYSTEM
 * Hosts:
 *   Avada Button .......... .fusion-button.mop-btn-arrow / .mop-btn-outline
 *   Gravity Forms submit .. form CSS Class "mop-form-cta" or "mop-form-cta-navy"
 *                           (renders as .mop-form-cta_wrapper)
 * The visual rules are written once against the component API below.
 * --mop-btn-fx tells mop-components.js which hosts get the fill + roll.
 * ============================================================ */

/* 2a. Component API defaults ---------------------------------- */

/* Arrow CTA: orange pill, navy chip, white hover fill, label rolls to navy */
body .fusion-button.mop-btn-arrow,
body .mop-form-cta_wrapper .gform_footer .gform_button,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button {
    --mop-btn-fx: roll;
    --mop-btn-bg: var(--awb-color5);
    --mop-btn-ink: var(--awb-color9);
    --mop-btn-fill: var(--awb-color9);
    --mop-btn-ink-on: var(--awb-color1);
    --mop-btn-border: transparent;
    --mop-btn-border-w: 0px;
    --mop-btn-shadow: none;
    --mop-btn-fs: 16px;
    --mop-btn-weight: 700;
    --mop-btn-gap: 14px;
    --mop-btn-pad-start: 26px;
    --mop-btn-inset: 6px;
    --mop-btn-ring: var(--awb-color9);
    --mop-chip: 46px;
    --mop-chip-bg: var(--awb-color1);
    --mop-chip-ink: var(--awb-color9);
    --mop-icon-size: 19px;
}

/* Outline: transparent pill, 1px white 28% ring, fills white, label rolls to navy.
   Padding stays with Global Options (19px / 30px). */
body .fusion-button.mop-btn-outline {
    --mop-btn-fx: roll;
    --mop-btn-bg: transparent;
    --mop-btn-ink: var(--awb-color9);
    --mop-btn-fill: var(--awb-color9);
    --mop-btn-ink-on: var(--awb-color1);
    --mop-btn-border: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .28);
    --mop-btn-border-w: 1px;
    --mop-btn-shadow: none;
    --mop-btn-fs: 16px;
    --mop-btn-weight: 600;
    --mop-btn-ring: var(--awb-color9);
}

/* 2b. Modifiers ------------------------------------------------ */

/* Hero glow (orange CTAs on navy). Always on for the mop-form-cta form. */
body .fusion-button.mop-btn-arrow--glow,
body .mop-form-cta_wrapper .gform_footer .gform_button {
    --mop-btn-shadow: 0 10px 40px -10px hsla(var(--awb-color5-h), var(--awb-color5-s), var(--awb-color5-l), .7);
}

/* Navy pill, orange chip, white fill. For orange cards and white panels. */
body .fusion-button.mop-btn-arrow--navy,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button {
    --mop-btn-bg: var(--awb-color1);
    --mop-chip-bg: var(--awb-color5);
    --mop-btn-ring: var(--awb-color1);
}

/* Navy pill, orange chip, orange fill, label rolls to white. For Light Surface sections. */
body .fusion-button.mop-btn-arrow--navy-on-light {
    --mop-btn-bg: var(--awb-color1);
    --mop-chip-bg: var(--awb-color5);
    --mop-btn-fill: var(--awb-color5);
    --mop-btn-ink-on: var(--awb-color9);
    --mop-btn-ring: var(--awb-color1);
}

/* Outlined arrow CTA (footer Momentum Connect card and similar). */
body .fusion-button.mop-btn-arrow--outline {
    --mop-btn-bg: transparent;
    --mop-btn-border: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .28);
    --mop-btn-border-w: 1px;
    --mop-btn-fs: 15px;
    --mop-btn-gap: 12px;
    --mop-btn-pad-start: 22px;
    --mop-chip-bg: var(--awb-color5);
}

/* Compact (header CTA). */
body .fusion-button.mop-btn-arrow--sm {
    --mop-btn-gap: 10px;
    --mop-btn-pad-start: 20px;
    --mop-btn-inset: 5px;
    --mop-chip: 32px;
}

/* Large (mobile menu CTAs). */
body .fusion-button.mop-btn-arrow--lg {
    --mop-btn-fs: 17px;
    --mop-chip: 48px;
}

body .fusion-button.mop-btn-outline--lg {
    --mop-btn-fs: 17px;
}

/* Navy-ink outline for orange cards and Light Surface sections: fills navy, label rolls to white. */
body .fusion-button.mop-btn-outline--navy {
    --mop-btn-ink: var(--awb-color1);
    --mop-btn-fill: var(--awb-color1);
    --mop-btn-ink-on: var(--awb-color9);
    --mop-btn-border: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .4);
    --mop-btn-ring: var(--awb-color1);
}

/* 2c. Shared visual rules -------------------------------------- */

body .fusion-button.mop-btn-arrow,
body .fusion-button.mop-btn-outline,
body .mop-form-cta_wrapper .gform_footer .gform_button,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    border: var(--mop-btn-border-w) solid var(--mop-btn-border);
    border-radius: 999px;
    background: var(--mop-btn-bg);
    box-shadow: var(--mop-btn-shadow);
    color: var(--mop-btn-ink);
    font-size: var(--mop-btn-fs);
    font-weight: var(--mop-btn-weight);
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Keep the resting colors on hover/focus: the moving fill is the hover state,
   so Avada's global hover background must not show through. */
body .fusion-button.mop-btn-arrow:is(:hover, :focus, :active),
body .fusion-button.mop-btn-outline:is(:hover, :focus, :active) {
    border-color: var(--mop-btn-border);
    background: var(--mop-btn-bg);
    box-shadow: var(--mop-btn-shadow);
    color: var(--mop-btn-ink);
}

body .fusion-button.mop-btn-outline {
    justify-content: center;
}

/* Arrow CTA geometry: label on the left, chip pinned inside the right edge. */
body .fusion-button.mop-btn-arrow,
body .mop-form-cta_wrapper .gform_footer .gform_button,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button {
    justify-content: flex-start;
    min-height: calc(var(--mop-chip) + 2 * var(--mop-btn-inset) + 2 * var(--mop-btn-border-w));
    padding: 0 calc(var(--mop-btn-inset) + var(--mop-chip) + var(--mop-btn-gap)) 0 var(--mop-btn-pad-start);
}

/* Label (Avada's single label span, or the label the script wraps in a GF button). */
body .fusion-button:is(.mop-btn-arrow, .mop-btn-outline) .awb-button__text,
body .gform_footer .gform_button .mop-roll {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    height: 1.25em;
    overflow: hidden;
    color: var(--mop-btn-ink);
    line-height: 1.25;
    text-overflow: ellipsis;
}

/* 2d. Arrow chip ------------------------------------------------
 * ::after = chip disc, ::before = arrow (mask of --mop-icon-arrow).
 * Decorative, owned here. Leave the Avada Button Icon at None. */

body .fusion-button.mop-btn-arrow::after,
body .fusion-button.mop-btn-arrow::before,
body .mop-form-cta_wrapper .gform_footer .gform_button::after,
body .mop-form-cta_wrapper .gform_footer .gform_button::before,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button::after,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button::before {
    content: "";
    position: absolute;
    top: calc(50% - var(--mop-chip) / 2);
    right: var(--mop-btn-inset);
    left: auto;
    bottom: auto;
    width: var(--mop-chip);
    height: var(--mop-chip);
    margin: 0;
    border: 0;
    border-radius: 50%;
    pointer-events: none;
    transition: transform var(--mop-dur) var(--mop-ease);
}

body .fusion-button.mop-btn-arrow::after,
body .mop-form-cta_wrapper .gform_footer .gform_button::after,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button::after {
    z-index: 1;
    background: var(--mop-chip-bg);
    transform: scale(1);
}

body .fusion-button.mop-btn-arrow::before,
body .mop-form-cta_wrapper .gform_footer .gform_button::before,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button::before {
    z-index: 2;
    background: var(--mop-chip-ink);
    -webkit-mask: var(--mop-icon-arrow) center / var(--mop-icon-size) var(--mop-icon-size) no-repeat;
            mask: var(--mop-icon-arrow) center / var(--mop-icon-size) var(--mop-icon-size) no-repeat;
    transform: rotate(-45deg);
}

body .fusion-button.mop-btn-arrow:is(:hover, :focus-visible)::after,
body .mop-form-cta_wrapper .gform_footer .gform_button:is(:hover, :focus-visible)::after,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button:is(:hover, :focus-visible)::after {
    transform: scale(1.08);
}

body .fusion-button.mop-btn-arrow:is(:hover, :focus-visible)::before,
body .mop-form-cta_wrapper .gform_footer .gform_button:is(:hover, :focus-visible)::before,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button:is(:hover, :focus-visible)::before {
    transform: rotate(0deg) scale(1.08);
}

/* 2e. Fill and rolling label ------------------------------------
 * mop-components.js adds these parts to every host and animates them.
 * .mop-btn__fill   slides in from the side the pointer enters
 * .mop-roll__b     hidden copy of the label (aria-hidden) that rolls in */

body .mop-btn-ready > .mop-btn__fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 999px;
    background: var(--mop-btn-fill);
    transform: translateY(101%);
    pointer-events: none;
}

body .mop-btn-ready .mop-roll__track {
    display: block;
}

body .mop-btn-ready .mop-roll__a,
body .mop-btn-ready .mop-roll__b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .mop-btn-ready .mop-roll__a {
    color: var(--mop-btn-ink);
}

body .mop-btn-ready .mop-roll__b {
    color: var(--mop-btn-ink-on);
}

/* 2f. Gravity Forms adapter --------------------------------------
 * Orbital prints per-form ID selectors (#gform_wrapper_N) that style the
 * submit button. !important on these six properties is required to beat
 * them. Values still come from the shared API above. */

body .mop-form-cta_wrapper .gform_footer .gform_button,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button {
    padding: 0 calc(var(--mop-btn-inset) + var(--mop-chip) + var(--mop-btn-gap)) 0 var(--mop-btn-pad-start) !important;
    border: var(--mop-btn-border-w) solid var(--mop-btn-border) !important;
    border-radius: 999px !important;
    background: var(--mop-btn-bg) !important;
    box-shadow: var(--mop-btn-shadow) !important;
    color: var(--mop-btn-ink) !important;
}

/* Orbital also styles the submit's position, display and pseudo-elements
 * with stronger selectors than this file uses for Avada Buttons, which
 * hides the chip and arrow. On the Gravity Forms host only, the host box
 * and the 2d chip are restated with !important. Same values, same API. */

body .mop-form-cta_wrapper .gform_footer .gform_button,
body .mop-form-cta-navy_wrapper .gform_footer .gform_button {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button::before,
body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: calc(50% - var(--mop-chip) / 2) !important;
    right: var(--mop-btn-inset) !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--mop-chip) !important;
    height: var(--mop-chip) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    pointer-events: none !important;
    transition: transform var(--mop-dur) var(--mop-ease) !important;
}

body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button::after {
    z-index: 1 !important;
    background: var(--mop-chip-bg) !important;
    -webkit-mask: none !important;
            mask: none !important;
    transform: scale(1) !important;
}

body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button::before {
    z-index: 2 !important;
    background: var(--mop-chip-ink) !important;
    -webkit-mask: var(--mop-icon-arrow) center / var(--mop-icon-size) var(--mop-icon-size) no-repeat !important;
            mask: var(--mop-icon-arrow) center / var(--mop-icon-size) var(--mop-icon-size) no-repeat !important;
    transform: rotate(-45deg) !important;
}

body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button:is(:hover, :focus-visible)::after {
    transform: scale(1.08) !important;
}

body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button:is(:hover, :focus-visible)::before {
    transform: rotate(0deg) scale(1.08) !important;
}

/* 2g. No-script fallback, focus, reduced motion ------------------- */

/* If the script has not run, hover still shows the end state. */
html:not(.mop-js) body .fusion-button:is(.mop-btn-arrow, .mop-btn-outline):is(:hover, :focus-visible) {
    background: var(--mop-btn-fill);
}

html:not(.mop-js) body .fusion-button:is(.mop-btn-arrow, .mop-btn-outline):is(:hover, :focus-visible) .awb-button__text {
    color: var(--mop-btn-ink-on);
}

html:not(.mop-js) body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button:is(:hover, :focus-visible) {
    background: var(--mop-btn-fill) !important;
    color: var(--mop-btn-ink-on) !important;
}

body .fusion-button:is(.mop-btn-arrow, .mop-btn-outline):focus-visible,
body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button:focus-visible {
    outline: 2px solid var(--mop-btn-ring);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body .fusion-button.mop-btn-arrow::after,
    body .fusion-button.mop-btn-arrow::before,
    body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button::after,
    body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button::before {
        transition: none !important;
    }
}


/* ============================================================
 * 3. EYEBROW LABEL
 * Host: Avada Text Block. Short label above a section title.
 * ============================================================ */

body .mop-eyebrow {
    --mop-eyebrow-ink: var(--awb-color5);
    --mop-eyebrow-fs: 17px;
}

body .mop-eyebrow--on-light  { --mop-eyebrow-ink: var(--awb-color4); }
body .mop-eyebrow--on-orange { --mop-eyebrow-ink: var(--awb-color1); }
body .mop-eyebrow--sm        { --mop-eyebrow-fs: 15px; }

body .mop-eyebrow,
body .mop-eyebrow p {
    margin: 0;
    color: var(--mop-eyebrow-ink);
    font-size: var(--mop-eyebrow-fs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}


/* ============================================================
 * 4. LONG-FORM PROSE
 * Hosts: Avada Text Block (legal pages) and the Layout Builder
 * Content element (blog posts). Headings inherit Global Options
 * except for the sizes the article measure needs.
 * ============================================================ */

body .mop-prose {
    --mop-prose-fs: 18px;
    --mop-prose-gap: 20px;
    --mop-prose-h2: clamp(28px, 2.6vw, 36px);
    --mop-prose-h2-ls: -.03em;
    max-width: 720px;
}

body .mop-prose--legal {
    --mop-prose-fs: 17px;
    --mop-prose-gap: 16px;
    --mop-prose-h2: clamp(26px, 2.4vw, 34px);
    --mop-prose-h2-ls: -.025em;
    max-width: 780px;
}

body .mop-prose :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table) {
    margin: 0;
}

body .mop-prose :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table) + :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table) {
    margin-top: var(--mop-prose-gap);
}

body .mop-prose :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table) + h2 {
    margin-top: 56px;
}

body .mop-prose :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table) + h3 {
    margin-top: calc(var(--mop-prose-gap) + 12px);
}

body .mop-prose h2 {
    font-size: var(--mop-prose-h2);
    line-height: 1.15;
    letter-spacing: var(--mop-prose-h2-ls);
    text-wrap: balance;
}

body .mop-prose h3 {
    color: var(--awb-color9);
}

body .mop-prose p {
    font-size: var(--mop-prose-fs);
    line-height: 1.7;
    text-wrap: pretty;
}

body .mop-prose :is(ul, ol) {
    padding: 0;
}

body .mop-prose ul {
    list-style: none;
}

body .mop-prose ol {
    padding-left: 1.4em;
}

body .mop-prose li {
    font-size: var(--mop-prose-fs);
    line-height: 1.6;
}

body .mop-prose li + li {
    margin-top: 10px;
}

body .mop-prose ul > li {
    position: relative;
    padding-left: 20px;
}

body .mop-prose ul > li::before {
    content: "";
    position: absolute;
    top: calc(.8em - 3px);
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--awb-color5);
}


/* ============================================================
 * 5. ENTRANCE MOTION
 * mop-rise ..... hero content on page load (CSS only)
 * mop-reveal ... fades up 32px when scrolled into view, 90ms stagger
 *                (driven by mop-components.js; visible without it)
 * ============================================================ */

@keyframes mop-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body .mop-rise {
    animation: mop-rise 1.2s var(--mop-ease-out) .2s backwards;
}

@media (prefers-reduced-motion: reduce) {
    body .mop-rise {
        animation: none;
    }
}

@media print {
    body .mop-rise,
    body .mop-reveal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


/* ============================================================
 * 6. GRAVITY FORMS FORM LAYER
 * Source: GRAVITY-FORMS-INITIAL v4.5. Recorded in RCM section 9.
 * Every Gravity Form is styled from .gform_wrapper, so a new form
 * needs no class to look right. Gravity Forms prints per-form ID
 * styles (#gform_wrapper_N) plus its own stylesheet, so visual
 * properties here carry !important. Values come from the DSM palette
 * and the --mop-field-* tokens below. The submit button is the
 * section 2 adapter; 6f only adds the sizing Orbital would override.
 *
 *  6a. Form tokens and variants
 *  6b. Field grid
 *  6c. Labels
 *  6d. Text inputs, selects, textareas
 *  6e. Checkboxes and consent
 *  6f. Footer: submit button and footer note
 *  6g. Confirmation and validation text
 *  6h. Small screens, reduced motion
 *
 * Error colors are left to Gravity Forms until the DSM defines an
 * error token (fields in an error state keep the plugin's border).
 * ============================================================ */

/* 6a. Form tokens and variants ---------------------------------- */

:root {
    /* Chevron, pointing down. Mask only: paint it with background-color. */
    --mop-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Default: form on navy (Contact, Home, Workplace, Partners, Referral). */
body .gform_wrapper {
    --mop-field-bg: var(--awb-color2);
    --mop-field-ink: var(--awb-color9);
    --mop-field-line: var(--awb-color3);
    --mop-field-focus: var(--awb-color5);
    --mop-field-placeholder: var(--awb-color13);
    --mop-field-h: 56px;
    --mop-field-pad-x: 20px;
    --mop-field-gap-y: 16px;
    --mop-label-ink: var(--awb-color9);
    --mop-choice-ink: var(--awb-color11);
    --mop-choice-size: 18px;
    --mop-choice-gap: 12px;
    --mop-choice-offset: 2px;
    --mop-chevron-ink: var(--awb-color11);
    --mop-note-ink: var(--awb-color13);
    --mop-note-fs: 14px;
    --mop-note-link: var(--awb-color9);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Field class "mop-field-on-card": fields inside a Navy Surface card
   (New Neighbor Pass) use Navy Background so they read as inset. */
body .gform_wrapper .gfield.mop-field-on-card {
    --mop-field-bg: var(--awb-color1);
}

/* Form class "mop-form-cta-navy": light panel variant (Coach Match on
   the white quiz card). White fields, navy text, visible labels. */
body .gform_wrapper.mop-form-cta-navy_wrapper {
    --mop-field-bg: var(--awb-color9);
    --mop-field-ink: var(--awb-color1);
    --mop-field-line: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .16);
    --mop-field-pad-x: 18px;
    --mop-field-gap-y: 20px;
    --mop-label-ink: var(--awb-color1);
    --mop-choice-ink: var(--awb-color15);
    --mop-choice-size: 22px;
    --mop-choice-gap: 14px;
    --mop-choice-offset: 0px;
    --mop-note-ink: var(--awb-color16);
    --mop-note-fs: 13px;
    --mop-note-link: var(--awb-color4);
    color: var(--awb-color1) !important;
}

/* 6b. Field grid ------------------------------------------------- */

body .gform_wrapper .gform_fields {
    column-gap: 16px !important;
    row-gap: var(--mop-field-gap-y) !important;
}

/* Fieldset-based fields (Name, checkboxes, consent) never show a box. */
body .gform_wrapper fieldset.gfield {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Name field: First | Last share the row with the same 16px gap. */
body .gform_wrapper .gfield .ginput_complex {
    column-gap: 16px !important;
    row-gap: var(--mop-field-gap-y) !important;
}

/* 6c. Labels ------------------------------------------------------
 * Most designs show no labels. The forms keep every label and set
 * Label Visibility to Hidden in the import; this is the screen-reader
 * safe fallback, plus the "(Required)" text on visible labels. */

body .gform_wrapper .gfield.hidden_label > .gfield_label,
body .gform_wrapper .gfield.field_sublabel_hidden_label .ginput_complex label,
body .gform_wrapper .gfield_label .gfield_required {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visible labels (Coach Match): 15px, 600, 8px above the field. */
body .gform_wrapper .gfield:not(.hidden_label) > .gfield_label {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--mop-label-ink) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

/* 6d. Text inputs, selects, textareas ------------------------------ */

body .gform_wrapper .gfield:not(.gform_validation_container) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--mop-field-h) !important;
    min-height: var(--mop-field-h) !important;
    margin: 0 !important;
    padding: 0 var(--mop-field-pad-x) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 14px !important;
    background-color: var(--mop-field-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--mop-field-ink) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    transition: border-color .2s var(--mop-ease) !important;
}

/* Resting and focus borders. Fields in an error state keep the plugin's
   error border until the DSM defines an error color. */
body .gform_wrapper .gfield:not(.gform_validation_container):not(.gfield_error) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
    border-color: var(--mop-field-line) !important;
}

body .gform_wrapper .gfield:not(.gform_validation_container):not(.gfield_error) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea):focus {
    border-color: var(--mop-field-focus) !important;
}

/* Textarea: four lines tall, grows by hand. */
body .gform_wrapper .gfield:not(.gform_validation_container) .ginput_container_textarea textarea {
    height: 134px !important;
    min-height: 134px !important;
    padding: 18px var(--mop-field-pad-x) !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

/* Select: own chevron (the plugin's background arrow is removed above). */
body .gform_wrapper .gfield:not(.gform_validation_container) .ginput_container_select select {
    padding-top: 0 !important;
    padding-right: 44px !important;
    padding-bottom: 0 !important;
    line-height: calc(var(--mop-field-h) - 2px) !important;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    cursor: pointer !important;
}

/* Avada adds its own arrow box beside Gravity Forms selects; this
   section draws the chevron, so Avada's box is removed. */
body .gform_wrapper .gfield .ginput_container_select .select-arrow {
    display: none !important;
}

body .gform_wrapper .gfield .ginput_container_select {
    position: relative !important;
}

body .gform_wrapper .gfield .ginput_container_select::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -6px !important;
    background-color: var(--mop-chevron-ink) !important;
    -webkit-mask: var(--mop-icon-chevron) center / 12px 12px no-repeat;
            mask: var(--mop-icon-chevron) center / 12px 12px no-repeat;
    pointer-events: none !important;
}

body .gform_wrapper .gfield select option {
    background-color: var(--mop-field-bg);
    color: var(--mop-field-ink);
}

body .gform_wrapper .gfield :is(input, textarea)::placeholder {
    color: var(--mop-field-placeholder) !important;
    opacity: 1 !important;
}

/* Browser autofill keeps the field colors instead of its own fill. */
body .gform_wrapper .gfield:not(.gform_validation_container) input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--mop-field-bg) inset !important;
    -webkit-text-fill-color: var(--mop-field-ink) !important;
    caret-color: var(--mop-field-ink);
}

/* 6e. Checkboxes and consent -------------------------------------
 * Native checkboxes painted with the brand orange (accent-color), so
 * keyboard, focus and checked states stay the browser's own. */

body .gform_wrapper .gfield :is(.gchoice, .ginput_container_consent) {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--mop-choice-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .gform_wrapper .gfield :is(.gchoice, .ginput_container_consent) input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
       -moz-appearance: checkbox !important;
            appearance: auto !important;
    flex: 0 0 auto !important;
    width: var(--mop-choice-size) !important;
    height: var(--mop-choice-size) !important;
    min-width: 0 !important;
    margin: var(--mop-choice-offset) 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    accent-color: var(--awb-color5) !important;
    cursor: pointer !important;
}

body .gform_wrapper .gfield :is(.gchoice, .ginput_container_consent) input[type="checkbox"]::before,
body .gform_wrapper .gfield :is(.gchoice, .ginput_container_consent) input[type="checkbox"]::after {
    content: none !important;
    display: none !important;
}

body .gform_wrapper .gfield :is(.gchoice, .ginput_container_consent) label {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    color: var(--mop-choice-ink) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
}

/* 6f. Footer: submit button and footer note -----------------------
 * Default: note on the left, button on the right (inc/site-gravity-forms.php
 * prints the note after the button). Light variant: button, note below. */

body .gform_wrapper .gform_footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body .gform_wrapper .gform_footer .gform_button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
}

body .gform_wrapper .gform_footer .mop-form-note {
    grid-column: 1;
    grid-row: 1;
    max-width: 340px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mop-note-ink) !important;
    font-family: inherit !important;
    font-size: var(--mop-note-fs) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

body .gform_wrapper .gform_footer .mop-form-note a {
    color: var(--mop-note-link) !important;
    text-decoration: none !important;
}

body .gform_wrapper .gform_footer .mop-form-note a:is(:hover, :focus-visible) {
    color: var(--awb-color5) !important;
}

body .gform_wrapper.mop-form-cta-navy_wrapper .gform_footer {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
}

body .gform_wrapper.mop-form-cta-navy_wrapper .gform_footer .gform_button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
}

body .gform_wrapper.mop-form-cta-navy_wrapper .gform_footer .mop-form-note {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: none;
}

/* Submit sizing the section 2 adapter leaves to Orbital. Values still
   come from the shared button API, so the button matches mop-btn-arrow. */
body :is(.mop-form-cta_wrapper, .mop-form-cta-navy_wrapper) .gform_footer .gform_button {
    width: auto !important;
    height: auto !important;
    min-height: calc(var(--mop-chip) + 2 * var(--mop-btn-inset) + 2 * var(--mop-btn-border-w)) !important;
    font-family: inherit !important;
    font-size: var(--mop-btn-fs) !important;
    font-weight: var(--mop-btn-weight) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
}

/* 6g. Confirmation and validation text ----------------------------- */

body .gform_confirmation_wrapper .gform_confirmation_message {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

body .gform_wrapper .gfield .validation_message {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* 6h. Small screens, reduced motion ------------------------------- */

@media (max-width: 640px) {
    body .gform_wrapper .gform_fields > .gfield {
        grid-column: 1 / -1 !important;
    }

    body .gform_wrapper .gform_footer {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .gform_wrapper .gform_footer .gform_button {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
    }

    body .gform_wrapper .gform_footer .mop-form-note {
        grid-row: 1 !important;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .gform_wrapper .gfield :is(input, select, textarea) {
        transition: none !important;
    }
}



/* ============================================================
 * 7. DESKTOP HEADER  (AVADA-NATIVE-GLOBAL-HEADER v5.3)
 * Host: the Avada Header Layout Container with CSS Class
 * "mop-desktop-header" (Large Screen only, above 1100px).
 *
 * The Builder owns layout, padding, height, the transparent and
 * scrolled backgrounds, blur, sticky behavior, menu typography,
 * menu Regular/Hover colors, row backgrounds, radius, item padding
 * and shadow.
 * This section adds only what no Builder field sets:
 *  7a. Container: scrolled bottom line and state transition
 *  7b. Logo height (38px, width follows the file's ratio)
 *  7c. Main menu: chevron, open and class-page states, keyboard
 *      open, focus ring
 *  7d. Classes dropdown panel: width, centering, ring, inner padding
 *  7e. Class rows: description, chip and arrow, current class
 *  7f. "Compare all classes" row
 *  7g. Join Now link (colors: the Text Block has no link color fields)
 *  7h. Reduced motion
 *
 * WordPress menu classes (Appearance > Menus > CSS Classes):
 *  mop-menu-classes  the Classes parent item
 *  mop-menu-class    The Tread, The Combo, The Strength
 *  mop-menu-compare  Compare all classes
 *
 * Icons reuse --mop-icon-chevron and --mop-icon-arrow (sections 1
 * and 6a). Motion reuses --mop-ease and --mop-dur.
 * Avada menu selectors (.awb-menu__*), the plain label <span> and the
 * .fusion-sticky-transition state class were confirmed on the live site.
 * Menu text colors: Avada paints them with !important from variables
 * the Menu Element sets on the <nav> (--awb-color, --awb-active-color,
 * --awb-submenu-color, --awb-submenu-active-color). State colors here
 * change those variables on the menu item, never the color property.
 * ============================================================ */

/* 7a. Container ------------------------------------------------- */

/* The Builder sets a 1px Color 3 bottom border. The design shows it
   only once the header turns navy, so it stays transparent until Avada
   adds its sticky state class .fusion-sticky-transition (confirmed on
   the live site, added past the 40px Transition Offset). */
body .mop-desktop-header {
    transition: background-color .4s, border-color .4s;
}

body .mop-desktop-header:not(.fusion-sticky-transition) {
    border-bottom-color: transparent;
}

/* 7b. Logo ------------------------------------------------------ */

body .mop-desktop-header .mop-header-logo {
    display: block;
    line-height: 0;
}

body .mop-desktop-header .mop-header-logo img {
    display: block;
    width: auto;
    max-width: none;
    height: 38px;
}

/* 7c. Main menu ------------------------------------------------- */

/* Chevron after "Classes" (Builder Dropdown Carets = No). */
body .mop-desktop-header .mop-menu-classes > .awb-menu__main-a {
    display: flex;
    align-items: center;
}

body .mop-desktop-header .mop-menu-classes > .awb-menu__main-a::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-left: 7px;
    background-color: currentColor;
    -webkit-mask: var(--mop-icon-chevron) center / 10px 10px no-repeat;
            mask: var(--mop-icon-chevron) center / 10px 10px no-repeat;
    transition: transform .3s var(--mop-ease);
}

/* Open (pointer or keyboard): label white, chevron flips. */
body .mop-desktop-header .mop-menu-classes:is(:hover, :focus-within) {
    --awb-color: var(--awb-color9);
    --awb-active-color: var(--awb-color9);
}

body .mop-desktop-header .mop-menu-classes:is(:hover, :focus-within) > .awb-menu__main-a::after {
    transform: rotate(180deg);
}

/* On a class page (The Tread, The Combo, The Strength) "Classes" is white.
   The Compare row also points at /classes/, so only the three class
   items count here. */
body .mop-desktop-header .mop-menu-classes:has(.mop-menu-class.current-menu-item) {
    --awb-color: var(--awb-color9);
    --awb-active-color: var(--awb-color9);
}

/* Avada's Menu Element has only Regular and Hover colors, and current-page
   items take the Hover color. The design keeps current items in Color 12,
   except "Classes" on a class page (rule above). */
body .mop-desktop-header .awb-menu__main-li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor):not(:hover, :focus-within, :has(.mop-menu-class.current-menu-item)) {
    --awb-color: var(--awb-color12);
    --awb-active-color: var(--awb-color12);
}

/* Keyboard: tabbing onto "Classes" opens the panel so its links can be reached. */
body .mop-desktop-header .mop-menu-classes:focus-within > .awb-menu__sub-ul {
    visibility: visible;
    opacity: 1;
}

body .mop-desktop-header .awb-menu__main-a:focus-visible {
    color: var(--awb-color9);
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

/* 7d. Classes dropdown panel ------------------------------------ */

/* 360px of content inside 8px padding and a 1px ring (378px overall),
   centered under "Classes". The Menu Element's Submenu Background Color
   paints the rows (Regular Color 2, Hover Color 9 at 6%), so the panel
   itself is painted here in Color 2. Radius and shadow come from the
   Menu Element's Submenu fields. */
body .mop-desktop-header .mop-menu-classes > .awb-menu__sub-ul {
    right: auto;
    left: 50%;
    box-sizing: border-box;
    width: 378px;
    min-width: 0;
    max-width: none;
    margin-left: -189px;
    padding: 8px;
    border: 1px solid hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .1);
    background-color: var(--awb-color2);
}

body .mop-desktop-header .mop-menu-classes .awb-menu__sub-li + .awb-menu__sub-li {
    margin-top: 2px;
}

/* 7e. Class rows -------------------------------------------------
 * Title: Builder Submenu Typography (17px / 700) and colors.
 * Description: WordPress menu Description field.
 * ::after = 38px chip ring, ::before = arrow (mask of --mop-icon-arrow).
 * The Builder's right item padding (68px) leaves room for the chip. */

body .mop-desktop-header .mop-menu-class,
body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a {
    border-radius: 18px;
}

body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    text-align: left;
    transition: background-color .3s, color .3s;
}

/* Avada wraps each dropdown label and its description in one plain
   <span> (no class), confirmed on the live site. */
body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a > span:not(.awb-menu__description) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

body .mop-desktop-header .mop-menu-class .awb-menu__description {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--awb-color11);
    font-family: var(--awb-typography5-font-family);
    font-size: var(--awb-typography5-font-size);
    font-weight: var(--awb-typography5-font-weight);
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
}

body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a::before,
body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    left: auto;
    width: 38px;
    height: 38px;
    margin: -19px 0 0;
    pointer-events: none;
    transition: transform var(--mop-dur) var(--mop-ease), background-color .3s, border-color .3s;
}

body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a::after {
    z-index: 0;
    box-sizing: border-box;
    border: 1px solid hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .18);
    border-radius: 50%;
    background-color: transparent;
    transform: scale(1);
}

body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a::before {
    z-index: 1;
    background-color: var(--awb-color9);
    -webkit-mask: var(--mop-icon-arrow) center / 19px 19px no-repeat;
            mask: var(--mop-icon-arrow) center / 19px 19px no-repeat;
    transform: rotate(-45deg);
}

/* Hover and keyboard focus: the whole row reacts. */
body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a:is(:hover, :focus-visible)::after {
    transform: scale(1.08);
}

body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a:is(:hover, :focus-visible)::before {
    transform: rotate(0deg) scale(1.08);
}

body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: -2px;
}

/* Current class page: orange title, orange chip. */
body .mop-desktop-header .mop-menu-class.current-menu-item {
    --awb-submenu-color: var(--awb-color5);
    --awb-submenu-active-color: var(--awb-color5);
}

body .mop-desktop-header .mop-menu-class.current-menu-item > .awb-menu__sub-a::after {
    border-color: var(--awb-color5);
    background-color: var(--awb-color5);
}

/* The current row has no hover tint at rest (Avada gives current items the
   Hover background); it tints on hover like the others. */
body .mop-desktop-header .mop-menu-class.current-menu-item:not(:hover, :focus-within),
body .mop-desktop-header .mop-menu-class.current-menu-item:not(:hover, :focus-within) > .awb-menu__sub-a {
    background-color: transparent;
}

/* 7f. "Compare all classes" row ---------------------------------- */

body .mop-desktop-header .mop-menu-classes .awb-menu__sub-li.mop-menu-compare {
    --awb-submenu-color: var(--awb-color12);
    --awb-submenu-active-color: var(--awb-color5);
    margin-top: 8px;
    border-top: 1px solid var(--awb-color3);
    border-radius: 0;
    background: transparent;
}

body .mop-desktop-header .mop-menu-compare > .awb-menu__sub-a,
body .mop-desktop-header .mop-menu-compare > .awb-menu__sub-a:is(:hover, :focus-visible) {
    background: transparent;
}

body .mop-desktop-header .mop-menu-compare > .awb-menu__sub-a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 0;
    font-size: var(--h6_typography-font-size);
    /* DSM H6 weight (600). Avada's --h6_typography-font-weight outputs 700
       on this site (it follows the Headings set), so the DSM value is used. */
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0;
    transition: color .3s;
}

body .mop-desktop-header .mop-menu-compare > .awb-menu__sub-a::after {
    content: "\203A";
}

body .mop-desktop-header .mop-menu-compare > .awb-menu__sub-a:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: -2px;
}

/* 7g. Join Now link ---------------------------------------------- */

/* Type comes from the Text Block Typography field. The Text Block has no
   link color fields, so the link colors are set here. */
body .mop-desktop-header .mop-header-link {
    white-space: nowrap;
}

body .mop-desktop-header .mop-header-link a {
    color: var(--awb-color12);
}

body .mop-desktop-header .mop-header-link a:hover {
    color: var(--awb-color9);
}

body .mop-desktop-header .mop-header-link p {
    margin: 0;
}

body .mop-desktop-header .mop-header-link a:focus-visible {
    color: var(--awb-color9);
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

/* 7h. Reduced motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body .mop-desktop-header,
    body .mop-desktop-header .mop-menu-classes > .awb-menu__main-a::after,
    body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a,
    body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a::before,
    body .mop-desktop-header .mop-menu-class > .awb-menu__sub-a::after,
    body .mop-desktop-header .mop-menu-compare > .awb-menu__sub-a {
        transition: none;
    }
}


/* ============================================================
 * 8. GLOBAL FOOTER  (AVADA-NATIVE-GLOBAL-FOOTER v5.4)
 * Host: the Avada Footer Layout Container with CSS Class
 * "mop-footer" (Global Layout > Footer, every screen size).
 *
 * The Builder owns column widths, column spacing, gaps, padding,
 * margins, the 3px orange top border, backgrounds, the Momentum
 * Connect card border and radius, the legal row divider, and every
 * Text Block's typography and text color.
 * This section adds only what no Builder field sets:
 *  8a. Centered layout at 1100px and below (Medium and Small)
 *  8b. Paragraph margins inside footer Text Blocks
 *  8c. Logo height (34px, width follows the file's ratio)
 *  8d. Link lists and the phone link: line spacing and link colors
 *      (the Text Block has no link color fields)
 *  8e. App Store and Google Play badges: 40px height, 10px gap, fade
 *  8f. Legal row: copyright, policy links and credit
 *  8g. Reduced motion
 *  8h. Momentum Connect card: stacked and centered at 1100px and below;
 *      full button label down to 360px
 *
 * Classes (Builder > CSS Class):
 *  mop-footer               Footer Container
 *  mop-footer-logo          Image Element (white logo)
 *  mop-footer-links         Text Blocks: phone, Visit, Hours, Train, More
 *  mop-footer-links--bright Text Blocks: phone, Visit (white links, orange hover)
 *  mop-footer-badges        Text Block: the two app badges
 *  mop-footer-legal         Text Block: copyright, policy links, credit
 *  mop-footer-card-col      Both columns of the card's Nested Columns
 *  mop-footer-statement     Text Block: the card statement
 * Column headings and the card kicker reuse mop-eyebrow mop-eyebrow--sm
 * (section 3); the card button reuses mop-btn-arrow--outline (section 2).
 * ============================================================ */

/* 8a. Centered layout (Medium and Small) ------------------------- */

/* The design stacks every footer group and centers it on tablets and
   phones. Text alignment inherits from the Container, so Text Blocks,
   the logo and the inline-level button center without their own
   per-screen alignment fields. */
@media (max-width: 1100px) {
    body .mop-footer {
        text-align: center;
    }
}

/* 8b. Paragraph margins ------------------------------------------- */

/* Spacing between footer items comes from Column Gap and Margin in the
   Builder, so the core 20px paragraph margin is removed inside the
   footer only. */
body .mop-footer p {
    margin: 0;
    text-wrap: pretty;
}

/* 8c. Logo ------------------------------------------------------- */

body .mop-footer .mop-footer-logo {
    display: block;
    line-height: 0;
}

body .mop-footer .mop-footer-logo img {
    display: block;
    width: auto;
    max-width: none;
    height: 34px;
}

@media (max-width: 1100px) {
    body .mop-footer .mop-footer-logo img {
        margin-inline: auto;
    }
}

/* 8d. Link lists and phone link --------------------------------- */

/* One paragraph per line; 12px between lines. */
body .mop-footer .mop-footer-links p + p {
    margin-top: 12px;
}

/* Train and More: muted links that turn white. */
body .mop-footer .mop-footer-links a {
    color: var(--awb-color6);
}

body .mop-footer .mop-footer-links a:is(:hover, :focus-visible) {
    color: var(--awb-color9);
}

/* Phone and Visit: white links that turn orange. */
body .mop-footer .mop-footer-links--bright a {
    color: var(--awb-color9);
}

body .mop-footer .mop-footer-links--bright a:is(:hover, :focus-visible) {
    color: var(--awb-color5);
}

body .mop-footer :is(.mop-footer-links, .mop-footer-legal) a:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

/* 8e. App badges ------------------------------------------------- */

body .mop-footer .mop-footer-badges p {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1100px) {
    body .mop-footer .mop-footer-badges p {
        justify-content: center;
    }
}

body .mop-footer .mop-footer-badges a {
    display: block;
    border-radius: 8px;
    transition: opacity .25s;
}

body .mop-footer .mop-footer-badges a:is(:hover, :focus-visible) {
    opacity: .8;
}

body .mop-footer .mop-footer-badges a:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

body .mop-footer .mop-footer-badges img {
    display: block;
    width: auto;
    max-width: none;
    height: 40px;
}

/* 8f. Legal row -------------------------------------------------- */

/* First paragraph: copyright and policy links. Second paragraph: the
   [agency_credit] link, the only absolute (https) link in the row.
   WordPress can leave empty paragraphs around a shortcode, so empty ones
   are removed from the row. Type and the resting text color come from
   the Text Block's Typography and Font Color fields. */
body .mop-footer .mop-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}

body .mop-footer .mop-footer-legal p:empty {
    display: none;
}

body .mop-footer .mop-footer-legal p:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

body .mop-footer .mop-footer-legal a {
    color: var(--awb-color16);
}

body .mop-footer .mop-footer-legal a:is(:hover, :focus-visible) {
    color: var(--awb-color9);
}

body .mop-footer .mop-footer-legal a[href^="http"]:is(:hover, :focus-visible) {
    color: var(--awb-color5);
}

@media (max-width: 1100px) {
    body .mop-footer .mop-footer-legal,
    body .mop-footer .mop-footer-legal p:first-child {
        justify-content: center;
    }
}

/* 8g. Reduced motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body .mop-footer .mop-footer-badges a {
        transition: none;
    }
}

/* 8h. Momentum Connect card (Medium and Small) -------------------- */

/* The card's two Nested Columns sit side by side on desktop. At 1100px
   and below the design stacks them, full width and centered. Their
   per-screen Width did not take effect on the live site, so the stack is
   set here. !important is needed because Avada writes column widths
   with !important. The statement keeps its 620px Builder Maximum Width
   and is centered inside the full-width column. */
@media (max-width: 1100px) {
    body .mop-footer .mop-footer-card-col {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body .mop-footer .mop-footer-statement {
        margin-inline: auto;
    }
}

/* The button label must always show in full. With the card's 8px side
   padding at Small, the 15px label fits from 375px up; below 375px the
   footer card's button drops to a 14px label and 16px left padding,
   which fits from 360px up (checked on the live site). Values go
   through the component API, so the chip, fill and roll still work. */
@media (max-width: 374px) {
    body .mop-footer .mop-footer-card-col .fusion-button.mop-btn-arrow--outline {
        --mop-btn-fs: 14px;
        --mop-btn-pad-start: 16px;
    }
}


/* ============================================================
 * 9. TABLET AND MOBILE HEADER  (AVADA-TABLET-MOBILE-HEADER v4.5)
 * Host: the custom header printed by inc/site-mobile-menu.php at the
 * top of <body>, root "#mop-mm.mop-mm". Shows at 1100px and below
 * (Avada Medium Screen, DSM section 10); the native Avada
 * "Desktop Header" (section 7) owns 1101px and up.
 * Enhanced by assets/js/mop-mobile-menu.js, which adds:
 *  .mop-mm-ready  script bound (swaps the no-JS link for the button)
 *  .is-open       menu open
 *  .is-scrolled   page scrolled past 40px
 *  --mop-mm-offset  WordPress admin bar height (measured)
 *
 *  9a. Root: visibility, admin bar offset, type
 *  9b. Bar: fixed 76px, transparent to navy, bottom line
 *  9c. Logo (38px tall, width follows the file's ratio)
 *  9d. Menu button: ring, two bars that cross into an X
 *  9e. Panel and its decorative bar graphic
 *  9f. Classes group: heading, View all, class cards
 *  9g. Main list rows and their arrow chips
 *  9h. CTAs (mop-btn-arrow--lg, mop-btn-outline--lg, Button Span Yes)
 *  9i. Opening motion
 *  9j. No-JavaScript menu (#mop-mm-panel through :target)
 *  9k. Reduced motion, print
 *
 * Never targets .mop-desktop-header. Icons reuse --mop-icon-arrow;
 * motion reuses --mop-ease and --mop-dur (section 1).
 * Tints use the --awb-colorN-h/-s/-l channels of palette slots.
 * ============================================================ */

/* 9a. Root ------------------------------------------------------- */

body .mop-mm {
    --mop-mm-offset: 0px;
    --mop-mm-bar-height: 76px;
    display: block;
    font-family: var(--awb-typography3-font-family);
    line-height: normal;
}

body.admin-bar .mop-mm {
    --mop-mm-offset: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .mop-mm {
        --mop-mm-offset: 46px;
    }
}

@media (min-width: 1101px) {
    body .mop-mm {
        display: none;
    }
}

body .mop-mm ul,
body .mop-mm li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body .mop-mm li::before {
    content: none;
}

/* 9b. Bar -------------------------------------------------------- */

body .mop-mm .mop-mm-bar {
    position: fixed;
    top: var(--mop-mm-offset);
    right: 0;
    left: 0;
    z-index: 50;
    border-bottom: 1px solid transparent;
    background-color: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), 0);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
            backdrop-filter: saturate(1.6) blur(20px);
    transition: background-color .4s, border-color .4s;
}

body .mop-mm:is(.is-scrolled, .is-open) .mop-mm-bar {
    border-bottom-color: var(--awb-color3);
    background-color: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .82);
}

body .mop-mm .mop-mm-bar__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1375px;
    height: var(--mop-mm-bar-height);
    margin: 0 auto;
    padding: 0 max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left));
}

/* 9c. Logo ------------------------------------------------------- */

body .mop-mm .mop-mm-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

body .mop-mm .mop-mm-logo img {
    display: block;
    width: auto;
    max-width: none;
    height: 38px;
}

body .mop-mm .mop-mm-logo__text {
    color: var(--awb-color9);
    font-size: 20px;
    font-weight: 700;
    line-height: 38px;
}

body .mop-mm .mop-mm-logo:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 4px;
    border-radius: 4px;
}

/* 9d. Menu button ------------------------------------------------- */

body .mop-mm .mop-mm-toggle {
    -webkit-appearance: none;
            appearance: none;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .2);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--awb-color9);
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .3s;
}

body .mop-mm .mop-mm-toggle:is(:hover, :focus, :active) {
    background: transparent;
    box-shadow: none;
    color: var(--awb-color9);
}

body .mop-mm.is-open .mop-mm-toggle--js,
body .mop-mm .mop-mm-toggle--close {
    border-color: var(--awb-color5);
}

body .mop-mm .mop-mm-toggle:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

body .mop-mm .mop-mm-burger {
    position: relative;
    display: block;
    width: 20px;
    height: 8px;
    pointer-events: none;
}

body .mop-mm .mop-mm-burger__line {
    position: absolute;
    right: 0;
    left: 0;
    height: 1.5px;
    background: var(--awb-color9);
    transition: transform .4s var(--mop-ease);
}

body .mop-mm .mop-mm-burger__line:first-child {
    top: 0;
}

body .mop-mm .mop-mm-burger__line:last-child {
    bottom: 0;
}

body .mop-mm.is-open .mop-mm-toggle--js .mop-mm-burger__line:first-child,
body .mop-mm .mop-mm-toggle--close .mop-mm-burger__line:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

body .mop-mm.is-open .mop-mm-toggle--js .mop-mm-burger__line:last-child,
body .mop-mm .mop-mm-toggle--close .mop-mm-burger__line:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}

/* 9e. Panel --------------------------------------------------------
 * Closed = display:none, so a closed panel can never cover the page or
 * take a tap or focus. Opening is instant (as in the design); the
 * blocks inside rise in (9i). */

body .mop-mm .mop-mm-panel {
    position: fixed;
    top: calc(var(--mop-mm-offset) + var(--mop-mm-bar-height));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 49;
    display: none;
    border-top: 1px solid var(--awb-color3);
    background: var(--awb-color1);
}

body .mop-mm.is-open .mop-mm-panel {
    display: block;
}

body .mop-mm .mop-mm-graphic {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 42%;
    padding: 0 16px;
    pointer-events: none;
}

body .mop-mm .mop-mm-graphic__bar {
    flex: 1;
    height: var(--mop-mm-bar-h);
    border-radius: 8px 8px 0 0;
    background: hsla(var(--awb-color5-h), var(--awb-color5-s), var(--awb-color5-l), .09);
    transform-origin: 50% 100%;
}

body .mop-mm.is-open .mop-mm-graphic__bar {
    animation: mop-mm-bar var(--mop-mm-bar-dur) ease-in-out var(--mop-mm-bar-delay) infinite;
}

@keyframes mop-mm-bar {
    0%       { transform: scaleY(.2); }
    33.333%  { transform: scaleY(1); }
    66.667%  { transform: scaleY(var(--mop-mm-bar-s)); }
    100%     { transform: scaleY(1); }
}

body .mop-mm .mop-mm-scroll {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 36px;
    height: 100%;
    padding: 28px max(32px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body .mop-mm .mop-mm-nav {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin: 0;
}

/* 9f. Classes group ------------------------------------------------ */

body .mop-mm .mop-mm-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body .mop-mm .mop-mm-group__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

body .mop-mm .mop-mm-group__title {
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
}

body .mop-mm .mop-mm-group__all {
    color: var(--awb-color12);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

body .mop-mm .mop-mm-group__all:is(:hover, :focus-visible) {
    color: var(--awb-color9);
}

body .mop-mm .mop-mm-group__all:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
    border-radius: 4px;
}

body .mop-mm .mop-mm-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body .mop-mm .mop-mm-cards > li {
    display: flex;
    min-width: 0;
}

body .mop-mm .mop-mm-card {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 10px 14px 12px;
    border: 1px solid hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .1);
    border-radius: 18px;
    background: var(--awb-color2);
    color: var(--awb-color9);
    text-decoration: none;
    transition: border-color .3s;
}

body .mop-mm .mop-mm-card:is(:hover, :focus-visible) {
    border-color: var(--awb-color5);
    color: var(--awb-color9);
}

body .mop-mm .mop-mm-card:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 2px;
}

body .mop-mm .mop-mm-card.is-current {
    border-color: var(--awb-color5);
    background: var(--awb-color5);
}

body .mop-mm .mop-mm-card__name,
body .mop-mm .mop-mm-card__tag {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body .mop-mm .mop-mm-card__name {
    color: var(--awb-color9);
    font-size: clamp(15px, 4.4vw, 17px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}

body .mop-mm .mop-mm-card__tag {
    color: var(--awb-color11);
    font-size: 14px;
}

body .mop-mm .mop-mm-card.is-current .mop-mm-card__tag {
    color: var(--awb-color1);
}

/* 9g. Main list rows ----------------------------------------------
 * Hover and keyboard focus: label turns orange, the chip grows to 1.08
 * and its arrow turns from -45deg (up-right) to 0deg (right). */

body .mop-mm .mop-mm-list {
    display: flex;
    flex-direction: column;
}

body .mop-mm .mop-mm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--awb-color3);
    color: var(--awb-color9);
    font-size: clamp(34px, 9vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em;
    text-decoration: none;
}

body .mop-mm .mop-mm-row:is(:hover, :focus-visible),
body .mop-mm .mop-mm-row.is-current {
    color: var(--awb-color5);
}

body .mop-mm .mop-mm-row:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 2px;
}

body .mop-mm .mop-mm-row__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 40px disc plus its 1px ring (42px overall, as in the design). */
body .mop-mm .mop-mm-chip {
    position: relative;
    box-sizing: content-box;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .16);
    border-radius: 50%;
    background: transparent;
    transform: scale(1);
    transition: transform var(--mop-dur) var(--mop-ease);
}

body .mop-mm .mop-mm-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--awb-color9);
    -webkit-mask: var(--mop-icon-arrow) center / 19px 19px no-repeat;
            mask: var(--mop-icon-arrow) center / 19px 19px no-repeat;
    transform: rotate(-45deg);
    transition: transform var(--mop-dur) var(--mop-ease);
}

body .mop-mm .mop-mm-row:is(:hover, :focus-visible) .mop-mm-chip {
    transform: scale(1.08);
}

body .mop-mm .mop-mm-row:is(:hover, :focus-visible) .mop-mm-chip::before {
    transform: rotate(0deg);
}

body .mop-mm .mop-mm-row.is-current .mop-mm-chip {
    border-color: var(--awb-color5);
    background: var(--awb-color5);
}

/* 9h. CTAs ---------------------------------------------------------
 * Avada Buttons with Button Span Yes. Their look comes from section 2;
 * this only stacks them full width with the design's 12px gap. */

body .mop-mm .mop-mm-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body .mop-mm .mop-mm-ctas > * {
    width: 100%;
    margin: 0;
}

body .mop-mm .mop-mm-ctas .fusion-button {
    width: 100%;
}

/* 9i. Opening motion ------------------------------------------------
 * Each block rises 18px and fades in, 560ms, 45ms apart from 40ms
 * (--mop-mm-i is the block's order, printed by the PHP module). */

body .mop-mm.is-open .mop-mm-item {
    animation: mop-mm-in .56s var(--mop-ease) backwards;
    animation-delay: calc(40ms + var(--mop-mm-i, 0) * 45ms);
}

@keyframes mop-mm-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

/* 9j. No-JavaScript menu --------------------------------------------
 * Until the script binds, a plain link to #mop-mm-panel opens the panel
 * (CSS :target) and a second link closes it. Once .mop-mm-ready is set,
 * the real button takes over and :target no longer applies. */

body .mop-mm:not(.mop-mm-ready) .mop-mm-toggle--js,
body .mop-mm.mop-mm-ready .mop-mm-toggle--nojs,
body .mop-mm .mop-mm-toggle--close {
    display: none;
}

body .mop-mm:not(.mop-mm-ready) .mop-mm-panel:target {
    display: block;
}

body .mop-mm:not(.mop-mm-ready):has(.mop-mm-panel:target) .mop-mm-toggle--nojs {
    display: none;
}

body .mop-mm:not(.mop-mm-ready):has(.mop-mm-panel:target) .mop-mm-toggle--close {
    display: flex;
}

body .mop-mm:not(.mop-mm-ready):has(.mop-mm-panel:target) .mop-mm-bar {
    border-bottom-color: var(--awb-color3);
    background-color: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .82);
}

/* 9k. Reduced motion, print ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body .mop-mm .mop-mm-bar,
    body .mop-mm .mop-mm-toggle,
    body .mop-mm .mop-mm-burger__line,
    body .mop-mm .mop-mm-card,
    body .mop-mm .mop-mm-chip,
    body .mop-mm .mop-mm-chip::before {
        transition: none;
    }

    body .mop-mm.is-open .mop-mm-item,
    body .mop-mm.is-open .mop-mm-graphic__bar {
        animation: none;
    }
}

@media print {
    body .mop-mm .mop-mm-panel {
        display: none !important;
    }
}


/* ============================================================
 * 10. BAR GRAPHIC  (mop-bars)
 * Decorative animated bars along the bottom of a CTA card or hero
 * (RCM section 13). Markup (PHP or an Avada Code Block):
 *   <div class="mop-bars mop-bars--on-orange" aria-hidden="true">
 *     <span class="mop-bars__bar" style="--mop-bar-h:18%;--mop-bar-s:.42;
 *       --mop-bar-dur:2600ms;--mop-bar-delay:0ms"></span> ...
 *   </div>
 * The host sets position: relative, isolation: isolate and
 * overflow: hidden, so the bars sit behind its content and are clipped
 * by its radius. Per-bar values are the design's (height, lowest
 * scale, loop length, negative delay so the bars start out of step).
 * ============================================================ */

body .mop-bars {
    --mop-bars-ink: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .11);
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: flex;
    align-items: flex-end;
    gap: clamp(3px, .6vw, 8px);
    box-sizing: border-box;
    height: var(--mop-bars-h, 64%);
    padding: 0 clamp(12px, 2.5vw, 32px);
    pointer-events: none;
}

/* Navy bars on an orange card (closing cards). */
body .mop-bars--on-orange {
    --mop-bars-ink: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .11);
}

/* Orange bars on navy (heroes, mobile menu style). */
body .mop-bars--on-navy {
    --mop-bars-ink: hsla(var(--awb-color5-h), var(--awb-color5-s), var(--awb-color5-l), .09);
}

body .mop-bars__bar {
    flex: 1 1 0;
    height: var(--mop-bar-h, 50%);
    border-radius: 8px 8px 0 0;
    background: var(--mop-bars-ink);
    transform-origin: 50% 100%;
    animation: mop-bar var(--mop-bar-dur, 2600ms) ease-in-out var(--mop-bar-delay, 0ms) infinite;
}

@keyframes mop-bar {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(var(--mop-bar-s, .6));
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mop-bars__bar {
        animation: none;
    }
}

@media print {
    body .mop-bars {
        display: none;
    }
}


/* ============================================================
 * 11. PAGE SECTION HELPERS  (AVADA-PAGE-SECTION v5.5)
 * RCM section 14. Hosts are Avada Builder Containers, Columns and
 * Text Blocks on normal pages.
 *   11a. mop-flow ........ Container: Builder Gap owns text spacing
 *   11b. mop-inset-card .. Container drawn as a card inset to the
 *                          site width (closing CTA cards, mop-bars host)
 *   11c. mop-link-card ... Column drawn as a whole-card link with the
 *                          navy arrow chip
 *   11d. Arrow CTAs inside a mop-inset-card below 375px (labels in
 *                          full on the narrowest phones)
 * ============================================================ */

/* 11a. Text flow ---------------------------------------------------
 * Avada gives every paragraph a 20px bottom margin (not a Global
 * Option). Inside a mop-flow Container the last paragraph of each
 * Text Block drops it, so the Column Gap is the only space between
 * elements. Headings balance and paragraphs wrap "pretty" like the
 * design; long links (email addresses) break instead of overflowing. */

body .mop-flow p:last-child {
    margin-bottom: 0;
}

body .mop-flow :is(h1, h2, h3) {
    text-wrap: balance;
}

body .mop-flow p {
    text-wrap: pretty;
}

body .mop-flow p a {
    overflow-wrap: anywhere;
}

/* 11b. Inset card Container -----------------------------------------
 * The Container itself is the card: background, radius, padding,
 * Overflow Hidden and top/bottom Margin are Builder fields. This rule
 * only insets it to the site width (32px from the screen edge until the
 * window is wider than the site width plus 64px), so its edges line up
 * with the content edges of the Site Width Containers above it, and
 * makes it the positioned, isolated host that mop-bars needs.
 * !important: Avada sizes full-width Containers with its own margin
 * rules; only the left and right margins are claimed here. */

body .mop-inset-card {
    position: relative;
    isolation: isolate;
    margin-left: max(32px, calc((100% - var(--site_width, 1375px)) / 2)) !important;
    margin-right: max(32px, calc((100% - var(--site_width, 1375px)) / 2)) !important;
}

/* 11c. Link card ---------------------------------------------------
 * Host: an Avada Column (class mop-link-card) with Content Layout
 * Column. Background, radius, padding, shadow and the 12px Gap are
 * Builder fields. Two Text Blocks inside:
 *   mop-link-card__title  holds the one link; its ::before stretches
 *                         over the whole card, so the card has one
 *                         accessible name (the title) and one tab stop.
 *   mop-link-card__text   the description; it grows to fill the card
 *                         and draws the 52px navy chip with the shared
 *                         arrow at the bottom, at least 48px below.
 * Hover or keyboard focus anywhere on the card scales the chip to 1.08,
 * turns the arrow from -45deg to 0deg (the design's data-btn card) and
 * turns the arrow Color 5 Brand Orange while it rotates (v1.6.1).
 * The Column keeps Column Spacing 0, so the stretched link and the
 * focus ring match the visible card. */

body .mop-link-card {
    --mop-link-card-radius: 28px;
    --mop-link-card-chip: 52px;
    --mop-link-card-chip-bg: var(--awb-color1);
    --mop-link-card-chip-ink: var(--awb-color9);
    --mop-link-card-chip-ink-on: var(--awb-color5);
    --mop-link-card-ring: var(--awb-color1);
    position: relative;
}

body .mop-link-card .mop-link-card__title p,
body .mop-link-card .mop-link-card__text p {
    margin: 0;
}

body .mop-link-card .mop-link-card__title a,
body .mop-link-card .mop-link-card__title a:hover,
body .mop-link-card .mop-link-card__title a:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

body .mop-link-card .mop-link-card__title a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--mop-link-card-radius);
}

body .mop-link-card .mop-link-card__title a:focus-visible::before {
    outline: 2px solid var(--mop-link-card-ring);
    outline-offset: 3px;
}

body .mop-link-card .mop-link-card__text {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 48px;
}

/* Chip disc. */
body .mop-link-card .mop-link-card__text::after {
    content: "";
    flex-shrink: 0;
    width: var(--mop-link-card-chip);
    height: var(--mop-link-card-chip);
    margin-top: auto;
    border-radius: 50%;
    background: var(--mop-link-card-chip-bg);
    transform: scale(1);
    transition: transform var(--mop-dur) var(--mop-ease);
}

/* Arrow, drawn over the disc (same box, bottom left). */
body .mop-link-card .mop-link-card__text::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: var(--mop-link-card-chip);
    height: var(--mop-link-card-chip);
    background: var(--mop-link-card-chip-ink);
    -webkit-mask: var(--mop-icon-arrow) center / 19px 19px no-repeat;
            mask: var(--mop-icon-arrow) center / 19px 19px no-repeat;
    transform: rotate(-45deg);
    transition: transform var(--mop-dur) var(--mop-ease), background-color var(--mop-dur) var(--mop-ease);
}

body .mop-link-card:is(:hover, :focus-within) .mop-link-card__text::after {
    transform: scale(1.08);
}

body .mop-link-card:is(:hover, :focus-within) .mop-link-card__text::before {
    background: var(--mop-link-card-chip-ink-on);
    transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    body .mop-link-card .mop-link-card__text::before,
    body .mop-link-card .mop-link-card__text::after {
        transition: none;
    }
}


/* 11d. Arrow CTAs inside an inset card on the narrowest phones -----
 * A button label must always show in full. At Small the inset card's
 * 28px side padding leaves 240px inside the card on a 360px wide
 * screen, and the longest arrow CTA label in a closing card ("Start a
 * Conversation", Workplace Wellness) needs 247px with the default 26px
 * left padding and 14px gap. Below 375px an arrow CTA inside a
 * mop-inset-card takes a 20px left padding and a 10px label-to-chip
 * gap (237px), so it fits from 360px up. The values go through the
 * component API (section 2a), so the fill, roll, chip and arrow still
 * work; chip size and inset are unchanged. */
@media (max-width: 374px) {
    body .mop-inset-card .fusion-button.mop-btn-arrow {
        --mop-btn-pad-start: 20px;
        --mop-btn-gap: 10px;
    }
}

/* ============================================================
 * 12. CLASS TILE AND VIDEO VIEWER  (AVADA-PAGE-SECTION v5.6)
 * RCM section 16. Used by the "MOP Class Tile" Post Card (Avada
 * Library) wherever a Post Cards element lists the classes.
 *   12a. mop-class-tile .......... Post Card root Column (grid item)
 *   12b. mop-class-tile__content . Nested Column: the visible 4:5 card
 *   12c. mop-class-media ......... [mop_class_media] video / image layer,
 *                                  first element in the Nested Column
 *   12d. mop-class-actions ....... [mop_class_actions] Watch + Learn more
 *   12e. mop-video-viewer ........ <dialog> built by mop-components.js
 * Background, radius, Overflow Hidden, padding, gradient and gap are
 * Builder fields on the Post Card. Nothing here restates them.
 * ============================================================ */

/* 12a. Root Column -------------------------------------------------
 * In a Post Cards grid the root Column IS the grid item (li.post-card.
 * fusion-grid-column) and Avada puts half the Column Spacing on it as
 * padding (found live 2026-10-18). So it is never used as the media
 * host. Paragraph margins inside the card are owned by the Gap. */

body .mop-class-tile p {
    margin: 0;
}

/* 12b. Content Nested Column (the visible card) ----------------------
 * Exactly the card's box: 4:5 (it grows if the copy ever needs more
 * room), positioned and clipped to the 28px radius so the media layer
 * inside it cannot spill. The media sits at z-index -1 in this
 * isolated box: above the box itself, below the Builder gradient and
 * the text. Keep --mop-class-tile-radius equal to the root Column's
 * Builder Border Radius.
 * !important: position, overflow and radius only, because Avada's
 * column rules set them with stronger selectors. */

body .mop-class-tile .mop-class-tile__content {
    --mop-class-tile-radius: 28px;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border-radius: var(--mop-class-tile-radius) !important;
    aspect-ratio: 4 / 5;
}

/* 12c. Media layer ---------------------------------------------------
 * Covers the Content Nested Column, behind its gradient and text. */

body .mop-class-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

body .mop-class-media :is(.mop-class-media__video, .mop-class-media__img) {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

/* 12d. Watch button and Learn more link ------------------------------ */

body .mop-class-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

body .mop-class-actions .mop-class-watch {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px 0 6px;
    border-radius: 999px;
    background: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .14);
    color: var(--awb-color9);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .3s;
}

/* Shown only once the viewer script is ready (never a dead button). */
html:not(.mop-video-ready) body .mop-class-actions .mop-class-watch {
    display: none;
}

body .mop-class-actions .mop-class-watch:is(:hover, :focus-visible) {
    background: var(--awb-color5);
}

body .mop-class-watch__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    padding-left: 2px;
    border-radius: 50%;
    background: var(--awb-color5);
    font-size: 12px;
    line-height: 1;
}

body .mop-class-actions .mop-class-more,
body .mop-class-actions .mop-class-more:visited {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--awb-color9);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s;
}

body .mop-class-actions .mop-class-more:is(:hover, :focus-visible) {
    color: var(--awb-color5);
}

body .mop-class-actions :is(.mop-class-watch, .mop-class-more):focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

body .mop-class-actions .mop-class-more:focus-visible {
    border-radius: 4px;
}

/* 12e. Video viewer ---------------------------------------------------
 * Native <dialog> opened with showModal() (top layer above the fixed
 * header, focus kept inside, Escape closes). The dialog paints its own
 * full-screen veil; a click on the veil outside the panel closes it.
 * Same design as the Class single viewer. */

body .mop-video-viewer {
    --mop-viewer-ring: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .2);
    position: fixed;
    inset: 0;
    z-index: 100;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(16px, 4vw, 48px);
    overflow-y: auto;
    border: 0;
    background: hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .94);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    color: var(--awb-color9);
    font-family: inherit;
}

body .mop-video-viewer[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

body .mop-video-viewer::backdrop {
    background: transparent;
}

html.mop-video-viewer-open {
    overflow: hidden;
}

body .mop-video-viewer__panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(1200px, 100%, calc((100vh - 260px) * 16 / 9));
    min-width: min(100%, 320px);
    margin: auto;
}

body .mop-video-viewer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body .mop-video-viewer__titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

body .mop-video-viewer__eyebrow {
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

body .mop-video-viewer__eyebrow:empty {
    display: none;
}

body .mop-video-viewer__title {
    color: var(--awb-color9);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}

body .mop-video-viewer .mop-video-viewer__btn {
    all: unset;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--mop-viewer-ring);
    border-radius: 50%;
    color: var(--awb-color9);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background-color .3s, border-color .3s, transform .3s;
}

body .mop-video-viewer .mop-video-viewer__close {
    width: 52px;
    height: 52px;
    font-size: 16px;
}

body .mop-video-viewer .mop-video-viewer__close:is(:hover, :focus-visible) {
    border-color: var(--awb-color5);
    background: var(--awb-color5);
}

body .mop-video-viewer__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 24px;
    background: var(--awb-color7);
}

body .mop-video-viewer__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000; /* video letterbox, as in the design */
    pointer-events: none;
}

body .mop-video-viewer .mop-video-viewer__veil {
    all: unset;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .35);
    cursor: pointer;
    transition: background-color .4s;
}

body .mop-video-viewer__big {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 88px;
    height: 88px;
    padding-left: 4px;
    border-radius: 50%;
    background: var(--awb-color5);
    box-shadow: 0 10px 40px -10px hsla(var(--awb-color5-h), var(--awb-color5-s), var(--awb-color5-l), .7);
    color: var(--awb-color9);
    font-size: 24px;
    line-height: 1;
    transition: opacity .35s, transform .35s var(--mop-ease);
}

body .mop-video-viewer.is-playing .mop-video-viewer__veil {
    background: transparent;
}

body .mop-video-viewer.is-playing .mop-video-viewer__big {
    opacity: 0;
    transform: scale(.8);
}

body .mop-video-viewer__bar {
    display: flex;
    align-items: center;
    gap: 16px;
}

body .mop-video-viewer .mop-video-viewer__play {
    width: 48px;
    height: 48px;
    border: 0;
    background: var(--awb-color5);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -1px;
}

body .mop-video-viewer .mop-video-viewer__play:is(:hover, :focus-visible) {
    transform: scale(1.08);
}

body .mop-video-viewer__seek {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    cursor: pointer;
    touch-action: none;
}

body .mop-video-viewer__track {
    position: relative;
    height: 6px;
    border-radius: 6px;
    background: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .14);
}

body .mop-video-viewer__progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--mop-viewer-pct, 0%);
    border-radius: 6px;
    background: var(--awb-color5);
}

body .mop-video-viewer__thumb {
    position: absolute;
    top: 50%;
    left: var(--mop-viewer-pct, 0%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--awb-color9);
    transform: translate(-50%, -50%);
}

body .mop-video-viewer__time {
    flex-shrink: 0;
    min-width: 88px;
    color: var(--awb-color11);
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

body .mop-video-viewer .mop-video-viewer__mute {
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

body .mop-video-viewer .mop-video-viewer__mute[hidden] {
    display: none;
}

body .mop-video-viewer .mop-video-viewer__full {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

body .mop-video-viewer .mop-video-viewer__mute:is(:hover, :focus-visible),
body .mop-video-viewer .mop-video-viewer__full:is(:hover, :focus-visible) {
    border-color: var(--awb-color5);
}

body .mop-video-viewer :is(.mop-video-viewer__btn, .mop-video-viewer__veil, .mop-video-viewer__seek):focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

body .mop-video-viewer .mop-video-viewer__veil:focus-visible {
    outline-offset: -4px;
    border-radius: 24px;
}

@media (prefers-reduced-motion: reduce) {
    body .mop-class-actions :is(.mop-class-watch, .mop-class-more),
    body .mop-video-viewer__big,
    body .mop-video-viewer .mop-video-viewer__btn,
    body .mop-video-viewer .mop-video-viewer__veil {
        transition: none;
    }
}


/* ============================================================
 * 13. STUDIO HOURS GRID  ([mop_hours layout="grid"])
 * RCM section 15. Contact page Studio Hours: three equal columns at
 * every width, days in 600 Color 8, hours in Color 11. Size, line
 * height and colors are the design's (v1.15.0: the days carry Color 8
 * themselves, because the grid is printed in a Code Block, which has
 * no Font Color field).
 * ============================================================ */

body .mop-hours--grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    font-size: 15px;
    line-height: 1.5;
}

body .mop-hours--grid .mop-hours__row {
    display: flex;
    flex-direction: column;
}

body .mop-hours--grid .mop-hours__days {
    color: var(--awb-color8);
    font-weight: 600;
}

body .mop-hours--grid .mop-hours__time {
    color: var(--awb-color11);
}


/* ============================================================
 * 14. DIRECTIONS LINK  ([mop_directions])
 * RCM section 15. Always on its own line, even when the shortcode
 * follows [mop_address] in the same Text Block (WordPress joins the
 * two lines). Design (thank-you pages): Color 5, 16px, 600. Hover keeps
 * the color (the design shows no hover change); keyboard focus gets
 * a 2px ring. The footer keeps its own link colors and list size.
 * ============================================================ */

body .mop-directions,
body .mop-directions:visited,
body .mop-directions:hover {
    display: block;
    width: fit-content;
    color: var(--awb-color5);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

body .mop-directions:focus-visible {
    outline: 2px solid var(--awb-color5);
    outline-offset: 3px;
    border-radius: 4px;
}

body .mop-footer .mop-directions {
    font-size: inherit;
    font-weight: inherit;
}


/* ============================================================
 * 15. LINK LIST AND LEAD-IN  (AVADA-PAGE-SECTION v5.7)
 * RCM section 17. First user: the 404 Layout (Popular pages).
 *   15a. mop-lead-in ... span inside a muted lead paragraph that
 *                        prints its first sentence in Color 9 White
 *   15b. mop-link-row .. Nested Column drawn as one full-width link
 *                        row: title, description, 52px outline chip
 * The list's top border, each row's bottom border, the row padding
 * (26px top and bottom, 76px right for the chip) and the 4px Gap are
 * Builder fields. CSS never restates them.
 * ============================================================ */

/* 15a. Lead-in -------------------------------------------------------
 * Text Block content (Text tab):
 *   <span class="mop-lead-in">First sentence.</span> Rest of the lead.
 * The Text Block's Font Color stays the muted color of the paragraph. */

body .mop-lead-in {
    color: var(--awb-color9);
}

/* 15b. Link row ------------------------------------------------------
 * Host: an Avada Nested Column (class mop-link-row), Content Layout
 * Column, Column Spacing 0. Two Text Blocks inside:
 *   mop-link-row__title  holds the row's one link; its ::before
 *                        stretches over the whole row (one tab stop,
 *                        accessible name = the title).
 *   mop-link-row__text   the description; it draws the chip ring
 *                        (::after) and the shared arrow (::before),
 *                        centered on the row's right edge.
 * Hover or keyboard focus anywhere on the row: title Color 5, chip
 * scale 1.08, arrow -45deg to 0deg (the design's data-btn row).
 * Position is claimed with !important: Avada sets its own position on
 * Columns, and the description must not become the containing block. */

body .mop-link-row {
    --mop-link-row-chip: 52px;
    --mop-link-row-chip-line: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .2);
    --mop-link-row-ink: var(--awb-color9);
    --mop-link-row-ink-on: var(--awb-color5);
    --mop-link-row-ring: var(--awb-color9);
    position: relative !important;
}

body .mop-link-row .mop-link-row__title p,
body .mop-link-row .mop-link-row__text p {
    margin: 0;
}

body .mop-link-row .mop-link-row__title a,
body .mop-link-row .mop-link-row__title a:visited,
body .mop-link-row .mop-link-row__title a:hover,
body .mop-link-row .mop-link-row__title a:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
    transition: color .3s var(--mop-ease);
}

body .mop-link-row:is(:hover, :focus-within) .mop-link-row__title a {
    color: var(--mop-link-row-ink-on);
}

body .mop-link-row .mop-link-row__title a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 4px;
}

body .mop-link-row .mop-link-row__title a:focus-visible::before {
    outline: 2px solid var(--mop-link-row-ring);
    outline-offset: 3px;
}

body .mop-link-row .mop-link-row__text {
    position: static !important;
}

/* Chip ring. */
body .mop-link-row .mop-link-row__text::after,
body .mop-link-row .mop-link-row__text::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--mop-link-row-chip);
    height: var(--mop-link-row-chip);
    pointer-events: none;
}

body .mop-link-row .mop-link-row__text::after {
    box-sizing: border-box;
    border: 1px solid var(--mop-link-row-chip-line);
    border-radius: 50%;
    transform: translateY(-50%) scale(1);
    transition: transform var(--mop-dur) var(--mop-ease);
}

/* Arrow, drawn over the ring (same box). */
body .mop-link-row .mop-link-row__text::before {
    z-index: 1;
    background: var(--mop-link-row-ink);
    -webkit-mask: var(--mop-icon-arrow) center / 19px 19px no-repeat;
            mask: var(--mop-icon-arrow) center / 19px 19px no-repeat;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform var(--mop-dur) var(--mop-ease);
}

body .mop-link-row:is(:hover, :focus-within) .mop-link-row__text::after {
    transform: translateY(-50%) scale(1.08);
}

body .mop-link-row:is(:hover, :focus-within) .mop-link-row__text::before {
    transform: translateY(-50%) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    body .mop-link-row .mop-link-row__title a,
    body .mop-link-row .mop-link-row__text::before,
    body .mop-link-row .mop-link-row__text::after {
        transition: none;
    }
}


/* ============================================================
 * 16. LEGAL PAGES  (AVADA-PAGE-SECTION, Prompt 12 Legal Pages)
 * RCM section 18. Markup printed by [mop_terms_of_service],
 * [mop_privacy_policy] and [mop_accessibility] (inc/site-legal-pages.php) inside a Code
 * Block in a 100% Width, zero-padding Container.
 *   16a. Page top ...... Last updated (mop-eyebrow), H1, lead
 *   16b. Document grid . 240px sticky list + text, 1px top rule
 *   16c. On this page .. list, bar markers, current section
 *   16d. Text .......... mop-prose--legal plus the white intro and
 *                        56px between sections
 *   16e. Tablet/phone .. list hidden at 1100px and below (the design)
 *   16f. Print
 * The module owns the 32px side gutters and the site-width row, so
 * the Container must stay at 100% Width with no padding and must
 * never use Overflow Hidden (that would stop the sticky list).
 * ============================================================ */

/* 16a. Page top --------------------------------------------------- */

body .mop-legal {
    --mop-legal-row: var(--site_width, 1375px);
    --mop-legal-sticky: 110px;
    --mop-legal-rule: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .12);
}

body .mop-legal__top {
    padding: clamp(160px, 18vw, 220px) 32px clamp(64px, 8vw, 96px);
}

body .mop-legal__top-inner {
    max-width: var(--mop-legal-row);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

body .mop-legal h1.mop-legal__title {
    margin: 0;
    max-width: 1100px;
    color: var(--awb-color8);
    font-size: clamp(48px, 7vw, 104px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
}

body .mop-legal p.mop-legal__lead {
    margin: 0;
    max-width: 620px;
    color: var(--awb-color11);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    text-wrap: pretty;
}

/* 16b. Document grid ---------------------------------------------- */

body .mop-legal__doc {
    padding: 0 32px clamp(112px, 14vw, 192px);
}

body .mop-legal__grid {
    max-width: var(--mop-legal-row);
    margin: 0 auto;
    padding-top: 56px;
    border-top: 1px solid var(--mop-legal-rule);
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px clamp(48px, 7vw, 120px);
    align-items: start;
}

/* 16c. On this page ----------------------------------------------- */

body .mop-legal__toc {
    position: sticky;
    top: var(--mop-legal-sticky);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--awb-color5) transparent;
}

body .mop-legal p.mop-legal__toc-label {
    margin: 0 0 12px;
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

body .mop-legal__toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body .mop-legal__toc li {
    margin: 0;
    padding: 0;
}

body .mop-legal__toc li::before {
    content: none;
}

body .mop-legal .mop-legal__toc a,
body .mop-legal .mop-legal__toc a:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    border-radius: 4px;
    color: var(--awb-color6);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    transition: color .25s var(--mop-ease);
}

body .mop-legal .mop-legal__toc a::before {
    content: "";
    flex-shrink: 0;
    width: 3px;
    height: 18px;
    border-radius: 3px;
    background: var(--mop-legal-rule);
    transition: background .25s var(--mop-ease);
}

body .mop-legal .mop-legal__toc a:hover,
body .mop-legal .mop-legal__toc a:focus-visible,
body .mop-legal .mop-legal__toc a.is-current {
    color: var(--awb-color9);
}

body .mop-legal .mop-legal__toc a.is-current::before {
    background: var(--awb-color5);
}

body .mop-legal .mop-legal__toc a:focus-visible {
    outline: 2px solid var(--awb-color5);
    outline-offset: 2px;
}

/* 16d. Text -------------------------------------------------------- */

body .mop-legal__body {
    min-width: 0;
}

body .mop-legal__body > * + * {
    margin-top: 56px;
}

body .mop-legal__section {
    scroll-margin-top: var(--mop-legal-sticky);
}

body .mop-legal .mop-legal__intro p {
    color: var(--awb-color9);
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.6;
}

body .mop-legal__body p a {
    overflow-wrap: anywhere;
}

/* 16e. Tablet and phone: one column, no list (as the design). ----- */

@media (max-width: 1100px) {
    body .mop-legal__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body .mop-legal__toc {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mop-legal .mop-legal__toc a,
    body .mop-legal .mop-legal__toc a::before {
        transition: none;
    }
}

/* 16f. Print: text only. ------------------------------------------- */

@media print {
    body .mop-legal__top {
        padding: 0 0 24px;
    }

    body .mop-legal__doc {
        padding: 0;
    }

    body .mop-legal__grid {
        display: block;
        padding-top: 24px;
    }

    body .mop-legal__toc {
        display: none;
    }
}


/* ============================================================
 * 17. MEDIA FADES, CLASS FORMAT CARD, ACCENT, SCHEDULE
 *     (AVADA-PAGE-SECTION v5.7, Home page)
 * RCM section 19.
 *   17a. mop-class-media--hero / --card  the design's dark fades over
 *        the class video ([mop_class_media overlay="..."]), drawn
 *        above the video and below everything else in the host
 *   17b. mop-class-format ...... "MOP Class Format Card" Post Card:
 *        media box on top, text under it
 *   17c. mop-class-format-watch  glass "Watch the class" button
 *   17d. mop-accent ............ orange words inside a heading
 *   17e. mop-schedule .......... Mindbody widget host
 * Radius, margins, padding, gaps, borders and type stay Builder fields.
 * ============================================================ */

/* 17a. Media fades ------------------------------------------------- */

body .mop-class-media--hero::after,
body .mop-class-media--card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Page hero: Color 7 Deep Navy, dark at the top behind the header and
 * darkest at the bottom behind the heading (design stops). */
body .mop-class-media--hero {
    background: var(--awb-color7);
}

body .mop-class-media--hero::after {
    background: linear-gradient(180deg,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .55) 0%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .15) 35%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .35) 60%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .92) 100%);
}

/* Page hero (v1.14.0, Partners page and most other page heroes):
 * [mop_class_media overlay="page"] prints both --hero and --page, so the
 * layer rules above apply and only the stops change (design: 60% at 0,
 * 20% at 35%, 45% at 60%, 95% at 100%). */
body .mop-class-media--hero.mop-class-media--page::after {
    background: linear-gradient(180deg,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .6) 0%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .2) 35%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .45) 60%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .95) 100%);
}

/* Class format card: Color 1 fade, clear in the middle. #15123a is the
 * design's media placeholder (local component color, RCM section 1). */
body .mop-class-media--card {
    background: #15123a;
}

body .mop-class-media--card::after {
    background: linear-gradient(180deg,
        hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .25) 0%,
        hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), 0) 30%,
        hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .55) 65%,
        hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .95) 100%);
}

/* 17b. Class format card -------------------------------------------
 * Root Column mop-class-format (the grid item; never the media host).
 * Media Nested Column mop-class-format__media: the rounded media box,
 * 4:5 above 1100px and 16:11 at 1100px and below (design), positioned
 * and clipped so the media layer cannot spill. Keep
 * --mop-class-format-radius equal to its Builder Border Radius.
 * !important: position, overflow and radius only (Avada's column rules
 * set them with stronger selectors, as on the class tile). */

body .mop-class-format p {
    margin: 0;
}

body .mop-class-format .mop-class-format__media {
    --mop-class-format-radius: 24px;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border-radius: var(--mop-class-format-radius) !important;
    aspect-ratio: 4 / 5;
}

@media (max-width: 1100px) {
    body .mop-class-format .mop-class-format__media {
        aspect-ratio: 16 / 11;
    }

    /* Portrait grid (v1.13.0, About Us): a Post Cards Column with
     * mop-class-format-grid--portrait keeps the 4:5 media at every
     * width, for grids that stay several cards wide on tablets. */
    body .mop-class-format-grid--portrait .mop-class-format .mop-class-format__media {
        aspect-ratio: 4 / 5;
    }
}

body .mop-class-format-media {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

body .mop-class-format-media .mop-class-media :is(.mop-class-media__video, .mop-class-media__img) {
    transform: scale(1);
    transition: transform 1.2s var(--mop-ease);
}

/* Zoom while the pointer is on the media or the card's title link has
 * keyboard focus (design: 1.04 over 1.2s). */
body .mop-class-format-media:has(.mop-class-format-media__link:hover) .mop-class-media :is(.mop-class-media__video, .mop-class-media__img),
body .mop-class-format:focus-within .mop-class-media :is(.mop-class-media__video, .mop-class-media__img) {
    transform: scale(1.04);
}

body .mop-class-format-media .mop-class-format-media__link {
    position: absolute;
    inset: 0;
}

/* Learn more ([mop_class_actions watch=""]) sits 12px under the
 * description like the design: its 44px tap row is pulled back over
 * the Gap, and the label uses the design's 500 weight. */
body .mop-class-format .mop-class-actions {
    margin: -14px 0;
}

body .mop-class-format .mop-class-actions .mop-class-more {
    font-weight: 500;
}

/* 17c. "Watch the class" button ----------------------------------- */

body .mop-class-format-media .mop-class-format-watch {
    all: unset;
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--awb-color9);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s;
}

/* Shown only once the viewer script is ready (never a dead button). */
html:not(.mop-video-ready) body .mop-class-format-media .mop-class-format-watch {
    display: none;
}

body .mop-class-format-media .mop-class-format-watch:is(:hover, :focus-visible) {
    color: var(--awb-color5);
}

body .mop-class-format-media .mop-class-format-watch:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
    border-radius: 999px;
}

body .mop-class-format-watch__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding-left: 2px;
    border-radius: 50%;
    background: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .18);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    color: var(--awb-color9);
    font-size: 12px;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    body .mop-class-format-media .mop-class-media :is(.mop-class-media__video, .mop-class-media__img),
    body .mop-class-format-media .mop-class-format-watch {
        transition: none;
    }
}

/* 17d. Accent words ------------------------------------------------
 * <span class="mop-accent">Oak Park</span> inside a Title Element:
 * Color 5 Brand Orange, everything else inherited from the heading. */

body .mop-accent {
    color: var(--awb-color5);
}

/* 17e. Schedule host ([mop_schedule]) ------------------------------
 * Keeps the schedule card at the design's 520px while Mindbody loads. */

body .mop-schedule {
    min-height: 520px;
}


/* ============================================================
 * 18. COACH MATCH QUIZ  (AVADA-PAGE-SECTION, Find Your Coach)
 * RCM section 20. Markup from [mop_coach_match]
 * (inc/site-coach-match.php); steps drawn by mop-components.js
 * section 6. The card sits in a Code Block inside the Light Surface
 * Quiz Container, so every color here is for a white panel.
 *   18a. Card and shared text
 *   18b. Quiz step: progress, question, answer buttons
 *   18c. Gate step (the Coach Match form keeps RCM section 9)
 *   18d. Result step: photo, match text, second match, retake
 *   18e. No-script note, reduced motion
 * Buttons are Avada Button markup (mop-btn-arrow--navy,
 * mop-btn-outline--navy), styled by section 2 unchanged.
 * ============================================================ */

/* 18a. Card and shared text ----------------------------------------- */

body .mop-cm {
    --mop-cm-line: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .14);
    --mop-cm-rule: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .1);
    color: var(--awb-color1);
}

body .mop-cm__card {
    scroll-margin-top: 100px;
    padding: clamp(28px, 5vw, 72px);
    border-radius: 32px;
    background: var(--awb-color9);
    box-shadow:
        0 1px 2px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .04),
        0 24px 60px -32px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .18);
}

body .mop-cm [hidden] {
    display: none !important;
}

body .mop-cm :is(p, h3) {
    margin: 0;
}

body .mop-cm__split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
}

body .mop-cm__split--result {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    align-items: stretch;
}

body .mop-cm__intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

body .mop-cm__intro--quiz {
    gap: 28px;
}

body .mop-cm__kicker,
body .mop-cm__tag {
    color: var(--awb-color4);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

body .mop-cm .mop-cm__title {
    color: var(--awb-color1);
    font-weight: 700;
    text-wrap: balance;
    outline: none;
}

body .mop-cm .mop-cm__title--q {
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

body .mop-cm .mop-cm__title--gate {
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.04;
    letter-spacing: -.04em;
}

body .mop-cm .mop-cm__text {
    max-width: 460px;
    color: var(--awb-color15);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

body .mop-cm__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

body .mop-cm__intro--quiz .mop-cm__actions {
    margin-top: 8px;
}

/* Buttons printed as <button>: drop the browser button chrome so the
   section 2 button system draws them like Avada's own links. */
body .mop-cm button.fusion-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    font-family: inherit;
}

body .mop-cm button.fusion-button:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
    transition: opacity .3s;
}

/* 18b. Quiz step ------------------------------------------------------ */

body .mop-cm__progress {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body .mop-cm__progress-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

body .mop-cm__count {
    color: var(--awb-color15);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

body .mop-cm__bar {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 6px;
    background: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .08);
}

body .mop-cm__bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 6px;
    background: var(--awb-color5);
    transition: width .5s var(--mop-ease);
}

body .mop-cm .mop-cm__hint {
    margin-top: -12px;
    color: var(--awb-color15);
    font-size: 16px;
    line-height: 1.5;
}

body .mop-cm__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

body .mop-cm .mop-cm-opt {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 20px 24px;
    border: 1px solid var(--mop-cm-line);
    border-radius: 20px;
    background: var(--awb-color9);
    box-shadow: none;
    color: var(--awb-color1);
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color .25s, border-color .25s, color .25s;
    -webkit-tap-highlight-color: transparent;
}

body .mop-cm .mop-cm-opt:hover {
    border-color: var(--awb-color5);
    background: var(--awb-color9);
    color: var(--awb-color1);
}

body .mop-cm .mop-cm-opt:focus-visible {
    outline: 2px solid var(--awb-color5);
    outline-offset: 2px;
}

body .mop-cm .mop-cm-opt[aria-pressed="true"] {
    border-color: var(--awb-color1);
    background: var(--awb-color1);
    color: var(--awb-color9);
}

body .mop-cm-opt__mark {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 2px solid hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .25);
    border-radius: 50%;
    background: transparent;
    transition: background-color .25s, border-color .25s;
}

body .mop-cm-opt--multi .mop-cm-opt__mark {
    border-radius: 7px;
}

body .mop-cm-opt[aria-pressed="true"] .mop-cm-opt__mark {
    border-color: var(--awb-color5);
    background: var(--awb-color5);
}

/* Check mark: two borders of a rotated box, white on orange. */
body .mop-cm-opt[aria-pressed="true"] .mop-cm-opt__mark::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 7px;
    width: 6px;
    height: 11px;
    border: solid var(--awb-color9);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

body .mop-cm-opt__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

body .mop-cm-opt__label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    text-wrap: pretty;
}

body .mop-cm-opt__desc {
    color: var(--awb-color15);
    font-size: 15px;
    line-height: 1.5;
}

body .mop-cm-opt[aria-pressed="true"] .mop-cm-opt__desc {
    color: var(--awb-color10);
}

/* 18c. Gate step -------------------------------------------------------
 * The Coach Match form brings its own light-panel styling
 * (mop-form-cta-navy, RCM section 9). Only its box is set here. */

body .mop-cm__form {
    min-width: 0;
}

/* 18d. Result step ---------------------------------------------------- */

body .mop-cm__photo {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--awb-color1);
}

body .mop-cm__photo-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

body .mop-cm__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), 0) 50%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .85) 100%);
    pointer-events: none;
}

body .mop-cm__photo-cap {
    position: absolute;
    right: 28px;
    bottom: 26px;
    left: 28px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--awb-color9);
}

body .mop-cm__photo-kicker {
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

body .mop-cm__photo-name {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

body .mop-cm__match {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    min-width: 0;
}

body .mop-cm__group,
body .mop-cm__block {
    display: flex;
    flex-direction: column;
}

body .mop-cm__group {
    gap: 12px;
}

body .mop-cm__block {
    gap: 10px;
    padding-top: 24px;
    border-top: 1px solid var(--mop-cm-rule);
}

body .mop-cm .mop-cm__title--match {
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -.045em;
}

body .mop-cm .mop-cm__identity {
    color: var(--awb-color1);
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
}

body .mop-cm__group .mop-cm__text,
body .mop-cm .mop-cm__body {
    max-width: 560px;
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
}

body .mop-cm .mop-cm__body {
    color: var(--awb-color1);
}

body .mop-cm a.mop-cm__class-link,
body .mop-cm a.mop-cm__class-link:hover {
    color: var(--awb-color1);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--awb-color5);
    text-underline-offset: 4px;
}

body .mop-cm a.mop-cm__class-link:focus-visible {
    outline: 2px solid var(--awb-color5);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Close second match: one link row. */
body .mop-cm a.mop-cm-second {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .12);
    border-radius: 20px;
    color: var(--awb-color1);
    text-decoration: none;
    transition: border-color .25s;
}

body .mop-cm a.mop-cm-second:is(:hover, :focus-visible) {
    border-color: var(--awb-color5);
    color: var(--awb-color1);
}

body .mop-cm a.mop-cm-second:focus-visible {
    outline: 2px solid var(--awb-color5);
    outline-offset: 2px;
}

body .mop-cm-second__photo {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--awb-color1);
}

body .mop-cm-second__img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

body .mop-cm-second__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body .mop-cm-second__kicker {
    color: var(--awb-color15);
    font-size: 14px;
    line-height: 1.4;
}

body .mop-cm-second__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

body .mop-cm-second__link {
    color: var(--awb-color4);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* Phones: the Meet link drops under the name so nothing is cut off. */
@media (max-width: 640px) {
    body .mop-cm a.mop-cm-second {
        flex-wrap: wrap;
    }

    body .mop-cm-second__link {
        flex-basis: 100%;
        padding-left: 72px;
    }
}

body .mop-cm .mop-cm__retake {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--awb-color15);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s;
}

body .mop-cm .mop-cm__retake:is(:hover, :focus-visible) {
    background: none;
    color: var(--awb-color4);
}

body .mop-cm .mop-cm__retake:focus-visible {
    outline: 2px solid var(--awb-color5);
    outline-offset: 2px;
}

/* 18e. No-script note, reduced motion -------------------------------- */

body .mop-cm .mop-cm__nojs {
    max-width: 560px;
    color: var(--awb-color15);
    font-size: 18px;
    line-height: 1.6;
}

body .mop-cm .mop-cm__nojs-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 16px;
}

body .mop-cm .mop-cm__nojs-links a {
    color: var(--awb-color4);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    body .mop-cm :is(.mop-cm__bar-fill, .mop-cm-opt, .mop-cm-opt__mark, .mop-cm-second, .mop-cm__retake) {
        transition: none;
    }
}


/* ============================================================
 * 19. FAQ LIST  (AVADA-PAGE-SECTION v6.1, About Us page)
 * RCM section 21. Markup from [mop_faqs category="..."]
 * (inc/site-shortcodes.php v1.4.0); open and close by
 * mop-components.js section 7, which adds .is-ready to the list and
 * .is-open to the open row. Without the script every answer shows and
 * the + toggles stay hidden. Rows sit on navy (Color 1).
 *   19a. List and rows
 *   19b. Question button and + toggle
 *   19c. Answer panel
 *   19d. Reduced motion
 * ============================================================ */

/* 19a. List and rows ------------------------------------------------ */

body .mop-faq {
    --mop-faq-line: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .12);
    --mop-faq-ring: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .2);
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-top: 1px solid var(--mop-faq-line);
}

body .mop-faq .mop-faq__item {
    border-bottom: 1px solid var(--mop-faq-line);
}

/* 19b. Question button and + toggle ---------------------------------
 * The H3 only carries the outline; the button draws the design's
 * 19px / 600 question row (26px above and below) with the 36px ring. */

body .mop-faq .mop-faq__q {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-wrap: initial;
}

body .mop-faq .mop-faq__btn {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    padding: 26px 0;
    color: var(--awb-color8);
    font-family: inherit;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    cursor: pointer;
}

body .mop-faq .mop-faq__btn:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
    border-radius: 4px;
}

body .mop-faq .mop-faq__text {
    min-width: 0;
}

body .mop-faq .mop-faq__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border: 1px solid var(--mop-faq-ring);
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    transition: all .4s var(--mop-ease);
}

/* Open row: the + turns into an x on a Color 5 disc. */
body .mop-faq .mop-faq__item.is-open .mop-faq__icon {
    border-color: var(--awb-color5);
    background: var(--awb-color5);
    transform: rotate(45deg);
}

body .mop-faq:not(.is-ready) .mop-faq__icon {
    display: none;
}

body .mop-faq:not(.is-ready) .mop-faq__btn {
    cursor: default;
}

/* 19c. Answer panel --------------------------------------------------
 * Opens by growing its grid row from 0fr to 1fr (.45s, the design's
 * curve). The clip turns invisible once closed, so closed answers are
 * skipped by screen readers and the Tab key. */

body .mop-faq .mop-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s var(--mop-ease);
}

body .mop-faq .mop-faq__clip {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear .45s;
}

body .mop-faq .mop-faq__item.is-open .mop-faq__panel,
body .mop-faq:not(.is-ready) .mop-faq__panel {
    grid-template-rows: 1fr;
}

body .mop-faq .mop-faq__item.is-open .mop-faq__clip,
body .mop-faq:not(.is-ready) .mop-faq__clip {
    visibility: visible;
    transition-delay: 0s;
}

body .mop-faq .mop-faq__a {
    padding: 0 56px 28px 0;
    color: var(--awb-color11);
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
}

body .mop-faq .mop-faq__a p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

body .mop-faq .mop-faq__a p + p {
    margin-top: 12px;
}

body .mop-faq .mop-faq__a a {
    color: var(--awb-color9);
}

body .mop-faq .mop-faq__a a:is(:hover, :focus-visible) {
    color: var(--awb-color5);
}

/* 19d. Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body .mop-faq .mop-faq__icon,
    body .mop-faq .mop-faq__panel,
    body .mop-faq .mop-faq__clip {
        transition: none;
    }
}


/* ============================================================
 * 20. PARTNER CARD  (AVADA-PAGE-SECTION v6.1, Partners page)
 * RCM section 22. "MOP Partner Card" Post Card: rounded image on top,
 * type, name, description, member perk and the Located in / View
 * profile foot under it (the Partner Directory card, as a Builder Post
 * Card). Markup parts from [mop_partner_card_media] and
 * [mop_partner_card_details] (inc/site-shortcodes.php v1.5.0).
 *   20a. Root and media box
 *   20b. Image, badge, zoom
 *   20c. Perk line and foot
 *   20d. Swipe row at 640px and below (Post Cards Column
 *        mop-partner-card-grid)
 *   20e. Reduced motion
 * Media margin and radius, text gaps and padding, title and excerpt
 * type and colors stay Builder fields.
 * ============================================================ */

/* 20a. Root and media box ------------------------------------------
 * Media Nested Column mop-partner-card__media: 4:3 above 1100px and
 * 16:10 at 1100px and below (one card per row there), positioned and
 * clipped so the image layer cannot spill. Keep
 * --mop-partner-card-radius equal to its Builder Border Radius.
 * !important: position, overflow and radius only (Avada's column rules
 * set them with stronger selectors, as on the class format card). */

body .mop-partner-card p {
    margin: 0;
}

body .mop-partner-card .mop-partner-card__media {
    --mop-partner-card-radius: 24px;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border-radius: var(--mop-partner-card-radius) !important;
    aspect-ratio: 4 / 3;
}

@media (max-width: 1100px) {
    body .mop-partner-card .mop-partner-card__media {
        aspect-ratio: 16 / 10;
    }
}

/* 20b. Image, badge, zoom -------------------------------------------
 * #15123a is the design's media placeholder (local component color,
 * RCM section 1). The link is mouse only (the H3 link is the keyboard
 * link); the image zooms 1.04 over 1.2s while the pointer is on it or
 * the card's name link has focus. */

body .mop-partner-card-media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background: #15123a;
}

body .mop-partner-card-media .mop-partner-card-media__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: scale(1);
    transition: transform 1.2s var(--mop-ease);
}

body .mop-partner-card-media:hover .mop-partner-card-media__img,
body .mop-partner-card:focus-within .mop-partner-card-media__img {
    transform: scale(1.04);
}

body .mop-partner-card-media .mop-partner-card-media__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--awb-color5);
    color: var(--awb-color1);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}

/* 20c. Perk line and foot ------------------------------------------- */

body .mop-partner-card-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body .mop-partner-card-details .mop-partner-card-details__perk {
    margin: 0;
    color: var(--awb-color9);
    font-size: 15px;
    line-height: 1.5;
}

body .mop-partner-card-details .mop-partner-card-details__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--awb-color3);
}

body .mop-partner-card-details .mop-partner-card-details__where {
    color: var(--awb-color6);
    font-size: 15px;
    line-height: normal;
}

body .mop-partner-card-details .mop-partner-card-details__more {
    margin: -14px 0 -14px auto;
    padding: 14px 0;
    color: var(--awb-color9);
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: color .3s;
}

body .mop-partner-card-details .mop-partner-card-details__more:is(:hover, :focus-visible) {
    color: var(--awb-color5);
}

body .mop-partner-card-details .mop-partner-card-details__more:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
    border-radius: 4px;
}

/* 20d. Swipe row ----------------------------------------------------
 * Design: at 640px and below the cards become a sideways swipe row,
 * each card 84% wide, 16px apart, snapping to the start, bleeding to the
 * screen edges through the Container's 32px side padding. Host: the
 * Column holding the Post Cards element (class mop-partner-card-grid).
 * The list is found by its card children (the root Column is the grid
 * item), so no Avada wrapper class is named. contain: inline-size
 * keeps the row's width from pushing its Column wider than the screen.
 * !important: Avada sizes the grid and its items with its own rules. */

@media (max-width: 640px) {
    body .mop-partner-card-grid :is(ul, div):has(> .mop-partner-card) {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-columns: 84%;
        grid-auto-flow: column;
        gap: 16px !important;
        box-sizing: border-box;
        width: auto !important;
        max-width: none !important;
        margin: 0 -32px !important;
        padding: 0 32px 8px !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding: 0 32px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        contain: inline-size;
    }

    body .mop-partner-card-grid :is(ul, div):has(> .mop-partner-card)::-webkit-scrollbar {
        display: none;
    }

    body .mop-partner-card-grid .mop-partner-card {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: start;
    }
}

/* 20e. Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body .mop-partner-card-media .mop-partner-card-media__img,
    body .mop-partner-card-details .mop-partner-card-details__more {
        transition: none;
    }
}


/* ============================================================
 * 21. VALUE TABS  (AVADA-PAGE-SECTION v6.1, Partners page)
 * RCM section 23. Markup from [mop_value_tabs] (inc/site-shortcodes.php
 * v1.5.0); switching by mop-components.js section 8, which adds
 * .is-ready. Without the script the tabs hide and every row shows under
 * its own name. Host: a Light Surface (Color 14) section.
 *   21a. Tab pills
 *   21b. Panel and card pair
 *   21c. No script, reduced motion
 * ============================================================ */

/* 21a. Tab pills ---------------------------------------------------- */

body .mop-vtabs {
    --mop-vtabs-line: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .2);
    min-width: 0;
}

body .mop-vtabs .mop-vtabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

body .mop-vtabs .mop-vtabs__tab {
    all: unset;
    box-sizing: border-box;
    padding: 14px 20px;
    border: 1px solid var(--mop-vtabs-line);
    border-radius: 999px;
    background: transparent;
    color: var(--awb-color1);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: background .3s, color .3s, border-color .3s;
}

body .mop-vtabs .mop-vtabs__tab[aria-selected="true"] {
    border-color: var(--awb-color1);
    background: var(--awb-color1);
    color: var(--awb-color9);
}

body .mop-vtabs .mop-vtabs__tab:focus-visible {
    outline: 2px solid var(--awb-color1);
    outline-offset: 3px;
}

/* 21b. Panel and card pair ------------------------------------------
 * Two cards side by side above 640px, stacked below, 24px apart. The
 * navy card says what Momentum OP provides, the white card what the
 * partner provides. */

body .mop-vtabs .mop-vtabs__panel {
    outline: none;
}

body .mop-vtabs .mop-vtabs__panel:focus-visible {
    outline: 2px solid var(--awb-color1);
    outline-offset: 6px;
    border-radius: 28px;
}

body .mop-vtabs .mop-vtabs__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 640px) {
    body .mop-vtabs .mop-vtabs__cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

body .mop-vtabs .mop-vtabs__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    min-height: 200px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 28px;
}

body .mop-vtabs .mop-vtabs__card--give {
    background: var(--awb-color1);
    color: var(--awb-color9);
}

body .mop-vtabs .mop-vtabs__card--get {
    background: var(--awb-color9);
    color: var(--awb-color1);
    box-shadow:
        0 1px 2px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .04),
        0 24px 60px -32px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .18);
}

body .mop-vtabs .mop-vtabs__label {
    margin: 0;
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
}

body .mop-vtabs .mop-vtabs__card--get .mop-vtabs__label {
    color: var(--awb-color4);
}

body .mop-vtabs .mop-vtabs__text {
    margin: 0;
    color: inherit;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: pretty;
}

/* The row name shows only without the script, above its cards. */
body .mop-vtabs .mop-vtabs__name {
    display: none;
    margin: 0 0 16px;
    color: var(--awb-color1);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
}

/* 21c. No script, reduced motion ----------------------------------- */

body .mop-vtabs:not(.is-ready) .mop-vtabs__list {
    display: none;
}

body .mop-vtabs:not(.is-ready) .mop-vtabs__panel[hidden] {
    display: block;
}

body .mop-vtabs:not(.is-ready) .mop-vtabs__panel + .mop-vtabs__panel {
    margin-top: 40px;
}

body .mop-vtabs:not(.is-ready) .mop-vtabs__name {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    body .mop-vtabs .mop-vtabs__tab {
        transition: none;
    }
}


/* ============================================================
 * 22. MAP EMBED  ([mop_map], AVADA-PAGE-SECTION v6.1)
 * RCM section 24. First user: the Contact Us map card. The Builder
 * Column is the card (background #15123a while the map loads, 28px
 * Border Radius, Overflow Hidden); this section only sizes the map
 * and tints it like the design: clamp(360px, 42vw, 520px) tall,
 * grayscale, inverted and shifted to the navy palette.
 * ============================================================ */

body .mop-map {
    position: relative;
    width: 100%;
    height: var(--mop-map-h, clamp(360px, 42vw, 520px));
}

body .mop-map .mop-map__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) invert(.9) hue-rotate(200deg) contrast(.9);
}


/* ============================================================
 * 23. PERK CARD  (AVADA-PAGE-SECTION v6.1, Member Perks page)
 * RCM section 25. "MOP Perk Card" Post Card: the partner image on the
 * left two fifths of the card (on top at 640px and below), then the
 * type and community, name, member perk, How to redeem and View
 * partner, with the whole card one link. Markup parts from
 * [mop_perk_card_media] and [mop_partner_card_type located="yes"]
 * (inc/site-shortcodes.php v1.7.0).
 *   23a. Root and card box
 *   23b. Image layer and whole-card link
 *   23c. How to redeem and View partner
 *   23d. Grid: an odd last card spans the row (Post Cards Column
 *        mop-perk-card-grid)
 * Card background, border (and its orange Hover color), radius, text
 * padding, gaps, typography and colors stay Builder fields.
 * ============================================================ */

/* 23a. Root and card box --------------------------------------------
 * Card Nested Column mop-perk-card__card is the visible card:
 * positioned and clipped so the image layer cannot spill, at least
 * 260px tall like the design. Keep --mop-perk-card-radius equal to its
 * Builder Border Radius. Keyboard focus on the card's name link draws
 * a 2px Color 9 ring around the whole card (the link itself shows no
 * second ring).
 * !important: position, overflow and radius only (Avada's column rules
 * set them with stronger selectors, as on the class tile). */

body .mop-perk-card p {
    margin: 0;
}

body .mop-perk-card .mop-perk-card__card {
    --mop-perk-card-radius: 28px;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border-radius: var(--mop-perk-card-radius) !important;
    min-height: 260px;
}

body .mop-perk-card .mop-perk-card__card a:focus-visible {
    outline: none;
}

body .mop-perk-card .mop-perk-card__card:has(a:focus-visible) {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

/* 23b. Image layer and whole-card link ------------------------------
 * The image fills the left 40% of the card, full height (the design's
 * 2fr / 3fr split; the Builder Left Padding of the card is
 * calc(40% + the text inset), keep both at 40%). At 640px and below it
 * sits on top at 16:10 across the full width (the Small Top Padding is
 * calc(62.5% + 22px)). #15123a is the design's media placeholder (local
 * component color, RCM section 1). The link covers the whole card for
 * the pointer (the design's card is one link); it is out of the Tab
 * order and hidden from screen readers, because the H3 name link is
 * the keyboard and screen reader link. */

body .mop-perk-card-media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 40%;
    overflow: hidden;
    background: #15123a;
    pointer-events: none;
}

body .mop-perk-card-media .mop-perk-card-media__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

body .mop-perk-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

@media (max-width: 640px) {
    body .mop-perk-card-media {
        right: 0;
        bottom: auto;
        width: auto;
        aspect-ratio: 16 / 10;
    }
}

/* 23c. How to redeem and View partner -------------------------------
 * Redeem Text Block (mop-perk-card__redeem): 1px Color 3 rule with
 * 14px above the text, 4px between the "How to redeem" label (first
 * paragraph: 600, Color 5) and the partner's text. The 6px space above
 * the rule is the Text Block's Builder Margin.
 * View partner Text Block (mop-perk-card__more): pushed to the bottom
 * of the card, at least 24px under the redeem text (the card's 10px
 * Gap plus 14px here), so cards in a row end on one line. */

body .mop-perk-card .mop-perk-card__redeem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--awb-color3);
}

body .mop-perk-card .mop-perk-card__redeem p:first-child {
    color: var(--awb-color5);
    font-weight: 600;
}

body .mop-perk-card .mop-perk-card__more {
    margin-top: auto;
    padding-top: 14px;
}

/* 23d. Grid ---------------------------------------------------------
 * Design: two cards per row above 640px; when the number of perks is
 * odd the last card spans the whole row. Host: the Column holding the
 * Post Cards element (class mop-perk-card-grid); the card root Column
 * is the grid item, so no Avada wrapper class is named.
 * !important: Avada sizes the grid items with its own rules. */

@media (min-width: 641px) {
    body .mop-perk-card-grid .mop-perk-card:last-child:nth-child(odd) {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ============================================================
 * 24. PLAN CARDS AND PLAN TABS  (AVADA-PAGE-SECTION v6.1, Memberships)
 * RCM section 26. Markup from [mop_plans] and [mop_plan_tabs]
 * (inc/site-shortcodes.php v1.8.0); the tabs are built and switched by
 * mop-components.js section 9, which adds .is-ready to both. Without
 * the script the shortcode's noscript style hides the tabs and shows
 * every group under its name. Host: a Light Surface (Color 14) section.
 *   24a. Plan tabs (pill switch)
 *   24b. Grid and group name
 *   24c. Plan card (white, and navy when featured)
 *   24d. Reduced motion
 * ============================================================ */

/* 24a. Plan tabs ----------------------------------------------------
 * A white pill holding the tabs, 4px inside and between them; the
 * selected tab is a navy pill with a white label. The host keeps the
 * pill's height before the script builds the tabs, so nothing moves
 * when they appear. Labels stay on one line; under 400px the side
 * padding steps down to 14px so both labels fit on a phone, and on the
 * narrowest phones a label may take two lines (as the design) rather
 * than run off the screen. */

body .mop-plan-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 48px;
    padding: 4px;
    border-radius: 999px;
    vertical-align: top;
}

body .mop-plan-tabs.is-ready {
    background: var(--awb-color9);
    box-shadow: 0 1px 2px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .06);
}

body .mop-plan-tabs .mop-plan-tabs__tab {
    all: unset;
    box-sizing: border-box;
    padding: 12px 22px;
    border-radius: 999px;
    background: transparent;
    color: var(--awb-color1);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .3s, color .3s;
}

body .mop-plan-tabs .mop-plan-tabs__tab[aria-selected="true"] {
    background: var(--awb-color1);
    color: var(--awb-color9);
}

body .mop-plan-tabs .mop-plan-tabs__tab:focus-visible {
    outline: 2px solid var(--awb-color1);
    outline-offset: 2px;
}

@media (max-width: 400px) {
    body .mop-plan-tabs .mop-plan-tabs__tab {
        padding-right: 14px;
        padding-left: 14px;
        white-space: normal;
        text-align: center;
    }
}

/* 24b. Grid and group name ------------------------------------------
 * The design's grid: three cards per row while each can be at least a
 * third of the row (and 220px), two when the row is narrower than
 * 708px, one under 464px; 24px apart; cards in a row share one height. */

body .mop-plans-list {
    min-width: 0;
}

body .mop-plans-list .mop-plans__panel {
    outline: none;
}

body .mop-plans-list .mop-plans__panel:focus-visible {
    outline: 2px solid var(--awb-color1);
    outline-offset: 6px;
    border-radius: 28px;
}

body .mop-plans-list .mop-plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, calc(33.333% - 16px))), 1fr));
    gap: 24px;
    align-items: stretch;
}

/* The group name shows only without the script, above its cards. */
body .mop-plans-list .mop-plans__name {
    display: none;
    margin: 0 0 16px;
    color: var(--awb-color1);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

/* No tab host on the section (the script found no [mop_plan_tabs]):
 * every group shows under its name, 40px apart. */
body .mop-plans-list.is-static .mop-plans__name {
    display: block;
}

body .mop-plans-list.is-static .mop-plans__panel + .mop-plans__panel {
    margin-top: 40px;
}

/* 24c. Plan card ----------------------------------------------------
 * White card (navy text, Color 15 muted text, Color 4 kicker) or, for
 * featured plans, the navy card (white text, Color 11 muted text,
 * Color 5 kicker). 40px 36px inside, 28px corners, 28px between the
 * kicker row, the name and price block, the feature list and the
 * button; the list grows so every Buy Now button in a row lines up. */

body .mop-plans-list .mop-plan {
    --mop-plan-bg: var(--awb-color9);
    --mop-plan-ink: var(--awb-color1);
    --mop-plan-muted: var(--awb-color15);
    --mop-plan-accent: var(--awb-color4);
    --mop-plan-line: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    box-sizing: border-box;
    min-width: 0;
    padding: 40px 36px;
    border-radius: 28px;
    background: var(--mop-plan-bg);
    color: var(--mop-plan-ink);
    box-shadow:
        0 1px 2px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .04),
        0 24px 60px -32px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .25);
}

body .mop-plans-list .mop-plan--featured {
    --mop-plan-bg: var(--awb-color1);
    --mop-plan-ink: var(--awb-color9);
    --mop-plan-muted: var(--awb-color11);
    --mop-plan-accent: var(--awb-color5);
    --mop-plan-line: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .14);
}

body .mop-plans-list .mop-plan p {
    margin: 0;
}

body .mop-plans-list .mop-plan__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 30px;
}

body .mop-plans-list .mop-plan__tag {
    color: var(--mop-plan-accent);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
}

body .mop-plans-list .mop-plan__badge {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--awb-color5);
    color: var(--awb-color9);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

body .mop-plans-list .mop-plan__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body .mop-plans-list .mop-plan .mop-plan__name {
    margin: 0;
    color: inherit;
    font-size: 26px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.025em;
    text-transform: none;
}

body .mop-plans-list .mop-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}

body .mop-plans-list .mop-plan__amount {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.05em;
}

body .mop-plans-list .mop-plan__per,
body .mop-plans-list .mop-plan__value {
    color: var(--mop-plan-muted);
    line-height: normal;
}

body .mop-plans-list .mop-plan__per {
    font-size: 16px;
}

body .mop-plans-list .mop-plan__value {
    font-size: 15px;
}

body .mop-plans-list .mop-plan__features {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--mop-plan-line);
    list-style: none;
}

body .mop-plans-list .mop-plan__feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.45;
}

body .mop-plans-list .mop-plan__feature::before,
body .mop-plans-list .mop-plan__feature::marker {
    content: none;
}

body .mop-plans-list .mop-plan__check {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: hsla(var(--awb-color5-h), var(--awb-color5-s), var(--awb-color5-l), .14);
    color: var(--awb-color5);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Buy Now: an Avada Button host for the section 3 classes; it keeps
 * its own width at the start of the card. */
body .mop-plans-list .mop-plan .mop-plan__buy {
    align-self: flex-start;
}

/* 24d. Reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body .mop-plan-tabs .mop-plan-tabs__tab {
        transition: none;
    }
}


/* ============================================================
 * 25. CLASS CHIPS  ([mop_class_chips], AVADA-PAGE-SECTION v6.1,
 *     Schedule page)
 * RCM section 27. One white pill link per class (name, then its
 * Focus Label) in a Light Surface heading row, as the design. The
 * Column around the Code Block owns width and margins.
 *   25a. Row and chip
 *   25b. States (hover and focus: Color 5 ring; text never changes)
 * ============================================================ */

/* 25a. Row and chip ------------------------------------------------- */

body .mop-class-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Colors are claimed in every state: the global link colors (White,
 * Orange on hover) would otherwise paint the label on the white pill. */
body .mop-class-chips a.mop-class-chip,
body .mop-class-chips a.mop-class-chip:hover,
body .mop-class-chips a.mop-class-chip:focus-visible {
    color: var(--awb-color1);
    text-decoration: none;
}

body .mop-class-chips a.mop-class-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 18px;
    border: 1px solid hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .1);
    border-radius: 999px;
    background: var(--awb-color9);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

body .mop-class-chips .mop-class-chip__tag {
    color: var(--awb-color15);
    font-weight: 500;
}

/* 25b. States ------------------------------------------------------- */

body .mop-class-chips a.mop-class-chip:hover,
body .mop-class-chips a.mop-class-chip:focus-visible {
    border-color: var(--awb-color5);
}

body .mop-class-chips a.mop-class-chip:focus-visible {
    outline: 2px solid var(--awb-color1);
    outline-offset: 3px;
}


/* ============================================================
 * 26. CLASS LINK CARD  (AVADA-PAGE-SECTION v6.1, Welcome page)
 * RCM section 28. "MOP Class Link Card" Post Card: the class video
 * fills the card under the design's Color 1 fade, with the card
 * tagline, name and description at the bottom; the whole card is one
 * link to the class page. Markup parts from
 * [mop_class_media overlay="card" link="yes"]
 * (inc/site-shortcodes.php v1.10.0); the media layer and fade are
 * sections 12c and 17a, unchanged.
 *   26a. Root and card box (4:5, 16:11 at 1100px and below)
 *   26b. Whole-card link and keyboard focus ring
 * Card padding, radius, gap, bottom alignment, typography and colors
 * stay Builder fields.
 * ============================================================ */

/* 26a. Root and card box --------------------------------------------
 * Card Nested Column mop-class-link__card is the visible card:
 * positioned and clipped so the media layer cannot spill, 4:5 above
 * 1100px and 16:11 at 1100px and below (design: 4/5 three across,
 * 16/11 one per row). The box grows if the copy ever needs more room.
 * Keep --mop-class-link-radius equal to its Builder Border Radius.
 * !important: position, overflow and radius only (Avada's column rules
 * set them with stronger selectors, as on the class tile). */

body .mop-class-link p {
    margin: 0;
}

body .mop-class-link .mop-class-link__card {
    --mop-class-link-radius: 24px;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border-radius: var(--mop-class-link-radius) !important;
    aspect-ratio: 4 / 5;
}

@media (max-width: 1100px) {
    body .mop-class-link .mop-class-link__card {
        aspect-ratio: 16 / 11;
    }
}

/* 26b. Whole-card link and keyboard focus ring -----------------------
 * mop-class-media-link (printed by link="yes") covers the whole card
 * above the media, fade and text, so a click anywhere opens the class
 * page, as the design's card. It is mouse only: the H3 title link is
 * the Tab stop and the screen reader link. While that link has
 * keyboard focus the card draws a 2px Color 9 ring, 3px out (the
 * design shows no hover change). */

body .mop-class-link .mop-class-media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    border-radius: inherit;
}

body .mop-class-link .mop-class-link__card a:focus-visible {
    outline: none;
}

body .mop-class-link .mop-class-link__card:has(a:focus-visible) {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}


/* ============================================================
 * 27. PHOTO FOCUS POINT  (inc/site-image-focus.php)
 * Every cropped photo (object-fit: cover) anchors to the Focus Point
 * saved on the image in the Media Library. Only images that carry
 * --mop-focus are touched; everything else keeps the theme default.
 * Phones (640px and below) use --mop-focus-m when it is set.
 * ============================================================ */

img[data-mop-focus][style*="--mop-focus"] {
    object-position: var(--mop-focus, center center) !important;
}

@media (max-width: 640px) {
    img[data-mop-focus][style*="--mop-focus"] {
        object-position: var(--mop-focus-m, var(--mop-focus, center center)) !important;
    }
}