/* ============================================================
   MIX N MUSE
   LIGHT + DARK THEME
   ============================================================ */


/* ============================================================
   LIGHT MODE
   ============================================================ */

html[data-theme="light"] {

    --canvas: #FFF7E8;
    --text: #3D2925;

    --vermillion: #E94F37;
    --saffron: #F2B544;
    --apricot: #F49B78;
    --aqua: #4FB7B3;
    --coral: #E97878;

    --surface: #FFF9EF;
    --surface-soft: #F8EDDC;

    --border: rgba(61, 41, 37, 0.12);
    --border-strong: rgba(61, 41, 37, 0.20);

    --shadow:
        0 12px 35px rgba(61, 41, 37, 0.10);
}


/* ============================================================
   DARK MODE
   ============================================================ */

html[data-theme="dark"] {

    --canvas: #261B19;
    --text: #FFF3DE;

    --vermillion: #FF684D;
    --saffron: #F4C052;
    --apricot: #FFAA87;
    --aqua: #63CEC9;
    --coral: #F58B8B;

    --surface: #30211F;
    --surface-soft: #3A2926;

    --border: rgba(255, 243, 222, 0.13);
    --border-strong: rgba(255, 243, 222, 0.22);

    --shadow:
        0 15px 40px rgba(0, 0, 0, 0.28);
}


/* ============================================================
   DARK BODY
   ============================================================ */

html[data-theme="dark"] body {
    background: var(--canvas);
    color: var(--text);
}


/* ============================================================
   DARK NAVBAR
   ============================================================ */

html[data-theme="dark"] .main-navbar {

    background: var(--surface);

    border-color: var(--border);

    box-shadow:
        0 12px 38px rgba(0, 0, 0, 0.26);
}


/* ============================================================
   DARK MOBILE MENU
   ============================================================ */

html[data-theme="dark"] .mobile-menu {

    background:
        color-mix(
            in srgb,
            var(--canvas) 94%,
            var(--vermillion) 6%
        );
}


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

html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .menu-button,
html[data-theme="dark"] .mobile-close {

    background: var(--surface-soft);

    color: var(--text);

    border-color: var(--border);
}


/* ============================================================
   DARK TEXT
   ============================================================ */

html[data-theme="dark"] .brand,
html[data-theme="dark"] .mobile-brand,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .dropdown-menu a,
html[data-theme="dark"] .mobile-nav-item > a,
html[data-theme="dark"] .mobile-nav-link,
html[data-theme="dark"] .mobile-dropdown-menu a {

    color: var(--text);
}


/* ============================================================
   DARK HOVER
   ============================================================ */

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .mobile-nav-item > a:hover,
html[data-theme="dark"] .mobile-nav-link:hover {

    color: var(--vermillion);

    background:
        color-mix(
            in srgb,
            var(--vermillion) 9%,
            transparent
        );
}


/* ============================================================
   DARK DROPDOWN
   ============================================================ */

html[data-theme="dark"] .dropdown-menu {

    background: var(--surface);

    border-color: var(--border);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.30);
}


/* ============================================================
   DARK TRIAL BUTTON
   ============================================================ */

html[data-theme="dark"] .trial-button,
html[data-theme="dark"] .mobile-trial-button {

    background: var(--vermillion);

    color: #261B19;
}


/* ============================================================
   DARK CTA HOVER
   ============================================================ */

html[data-theme="dark"] .trial-button:hover,
html[data-theme="dark"] .mobile-trial-button:hover {

    background: var(--apricot);

    color: #261B19;
}


/* ============================================================
   DARK LOGO
   ============================================================ */

html[data-theme="dark"] .brand-tagline {

    color: var(--text);
}


/* ============================================================
   SYSTEM PREFERENCE
   Only used when no saved theme is present.
   ============================================================ */

@media (prefers-color-scheme: dark) {

    html:not([data-theme]) {

        --canvas: #261B19;
        --text: #FFF3DE;

        --vermillion: #FF684D;
        --saffron: #F4C052;
        --apricot: #FFAA87;
        --aqua: #63CEC9;
        --coral: #F58B8B;

        --surface: #30211F;
        --surface-soft: #3A2926;

        --border: rgba(255, 243, 222, 0.13);
        --border-strong: rgba(255, 243, 222, 0.22);

        --shadow:
            0 15px 40px rgba(0, 0, 0, 0.28);
    }

}

/* ============================================================
   MIX N MUSE
   LIGHT + DARK MODE VARIABLES
   ============================================================ */


/* ============================================================
   LIGHT MODE
   ============================================================ */

:root,
html[data-theme="light"] {

    /* --------------------------------------------------------
       Pigment Pop
    -------------------------------------------------------- */

    --canvas: #FFF7E8;
    --warm-brown: #3D2925;

    --vermilion: #E94F37;
    --saffron: #F2B544;
    --apricot: #F49B78;
    --aqua: #4FB7B3;
    --rose-coral: #E97878;


    /* --------------------------------------------------------
       Page
    -------------------------------------------------------- */

    --page-bg: #FFF7E8;
    --text-main: #3D2925;


    /* --------------------------------------------------------
       Navbar
    -------------------------------------------------------- */

    --nav-bg: rgba(255, 247, 232, 0.94);
    --nav-border: rgba(61, 41, 37, 0.12);

    --nav-shadow:
        0 8px 28px rgba(61, 41, 37, 0.08);


    /* --------------------------------------------------------
       Navigation Text
    -------------------------------------------------------- */

    --nav-text: #3D2925;
    --nav-hover-text: #E94F37;

    --nav-hover-bg: rgba(233, 79, 55, 0.08);

    --nav-active-text: #E94F37;
    --nav-active-bg: rgba(233, 79, 55, 0.11);


    /* --------------------------------------------------------
       Controls
    -------------------------------------------------------- */

    --control-bg: rgba(61, 41, 37, 0.055);
    --control-text: #3D2925;

    --control-hover-bg: rgba(79, 183, 179, 0.13);
    --control-hover-text: #317F7C;


    /* --------------------------------------------------------
       CTA
    -------------------------------------------------------- */

    --cta-bg: #E94F37;
    --cta-hover-bg: #D9412B;

    --cta-text: #FFF7E8;

    --cta-shadow:
        0 7px 18px rgba(233, 79, 55, 0.22);

    --cta-hover-shadow:
        0 10px 24px rgba(233, 79, 55, 0.28);


    /* --------------------------------------------------------
       Dropdown
    -------------------------------------------------------- */

    --dropdown-bg: #FFFDF8;
    --dropdown-border: rgba(61, 41, 37, 0.12);

    --dropdown-shadow:
        0 16px 38px rgba(61, 41, 37, 0.13);

    --dropdown-text: #3D2925;
    --dropdown-hover-text: #E94F37;

    --dropdown-hover-bg: rgba(233, 79, 55, 0.08);


    /* --------------------------------------------------------
       Logo
    -------------------------------------------------------- */

    --logo-vermilion: #E94F37;
    --logo-saffron: #F2B544;
    --logo-apricot: #F49B78;
    --logo-aqua: #4FB7B3;

    --logo-text: #3D2925;


    /* --------------------------------------------------------
       Mobile Menu
    -------------------------------------------------------- */

    --mobile-menu-bg: #FFF7E8;

    --mobile-menu-border:
        rgba(61, 41, 37, 0.12);

    --mobile-menu-text: #3D2925;

    --mobile-menu-hover-text: #E94F37;
    --mobile-menu-hover-bg:
        rgba(233, 79, 55, 0.08);

    --mobile-menu-active-text: #E94F37;
    --mobile-menu-active-bg:
        rgba(233, 79, 55, 0.11);

    --mobile-submenu-text: #5A4540;

    --mobile-submenu-hover-text: #317F7C;
    --mobile-submenu-hover-bg:
        rgba(79, 183, 179, 0.12);


    /* --------------------------------------------------------
       Accessibility
    -------------------------------------------------------- */

    --focus-ring: #4FB7B3;
}


/* ============================================================
   DARK MODE
   ============================================================ */

html[data-theme="dark"] {

    /* --------------------------------------------------------
       Pigment Pop Dark Values
    -------------------------------------------------------- */

    --canvas: #261B19;
    --warm-brown: #FFF3DE;

    --vermilion: #FF684D;
    --saffron: #F4C052;
    --apricot: #FFAA87;
    --aqua: #63CEC9;
    --rose-coral: #F58B8B;


    /* --------------------------------------------------------
       Page
    -------------------------------------------------------- */

    --page-bg: #261B19;
    --text-main: #FFF3DE;


    /* --------------------------------------------------------
       Navbar
    -------------------------------------------------------- */

    --nav-bg: rgba(38, 27, 25, 0.95);
    --nav-border: rgba(255, 243, 222, 0.12);

    --nav-shadow:
        0 10px 32px rgba(0, 0, 0, 0.24);


    /* --------------------------------------------------------
       Navigation Text
    -------------------------------------------------------- */

    --nav-text: #FFF3DE;
    --nav-hover-text: #FF684D;

    --nav-hover-bg:
        rgba(255, 104, 77, 0.12);

    --nav-active-text: #FF684D;
    --nav-active-bg:
        rgba(255, 104, 77, 0.15);


    /* --------------------------------------------------------
       Controls
    -------------------------------------------------------- */

    --control-bg: rgba(255, 243, 222, 0.07);
    --control-text: #FFF3DE;

    --control-hover-bg:
        rgba(99, 206, 201, 0.14);

    --control-hover-text: #63CEC9;


    /* --------------------------------------------------------
       CTA
    -------------------------------------------------------- */

    --cta-bg: #FF684D;
    --cta-hover-bg: #FF7A61;

    --cta-text: #261B19;

    --cta-shadow:
        0 8px 22px rgba(255, 104, 77, 0.20);

    --cta-hover-shadow:
        0 11px 28px rgba(255, 104, 77, 0.27);


    /* --------------------------------------------------------
       Dropdown
    -------------------------------------------------------- */

    --dropdown-bg: #302220;
    --dropdown-border:
        rgba(255, 243, 222, 0.12);

    --dropdown-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34);

    --dropdown-text: #FFF3DE;
    --dropdown-hover-text: #FF684D;

    --dropdown-hover-bg:
        rgba(255, 104, 77, 0.12);


    /* --------------------------------------------------------
       Logo
    -------------------------------------------------------- */

    --logo-vermilion: #FF684D;
    --logo-saffron: #F4C052;
    --logo-apricot: #FFAA87;
    --logo-aqua: #63CEC9;

    --logo-text: #FFF3DE;


    /* --------------------------------------------------------
       Mobile Menu
    -------------------------------------------------------- */

    --mobile-menu-bg: #261B19;

    --mobile-menu-border:
        rgba(255, 243, 222, 0.12);

    --mobile-menu-text: #FFF3DE;

    --mobile-menu-hover-text: #FF684D;

    --mobile-menu-hover-bg:
        rgba(255, 104, 77, 0.12);

    --mobile-menu-active-text: #FF684D;

    --mobile-menu-active-bg:
        rgba(255, 104, 77, 0.15);

    --mobile-submenu-text: #EBDCC8;

    --mobile-submenu-hover-text: #63CEC9;

    --mobile-submenu-hover-bg:
        rgba(99, 206, 201, 0.12);


    /* --------------------------------------------------------
       Accessibility
    -------------------------------------------------------- */

    --focus-ring: #63CEC9;
}


/* ============================================================
   THEME TRANSITION
   ============================================================ */

html[data-theme="light"],
html[data-theme="dark"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

/* MIX N MUSE – THEME TOKENS (Pigment Pop) + DARK MODE ADJUSTMENTS */
html[data-theme="light"]{
  --canvas:#FFF7E8;--text:#3D2925;--text-soft:#5C443E;
  --vermillion:#E94F37;--saffron:#F2B544;--apricot:#F49B78;--aqua:#4FB7B3;--coral:#E97878;
  --surface:#FFF9EF;--surface-soft:#F8EDDC;
  --border:rgba(61,41,37,.12);--border-strong:rgba(61,41,37,.22);
  --shadow:0 14px 34px rgba(61,41,37,.14);
  --btn-bg:#D43F29;--btn-hover:#B93220;--btn-text:#FFF9EF;
  --on-pigment:#3D2925;--focus:#3D2925;--splat:.5;
  color-scheme:light;
}
html[data-theme="dark"]{
  --canvas:#261B19;--text:#FFF3DE;--text-soft:#EAD9BF;
  --vermillion:#FF684D;--saffron:#F4C052;--apricot:#FFAA87;--aqua:#63CEC9;--coral:#F58B8B;
  --surface:#30211F;--surface-soft:#3A2926;
  --border:rgba(255,243,222,.14);--border-strong:rgba(255,243,222,.26);
  --shadow:0 18px 40px rgba(0,0,0,.38);
  --btn-bg:#FF684D;--btn-hover:#FFAA87;--btn-text:#261B19;
  --on-pigment:#3D2925;--focus:#FFF3DE;--splat:.3;
  color-scheme:dark;
}
html[data-theme="dark"] .tag{background:var(--surface-soft)}
html[data-theme="dark"] .tile{background:var(--surface)}
html[data-theme="dark"] .strip{background:var(--surface-soft)}
html[data-theme="dark"] .btn-primary{box-shadow:0 12px 28px -12px rgba(255,104,77,.6)}

/* MIX N MUSE - THEME TOKENS (identical to the hero tokens; --wash is new) + SECTION 2 DARK ADJUSTMENTS */
html[data-theme="light"]{--canvas:#FFF7E8;--text:#3D2925;--text-soft:#5C443E;--vermillion:#E94F37;--saffron:#F2B544;--apricot:#F49B78;--aqua:#4FB7B3;--coral:#E97878;--surface:#FFF9EF;--surface-soft:#F8EDDC;--border:rgba(61,41,37,.12);--border-strong:rgba(61,41,37,.22);--shadow:0 14px 34px rgba(61,41,37,.14);--btn-bg:#D43F29;--btn-hover:#B93220;--btn-text:#FFF9EF;--on-pigment:#3D2925;--focus:#3D2925;--wash:.16;color-scheme:light}
html[data-theme="dark"]{--canvas:#261B19;--text:#FFF3DE;--text-soft:#EAD9BF;--vermillion:#FF684D;--saffron:#F4C052;--apricot:#FFAA87;--aqua:#63CEC9;--coral:#F58B8B;--surface:#30211F;--surface-soft:#3A2926;--border:rgba(255,243,222,.14);--border-strong:rgba(255,243,222,.26);--shadow:0 18px 40px rgba(0,0,0,.38);--btn-bg:#FF684D;--btn-hover:#FFAA87;--btn-text:#261B19;--on-pigment:#3D2925;--focus:#FFF3DE;--wash:.12;color-scheme:dark}
html[data-theme="dark"] .ag-tag,html[data-theme="dark"] .ag-cap,html[data-theme="dark"] .ag-makes li{background:var(--surface-soft)}
html[data-theme="dark"] .ag-canvas{box-shadow:0 22px 50px rgba(0,0,0,.45)}

/* ============================================================
   MIX N MUSE
   SECTION 3 — DISCOVER YOUR ART WORLD
   DARK / LIGHT SUPPORT
============================================================ */


/* ============================================================
   LIGHT MODE
============================================================ */

html[data-theme="light"] .discover-art {

    --daw-section-surface: #FFF7E8;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(242, 181, 68, .08),
            transparent 36%
        ),
        var(--daw-section-surface);

    color: #3D2925;
}


/* ============================================================
   DARK MODE
============================================================ */

html[data-theme="dark"] .discover-art {

    --daw-section-surface: #261B19;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(244, 192, 82, .07),
            transparent 36%
        ),
        var(--daw-section-surface);

    color: #FFF3DE;
}


/* ============================================================
   DARK MODE — IMAGE FRAMES
============================================================ */

html[data-theme="dark"]
.discover-art
.daw-image-frame {

    background: #30211F;

    border-color:
        rgba(255, 243, 222, .88);

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, .28);
}


/* ============================================================
   DARK MODE — NUMBER BADGE BORDER
============================================================ */

html[data-theme="dark"]
.discover-art
.daw-art-number {

    border-color: #261B19;
}


/* ============================================================
   DARK MODE — ARTWORK TEXT
============================================================ */

html[data-theme="dark"]
.discover-art
.daw-art-content h3,
html[data-theme="dark"]
.discover-art
.daw-art-content p,
html[data-theme="dark"]
.discover-art
.daw-intro,
html[data-theme="dark"]
.discover-art
.daw-bottom-note,
html[data-theme="dark"]
.discover-art
.daw-eyebrow {

    color: #FFF3DE;
}


/* ============================================================
   DARK MODE — PAINT CORNERS
============================================================ */

html[data-theme="dark"]
.discover-art
.daw-paint-yellow {

    background: #F4C052;
}

html[data-theme="dark"]
.discover-art
.daw-paint-purple {

    background: #F58B8B;
}

html[data-theme="dark"]
.discover-art
.daw-paint-aqua {

    background: #63CEC9;
}

html[data-theme="dark"]
.discover-art
.daw-paint-orange {

    background: #FFAA87;
}


/* ============================================================
   DARK MODE — HEADING COLORS
============================================================ */

html[data-theme="dark"]
.discover-art
.daw-title-red {

    color: #FF684D;
}

html[data-theme="dark"]
.discover-art
.daw-title-aqua {

    color: #63CEC9;
}


/* ============================================================
   DARK MODE — DECORATIONS
============================================================ */

html[data-theme="dark"]
.discover-art
.daw-star {

    color: #63CEC9;
}

html[data-theme="dark"]
.discover-art
.daw-star-two {

    color: #FF684D;
}

html[data-theme="dark"]
.discover-art
.daw-heart {

    color: #F58B8B;
}

html[data-theme="dark"]
.discover-art
.daw-spark {

    color: #F4C052;
}


/* ============================================================
   DARK MODE — BOTTOM NOTE
============================================================ */

html[data-theme="dark"]
.discover-art
.daw-bottom-note b {

    color: #FF684D;
}

/* MIX N MUSE - THEME TOKENS (same as hero/section 2) + SECTION 3 DARK ADJUSTMENTS */
html[data-theme="light"]{--canvas:#FFF7E8;--text:#3D2925;--text-soft:#5C443E;--vermillion:#E94F37;--saffron:#F2B544;--apricot:#F49B78;--aqua:#4FB7B3;--coral:#E97878;--surface:#FFF9EF;--surface-soft:#F8EDDC;--border:rgba(61,41,37,.12);--border-strong:rgba(61,41,37,.22);--shadow:0 14px 34px rgba(61,41,37,.14);--btn-bg:#D43F29;--btn-hover:#B93220;--btn-text:#FFF9EF;--on-pigment:#3D2925;--focus:#3D2925;--wash:.16;color-scheme:light}
html[data-theme="dark"]{--canvas:#261B19;--text:#FFF3DE;--text-soft:#EAD9BF;--vermillion:#FF684D;--saffron:#F4C052;--apricot:#FFAA87;--aqua:#63CEC9;--coral:#F58B8B;--surface:#30211F;--surface-soft:#3A2926;--border:rgba(255,243,222,.14);--border-strong:rgba(255,243,222,.26);--shadow:0 18px 40px rgba(0,0,0,.38);--btn-bg:#FF684D;--btn-hover:#FFAA87;--btn-text:#261B19;--on-pigment:#3D2925;--focus:#FFF3DE;--wash:.12;color-scheme:dark}
html[data-theme="dark"] .wp-note{box-shadow:0 18px 40px rgba(0,0,0,.42)}
html[data-theme="dark"] .wp-window{box-shadow:0 22px 50px rgba(0,0,0,.5)}

/* =========================================================
   DISCOVER YOUR ART WORLD — DARK MODE
   ========================================================= */

[data-theme="dark"] .art-world-content h3 {
    color: #FFF3DE;
}

[data-theme="dark"] .art-world-content p {
    color: #FFF3DE;
}


/* NUMBER CIRCLES */

[data-theme="dark"] .art-world-number {
    border-color: #261B19;
}

[data-theme="dark"] .art-world-draw .art-world-number {
    background: #FF684D;
    color: #FFF3DE;
}

[data-theme="dark"] .art-world-paint .art-world-number {
    background: #F4C052;
    color: #261B19;
}

[data-theme="dark"] .art-world-create .art-world-number {
    background: #63CEC9;
    color: #261B19;
}

[data-theme="dark"] .art-world-explore .art-world-number {
    background: #F58B8B;
    color: #261B19;
}


/* SQUIGGLES */

[data-theme="dark"] .art-world-squiggle {
    color: #FF684D;
}

[data-theme="dark"] .art-world-paint .art-world-squiggle {
    color: #F4C052;
}

[data-theme="dark"] .art-world-create .art-world-squiggle {
    color: #63CEC9;
}

[data-theme="dark"] .art-world-explore .art-world-squiggle {
    color: #F58B8B;
}

/* MIX N MUSE - THEME TOKENS (same as earlier sections) + GALLERY/CTA TOKENS + DARK ADJUSTMENTS */
html[data-theme="light"]{--canvas:#FFF7E8;--text:#3D2925;--text-soft:#5C443E;--vermillion:#E94F37;--saffron:#F2B544;--apricot:#F49B78;--aqua:#4FB7B3;--coral:#E97878;--surface:#FFF9EF;--surface-soft:#F8EDDC;--border:rgba(61,41,37,.12);--border-strong:rgba(61,41,37,.22);--shadow:0 14px 34px rgba(61,41,37,.14);--btn-bg:#D43F29;--btn-hover:#B93220;--btn-text:#FFF9EF;--on-pigment:#3D2925;--focus:#3D2925;--wash:.16;color-scheme:light}
html[data-theme="dark"]{--canvas:#261B19;--text:#FFF3DE;--text-soft:#EAD9BF;--vermillion:#FF684D;--saffron:#F4C052;--apricot:#FFAA87;--aqua:#63CEC9;--coral:#F58B8B;--surface:#30211F;--surface-soft:#3A2926;--border:rgba(255,243,222,.14);--border-strong:rgba(255,243,222,.26);--shadow:0 18px 40px rgba(0,0,0,.38);--btn-bg:#FF684D;--btn-hover:#FFAA87;--btn-text:#261B19;--on-pigment:#3D2925;--focus:#FFF3DE;--wash:.12;color-scheme:dark}
html[data-theme="light"]{--gw-wall:#F8EDDC;--gw-dot:rgba(61,41,37,.10);--gw-shade:rgba(61,41,37,.20);--tc-bg:#D43F29;--tc-text:#FFF9EF;--tc-btn-bg:#FFF9EF;--tc-btn-text:#3D2925}
html[data-theme="dark"]{--gw-wall:#2E201D;--gw-dot:rgba(255,243,222,.08);--gw-shade:rgba(0,0,0,.45);--tc-bg:#FF684D;--tc-text:#261B19;--tc-btn-bg:#261B19;--tc-btn-text:#FFF3DE}
html[data-theme="dark"] .gw-frame{box-shadow:0 18px 36px rgba(0,0,0,.5)}
html[data-theme="dark"] .gw-plaque,html[data-theme="dark"] .gw-hint{background:var(--surface-soft)}

/* MIX N MUSE - THEME TOKENS (same as earlier sections) + JOURNEY TOKEN + DARK ADJUSTMENTS */
html[data-theme="light"]{--canvas:#FFF7E8;--text:#3D2925;--text-soft:#5C443E;--vermillion:#E94F37;--saffron:#F2B544;--apricot:#F49B78;--aqua:#4FB7B3;--coral:#E97878;--surface:#FFF9EF;--surface-soft:#F8EDDC;--border:rgba(61,41,37,.12);--border-strong:rgba(61,41,37,.22);--shadow:0 14px 34px rgba(61,41,37,.14);--btn-bg:#D43F29;--btn-hover:#B93220;--btn-text:#FFF9EF;--on-pigment:#3D2925;--focus:#3D2925;--wash:.16;color-scheme:light}
html[data-theme="dark"]{--canvas:#261B19;--text:#FFF3DE;--text-soft:#EAD9BF;--vermillion:#FF684D;--saffron:#F4C052;--apricot:#FFAA87;--aqua:#63CEC9;--coral:#F58B8B;--surface:#30211F;--surface-soft:#3A2926;--border:rgba(255,243,222,.14);--border-strong:rgba(255,243,222,.26);--shadow:0 18px 40px rgba(0,0,0,.38);--btn-bg:#FF684D;--btn-hover:#FFAA87;--btn-text:#261B19;--on-pigment:#3D2925;--focus:#FFF3DE;--wash:.12;color-scheme:dark}
html[data-theme="light"]{--jr-crease:rgba(61,41,37,.07)}
html[data-theme="dark"]{--jr-crease:rgba(255,243,222,.07)}
html[data-theme="dark"] .jr-card{box-shadow:0 18px 40px rgba(0,0,0,.42)}
html[data-theme="dark"] .jr-cloud{fill:var(--surface);opacity:.5}

/* ===== MIX LAB · paste at the END of dark.css ===== */
/* Text colours switch automatically through --text, --text-soft, --surface.
   These are only the bowl glass, shadows and blobs. */

html[data-theme="dark"] .ml {
    --ml-glass: rgba(255, 243, 222, .09);
    --ml-edge: rgba(255, 243, 222, .22);
    --ml-btn: var(--btn-bg);
}
html[data-theme="dark"] .ml-bowl { box-shadow: inset 0 0 0 2px var(--ml-edge), 0 24px 44px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .ml-tube svg { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
html[data-theme="dark"] .ml-shine { background: rgba(255, 243, 222, .4); }
html[data-theme="dark"] .ml-blobs i { opacity: .16; }
html[data-theme="dark"] .ml-hl { color: var(--apricot); }
html[data-theme="dark"] .ml-btn-ghost:hover { background: var(--surface-soft); }
html[data-theme="dark"] .ml-match.is-on img { box-shadow: 0 0 0 2px var(--border-strong); }
html[data-theme="dark"] .ml-guide { background: var(--surface-soft); }

/* MIX N MUSE - THEME TOKENS (same as earlier sections) + FAQ TOKEN + DARK ADJUSTMENTS */
html[data-theme="light"]{--canvas:#FFF7E8;--text:#3D2925;--text-soft:#5C443E;--vermillion:#E94F37;--saffron:#F2B544;--apricot:#F49B78;--aqua:#4FB7B3;--coral:#E97878;--surface:#FFF9EF;--surface-soft:#F8EDDC;--border:rgba(61,41,37,.12);--border-strong:rgba(61,41,37,.22);--shadow:0 14px 34px rgba(61,41,37,.14);--btn-bg:#D43F29;--btn-hover:#B93220;--btn-text:#FFF9EF;--on-pigment:#3D2925;--focus:#3D2925;--wash:.16;color-scheme:light}
html[data-theme="dark"]{--canvas:#261B19;--text:#FFF3DE;--text-soft:#EAD9BF;--vermillion:#FF684D;--saffron:#F4C052;--apricot:#FFAA87;--aqua:#63CEC9;--coral:#F58B8B;--surface:#30211F;--surface-soft:#3A2926;--border:rgba(255,243,222,.14);--border-strong:rgba(255,243,222,.26);--shadow:0 18px 40px rgba(0,0,0,.38);--btn-bg:#FF684D;--btn-hover:#FFAA87;--btn-text:#261B19;--on-pigment:#3D2925;--focus:#FFF3DE;--wash:.12;color-scheme:dark}
html[data-theme="light"]{--pc-line:rgba(61,41,37,.12)}
html[data-theme="dark"]{--pc-line:rgba(255,243,222,.12)}
html[data-theme="dark"] .pc-face{box-shadow:0 18px 40px rgba(0,0,0,.45)}
html[data-theme="dark"] .pc-chip,html[data-theme="dark"] .pc-hint{background:var(--surface-soft)}
html[data-theme="dark"] .pc-index .pc-chip{color:var(--text)}

/* ============================================================
   MIX N MUSE — FINAL CTA THEME
============================================================ */


/* LIGHT */

html[data-theme="light"] {

    --mm-cta-bg: #FFF7E8;
    --mm-cta-text: #3D2925;
    --mm-cta-soft: #654C45;

    --mm-cta-vermillion: #E94F37;
    --mm-cta-saffron: #F2B544;
    --mm-cta-apricot: #F49B78;
    --mm-cta-aqua: #4FB7B3;
    --mm-cta-coral: #E97878;

    --mm-cta-glass: rgba(255,255,255,.72);

    --mm-cta-border: rgba(61,41,37,.12);

    --mm-cta-shadow:
        0 28px 80px rgba(61,41,37,.12);
}


/* DARK */

html[data-theme="dark"] {

    --mm-cta-bg: #261B19;
    --mm-cta-text: #FFF3DE;
    --mm-cta-soft: #F1DCC5;

    --mm-cta-vermillion: #FF684D;
    --mm-cta-saffron: #F4C052;
    --mm-cta-apricot: #FFAA87;
    --mm-cta-aqua: #63CEC9;
    --mm-cta-coral: #F58B8B;

    --mm-cta-glass: rgba(38,27,25,.76);

    --mm-cta-border: rgba(255,243,222,.15);

    --mm-cta-shadow:
        0 28px 80px rgba(0,0,0,.34);
}


/* ============================================================
   DARK CTA OVERRIDES
============================================================ */

html[data-theme="dark"] .mm-final-cta {

    background: var(--mm-cta-bg);

    color: var(--mm-cta-text);
}


html[data-theme="dark"] .mm-cta-canvas {

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255,243,222,.055),
            transparent 48%
        ),
        #261B19;

    border-color:
        var(--mm-cta-border);

    box-shadow:
        var(--mm-cta-shadow);
}


html[data-theme="dark"] .mm-cta-label {

    background:
        var(--mm-cta-glass);

    border-color:
        var(--mm-cta-border);

    color:
        var(--mm-cta-text);
}


html[data-theme="dark"] .mm-cta-title {

    color:
        var(--mm-cta-text);
}


html[data-theme="dark"] .mm-cta-description,
html[data-theme="dark"] .mm-cta-note {

    color:
        var(--mm-cta-soft);
}


html[data-theme="dark"] .mm-cta-kicker {

    color:
        var(--mm-cta-vermillion);
}


html[data-theme="dark"] .mm-title-paint {

    color:
        var(--mm-cta-vermillion);
}


html[data-theme="dark"] .mm-title-paint::after {

    background:
        var(--mm-cta-saffron);
}


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

html[data-theme="dark"] .mm-cta-primary {

    background:
        var(--mm-cta-vermillion);

    border-color:
        var(--mm-cta-vermillion);

    color:
        #261B19;

    box-shadow:
        0 10px 26px rgba(255,104,77,.22);
}


html[data-theme="dark"] .mm-cta-secondary {

    background:
        rgba(38,27,25,.65);

    border-color:
        var(--mm-cta-aqua);

    color:
        var(--mm-cta-text);
}


html[data-theme="dark"] .mm-cta-primary::before {

    background:
        var(--mm-cta-saffron);
}


html[data-theme="dark"] .mm-cta-secondary::before {

    background:
        var(--mm-cta-aqua);
}


html[data-theme="dark"] .mm-cta-primary:hover,
html[data-theme="dark"] .mm-cta-secondary:hover {

    color:
        #261B19;
}


/* ============================================================
   DARK DECORATION
============================================================ */

html[data-theme="dark"] .mm-art-paper {

    background:
        rgba(255,243,222,.08);

    border-color:
        rgba(255,243,222,.13);

    box-shadow:
        0 14px 28px rgba(0,0,0,.25);
}


html[data-theme="dark"] .mm-art-paper::after {

    border-color:
        rgba(255,243,222,.15);
}


html[data-theme="dark"] .mm-art-pencil path,
html[data-theme="dark"] .mm-doodle-line path {

    stroke:
        var(--mm-cta-text);
}


html[data-theme="dark"] .mm-cta-canvas .mm-brush-stroke path {

    stroke:
        var(--mm-cta-vermillion);
}

/* ============================================================
   MIX N MUSE — FOOTER DARK MODE
============================================================ */

html[data-theme="dark"] .mm-footer {

    --mm-footer-bg:
        #261B19;

    --mm-footer-text:
        #FFF3DE;

    --mm-footer-soft:
        #EAD9BF;

    --mm-footer-accent:
        #63CEC9;

    --mm-footer-accent-2:
        #FF684D;

    --mm-footer-accent-3:
        #F4C052;

    --mm-footer-accent-4:
        #F58B8B;

    --mm-footer-border:
        rgba(255,243,222,.14);

    background:
        #261B19;

    color:
        #FFF3DE;
}


/* ------------------------------------------------------------
   DARK LOGO
   Exact logo swap from the provided logo rules.
------------------------------------------------------------ */

html[data-theme="dark"] .mm-footer .mm-logo-left-circle {

    fill:
        #FF684D;
}


html[data-theme="dark"] .mm-footer .mm-logo-right-circle {

    fill:
        #F4C052;
}


html[data-theme="dark"] .mm-footer .mm-logo-overlap {

    fill:
        #FFAA87;
}


html[data-theme="dark"] .mm-footer .mm-logo-spark {

    fill:
        #63CEC9;
}


html[data-theme="dark"] .mm-footer .mm-logo-wordmark {

    fill:
        #FFF3DE;
}


html[data-theme="dark"] .mm-footer .mm-logo-n {

    fill:
        #63CEC9;
}


html[data-theme="dark"] .mm-footer .mm-logo-tagline {

    fill:
        #FFF3DE;
}


/* ------------------------------------------------------------
   DARK INPUT
------------------------------------------------------------ */

html[data-theme="dark"] .mm-footer-input-wrap {

    background:
        rgba(255,243,222,.035);

    border-color:
        rgba(255,243,222,.16);
}


html[data-theme="dark"] .mm-footer-input-wrap input {

    color:
        #FFF3DE;
}


html[data-theme="dark"] .mm-footer-input-wrap input::placeholder {

    color:
        #EAD9BF;

    opacity:
        .65;
}


/* ------------------------------------------------------------
   DARK SOCIAL
------------------------------------------------------------ */

html[data-theme="dark"] .mm-social-links a {

    background:
        rgba(255,243,222,.035);

    border-color:
        rgba(255,243,222,.15);

    color:
        #FFF3DE;
}


/* ------------------------------------------------------------
   DARK CONTACT ICONS
------------------------------------------------------------ */

html[data-theme="dark"] .mm-contact-icon {

    background:
        rgba(99,206,201,.06);

    border-color:
        rgba(255,243,222,.14);

    color:
        #63CEC9;
}


/* ------------------------------------------------------------
   DARK FOOTER LINKS
------------------------------------------------------------ */

html[data-theme="dark"] .mm-footer-links a {

    color:
        #EAD9BF;
}


html[data-theme="dark"] .mm-footer-links a:hover {

    color:
        #FFF3DE;
}


/* ------------------------------------------------------------
   DARK BRAND COPY
------------------------------------------------------------ */

html[data-theme="dark"] .mm-footer-brand-copy,
html[data-theme="dark"] .mm-footer-support-copy,
html[data-theme="dark"] .mm-footer-newsletter-copy {

    color:
        #EAD9BF;
}


/* ------------------------------------------------------------
   DARK SUBSCRIBE
------------------------------------------------------------ */

html[data-theme="dark"] .mm-footer-subscribe,
html[data-theme="dark"] .mm-footer-brand-link {

    background:
        #FF684D;

    border-color:
        #FF684D;

    color:
        #261B19;
}


html[data-theme="dark"] .mm-footer-subscribe:hover,
html[data-theme="dark"] .mm-footer-brand-link:hover {

    background:
        #FFAA87;

    border-color:
        #FFAA87;
}


/* ------------------------------------------------------------
   DARK FOCUS
------------------------------------------------------------ */

html[data-theme="dark"] .mm-footer a:focus-visible,
html[data-theme="dark"] .mm-footer button:focus-visible,
html[data-theme="dark"] .mm-footer input:focus-visible {

    outline-color:
        #FFF3DE;
}

/* HAPPY MAIL: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .hm-letter{filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
html[data-theme="dark"] .hm-hl{color:var(--apricot)}
html[data-theme="dark"] .hm-env{background:color-mix(in srgb,var(--c) 26%,var(--surface))}
html[data-theme="dark"] .hm-flap{background:color-mix(in srgb,var(--c) 52%,var(--surface))}
html[data-theme="dark"] .hm-dots i{opacity:.4}

/* BEYOND THE EASEL: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .bx-hl{color:var(--apricot)}
html[data-theme="dark"] .bx-t{box-shadow:0 12px 28px rgba(0,0,0,.35)}
html[data-theme="dark"] .bx-g{box-shadow:0 12px 28px rgba(0,0,0,.35)}
html[data-theme="dark"] .bx-ring circle{stroke:var(--saffron)}
html[data-theme="dark"] .bx-mq{border-color:var(--border-strong)}

/* INSTRUCTORS BANNER: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .ib-hl>span{color:var(--apricot)}
html[data-theme="dark"] .ib-face{box-shadow:0 10px 22px rgba(0,0,0,.5)}
html[data-theme="dark"] .ib-ring{opacity:.9}
html[data-theme="dark"] .ib-core{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
html[data-theme="dark"] .ib-crumb a:hover{color:var(--apricot)}

/* ============================================================
   MIX N MUSE — INSTRUCTORS
   SECTION 05 + 07 DARK MODE OVERRIDES ONLY
   ============================================================ */


/* ============================================================
   SECTION 05
   ============================================================ */

html[data-theme="dark"] .im5-teaching {

    --im5-card-wash: rgba(255, 243, 222, .035);

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(255, 104, 77, .07),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(99, 206, 201, .07),
            transparent 26%
        ),
        var(--canvas);
}

html[data-theme="dark"] .im5-canvas {

    background:
        linear-gradient(
            135deg,
            #30211F,
            #342321
        );

    border-color: rgba(255, 243, 222, .18);

    box-shadow:
        0 28px 70px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] .im5-principle {

    background:
        color-mix(
            in srgb,
            #30211F 91%,
            var(--im5-card-color) 9%
        );

    border-color: rgba(255, 243, 222, .15);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .23);
}

html[data-theme="dark"] .im5-principle-copy p,
html[data-theme="dark"] .im5-heading p,
html[data-theme="dark"] .im5-bottom-message p {

    color: #EAD9BF;
}

html[data-theme="dark"] .im5-canvas::before,
html[data-theme="dark"] .im5-card::before {

    opacity: .22;
}


/* ============================================================
   SECTION 07
   ============================================================ */

html[data-theme="dark"] .im7-trial {

    background:
        radial-gradient(
            circle at 10% 25%,
            rgba(255, 104, 77, .06),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(99, 206, 201, .07),
            transparent 26%
        ),
        var(--canvas);
}

html[data-theme="dark"] .im7-card {

    background:
        linear-gradient(
            135deg,
            #30211F,
            #342321
        );

    border-color: rgba(255, 243, 222, .18);

    box-shadow:
        0 30px 75px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] .im7-description,
html[data-theme="dark"] .im7-bottom-copy {

    color: #EAD9BF;
}


/* Keep CTA readable */

html[data-theme="dark"] .im7-btn-primary {

    background: #FF684D;
    color: #261B19;
}

html[data-theme="dark"] .im7-btn-primary::before {

    background: #F4C052;
}

html[data-theme="dark"] .im7-btn-primary:hover {

    color: #261B19;
}

html[data-theme="dark"] .im7-btn-secondary {

    color: #FFAA87;
    border-color: #FF684D;
}

html[data-theme="dark"] .im7-btn-secondary::before {

    background: #F4C052;
}

html[data-theme="dark"] .im7-btn-secondary:hover {

    color: #261B19;
}


/* Focus */

html[data-theme="dark"] .im7-btn:focus-visible,
html[data-theme="dark"] .im5-principle:focus-visible {

    outline: 3px solid #F4C052;
    outline-offset: 4px;
}

/* MOSAIC GALLERY: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .mg-board{box-shadow:0 22px 50px rgba(0,0,0,.5)}
html[data-theme="dark"] .mg-board::after{background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%)}
html[data-theme="dark"] .mg-t:not(.mg-note){background:color-mix(in srgb,var(--c,var(--aqua)) 28%,var(--surface))}
html[data-theme="dark"] .mg-hl{color:var(--apricot)}
html[data-theme="dark"] .mg-cap{box-shadow:0 2px 10px rgba(0,0,0,.55)}

/* =========================================================
   MIX N MUSE — STEP INTO THEIR ART WORLD
   DARK MODE ONLY
   SECTION-SCOPED
========================================================= */

html[data-theme="dark"] .cz-zoom {
    --cz-image-shadow:
        0 30px 70px rgba(0,0,0,.42);
}


/* Keep the artwork readable while retaining the
   existing warm-dark visual language. */

html[data-theme="dark"] .cz-zoom-image-shell {
    box-shadow:
        0 30px 70px rgba(0,0,0,.46),
        0 0 0 1px var(--border-strong);
}


html[data-theme="dark"] .cz-zoom-image-veil {
    background:
        linear-gradient(
            180deg,
            rgba(38,27,25,.04) 0%,
            rgba(38,27,25,.18) 100%
        );
}


/* Message remains warm and readable over the
   expanded artwork. */

html[data-theme="dark"] .cz-zoom-message-inner {
    background: var(--surface);

    border-color: var(--border-strong);

    box-shadow:
        0 30px 75px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,243,222,.04);
}


/* Dark-mode artwork caption */

html[data-theme="dark"] .cz-zoom-caption {
    background: var(--surface);

    border-color: var(--border-strong);

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);
}


/* Dark-mode intro label */

html[data-theme="dark"] .cz-zoom-kicker {
    background: var(--surface);

    border-color: var(--border-strong);

    box-shadow:
        0 10px 26px rgba(0,0,0,.25);
}

/* =========================================================
   MIX N MUSE
   DARK MODE — SECTION ONLY
========================================================= */

html[data-theme="dark"] .mnn-art-journey {
    --mnn-canvas: #261B19;
    --mnn-text: #FFF3DE;

    --mnn-vermilion: #FF684D;
    --mnn-saffron: #F4C052;
    --mnn-apricot: #FFAA87;
    --mnn-aqua: #63CEC9;
    --mnn-coral: #F58B8B;

    background: var(--mnn-canvas);
    color: var(--mnn-text);
}


/* INTRO */

html[data-theme="dark"] .mnn-art-journey .mnn-kicker {
    border-color: rgba(255, 243, 222, .18);
    color: var(--mnn-text);
}

html[data-theme="dark"] .mnn-art-journey .mnn-intro h2,
html[data-theme="dark"] .mnn-art-journey .mnn-message h3,
html[data-theme="dark"] .mnn-art-journey .mnn-final-message h3,
html[data-theme="dark"] .mnn-art-journey .mnn-bottom-note strong {
    color: var(--mnn-text);
}

html[data-theme="dark"] .mnn-art-journey .mnn-intro p,
html[data-theme="dark"] .mnn-art-journey .mnn-message p,
html[data-theme="dark"] .mnn-art-journey .mnn-final-message > p,
html[data-theme="dark"] .mnn-art-journey .mnn-bottom-note p {
    color: var(--mnn-text);
}

html[data-theme="dark"] .mnn-art-journey .mnn-message,
html[data-theme="dark"] .mnn-art-journey .mnn-final-message {
    z-index: 20;
}

html[data-theme="dark"] .mnn-art-journey .mnn-intro h2 span,
html[data-theme="dark"] .mnn-art-journey .mnn-message h3 em,
html[data-theme="dark"] .mnn-art-journey .mnn-final-message h3 em {
    color: var(--mnn-vermilion);
}


/* STAGE */

html[data-theme="dark"] .mnn-art-journey .mnn-stage-label-text,
html[data-theme="dark"] .mnn-art-journey .mnn-stage-hint,
html[data-theme="dark"] .mnn-art-journey .mnn-stage-caption {
    color: var(--mnn-text);
}

html[data-theme="dark"] .mnn-art-journey .mnn-stage-number {
    color: #261B19;
    background: var(--mnn-vermilion);
}


/* ARTBOARD */

html[data-theme="dark"] .mnn-art-journey .mnn-artboard {
    border-color: rgba(255, 243, 222, .14);

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 170, 135, .10),
            transparent 32%
        ),
        #30211F;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] .mnn-art-journey .mnn-paper-glow {
    background:
        radial-gradient(
            circle at 22% 24%,
            rgba(255, 104, 77, .11),
            transparent 17%
        ),
        radial-gradient(
            circle at 78% 24%,
            rgba(244, 192, 82, .10),
            transparent 18%
        ),
        radial-gradient(
            circle at 50% 80%,
            rgba(99, 206, 201, .09),
            transparent 20%
        );
}


/* CONTROLS */

html[data-theme="dark"] .mnn-art-journey .mnn-controls {
    border-color: rgba(255, 243, 222, .16);
    background: rgba(48, 33, 31, .92);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .mnn-art-journey .mnn-control {
    color: var(--mnn-text);
}

html[data-theme="dark"] .mnn-art-journey .mnn-control.is-active {
    background: var(--mnn-text);
    color: #261B19;
}

html[data-theme="dark"] .mnn-art-journey .mnn-control:focus-visible {
    outline-color: var(--mnn-text);
}


/* FINAL PAPER */

html[data-theme="dark"] .mnn-art-journey .mnn-final-art__paper {
    border-color: #30211F;
    background: #FFF3DE;
    opacity: .24;

    box-shadow:
        0 24px 55px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .mnn-art-journey .mnn-final-art__paper::after {
    border-color: rgba(61, 41, 37, .18);
}

html[data-theme="dark"] .mnn-art-journey .mnn-final-caption {
    color: var(--mnn-text);
}


/* BUTTONS */

html[data-theme="dark"] .mnn-art-journey .mnn-btn--primary {
    background: #FF684D;
    color: #261B19;
}

html[data-theme="dark"] .mnn-art-journey .mnn-btn--primary:hover {
    background: #FFAA87;
}

html[data-theme="dark"] .mnn-art-journey .mnn-btn--secondary {
    border-color: rgba(255, 243, 222, .25);
    color: var(--mnn-text);
}

html[data-theme="dark"] .mnn-art-journey .mnn-btn--secondary:hover {
    border-color: var(--mnn-text);
}


/* PROGRESS */

html[data-theme="dark"] .mnn-art-journey .mnn-progress-dot {
    background: rgba(255, 243, 222, .22);
}

html[data-theme="dark"] .mnn-art-journey .mnn-progress-dot.is-active {
    background: var(--mnn-vermilion);
}

html[data-theme="dark"] .mnn-art-journey .mnn-progress-line {
    background: rgba(255, 243, 222, .18);
}


/* FOCUS */

html[data-theme="dark"] .mnn-art-journey .mnn-btn:focus-visible {
    outline-color: var(--mnn-text);
}

/* ===== MEET THE MAKERS · paste at the END of dark.css ===== */
/* Text, panels and chips switch automatically through your shared theme variables.
   These are the only dark-mode tweaks. */

html[data-theme="dark"] .ez {
    --ez-red: var(--apricot);
    --ez-btn: var(--btn-bg);
}

html[data-theme="dark"] .ez-hl {
    color: var(--apricot);
}

html[data-theme="dark"] .ez-lamp {
    opacity: .55;
}

/* ============================================================
   LITTLE ARTIST'S TOOLBOX
   DARK MODE
============================================================ */

html[data-theme="dark"] .lat {

    background:
        var(--canvas);

    color:
        var(--text);
}


html[data-theme="dark"] .lat-image-box {

    background:
        var(--surface);

    border-color:
        var(--border-strong);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.34);
}


html[data-theme="dark"] .lat-image-box::after {

    background:
        linear-gradient(
            145deg,
            rgba(255,243,222,.07),
            transparent 45%,
            rgba(0,0,0,.20)
        );
}


html[data-theme="dark"] .lat-step:hover {

    background:
        rgba(255,104,77,.08);
}


html[data-theme="dark"] .lat-step.is-active {

    background:
        rgba(255,104,77,.12);

    border-inline-start-color:
        var(--vermillion);
}


html[data-theme="dark"] .lat-final {

    background:
        rgba(38,27,25,.97);
}


html[data-theme="dark"] .lat-button {

    background:
        var(--btn-bg);

    color:
        var(--btn-text);
}


html[data-theme="dark"] .lat-button:hover {

    background:
        var(--btn-hover);
}

/* ============================================================
   HOME 2 — VERMILLION CTA DARK MODE
   FULLY SCOPED: .h2cta ONLY
============================================================ */

html[data-theme="dark"] .h2cta {

    --h2cta-cream: #FFF3DE;

    --h2cta-cream-soft:
        rgba(255, 243, 222, .86);

    --h2cta-shadow:
        rgba(0, 0, 0, .42);

    box-shadow:
        0 28px 72px
        var(--h2cta-shadow);
}


/* Inner border */

html[data-theme="dark"] .h2cta__frame {

    border-color:
        rgba(255, 243, 222, .30);
}


html[data-theme="dark"] .h2cta__frame::before,
html[data-theme="dark"] .h2cta__frame::after {

    border-color:
        rgba(255, 243, 222, .18);
}


/* Eyebrow + secondary button */

html[data-theme="dark"] .h2cta__eyebrow,
html[data-theme="dark"] .h2cta__btn--secondary {

    border-color:
        rgba(255, 243, 222, .52);
}


html[data-theme="dark"] .h2cta__eyebrow {

    background:
        rgba(255, 243, 222, .08);
}


/* Secondary button */

html[data-theme="dark"] .h2cta__btn--secondary {

    background:
        rgba(255, 243, 222, .07);

    color:
        #FFF3DE;
}


html[data-theme="dark"] .h2cta__btn--secondary:hover,
html[data-theme="dark"] .h2cta__btn--secondary:focus-visible {

    background:
        #FFAA87;

    border-color:
        #FFAA87;

    color:
        #3D2925;
}


/* Primary button */

html[data-theme="dark"] .h2cta__btn--primary {

    background:
        #F4C052;

    border-color:
        #F4C052;

    color:
        #3D2925;
}


html[data-theme="dark"] .h2cta__btn--primary:hover,
html[data-theme="dark"] .h2cta__btn--primary:focus-visible {

    background:
        #FFAA87;

    border-color:
        #FFAA87;

    color:
        #3D2925;
}


/* Focus */

html[data-theme="dark"] .h2cta__btn:focus-visible {

    outline-color:
        #F4C052;
}

/* MEET THE ARTISTS: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .sw-hl{color:var(--apricot)}
html[data-theme="dark"] .sw-big{color:var(--apricot)}
html[data-theme="dark"] .sw-gm{box-shadow:0 14px 30px rgba(0,0,0,.3)}
html[data-theme="dark"] .sw-pn:not(.sw-open) .sw-wash{opacity:.82}
html[data-theme="dark"] .sw-btn-ghost:hover{color:var(--text)}

/* ============================================================
   MIX N MUSE — ABOUT HERO
   DARK MODE ONLY
   FULLY SCOPED: abhero-
============================================================ */

html[data-theme="dark"] .abhero {

    background:
        var(--canvas);

    color:
        var(--text);
}


/* ------------------------------------------------------------
   Copy
------------------------------------------------------------ */

html[data-theme="dark"] .abhero h1 {
    color:
        var(--text);
}


html[data-theme="dark"] .abhero-lead {
    color:
        var(--text-soft);
}


/* ------------------------------------------------------------
   Eyebrow
------------------------------------------------------------ */

html[data-theme="dark"] .abhero-tag {

    background:
        var(--surface-soft);

    border-color:
        var(--border-strong);

    color:
        var(--text);
}


/* ------------------------------------------------------------
   Buttons
------------------------------------------------------------ */

html[data-theme="dark"] .abhero-btn-primary {

    background:
        var(--btn-bg);

    color:
        var(--btn-text);

    box-shadow:
        0 12px 26px -12px
        var(--btn-bg);
}


html[data-theme="dark"] .abhero-btn-primary::before {

    background:
        var(--btn-hover);
}


html[data-theme="dark"] .abhero-btn-secondary {

    background:
        transparent;

    border-color:
        var(--text);

    color:
        var(--text);
}


html[data-theme="dark"] .abhero-btn-secondary::before {

    background:
        var(--saffron);
}


html[data-theme="dark"] .abhero-btn-secondary:hover {

    color:
        var(--on-pigment);

    border-color:
        var(--saffron);
}


/* ------------------------------------------------------------
   Image background
------------------------------------------------------------ */

html[data-theme="dark"] .abhero-slice {

    background:
        var(--surface-soft);
}


/* ------------------------------------------------------------
   Image shadow
------------------------------------------------------------ */

html[data-theme="dark"] .abhero-slices {

    filter:
        drop-shadow(
            0 25px 30px
            rgba(0, 0, 0, .38)
        );
}


/* ------------------------------------------------------------
   Metadata
------------------------------------------------------------ */

html[data-theme="dark"] .abhero-meta {

    color:
        var(--text-soft);
}


/* ------------------------------------------------------------
   Focus
------------------------------------------------------------ */

html[data-theme="dark"] .abhero-btn:focus-visible {

    outline-color:
        var(--focus);
}

/* ============================================================
   MIX N MUSE — ABOUT
   MISSION & VISION + HISTORY
   DARK MODE ONLY
   FULLY SCOPED
============================================================ */


/* ============================================================
   MISSION & VISION
============================================================ */

html[data-theme="dark"] .abmv {

    background: var(--canvas);
    color: var(--text);
}


html[data-theme="dark"] .abmv::before {
    opacity: .10;
}


html[data-theme="dark"] .abmv::after {
    opacity: .09;
}


html[data-theme="dark"] .abmv-tag,
html[data-theme="dark"] .abmv-card {

    background: var(--surface);

    border-color: var(--border-strong);

    color: var(--text);
}


html[data-theme="dark"] .abmv-head h2,
html[data-theme="dark"] .abmv-card-content h3,
html[data-theme="dark"] .abmv-path-items span,
html[data-theme="dark"] .abmv-core-word {

    color: var(--text);
}


html[data-theme="dark"] .abmv-head > p,
html[data-theme="dark"] .abmv-card-content p {

    color: var(--text-soft);
}


html[data-theme="dark"] .abmv-number {
    background: var(--saffron);
    color: var(--on-pigment);
}


html[data-theme="dark"] .abmv-card-vision .abmv-number {
    background: var(--aqua);
    color: var(--on-pigment);
}


html[data-theme="dark"] .abmv-card-media {
    background: var(--surface-soft);
}


html[data-theme="dark"] .abmv-card-media::after {
    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(0,0,0,.48)
        );
}


html[data-theme="dark"] .abmv-media-stamp {
    background: var(--vermillion);
    color: var(--btn-text);
}


html[data-theme="dark"] .abmv-values li {
    color: var(--text);
    border-color: var(--border-strong);
}


html[data-theme="dark"] .abmv-core-spark {
    background: var(--aqua);
}


html[data-theme="dark"] .abmv-core-spark span {
    background: var(--canvas);
}


html[data-theme="dark"] .abmv-orbit {
    border-color:
        color-mix(
            in srgb,
            var(--saffron) 78%,
            transparent
        );
}


html[data-theme="dark"] .abmv-orbit-two {
    border-color:
        color-mix(
            in srgb,
            var(--aqua) 78%,
            transparent
        );
}


html[data-theme="dark"] .abmv-path-line path {
    stroke: var(--saffron);
}


html[data-theme="dark"] .abmv-path-items i {
    background: var(--vermillion);
}


/* ============================================================
   HISTORY
============================================================ */

html[data-theme="dark"] .abh {

    background: var(--surface-soft);
    color: var(--text);
}


html[data-theme="dark"] .abh::before {
    opacity: .07;
}


html[data-theme="dark"] .abh-tag {

    background: var(--surface);

    border-color: var(--border-strong);

    color: var(--text);
}


html[data-theme="dark"] .abh-head h2,
html[data-theme="dark"] .abh-event-copy h3,
html[data-theme="dark"] .abh-footer p strong {

    color: var(--text);
}


html[data-theme="dark"] .abh-intro,
html[data-theme="dark"] .abh-event-copy p,
html[data-theme="dark"] .abh-footer p {

    color: var(--text-soft);
}


html[data-theme="dark"] .abh-event-body {

    background: var(--canvas);

    border-color: var(--border-strong);
}


html[data-theme="dark"] .abh-event-image {

    background: var(--surface);
}


html[data-theme="dark"] .abh-event-image::after {

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(0,0,0,.48)
        );
}


html[data-theme="dark"] .abh-image-label {

    background: var(--surface);

    color: var(--text);

    border: 1px solid var(--border);
}


html[data-theme="dark"] .abh-note {

    border-color: var(--border);

    color: var(--text);
}


html[data-theme="dark"] .abh-footer-line span:nth-child(1) {
    background: var(--vermillion);
}


html[data-theme="dark"] .abh-footer-line span:nth-child(2) {
    background: var(--saffron);
}


html[data-theme="dark"] .abh-footer-line span:nth-child(3) {
    background: var(--aqua);
}


html[data-theme="dark"] .abh-footer-spark {
    color: var(--aqua);
}


/* ============================================================
   DARK FOCUS
============================================================ */

html[data-theme="dark"] .abmv a:focus-visible,
html[data-theme="dark"] .abh a:focus-visible {

    outline-color: var(--focus);
}

/* CONTACT BANNER: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .cb-hl>span{color:var(--apricot)}
html[data-theme="dark"] .cb-blob{opacity:.3}
html[data-theme="dark"] .cb-ring{opacity:.9}
html[data-theme="dark"] .cb-arch,html[data-theme="dark"] .cb-pol,html[data-theme="dark"] .cb-bd{box-shadow:0 14px 28px rgba(0,0,0,.5)}
html[data-theme="dark"] .cb-crumb a:hover{color:var(--apricot)}

/* ============================================================
   MIX N MUSE — CONTACT SECTIONS
   DARK MODE ONLY
   SECTION SCOPED
============================================================ */

html[data-theme="dark"] .ct-info,
html[data-theme="dark"] .ct-message,
html[data-theme="dark"] .ct-map {
    color: var(--text);
}


/* ============================================================
   CONTACT INFORMATION
============================================================ */

html[data-theme="dark"] .ct-info-heading h2,
html[data-theme="dark"] .ct-contact-copy strong,
html[data-theme="dark"] .ct-contact-label,
html[data-theme="dark"] .ct-info-footer {
    color: var(--text);
}

html[data-theme="dark"] .ct-info-intro,
html[data-theme="dark"] .ct-contact-copy small {
    color: var(--text-soft);
}

html[data-theme="dark"] .ct-contact-item:hover {
    background: color-mix(
        in srgb,
        var(--c) 12%,
        var(--surface)
    );
}

html[data-theme="dark"] .ct-contact-icon {
    background: color-mix(
        in srgb,
        var(--c) 23%,
        var(--surface)
    );
}

html[data-theme="dark"] .ct-contact-item:hover .ct-contact-icon {
    color: var(--on-pigment);
}


/* ============================================================
   MESSAGE
============================================================ */

html[data-theme="dark"] .ct-message {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--surface-soft) 90%,
                var(--vermillion)
            ),
            var(--surface-soft)
        );
}

html[data-theme="dark"] .ct-message-copy h2,
html[data-theme="dark"] .ct-message-point p,
html[data-theme="dark"] .ct-response-note strong,
html[data-theme="dark"] .ct-form-top,
html[data-theme="dark"] .ct-field label {
    color: var(--text);
}

html[data-theme="dark"] .ct-message-lead,
html[data-theme="dark"] .ct-response-note p,
html[data-theme="dark"] .ct-form-bottom p,
html[data-theme="dark"] .ct-form-required {
    color: var(--text-soft);
}

html[data-theme="dark"] .ct-form-wrap {
    background: var(--surface);
    border-color: var(--border-strong);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .ct-field input,
html[data-theme="dark"] .ct-field select,
html[data-theme="dark"] .ct-field textarea {
    color: var(--text);
}

html[data-theme="dark"] .ct-field input::placeholder,
html[data-theme="dark"] .ct-field textarea::placeholder {
    color: var(--text-soft);
}

html[data-theme="dark"] .ct-submit {
    background: var(--btn-bg);
    color: var(--btn-text);
}


/* ============================================================
   MAP
============================================================ */

html[data-theme="dark"] .ct-map-heading h2,
html[data-theme="dark"] .ct-map-detail-head h3,
html[data-theme="dark"] .ct-map-detail-block strong,
html[data-theme="dark"] .ct-map-tags span {
    color: var(--text);
}

html[data-theme="dark"] .ct-map-heading > p,
html[data-theme="dark"] .ct-map-detail-block > span,
html[data-theme="dark"] .ct-map-detail-block p {
    color: var(--text-soft);
}

html[data-theme="dark"] .ct-map-layout {
    background: var(--surface);
    border-color: var(--border-strong);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .ct-map-details {
    background: var(--surface);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .ct-map-frame {
    background: var(--surface-soft);
}

html[data-theme="dark"] .ct-map-frame iframe {
    filter:
        invert(.88)
        hue-rotate(180deg)
        saturate(.65)
        contrast(.88);
}

html[data-theme="dark"] .ct-map-frame:hover iframe {
    filter:
        invert(.88)
        hue-rotate(180deg)
        saturate(.82)
        contrast(.95);
}

html[data-theme="dark"] .ct-map-label,
html[data-theme="dark"] .ct-map-pin {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .ct-map-tags span {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .ct-map-link {
    color: var(--apricot) !important;
}

html[data-theme="dark"] .ct-map-bottom {
    background: var(--vermillion);
    color: var(--on-pigment);
}

html[data-theme="dark"] .ct-map-bottom p {
    color: var(--on-pigment);
}

html[data-theme="dark"] .ct-map-cta {
    background: var(--surface);
    color: var(--text) !important;
    border-color: var(--on-pigment);
}

html[data-theme="dark"] .ct-map-cta:hover {
    background: var(--saffron);
    color: var(--on-pigment) !important;
}


/* ============================================================
   DARK FOCUS
============================================================ */

html[data-theme="dark"] .ct-submit:focus-visible,
html[data-theme="dark"] .ct-map-cta:focus-visible,
html[data-theme="dark"] .ct-map-link:focus-visible,
html[data-theme="dark"] .ct-contact-item:focus-visible {
    outline-color: var(--focus);
}

/* ===== INSIDE THE STUDIO · paste at the END of dark.css ===== */
/* Text, tiles and chips switch automatically through your shared theme variables.
   These are the only dark-mode tweaks. */

html[data-theme="dark"] .im6 {
    --im6-red: var(--apricot);
    --im6-btn: var(--btn-bg);
}

html[data-theme="dark"] .im6-hl {
    color: var(--apricot);
}

html[data-theme="dark"] .im6-t {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .im6-values {
    background: color-mix(in srgb, var(--saffron) 20%, var(--surface));
}

html[data-theme="dark"] .im6-quote {
    background: color-mix(in srgb, var(--aqua) 20%, var(--surface));
}

html[data-theme="dark"] .im6-cta {
    background: color-mix(in srgb, var(--vermillion) 20%, var(--surface));
}

/* =========================================================
   CONTACT CTA — DARK MODE
   ========================================================= */

html[data-theme="dark"] :where(.cncta-section) {

    --cncta-bg: #FF684D;
    --cncta-text: #261B19;
    --cncta-soft: rgba(38, 27, 25, .82);
    --cncta-dark: #261B19;
    --cncta-yellow: #F4C052;
    --cncta-apricot: #FFAA87;
    --cncta-aqua: #63CEC9;
    --cncta-surface: #30211F;

    box-shadow: none;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-kicker {
    color: #261B19;
    border-color: rgba(38, 27, 25, .38);
    background: rgba(38, 27, 25, .10);
}


html[data-theme="dark"] :where(.cncta-section) .cncta-kicker-dot {
    background: #261B19;

    box-shadow:
        0 0 0 5px rgba(38, 27, 25, .12);
}


html[data-theme="dark"] :where(.cncta-section) .cncta-title {
    color: #261B19;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-title span {
    color: #F4C052;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-title span::after {
    background: #F4C052;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-description {
    color: rgba(38, 27, 25, .82);
}


html[data-theme="dark"] :where(.cncta-section) .cncta-btn-primary {
    color: #FFF3DE;
    background: #30211F;
    border-color: #30211F;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-btn-primary:hover {
    color: #261B19;
    background: #F4C052;
    border-color: #F4C052;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-btn-secondary {
    color: #261B19;
    border-color: rgba(38, 27, 25, .62);
}


html[data-theme="dark"] :where(.cncta-section) .cncta-btn-secondary:hover {
    color: #261B19;
    background: #F4C052;
    border-color: #F4C052;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-note {
    color: rgba(38, 27, 25, .72);
}


html[data-theme="dark"] :where(.cncta-section) .cncta-note-line {
    background: rgba(38, 27, 25, .32);
}


html[data-theme="dark"] :where(.cncta-section) .cncta-paint-one {
    background: #F4C052;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-paint-two {
    background: #63CEC9;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-paint-three {
    background: #FFAA87;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-dot-one {
    background: #F4C052;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-dot-two {
    background: #63CEC9;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-dot-three {
    background: #FFAA87;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-spark-one {
    color: #F4C052;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-spark-two {
    color: #63CEC9;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-brush-back {
    stroke: #F4C052;
}


html[data-theme="dark"] :where(.cncta-section) .cncta-brush-front {
    stroke: #FFAA87;
}
/* MIX & PAINT ARCADE: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .mp-hl{color:var(--apricot)}
html[data-theme="dark"] .mp-cab{box-shadow:0 9px 0 rgba(0,0,0,.35)}
html[data-theme="dark"] .mp-pot{box-shadow:0 8px 18px rgba(0,0,0,.3)}
html[data-theme="dark"] .mp-sl.mp-on{box-shadow:0 8px 18px rgba(0,0,0,.3)}
html[data-theme="dark"] .mp-need li b{color:#3D2925}
html[data-theme="dark"] .mp-lv button[aria-current="true"]{background:var(--saffron);color:#261B19;border-color:var(--saffron)}

/* =========================================================
   HOME 2 CTA — DARK MODE
   Scoped only to .h2cta
========================================================= */

html[data-theme="dark"] .h2cta {
    background: var(--canvas, #261B19);
    color: var(--text, #FFF3DE);
}

html[data-theme="dark"] .h2cta-inner {
    background: #FF684D;

    border-color: rgba(255, 243, 222, 0.16);

    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .h2cta-inner::before {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 243, 222, 0.18) 0,
            rgba(255, 243, 222, 0.06) 25%,
            transparent 54%
        );
}

html[data-theme="dark"] .h2cta-inner::after {
    border-color: rgba(38, 27, 25, 0.22);

    box-shadow:
        0 0 0 22px rgba(38, 27, 25, 0.055),
        0 0 0 44px rgba(38, 27, 25, 0.035);
}

html[data-theme="dark"] .h2cta-eyebrow {
    color: #261B19;

    background: rgba(255, 243, 222, 0.2);

    border-color: rgba(38, 27, 25, 0.45);
}

html[data-theme="dark"] .h2cta-eyebrow-dot {
    background: #F4C052;

    box-shadow:
        0 0 0 5px rgba(244, 192, 82, 0.17);
}

html[data-theme="dark"] .h2cta-title {
    color: #261B19;
}

html[data-theme="dark"] .h2cta-title span {
    color: #F4C052;
}

html[data-theme="dark"] .h2cta-title span::after {
    background: #F4C052;
}

html[data-theme="dark"] .h2cta-description {
    color: #261B19;
}

html[data-theme="dark"] .h2cta-button-primary {
    color: #261B19;

    background: #FFF3DE;

    border-color: #FFF3DE;
}

html[data-theme="dark"] .h2cta-button-primary::before {
    background: #F4C052;
}

html[data-theme="dark"] .h2cta-button-primary:hover {
    color: #261B19;
}

html[data-theme="dark"] .h2cta-button-secondary {
    color: #FFF3DE;

    background: rgba(38, 27, 25, 0.16);

    border-color: rgba(38, 27, 25, 0.62);
}

html[data-theme="dark"] .h2cta-button-secondary::before {
    background: #FFF3DE;
}

html[data-theme="dark"] .h2cta-button-secondary:hover {
    color: #261B19;
}

html[data-theme="dark"] .h2cta-note {
    color: rgba(38, 27, 25, 0.82);
}

html[data-theme="dark"] .h2cta-note-line {
    background: rgba(38, 27, 25, 0.38);
}

html[data-theme="dark"] .h2cta-orbit {
    border-color: rgba(38, 27, 25, 0.2);
}

html[data-theme="dark"] .h2cta-orbit span {
    background: #F4C052;

    box-shadow:
        0 0 0 6px rgba(244, 192, 82, 0.14);
}

html[data-theme="dark"] .h2cta-orbit-b span {
    background: #63CEC9;
}

html[data-theme="dark"] .h2cta-particle:nth-child(odd) {
    background: #F4C052;
}

html[data-theme="dark"] .h2cta-particle:nth-child(even) {
    background: #FFF3DE;
}

html[data-theme="dark"] .h2cta-particle-2,
html[data-theme="dark"] .h2cta-particle-7 {
    background: #FFAA87 !important;
}

html[data-theme="dark"] .h2cta-particle-4,
html[data-theme="dark"] .h2cta-particle-6 {
    background: #63CEC9 !important;
}

html[data-theme="dark"] .h2cta-star {
    color: #F4C052;
}

html[data-theme="dark"] .h2cta-brush {
    background: rgba(38, 27, 25, 0.14);
}

html[data-theme="dark"] .h2cta-pigment-trail i {
    background: #F4C052;
}

html[data-theme="dark"] .h2cta-pigment-trail i:nth-child(2),
html[data-theme="dark"] .h2cta-pigment-trail i:nth-child(6) {
    background: #261B19;
}

html[data-theme="dark"] .h2cta-pigment-trail i:nth-child(3),
html[data-theme="dark"] .h2cta-pigment-trail i:nth-child(7) {
    background: #FFAA87;
}

html[data-theme="dark"] .h2cta-pigment-trail i:nth-child(5) {
    background: #63CEC9;
}

html[data-theme="dark"] .h2cta-button:focus-visible {
    outline-color: #261B19;
}
/* =========================================================
   MIX N MUSE — ABOUT
   LITTLE PROOF + FAMILY VOICES
   DARK MODE ONLY
   FULLY SCOPED
========================================================= */


/* =========================================================
   LITTLE PROOF
========================================================= */

html[data-theme="dark"] .abimpact {
    background: var(--canvas);
    color: var(--text);
}


html[data-theme="dark"] .abimpact__stat:hover {
    background:
        color-mix(
            in srgb,
            var(--surface-soft) 72%,
            transparent
        );
}


html[data-theme="dark"] .abimpact__tag,
html[data-theme="dark"] .abvoices__tag {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}


html[data-theme="dark"] .abimpact__head p,
html[data-theme="dark"] .abimpact__stat p,
html[data-theme="dark"] .abimpact__footer-copy p,
html[data-theme="dark"] .abvoices__intro,
html[data-theme="dark"] .abvoices__voice figcaption span,
html[data-theme="dark"] .abvoices__bottom p {
    color: var(--text-soft);
}


html[data-theme="dark"] .abimpact__number,
html[data-theme="dark"] .abimpact__stat h3,
html[data-theme="dark"] .abimpact__footer-copy strong,
html[data-theme="dark"] .abvoices__head h2,
html[data-theme="dark"] .abvoices__voice blockquote,
html[data-theme="dark"] .abvoices__bottom strong {
    color: var(--text);
}


/* keep pigment colours vivid */

html[data-theme="dark"] .abimpact__stat--vermilion
.abimpact__number {
    color: var(--vermillion);
}


html[data-theme="dark"] .abimpact__stat--saffron
.abimpact__number {
    color: var(--saffron);
}


html[data-theme="dark"] .abimpact__stat--aqua
.abimpact__number {
    color: var(--aqua);
}


html[data-theme="dark"] .abimpact__stat--coral
.abimpact__number {
    color: var(--coral);
}


/* =========================================================
   FAMILY VOICES
========================================================= */

html[data-theme="dark"] .abvoices {
    background: var(--surface);
    color: var(--text);
}


html[data-theme="dark"] .abvoices__voice {
    background:
        color-mix(
            in srgb,
            var(--canvas) 78%,
            var(--surface)
        );

    border-color: var(--border-strong);
}


html[data-theme="dark"] .abvoices__portrait {
    background: var(--surface-soft);
}


html[data-theme="dark"] .abvoices__marquee::before {
    background:
        linear-gradient(
            to right,
            var(--surface),
            transparent
        );
}


html[data-theme="dark"] .abvoices__marquee::after {
    background:
        linear-gradient(
            to left,
            var(--surface),
            transparent
        );
}


html[data-theme="dark"] .abimpact__wash-dot--one {
    opacity: .13;
}


html[data-theme="dark"] .abimpact__wash-dot--two {
    opacity: .10;
}


html[data-theme="dark"] .abimpact__wash-dot--three {
    opacity: .12;
}

/* TRIAL BOOKING FORM: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .tf{--tf-red:#FF8A80}
html[data-theme="dark"] .tf .au-field input[type="date"]{color-scheme:dark}
html[data-theme="dark"] .tf .au-field textarea{color-scheme:dark}
html[data-theme="dark"] .tf-card,html[data-theme="dark"] .tf-canvas{box-shadow:0 22px 50px rgba(0,0,0,.5)}
html[data-theme="dark"] .tf-canvas{background:#FFF7E8;border-color:rgba(255,243,222,.4)}
/* Keep the colouring canvas on a light palette in dark mode so its unpainted
   drawing, progress copy, and colour swatches retain clear contrast. */
html[data-theme="dark"] .tf-canvas{--text:#3D2925;--text-soft:#765E53;--surface:#FFF7E8;--surface-soft:#F3E5D1;--border-strong:#8D746A}
html[data-theme="dark"] .tf-canvas::before{border-color:rgba(61,41,37,.3)}
html[data-theme="dark"] .tf-canvas .tf-r:not(.on){fill:#F3E5D1;stroke:#49332D}
html[data-theme="dark"] .tf-canvas .tf-cloud{fill:#FFF7E8;stroke:#49332D}
html[data-theme="dark"] .tf-canvas .r-ray{stroke:#49332D}
html[data-theme="dark"] .tf-canvas .r-rope{stroke:#49332D}
html[data-theme="dark"] .tf-hl{color:var(--apricot)}
html[data-theme="dark"] .tf-summary{background:color-mix(in srgb,var(--tf-red) 14%,var(--surface))}
html[data-theme="dark"] .tf-mini{background:color-mix(in srgb,var(--surface) 90%,transparent)}


/* ============================================================
   MIX N MUSE — COMING SOON DARK MODE
   PAGE-SCOPED ONLY
   ============================================================ */

html[data-theme="dark"] .cs-page {
    background: var(--canvas, #261B19);
    color: var(--text, #FFF3DE);
}


html[data-theme="dark"] .cs-coming-soon {

    background:
        radial-gradient(
            circle at 72% 20%,
            rgba(255, 104, 77, .08),
            transparent 27%
        ),
        var(--canvas, #261B19);
}


/* Controls */

html[data-theme="dark"] .cs-control {
    background: var(--surface, #30211F);

    color: var(--text, #FFF3DE);

    border-color:
        rgba(255, 243, 222, .16);

    box-shadow:
        0 10px 25px rgba(0,0,0,.22);
}


html[data-theme="dark"] .cs-control:hover {
    background: var(--surface-soft, #3A2926);

    color: var(--vermillion, #FF684D);

    border-color:
        rgba(255,104,77,.35);
}


/* Eyebrow */

html[data-theme="dark"] .cs-eyebrow {

    background:
        rgba(48, 33, 31, .82);

    border-color:
        rgba(255,243,222,.18);

    color: var(--text, #FFF3DE);
}


/* Main text */

html[data-theme="dark"] .cs-title {
    color: var(--text, #FFF3DE);
}


html[data-theme="dark"] .cs-title-accent {
    color: var(--vermillion, #FF684D);
}


html[data-theme="dark"] .cs-description,
html[data-theme="dark"] .cs-time span,
html[data-theme="dark"] .cs-progress-label,
html[data-theme="dark"] .cs-footer-note {
    color: var(--text-soft, #EAD9BF);
}


html[data-theme="dark"] .cs-mini-message {
    background:
        rgba(99,206,201,.07);

    border-left-color:
        var(--aqua, #63CEC9);
}


html[data-theme="dark"] .cs-mini-message p {
    color: var(--text, #FFF3DE);
}


/* Art */

html[data-theme="dark"] .cs-paint-back-a {
    background: var(--saffron, #F4C052);
    opacity: .28;
}


html[data-theme="dark"] .cs-paint-back-b {
    background: var(--apricot, #FFAA87);
    opacity: .24;
}


html[data-theme="dark"] .cs-paint-back-c {
    background: var(--aqua, #63CEC9);
    opacity: .20;
}


html[data-theme="dark"] .cs-child-art {
    filter:
        drop-shadow(
            0 25px 26px rgba(0,0,0,.36)
        );
}


html[data-theme="dark"] .cs-art-circle {
    border-color:
        rgba(255,104,77,.32);
}


html[data-theme="dark"] .cs-art-circle::before,
html[data-theme="dark"] .cs-art-circle::after {
    border-color:
        rgba(244,192,82,.28);
}


/* Progress */

html[data-theme="dark"] .cs-progress {
    background:
        rgba(255,243,222,.10);
}


html[data-theme="dark"] .cs-progress-fill {
    background:
        linear-gradient(
            90deg,
            var(--vermillion, #FF684D),
            var(--saffron, #F4C052),
            var(--apricot, #FFAA87)
        );
}


html[data-theme="dark"] .cs-progress-dot {
    border-color:
        var(--canvas, #261B19);
}


/* Home button */

html[data-theme="dark"] .cs-home-button {
    background: var(--vermillion, #FF684D);

    color: var(--btn-text, #261B19);

    border-color: var(--vermillion, #FF684D);
}


html[data-theme="dark"] .cs-home-button::before {
    background: var(--saffron, #F4C052);
}


html[data-theme="dark"] .cs-home-button:hover {
    color: var(--on-pigment, #3D2925);
}


/* Decorative */

html[data-theme="dark"] .cs-ring-a,
html[data-theme="dark"] .cs-ring-b {
    opacity: .55;
}


html[data-theme="dark"] .cs-doodle path {
    stroke: var(--apricot, #FFAA87);
}


html[data-theme="dark"] .cs-footer-note {
    border-top-color:
        rgba(255,243,222,.12);
}


html[data-theme="dark"] .cs-footer-note span:first-child {
    color: var(--text, #FFF3DE);
}

/* LIVING CANVAS HERO: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .lc-bw{filter:grayscale(1) contrast(.95) brightness(.78)}
html[data-theme="dark"] .lc:not(.js) .lc-bw{filter:none}
html[data-theme="dark"] .lc-frame{box-shadow:0 14px 0 rgba(0,0,0,.4)}
html[data-theme="dark"] .lc-stats li{box-shadow:0 8px 18px rgba(0,0,0,.3)}
html[data-theme="dark"] .lc-stats b{color:var(--apricot)}
html[data-theme="dark"] .lc-hl{color:var(--apricot)}
html[data-theme="dark"] .lc-btn-g:hover,html[data-theme="dark"] .lc-btn-g:focus-visible{color:#261B19}
html[data-theme="dark"] .lc-rib{background:var(--surface-soft);color:var(--text)}

/* A DAY IN CLASS: dark mode (colour tokens already come from your theme blocks) */
html[data-theme="dark"] .cd-hl{color:var(--apricot)}
html[data-theme="dark"] .cd-stage{box-shadow:0 8px 0 rgba(0,0,0,.4)}
html[data-theme="dark"] .cd-card{box-shadow:0 10px 24px rgba(0,0,0,.25)}
html[data-theme="dark"] .cd-act .cd-card{box-shadow:0 12px 0 -4px color-mix(in srgb,var(--c) 40%,transparent)}
html[data-theme="dark"] .cd-k{color:#261B19}
html[data-theme="dark"] .cd-btn{color:#261B19}
html[data-theme="dark"] .cd-num{-webkit-text-stroke-color:color-mix(in srgb,var(--c) 85%,transparent)}


/* ============================================================
   MIX N MUSE — TRIAL BOOKING DRAWING
   DARK MODE CONTRAST FIX ONLY
   Does not affect light mode or any other section.
============================================================ */

/* Main uncoloured drawing outlines */
html[data-theme="dark"] .tf .tf-r:not(.r-ray) {
    stroke: var(--text);
}

/* Balloon ropes */
html[data-theme="dark"] .tf .r-rope {
    stroke: var(--text);
}

/* Cloud outline */
html[data-theme="dark"] .tf .tf-cloud {
    stroke: var(--text);
}

/* Balloon outer outline */
html[data-theme="dark"] .tf .tf-outline {
    stroke: var(--text);
}

/* Bunting/string outlines */
html[data-theme="dark"] .tf .tf-string {
    stroke: var(--text);
}

/* Decorative stars/sparks */
html[data-theme="dark"] .tf .tf-canvas .sc-spark {
    stroke: var(--text);
}

/* Keep the progress/canvas text clearly readable */
html[data-theme="dark"] .tf .tf-prog b {
    color: var(--text);
}

html[data-theme="dark"] .tf .tf-prog .msg {
    color: var(--text-soft);
}

/* Keep the small progress counter readable */
html[data-theme="dark"] .tf .tf-mini b {
    color: var(--text);
}

/* Keep the dashed canvas border visible */
html[data-theme="dark"] .tf .tf-canvas::before {
    border-color: var(--border-strong);
}