/* ==========================================================================
   Luna Studio — site theme
   --------------------------------------------------------------------------
   A skin layered over the existing class system. Every rule is scoped to
   .theme-refined on <body> for two reasons:

     1. Specificity. Several pages carry their own <style> blocks (movement
        and pricing especially), some of them inside <body>. A bare `.card`
        override would lose to them on source order; `.theme-refined .card`
        wins regardless of where those blocks sit.
     2. Custom properties. Those same blocks redefine Momence variables on
        :root. Declaring ours on <body> means body and its descendants
        resolve to these values instead.

   Load this AFTER main.css / layout.css / components.css.
   ========================================================================== */

.theme-refined {
    /* Brand kit */
    --luna-sand: #D1C2B3;
    --luna-clay: #794B37;
    --luna-espresso: #492E20;
    --luna-plum: #64333C;
    --luna-mauve: #70606E;
    --luna-sage: #9E9D89;
    --luna-black: #2F241D;

    /* Derived tints. Raw clay is unreadable as text on espresso (2.0:1), so
       small accent copy uses a lightened tint instead. Lightened far enough to
       clear 4.5:1 on the raised card surface, which is the palest ground it
       lands on — the first pass stopped at #C08A6A and only reached 3.7:1. */
    --luna-clay-light: #D69C79;
    --luna-ink: #EDE4DA;

    --surface-raised: rgba(237, 228, 218, 0.05);
    --surface-raised-hover: rgba(237, 228, 218, 0.09);
    --surface-sheet: #F5EFE9;
    --hairline: rgba(237, 228, 218, 0.16);

    /* ---- legacy token remap ---- */
    --color-primary: #D1C2B3;
    --color-primary-dark: #D1C2B3;
    --color-secondary: #492E20;
    --color-secondary-dark: rgba(237, 228, 218, 0.16);
    --color-accent: var(--luna-clay-light);
    --color-text: #EDE4DA;
    --color-text-light: rgba(237, 228, 218, 0.70);
    --color-white: #EDE4DA;
    --color-glass: rgba(47, 36, 29, 0.92);
    --color-glass-border: rgba(237, 228, 218, 0.16);

    --font-heading: 'Radio Canada', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: var(--font-heading);

    /* Scale and motion used by the home page's hero and tile band. */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1.25rem;
    --space-md: 2rem;
    --space-lg: 3.5rem;
    --space-xl: 6rem;
    --space-2xl: 8.5rem;
    --ink-on-dark: #EDE4DA;
    --ink-on-dark-muted: rgba(237, 228, 218, 0.70);
    --surface-base: #492E20;
    --surface-light: #D1C2B3;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-fast: 0.2s var(--ease);
    --t-slow: 0.45s var(--ease);

    /* Hard-edged geometry, matching the tile band on the home page. */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-full: 0;

    --shadow-sm: 0 2px 10px rgba(15, 10, 7, 0.30);
    --shadow-md: 0 10px 28px rgba(15, 10, 7, 0.42);
    --shadow-lg: 0 20px 54px rgba(15, 10, 7, 0.52);

    /* Momence embeds sit on light sheets; see the embeds section below. */
    --momenceColorBackground: #F5EFE9;
    --momenceReviewColorBackground: #F5EFE9;
    --momenceColorPrimary: 121, 75, 55;
    --momenceColorBlack: 47, 36, 29;
    --momenceBorder: 1px solid rgba(47, 36, 29, 0.12);
    --momenceBorderRadius: 0px;
    --momenceBoxShadow: 0 0 0 0 rgba(0, 0, 0, 0);

    background-color: var(--luna-espresso);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.theme-refined:not(.pricing-live) h1,
.theme-refined:not(.pricing-live) h2,
.theme-refined:not(.pricing-live) h3,
.theme-refined:not(.pricing-live) h4,
.theme-refined:not(.pricing-live) h5,
.theme-refined:not(.pricing-live) h6 {
    font-family: var(--font-heading);
    color: var(--luna-sand);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.theme-refined:not(.pricing-live) h2 {
    text-transform: uppercase;
    font-weight: 700;
}

.theme-refined:not(.pricing-live) h3 {
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-weight: 600;
    font-size: 1.3rem;
}

.theme-refined:not(.pricing-live) p {
    color: var(--color-text-light);
}

/* Inline links inside running copy only. Anything block-level — cards, tiles,
   price cells — is a link too, and must keep its own colour. */
.theme-refined:not(.pricing-live) main p a:not(.btn) {
    color: var(--luna-sand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(209, 194, 179, 0.4);
}

.theme-refined:not(.pricing-live) main p a:not(.btn):hover {
    text-decoration-color: currentColor;
}

/* Questrial ships one weight only, so anything that needs real emphasis
   borrows the display face, which has 300–700. */
.theme-refined .btn,
.theme-refined .main-nav a,
.theme-refined .card-link,
.theme-refined .class-tag,
.theme-refined .accent-pill-btn,
.theme-refined .badge,
.theme-refined .subscription-type-badge,
.theme-refined .intro-card-badge,
.theme-refined .intro-card-hero-badge,
.theme-refined .subscription-price,
.theme-refined .subscription-per-class,
.theme-refined .class-card-price,
.theme-refined .class-card-per-class,
.theme-refined .movement-hero-subtitle,
.theme-refined .footer-links h4,
.theme-refined .footer-social h4 {
    font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   Header — tab nav, colour reserved for the active page
   -------------------------------------------------------------------------- */

/* main.js writes `background` and `boxShadow` inline on scroll — a light-theme
   effect that would flash the bar white. Inline styles only yield to
   !important, so the two properties it touches are pinned here. */
.theme-refined .site-header {
    background: var(--luna-black) !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--hairline);
    padding: 0;
}

.theme-refined .site-header .container {
    align-items: stretch;
    min-height: 76px;
    padding-right: 0;
}

.theme-refined .logo {
    align-items: center;
}

.theme-refined .logo img {
    height: 46px;
}

.theme-refined .main-nav ul {
    gap: 0;
    height: 100%;
}

.theme-refined .main-nav li {
    display: flex;
}

.theme-refined .main-nav a {
    display: flex;
    align-items: center;
    padding: 0 0.95rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--color-text-light);
    border-left: 1px solid var(--hairline);
    white-space: nowrap;
}

.theme-refined .main-nav li:last-child a {
    border-right: 1px solid var(--hairline);
}

/* The underline sweep belongs to the old header; tabs use fills instead. */
.theme-refined .main-nav a::after {
    display: none;
}

.theme-refined .main-nav a:hover {
    background: rgba(237, 228, 218, 0.07);
    color: var(--luna-ink);
}

.theme-refined .main-nav a.active {
    background: var(--luna-clay);
    color: #fff;
}

.theme-refined .mobile-menu-toggle {
    padding: 0 var(--spacing-md);
    align-self: center;
}

.theme-refined .mobile-menu-toggle .bar {
    background-color: var(--luna-ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.theme-refined .site-footer {
    background-color: var(--luna-black);
    color: var(--color-text);
    border-top: 1px solid var(--hairline);
}

.theme-refined .footer-logo {
    height: 58px;
}

.theme-refined .footer-brand p,
.theme-refined .footer-brand .footer-phone,
.theme-refined .footer-links a,
.theme-refined .footer-social a {
    color: var(--color-text-light);
}

/* 0.45 read as a nicely recessive label but only made 3.6:1 at this size; 0.55
   clears AA while staying dimmer than the links beneath it. */
.theme-refined .footer-links h4,
.theme-refined .footer-social h4 {
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(237, 228, 218, 0.55);
}

.theme-refined .footer-brand .footer-phone:hover,
.theme-refined .footer-links a:hover,
.theme-refined .footer-social a:hover {
    color: var(--luna-sand);
}

.theme-refined .footer-bottom {
    border-top: 1px solid var(--hairline);
    color: rgba(237, 228, 218, 0.45);
}

/* --------------------------------------------------------------------------
   Heroes
   -------------------------------------------------------------------------- */

.theme-refined .hero {
    background-color: var(--luna-espresso);
    isolation: isolate;
}

/* Scrim: holds the headline legible and melts the photo into the page. */
.theme-refined .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(47, 36, 29, 0.46) 0%,
            rgba(47, 36, 29, 0.20) 38%,
            rgba(73, 46, 32, 0.74) 84%,
            var(--luna-espresso) 100%);
}

.theme-refined .hero .hero-content {
    z-index: 2;
}

.theme-refined .hero h1 {
    font-family: var(--font-heading);
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: none;
    color: #fff;
    text-shadow: 0 2px 30px rgba(20, 14, 10, 0.72);
}

.theme-refined .hero p {
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 14px rgba(47, 36, 29, 0.5);
}

/* Luna wall hero: swap in the pre-cropped file so the framing holds at every
   viewport, and drop the old zoom/offset machinery it needed. */
.theme-refined .hero.hero--luna-wall::before {
    inset: 0;
    background-image: url('../assets/images/luna_wall_hero.jpeg');
    background-position: center;
    background-size: cover;
    transform: none;
}

.theme-refined .hero-sub {
    height: 58vh;
    min-height: 420px;
}

/* Sub-page heroes centre their headline over the brightest part of the photo,
   so they need a heavier scrim than the home page's, which sits low. */
.theme-refined .hero-sub::after {
    background: linear-gradient(to bottom,
            rgba(35, 25, 19, 0.60) 0%,
            rgba(35, 25, 19, 0.50) 44%,
            rgba(63, 40, 28, 0.82) 86%,
            var(--luna-espresso) 100%);
}

.theme-refined .hero.hero-sub.creativity-hero {
    height: 58vh;
    min-height: 420px;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

/* .bg-light was a white band. Kept as a band, but darker — inverting it to a
   light surface would strand every inherited light-ink rule inside it. */
.theme-refined .bg-light {
    background-color: var(--luna-black);
}

.theme-refined:not(.pricing-live) .section-header h2 {
    color: var(--luna-sand);
}

.theme-refined:not(.pricing-live) .section-header p,
.theme-refined:not(.pricing-live) .offerings-intro {
    color: var(--color-text-light);
}

.theme-refined .text-muted {
    color: rgba(237, 228, 218, 0.66);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.theme-refined .card {
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-top: 2px solid var(--luna-clay);
    box-shadow: none;
}

.theme-refined .card-grid > .card:nth-child(3n+2) {
    border-top-color: var(--luna-mauve);
}

.theme-refined .card-grid > .card:nth-child(3n+3) {
    border-top-color: var(--luna-sage);
}

.theme-refined .card:hover {
    background: var(--surface-raised-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.theme-refined .card-image {
    background-color: rgba(237, 228, 218, 0.08);
}

.theme-refined .card h3 {
    color: var(--luna-sand);
}

.theme-refined .card p {
    color: var(--color-text-light);
}

.theme-refined .card-link {
    color: var(--luna-sand);
    font-weight: 500;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
}

.theme-refined .card-link:hover {
    color: #fff;
}

.theme-refined .features li {
    color: var(--color-text-light);
}

.theme-refined .features li::before {
    color: var(--luna-clay-light);
}

/* --------------------------------------------------------------------------
   Buttons and pills
   -------------------------------------------------------------------------- */

.theme-refined:not(.pricing-live) .btn {
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    padding: 0.95rem 2.2rem;
}

.theme-refined:not(.pricing-live) .btn-primary {
    background-color: var(--luna-clay);
    color: #fff;
    border: 1px solid var(--luna-clay);
}

.theme-refined:not(.pricing-live) .btn-primary:hover {
    background-color: var(--luna-plum);
    border-color: var(--luna-plum);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.theme-refined .btn-outline {
    background: transparent;
    border: 1px solid rgba(209, 194, 179, 0.45);
    color: var(--luna-sand);
}

.theme-refined .btn-outline:hover {
    background: var(--luna-sand);
    border-color: var(--luna-sand);
    color: var(--luna-black);
}

.theme-refined a.accent-pill-btn {
    background: transparent;
    border: 1px solid rgba(209, 194, 179, 0.45);
    color: var(--luna-sand);
    border-radius: 0;
    letter-spacing: 0.16em;
    padding: 0.8rem 1.8rem;
}

.theme-refined a.accent-pill-btn:hover {
    background: var(--luna-sand);
    color: var(--luna-black);
    filter: none;
}

/* Chips sit on mid-tone fills, so their ink goes dark rather than white. */
.theme-refined .badge,
.theme-refined .class-tag {
    background: var(--luna-sand);
    color: var(--luna-black);
    border-radius: 0;
}

.theme-refined:not(.pricing-live) .intro-card-badge,
.theme-refined:not(.pricing-live) .intro-card-hero-badge,
.theme-refined:not(.pricing-live) .badge-yearly,
.theme-refined:not(.pricing-live) .subscription-popular::after,
/* Doubled class to outrank the page's own
   `.class-card.class-card--payment-plan::before`, which ties on specificity and
   would otherwise win on source order — its <style> block loads after this
   file, leaving cream on the light clay tint at 2.4:1. */
.theme-refined:not(.pricing-live) .class-card.class-card--payment-plan::before {
    background: var(--luna-sand);
    color: var(--luna-black);
    border-radius: 0;
}

.theme-refined .class-tag:hover {
    background: #fff;
    filter: none;
}

/* The intro cards are flex columns, so an inline-block badge stretches edge to
   edge. Rounded corners used to disguise it; square ones do not. */
.theme-refined:not(.pricing-live) .intro-card-badge {
    align-self: center;
}

/* Beats `.intro-card.featured .intro-card-badge`, which pairs a light fill
   with light ink once the tokens are remapped. */
.theme-refined:not(.pricing-live) .intro-card.featured .intro-card-badge {
    background: var(--luna-sand);
    color: var(--luna-black);
}

/* --------------------------------------------------------------------------
   Split sections and story letter
   -------------------------------------------------------------------------- */

.theme-refined .split-image {
    background-color: rgba(237, 228, 218, 0.06);
    border-radius: 0;
}

.theme-refined .story-letter p {
    color: var(--color-text-light);
}

.theme-refined .story-letter-greeting {
    font-family: var(--font-heading);
    color: var(--luna-sand);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Movement page
   -------------------------------------------------------------------------- */

.theme-refined .movement-hero {
    background: var(--luna-black);
}

.theme-refined .movement-hero::before {
    background:
        radial-gradient(ellipse 45% 70% at -5% 60%, rgba(121, 75, 55, 0.55) 0%, rgba(100, 51, 60, 0.28) 40%, transparent 70%),
        radial-gradient(ellipse 35% 50% at 10% 85%, rgba(100, 51, 60, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 90%, rgba(112, 96, 110, 0.38) 0%, transparent 60%),
        radial-gradient(ellipse 40% 35% at 95% 40%, rgba(158, 157, 137, 0.22) 0%, transparent 50%);
}

.theme-refined .movement-hero-word {
    font-family: var(--font-heading);
    font-weight: 700;
}

.theme-refined .movement-hero-item:nth-child(1) .movement-hero-word {
    color: var(--luna-sand);
}

.theme-refined .movement-hero-item:nth-child(2) .movement-hero-word {
    color: #C7B3A4;
}

.theme-refined .movement-hero-item:nth-child(3) .movement-hero-word {
    color: #BCA595;
}

.theme-refined .movement-hero-item:nth-child(4) .movement-hero-word {
    color: #AE9686;
}

.theme-refined .movement-hero-subtitle {
    color: rgba(237, 228, 218, 0.62);
}

/* --------------------------------------------------------------------------
   Pricing page
   -------------------------------------------------------------------------- */

.theme-refined:not(.pricing-live) .intro-card-hero,
.theme-refined:not(.pricing-live) .not-sure-cta {
    background: linear-gradient(135deg, var(--luna-plum) 0%, var(--luna-clay) 100%);
    border-radius: 0;
}

.theme-refined:not(.pricing-live) .intro-card-hero-title,
.theme-refined:not(.pricing-live) .intro-card-hero-desc,
.theme-refined:not(.pricing-live) .free-subtext,
.theme-refined:not(.pricing-live) .not-sure-cta h3,
.theme-refined:not(.pricing-live) .not-sure-cta p {
    color: #fff;
}

.theme-refined:not(.pricing-live) .not-sure-cta p {
    opacity: 0.82;
}

.theme-refined:not(.pricing-live) .free-text {
    font-family: var(--font-heading);
    color: var(--luna-sand);
}

.theme-refined:not(.pricing-live) .intro-card {
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-top: 2px solid var(--luna-mauve);
    border-radius: 0;
}

.theme-refined:not(.pricing-live) .intro-card:hover {
    background: var(--surface-raised-hover);
}

.theme-refined:not(.pricing-live) .intro-card.featured {
    background: linear-gradient(135deg, var(--luna-clay) 0%, var(--luna-plum) 100%);
    border-color: var(--luna-clay);
}

.theme-refined:not(.pricing-live) .intro-card-title {
    font-family: var(--font-heading);
    color: var(--luna-sand);
}

.theme-refined:not(.pricing-live) .intro-card-price {
    font-family: var(--font-heading);
    color: var(--luna-clay-light);
}

.theme-refined:not(.pricing-live) .intro-card-desc {
    color: var(--color-text-light);
}

.theme-refined:not(.pricing-live) .intro-card.featured .intro-card-title,
.theme-refined:not(.pricing-live) .intro-card.featured .intro-card-price,
.theme-refined:not(.pricing-live) .intro-card.featured .intro-card-desc {
    color: #fff;
}

.theme-refined:not(.pricing-live) .class-card {
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: 0;
}

.theme-refined:not(.pricing-live) .class-card:hover {
    background: var(--surface-raised-hover);
    border-color: rgba(209, 194, 179, 0.42);
}

.theme-refined:not(.pricing-live) .class-card.class-card--payment-plan {
    background: var(--surface-raised);
    border-color: var(--luna-clay);
}

.theme-refined:not(.pricing-live) .class-card-classes {
    font-family: var(--font-heading);
    color: var(--luna-sand);
}

.theme-refined:not(.pricing-live) .class-card-label {
    color: rgba(237, 228, 218, 0.66);
}

.theme-refined:not(.pricing-live) .class-card-price {
    color: var(--color-text);
}

.theme-refined:not(.pricing-live) .class-card-per-class {
    color: var(--luna-clay-light);
}

.theme-refined:not(.pricing-live) .subscription-section {
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: 0;
}

.theme-refined:not(.pricing-live) .subscription-header {
    border-bottom-color: var(--hairline);
}

.theme-refined:not(.pricing-live) .subscription-header-title {
    font-family: var(--font-heading);
    color: var(--luna-sand);
}

.theme-refined:not(.pricing-live) .subscription-header-subtitle,
.theme-refined:not(.pricing-live) .subscription-classes-label,
.theme-refined:not(.pricing-live) .subscription-price-period {
    color: var(--color-text-light);
}

.theme-refined:not(.pricing-live) .subscription-row {
    border-bottom-color: var(--hairline);
}

.theme-refined:not(.pricing-live) .subscription-row:hover {
    background: var(--surface-raised-hover);
}

.theme-refined:not(.pricing-live) .subscription-classes-num {
    font-family: var(--font-heading);
    color: var(--luna-sand);
}

.theme-refined:not(.pricing-live) .subscription-price {
    color: var(--color-text);
}

.theme-refined:not(.pricing-live) .subscription-per-class {
    color: var(--luna-clay-light);
}

.theme-refined:not(.pricing-live) .subscription-price-cell.clickable:hover {
    background: var(--surface-raised-hover);
}

.theme-refined:not(.pricing-live) .badge-flexible {
    background: var(--luna-sage);
    color: var(--luna-black);
}

.theme-refined:not(.pricing-live) .badge-commitment {
    background: var(--luna-mauve);
    color: #fff;
}

.theme-refined:not(.pricing-live) .pricing-divider::before {
    background: var(--hairline);
}

.theme-refined:not(.pricing-live) .pricing-divider span {
    background: var(--luna-espresso);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.9rem;
}

.theme-refined:not(.pricing-live) .pricing-card {
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: 0;
}

.theme-refined:not(.pricing-live) .pricing-card.featured {
    background: var(--surface-raised-hover);
    border-color: var(--luna-clay);
}

.theme-refined:not(.pricing-live) .pricing-card .price {
    font-family: var(--font-heading);
    color: var(--luna-sand);
}

/* Mobile card view of the subscription table */
@media (max-width: 900px) {
    .theme-refined:not(.pricing-live) .subscription-row {
        background: var(--surface-raised);
        border: 1px solid var(--hairline);
    }

    .theme-refined:not(.pricing-live) .subscription-classes {
        border-bottom-color: var(--hairline);
    }

    .theme-refined:not(.pricing-live) .subscription-price-cell {
        background: rgba(237, 228, 218, 0.04);
    }

    .theme-refined:not(.pricing-live) .subscription-price-cell::before {
        color: rgba(237, 228, 218, 0.55);
    }
}

/* Live pricing body with the refined chrome. Tokens on <main> restore the
   current page; header and footer keep the espresso shell. */
.theme-refined.pricing-live {
    background-color: #fbfbfb;
}

.theme-refined.pricing-live main {
    --color-primary: #dfd3c5;
    --color-primary-dark: #bfa897;
    --color-secondary: #fbfbfb;
    --color-secondary-dark: #dfd3c5;
    --color-accent: #7d604a;
    --color-text: #545454;
    --color-text-light: #bfa897;
    --color-white: #fbfbfb;
    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    color: #545454;
    font-family: var(--font-body);
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.theme-refined .contact-form {
    background: var(--surface-sheet);
    color: var(--luna-black);
    border-radius: 0;
    padding: var(--spacing-md);
}

.theme-refined .contact-form h3 {
    color: var(--luna-black);
}

.theme-refined .form-group label {
    color: var(--luna-black);
}

.theme-refined .form-group input,
.theme-refined .form-group textarea {
    border: 1px solid rgba(47, 36, 29, 0.22);
    border-radius: 0;
    background: #fff;
    color: var(--luna-black);
}

.theme-refined .form-group input:focus,
.theme-refined .form-group textarea:focus {
    border-color: var(--luna-clay);
    box-shadow: 0 0 0 2px rgba(121, 75, 55, 0.22);
}

.theme-refined .contact-info h2,
.theme-refined .contact-info h3 {
    color: var(--luna-sand);
}

/* --------------------------------------------------------------------------
   Modals and popovers
   -------------------------------------------------------------------------- */

.theme-refined .site-modal__backdrop {
    background: rgba(20, 14, 10, 0.66);
}

.theme-refined .site-modal__panel {
    background: #3A2B21;
    border: 1px solid var(--hairline);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
}

.theme-refined .site-modal__close {
    background: var(--luna-sand);
    color: var(--luna-black);
    border-radius: 0;
}

.theme-refined .site-modal__close:hover {
    background: #fff;
}

.theme-refined .site-modal__title {
    font-family: var(--font-heading);
    color: var(--luna-sand);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.theme-refined .site-modal__kicker {
    color: var(--luna-clay-light) !important;
}

.theme-refined .site-modal__body {
    color: var(--color-text-light);
}

.theme-refined .site-modal__list li {
    color: var(--color-text-light);
}

.theme-refined .site-modal__list strong {
    color: var(--luna-sand);
}

.theme-refined .tag-popover {
    background: var(--luna-plum);
    color: #fff;
    border: 1px solid rgba(237, 228, 218, 0.22);
    border-radius: 0;
}

.theme-refined .tag-popover::before {
    background: var(--luna-plum);
    border-left-color: rgba(237, 228, 218, 0.24);
    border-top-color: rgba(237, 228, 218, 0.24);
}

.theme-refined .tag-popover__text {
    color: rgba(255, 255, 255, 0.94);
}

/* --------------------------------------------------------------------------
   Momence embeds
   Third-party widgets we cannot fully restyle, so they get an explicit light
   sheet. Deliberate contrast rather than a white hole in a dark page.
   -------------------------------------------------------------------------- */

.theme-refined #momence-plugin-reviews,
.theme-refined #ribbon-schedule {
    background: var(--surface-sheet);
    color: var(--luna-black);
    padding: var(--spacing-md);
}

.theme-refined #momence-plugin-reviews:empty,
.theme-refined #ribbon-schedule:empty {
    background: none;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Movement page: keep the accent kicker legible.
   Those <p> elements carry an inline color: var(--color-accent), which now
   resolves to the lightened clay tint, so no override is needed here.
   -------------------------------------------------------------------------- */

.theme-refined .card.card--opens-modal:focus-visible,
.theme-refined .class-tag--popover:focus-visible {
    outline: 2px solid var(--luna-sand);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Inline-style overrides
   --------------------------------------------------------------------------
   A few legacy elements paint themselves from the `style` attribute, so they
   re-resolve against the remapped tokens and land light-on-light. Inline
   declarations only yield to !important, which is why these rules are shaped
   this way. Each attribute selector matches the exact string in the markup, so
   it simply stops applying if that markup is ever rewritten.
   -------------------------------------------------------------------------- */

/* Movement's "Membership & Class Cards" band. --color-primary and its -dark
   pair both resolve to sand now, and the copy inside inherits cream. Recoloured
   to match the pricing bands, which are class-based and handled above. */
.theme-refined main div[style*="linear-gradient(135deg, var(--color-primary)"] {
    background: linear-gradient(135deg, var(--luna-plum) 0%, var(--luna-clay) 100%) !important;
    border-radius: 0 !important;
}

.theme-refined main div[style*="linear-gradient(135deg, var(--color-primary)"] h3,
.theme-refined main div[style*="linear-gradient(135deg, var(--color-primary)"] p {
    color: #fff !important;
}

/* --color-accent is the lightened clay tint, drawn for small accent text on a
   dark ground; as a button fill it leaves white at 2.6:1. Both buttons carrying
   it sit on the plum-to-clay bands, so they keep a light fill and take dark ink
   rather than dropping to the clay of a standard .btn-primary, which would
   nearly match the band behind them. */
.theme-refined:not(.pricing-live) .btn[style*="--color-accent"] {
    background: var(--luna-sand) !important;
    color: var(--luna-black) !important;
    border-color: var(--luna-sand);
}

.theme-refined:not(.pricing-live) .btn[style*="--color-accent"]:hover {
    background: #fff !important;
    border-color: #fff;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.theme-refined .faq-hero {
    padding: 8.5rem 0 2.5rem;
    text-align: center;
}

.theme-refined .faq-hero h1 {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: 0.04em;
    color: var(--luna-ink);
    margin-bottom: 0.6rem;
}

.theme-refined .faq-hero p {
    color: var(--color-text-light);
    max-width: 32rem;
    margin: 0 auto;
}

.theme-refined .faq-section {
    padding: 0 0 var(--space-xl);
}

.theme-refined .faq-list {
    max-width: 48rem;
}

.theme-refined .faq-list details {
    border-top: 1px solid var(--hairline);
    padding: 0 1.15rem;
    transition: background-color var(--t-fast);
}

.theme-refined .faq-list details:last-of-type {
    border-bottom: 1px solid var(--hairline);
}

.theme-refined .faq-list details[open] {
    background-color: var(--luna-clay);
    border-top-color: var(--luna-clay);
}

.theme-refined .faq-list details[open] + details {
    border-top-color: var(--luna-clay);
}

.theme-refined .faq-list details[open]:last-of-type {
    border-bottom-color: var(--luna-clay);
}

.theme-refined .faq-list summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--luna-ink);
    padding: 1.25rem 2.2rem 1.25rem 0;
    position: relative;
}

.theme-refined .faq-list summary::-webkit-details-marker {
    display: none;
}

.theme-refined .faq-list summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--luna-clay-light);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
}

.theme-refined .faq-list details[open] summary::after {
    content: '–';
    color: var(--luna-sand);
}

.theme-refined .faq-list summary:hover {
    color: #fff;
}

.theme-refined .faq-list details[open] summary {
    color: #fff;
}

.theme-refined .faq-answer {
    padding: 0 0 1.4rem;
    color: var(--color-text-light);
}

.theme-refined .faq-list details[open] .faq-answer,
.theme-refined .faq-list details[open] .faq-answer p {
    color: var(--luna-ink);
}

.theme-refined .faq-list details[open] .faq-answer a {
    color: #fff;
}

.theme-refined .faq-answer p {
    margin-bottom: 0.75rem;
}

.theme-refined .faq-answer p:last-child {
    margin-bottom: 0;
}

.theme-refined .faq-answer a {
    color: var(--luna-sand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.theme-refined .faq-kit,
.theme-refined .faq-classes {
    display: grid;
    gap: 0.9rem;
}

.theme-refined .faq-kit dt,
.theme-refined .faq-classes dt {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--luna-clay-light);
    margin-bottom: 0.2rem;
}

.theme-refined .faq-list details[open] .faq-kit dt,
.theme-refined .faq-list details[open] .faq-classes dt {
    color: var(--luna-sand);
}

.theme-refined .faq-kit dd,
.theme-refined .faq-classes dd {
    margin: 0;
}

.theme-refined .faq-validity {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    border-top: 1px solid var(--hairline);
}

.theme-refined .faq-validity li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--luna-ink);
}

.theme-refined .faq-list details[open] .faq-validity {
    border-top-color: rgba(237, 228, 218, 0.28);
}

.theme-refined .faq-list details[open] .faq-validity li {
    border-bottom-color: rgba(237, 228, 218, 0.28);
}

.theme-refined .faq-validity span {
    color: var(--color-text-light);
}

.theme-refined .faq-cta {
    padding: var(--space-lg) 0 var(--space-xl);
    text-align: center;
    background: linear-gradient(135deg, var(--luna-plum) 0%, var(--luna-clay) 100%);
}

.theme-refined .faq-cta h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 1.4rem;
}

.theme-refined .faq-cta .btn-primary {
    background: var(--luna-sand);
    border-color: var(--luna-sand);
    color: var(--luna-black);
}

.theme-refined .faq-cta .btn-primary:hover {
    background: #fff;
    border-color: #fff;
    color: var(--luna-black);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Keep the tab row as the default header. Tighten it on mid widths so the
   eight items still fit before the hamburger takes over. */
@media (max-width: 1280px) {
    .theme-refined .main-nav a {
        padding: 0 0.65rem;
        font-size: 0.74rem;
    }
}

@media (max-width: 768px) {
    .theme-refined .mobile-menu-toggle {
        display: flex;
        z-index: 1001;
        margin-left: auto;
        padding-right: var(--spacing-md);
    }

    .theme-refined .site-header .container {
        min-height: 64px;
        padding-right: 0;
    }

    .theme-refined .logo img {
        height: 38px;
    }

    .theme-refined .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(13.75rem, 68vw);
        height: 100%;
        height: 100dvh;
        background-color: var(--luna-black);
        border-left: 1px solid var(--hairline);
        padding: 4.75rem 0 1.5rem;
        box-shadow: -16px 0 32px rgba(15, 10, 7, 0.38);
        transition: right var(--t-slow);
        overflow-y: auto;
        z-index: 1000;
    }

    .theme-refined .main-nav.active {
        right: 0;
    }

    .theme-refined .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 0;
    }

    .theme-refined .main-nav li {
        width: 100%;
        display: block;
    }

    .theme-refined .main-nav a {
        justify-content: flex-end;
        width: 100%;
        padding: 0.95rem 1.25rem;
        font-size: 0.92rem;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--hairline);
    }

    .theme-refined .main-nav li:last-child a {
        border-right: none;
    }
}
