/* ============================================================
   MIX N MUSE
   SHARED NAVBAR CSS
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    font-family: "Manrope", sans-serif;
    background: var(--page-bg);
    color: var(--text-main);
    overflow-x: hidden;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

body.menu-open {
    overflow: hidden;
}

button,
a {
    font-family: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 12px 24px;
    pointer-events: none;
}

.main-navbar {
    position: relative;

    width: min(100%, 1440px);
    min-height: 72px;

    margin: 0 auto;
    padding: 8px 12px;

    display: grid;
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr) minmax(260px, auto);
    align-items: center;
    gap: 20px;

    border: 1px solid var(--nav-border);
    border-radius: 18px;

    background: var(--nav-bg);
    box-shadow: var(--nav-shadow);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    pointer-events: auto;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand-logo {
    width: 185px;
    height: 58px;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.brand-logo-svg {
    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;
}


/* Exact logo typography */
.logo-wordmark {
    font-family: "DynaPuff", cursive;
    font-size: 46px;
    font-weight: 500;
    fill: var(--logo-text);
}

.logo-n {
    fill: var(--logo-aqua);
}

.logo-tagline {
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 3.5px;
    fill: var(--logo-text);
    opacity: 0.75;
}

.logo-left-circle {
    fill: var(--logo-vermilion);
}

.logo-right-circle {
    fill: var(--logo-saffron);
}

.logo-overlap {
    fill: var(--logo-apricot);
}

.logo-spark {
    fill: var(--logo-aqua);
}


/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */

.desktop-navigation {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(8px, 1.2vw, 24px);
}

.nav-link,
.nav-dropdown-trigger {
    position: relative;

    min-height: 44px;
    padding: 9px 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border-radius: 10px;

    background: transparent;
    color: var(--nav-text);

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.nav-link:hover,
.nav-dropdown-trigger:hover {
    color: var(--nav-hover-text);
    background: var(--nav-hover-bg);
}

.nav-link:focus-visible,
.nav-dropdown-trigger:focus-visible,
.icon-control:focus-visible,
.nav-cta:focus-visible,
.hamburger-control:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-submenu-link:focus-visible,
.mobile-menu-cta:focus-visible,
.mobile-close:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}


/* Active navigation */
.nav-link.active,
.nav-dropdown-trigger.active {
    color: var(--nav-active-text);
    background: var(--nav-active-bg);
}


/* ============================================================
   HOME DROPDOWN
   ============================================================ */

.nav-dropdown {
    position: relative;
}

.dropdown-chevron {
    width: 15px;
    height: 15px;

    flex-shrink: 0;

    transition: transform 0.25s ease;
}

.nav-dropdown.open .dropdown-chevron {
    transform: rotate(180deg);
}

.desktop-dropdown-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 50%;

    width: 170px;

    padding: 7px;

    transform:
        translate(-50%, -8px)
        scale(0.98);

    transform-origin: top center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    border: 1px solid var(--dropdown-border);
    border-radius: 14px;

    background: var(--dropdown-bg);
    box-shadow: var(--dropdown-shadow);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.nav-dropdown.open .desktop-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, 0)
        scale(1);
}

.dropdown-item {
    min-height: 42px;

    padding: 10px 13px;

    display: flex;
    align-items: center;

    border-radius: 9px;

    color: var(--dropdown-text);

    font-size: 14px;
    font-weight: 500;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.dropdown-item:hover {
    color: var(--dropdown-hover-text);
    background: var(--dropdown-hover-bg);
}

.dropdown-item.active {
    color: var(--nav-active-text);
    background: var(--nav-active-bg);
}


/* ============================================================
   DESKTOP ACTIONS
   ============================================================ */

.desktop-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    min-width: 0;
}

.icon-control {
    min-width: 42px;
    min-height: 42px;

    padding: 8px 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border-radius: 10px;

    background: var(--control-bg);
    color: var(--control-text);

    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.icon-control:hover {
    color: var(--control-hover-text);
    background: var(--control-hover-bg);

    transform: translateY(-1px);
}

.icon-control svg {
    width: 19px;
    height: 19px;

    flex-shrink: 0;
}

.control-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}


/* ============================================================
   SUN / MOON
   ============================================================ */

.sun-icon {
    display: none;
}

html[data-theme="light"] .moon-icon {
    display: block;
}

html[data-theme="dark"] .sun-icon {
    display: block;
}

html[data-theme="dark"] .moon-icon {
    display: none;
}


/* ============================================================
   PRIMARY CTA
   ============================================================ */

.nav-cta,
.mobile-menu-cta {
    min-height: 44px;

    padding: 10px 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 11px;

    background: var(--cta-bg);
    color: var(--cta-text);

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

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

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.nav-cta svg,
.mobile-menu-cta svg {
    width: 17px;
    height: 17px;

    transition: transform 0.25s ease;
}

.nav-cta:hover,
.mobile-menu-cta:hover {
    background: var(--cta-hover-bg);

    transform: translateY(-2px);

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

.nav-cta:hover svg,
.mobile-menu-cta:hover svg {
    transform: translateX(3px);
}


/* ============================================================
   MOBILE ACTIONS
   ============================================================ */

.mobile-actions {
    display: none;

    align-items: center;
    justify-content: flex-end;

    gap: 5px;
}

.hamburger-control {
    width: 44px;
    height: 44px;

    padding: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;

    border-radius: 10px;

    background: var(--control-bg);
    color: var(--control-text);

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.hamburger-control:hover {
    background: var(--control-hover-bg);
    color: var(--control-hover-text);
}

.hamburger-control span {
    display: block;

    width: 20px;
    height: 2px;

    border-radius: 10px;

    background: currentColor;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* ============================================================
   FULL SCREEN MOBILE MENU
   ============================================================ */

.mobile-menu {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100dvh;
    min-height: 100vh;

    z-index: 3000;

    visibility: hidden;
    pointer-events: none;

    opacity: 0;

    background: var(--mobile-menu-bg);

    overflow: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.mobile-menu-inner {
    width: 100%;
    height: 100%;

    min-height: 100dvh;

    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;
}


/* Menu header */
.mobile-menu-header {
    width: 100%;
    min-height: 66px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-shrink: 0;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--mobile-menu-border);
}

.mobile-menu-brand {
    width: 175px;
    height: 55px;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.mobile-menu-logo {
    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;
}

.mobile-close {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    border-radius: 10px;

    background: var(--control-bg);
    color: var(--control-text);

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.mobile-close:hover {
    background: var(--control-hover-bg);
    color: var(--control-hover-text);

    transform: rotate(3deg);
}

.mobile-close span {
    position: absolute;

    width: 20px;
    height: 2px;

    border-radius: 5px;

    background: currentColor;
}

.mobile-close span:first-child {
    transform: rotate(45deg);
}

.mobile-close span:last-child {
    transform: rotate(-45deg);
}


/* ============================================================
   MOBILE MENU NAVIGATION
   ============================================================ */

.mobile-menu-navigation {
    width: 100%;

    flex: 1;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 24px 0 20px;
}

.mobile-nav-group {
    width: 100%;
}

.mobile-nav-link {
    width: 100%;
    min-height: 54px;

    padding: 13px 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 12px;

    background: transparent;
    color: var(--mobile-menu-text);

    font-size: 18px;
    font-weight: 500;

    text-align: center;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.mobile-nav-link:hover {
    color: var(--mobile-menu-hover-text);
    background: var(--mobile-menu-hover-bg);
}

.mobile-nav-link.active {
    color: var(--mobile-menu-active-text);
    background: var(--mobile-menu-active-bg);
}

.mobile-chevron {
    width: 17px;
    height: 17px;

    transition: transform 0.25s ease;
}

.mobile-home-trigger.open .mobile-chevron {
    transform: rotate(180deg);
}


/* ============================================================
   MOBILE SUBMENU
   ============================================================ */

.mobile-submenu {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    transition:
        max-height 0.3s ease,
        opacity 0.25s ease;
}

.mobile-submenu.open {
    max-height: 160px;
    opacity: 1;
}

.mobile-submenu-link {
    width: min(280px, 90%);

    min-height: 44px;

    padding: 10px 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: var(--mobile-submenu-text);

    font-size: 15px;
    font-weight: 500;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.mobile-submenu-link:hover {
    background: var(--mobile-submenu-hover-bg);
    color: var(--mobile-submenu-hover-text);
}

.mobile-submenu-link.active {
    background: var(--mobile-menu-active-bg);
    color: var(--mobile-menu-active-text);
}


/* ============================================================
   MOBILE MENU FOOTER / CTA
   ============================================================ */

.mobile-menu-footer {
    width: 100%;

    margin-top: auto;

    padding-top: 18px;

    flex-shrink: 0;
}

.mobile-menu-cta {
    width: 100%;
    min-height: 52px;

    font-size: 15px;
}


/* ============================================================
   LAPTOP-L
   1280px – 1439px
   ============================================================ */

@media (min-width: 1280px) and (max-width: 1439px) {

    .site-header {
        padding: 11px 22px;
    }

    .main-navbar {
        grid-template-columns:
            minmax(185px, 210px)
            minmax(0, 1fr)
            minmax(250px, 275px);

        gap: 16px;
    }

    .brand-logo {
        width: 180px;
    }

    .desktop-navigation {
        gap: 8px;
    }

    .nav-link,
    .nav-dropdown-trigger {
        padding-inline: 9px;
        font-size: 13.5px;
    }

    .desktop-actions {
        gap: 6px;
    }

    .nav-cta {
        padding-inline: 14px;
    }
}


/* ============================================================
   LAPTOP
   1024px – 1279px
   ============================================================ */

@media (min-width: 1024px) and (max-width: 1279px) {

    .site-header {
        padding: 10px 16px;
    }

    .main-navbar {
        min-height: 68px;

        grid-template-columns:
            minmax(165px, 185px)
            minmax(0, 1fr)
            minmax(225px, 245px);

        gap: 10px;

        padding-inline: 9px;
    }

    .brand-logo {
        width: 165px;
        height: 53px;
    }

    .desktop-navigation {
        gap: 3px;
    }

    .nav-link,
    .nav-dropdown-trigger {
        min-height: 42px;
        padding-inline: 7px;

        font-size: 12.5px;
    }

    .dropdown-chevron {
        width: 13px;
        height: 13px;
    }

    .desktop-actions {
        gap: 4px;
    }

    .icon-control {
        min-width: 38px;
        min-height: 40px;
        padding-inline: 7px;
    }

    .icon-control svg {
        width: 17px;
        height: 17px;
    }

    .control-label {
        font-size: 11px;
    }

    .nav-cta {
        min-height: 40px;

        padding-inline: 11px;

        font-size: 12px;
    }

    .nav-cta svg {
        width: 15px;
        height: 15px;
    }
}


/* ============================================================
   TABLET
   768px – 1023px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .site-header {
        padding: 10px 14px;
    }

    .main-navbar {
        min-height: 66px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 7px 10px;

        border-radius: 16px;
    }

    .brand-logo {
        width: 170px;
        height: 52px;
    }

    .desktop-navigation,
    .desktop-actions {
        display: none;
    }

    .mobile-actions {
        display: flex;
    }

    .mobile-menu-brand {
        width: 180px;
    }

    .mobile-nav-link {
        font-size: 19px;
    }
}


/* ============================================================
   MOBILE-L
   425px – 767px
   ============================================================ */

@media (min-width: 425px) and (max-width: 767px) {

    .site-header {
        padding: 8px 10px;
    }

    .main-navbar {
        min-height: 62px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 6px 8px;

        border-radius: 15px;
    }

    .brand-logo {
        width: 158px;
        height: 48px;
    }

    .desktop-navigation,
    .desktop-actions {
        display: none;
    }

    .mobile-actions {
        display: flex;
    }

    .icon-control {
        width: 40px;
        min-width: 40px;
        height: 40px;

        padding: 7px;
    }

    .icon-control svg {
        width: 18px;
        height: 18px;
    }

    .control-label {
        display: none;
    }

    .hamburger-control {
        width: 40px;
        height: 40px;
    }

    .mobile-menu-brand {
        width: 168px;
        height: 51px;
    }

    .mobile-nav-link {
        min-height: 52px;
        font-size: 18px;
    }
}


/* ============================================================
   MOBILE-M
   375px – 424px
   ============================================================ */

@media (min-width: 375px) and (max-width: 424px) {

    .site-header {
        padding: 7px 8px;
    }

    .main-navbar {
        min-height: 60px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 5px 7px;

        border-radius: 14px;
    }

    .brand-logo {
        width: 148px;
        height: 45px;
    }

    .desktop-navigation,
    .desktop-actions {
        display: none;
    }

    .mobile-actions {
        display: flex;
        gap: 3px;
    }

    .icon-control {
        width: 38px;
        min-width: 38px;
        height: 38px;

        padding: 6px;
    }

    .icon-control svg {
        width: 17px;
        height: 17px;
    }

    .control-label {
        display: none;
    }

    .hamburger-control {
        width: 38px;
        height: 38px;
    }

    .hamburger-control span {
        width: 19px;
    }

    .mobile-menu-brand {
        width: 158px;
        height: 48px;
    }

    .mobile-nav-link {
        min-height: 50px;
        font-size: 17px;
    }
}


/* ============================================================
   MOBILE-S
   320px – 374px
   ============================================================ */

@media (max-width: 374px) {

    .site-header {
        padding: 6px 6px;
    }

    .main-navbar {
        min-height: 57px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 4px 6px;

        border-radius: 13px;
    }

    .brand-logo {
        width: 137px;
        height: 42px;
    }

    .desktop-navigation,
    .desktop-actions {
        display: none;
    }

    .mobile-actions {
        display: flex;
        gap: 2px;
    }

    .icon-control {
        width: 36px;
        min-width: 36px;
        height: 36px;

        padding: 5px;
    }

    .icon-control svg {
        width: 16px;
        height: 16px;
    }

    .control-label {
        display: none;
    }

    .hamburger-control {
        width: 36px;
        height: 36px;

        padding: 8px;
    }

    .hamburger-control span {
        width: 18px;
    }

    .mobile-menu-brand {
        width: 145px;
        height: 44px;
    }

    .mobile-nav-link {
        min-height: 48px;
        font-size: 16px;
    }

    .mobile-submenu-link {
        font-size: 14px;
    }

    .mobile-menu-cta {
        min-height: 50px;
        font-size: 14px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Keep the Home 2 vermilion CTA isolated from the later legacy .h2cta rules. */
html[data-theme="light"] #home2-cta {
    width: min(calc(100% - 32px), 1380px);
    margin: clamp(52px, 7vw, 104px) auto clamp(56px, 8vw, 120px);
    padding: 0;
    background: var(--vermillion);
    color: var(--h2cta-cream);
}
/* ============================================================
   MIX N MUSE — HAMBURGER MENU ALIGNMENT FIX
   Paste at the VERY END of assets/css/styles.css
   Links use the full width and align to the start
   (left in LTR, right in RTL).
   ============================================================ */

.mobile-menu-navigation {
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
    padding: 20px 0;
}

.mobile-nav-group {
    width: 100%;
}

.mobile-nav-link {
    width: 100%;
    justify-content: flex-start;   /* left in LTR / right in RTL */
    text-align: start;
    padding: 14px 16px;
}

/* Home row: label at the start, chevron at the far end */
.mobile-home-trigger {
    justify-content: space-between;
}

/* Submenu uses the full width and is indented from the start */
.mobile-submenu {
    align-items: stretch;
}

.mobile-submenu-link {
    width: 100%;
    justify-content: flex-start;
    text-align: start;
    padding: 10px 16px;
    padding-inline-start: 32px;
}

/* CTA: full width, text at the start, arrow at the end */
.mobile-menu-cta {
    width: 100%;
    justify-content: space-between;
    padding-inline: 20px;
}


/* MIX N MUSE – HERO SECTION (index.html, section 1) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;background:var(--canvas);color:var(--text);overflow-x:hidden;transition:background-color .3s,color .3s}
a,button{font:inherit;color:inherit;text-decoration:none;cursor:pointer}
button{border:0;background:none}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:root{--fs-h1:32px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--r-big:84px;--ease:cubic-bezier(.77,0,.18,1);--dir:1}

.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding-top:96px}
.wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.hero-body{flex:1;display:flex;align-items:center}
.hero-main{width:100%;display:grid;gap:36px;align-items:center;padding-block:0 36px}
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;animation:morph 16s ease-in-out infinite alternate}
.blob-1{width:min(60vw,520px);aspect-ratio:1;inset:-8% auto auto -12%;background:var(--apricot);opacity:.3}
.blob-2{width:min(50vw,440px);aspect-ratio:1;inset:auto -10% 12% auto;background:var(--aqua);opacity:.22;animation-delay:-7s}

/* copy */
.tag{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vermillion)}
h1{font-family:"DynaPuff",cursive;font-weight:500;font-size:var(--fs-h1);line-height:1.18;margin:0 0 16px;color:var(--text)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.w>span{display:inline-block;transform:translateY(118%)}
.hl{color:var(--vermillion);position:relative}
.w.hl{padding-bottom:.34em;margin-bottom:-.34em}
.hl svg{position:absolute;inset-inline:0;bottom:.08em;width:100%;height:.3em;overflow:visible}
.hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.lead{max-width:32em;margin:0 0 24px;color:var(--text-soft)}
.fx{opacity:0;transform:translateY(24px)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 22px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;transition:transform .3s,color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-3px)}.btn:hover::before{transform:scaleX(1)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.btn:hover svg{transform:translateX(5px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-text);box-shadow:0 12px 26px -12px var(--btn-bg)}
.btn-primary::before{background:var(--btn-hover)}
.btn-ghost{border-color:var(--text);color:var(--text)}
.btn-ghost::before{background:var(--saffron)}
.btn-ghost:hover{color:var(--on-pigment)}

/* collage (images slide every second) */
.collage{position:relative;display:grid;gap:10px;grid-template-columns:1.35fr 1fr;grid-template-rows:1.15fr .85fr;width:100%;aspect-ratio:1/.92}
.splat{position:absolute;z-index:-1;inset:-9%;width:118%;height:118%;fill:var(--apricot);opacity:var(--splat);animation:drift 14s ease-in-out infinite alternate}
.tile{position:relative;overflow:hidden;isolation:isolate;background:var(--surface-soft);box-shadow:var(--shadow);border-radius:26px;opacity:0;transform:translateY(46px) rotate(var(--rot,0deg)) scale(.95)}
.tile-a{grid-row:1/3;border-start-start-radius:var(--r-big);--rot:-3deg}
.tile-b{border-start-end-radius:calc(var(--r-big)*.7);--rot:3deg}
.tile-c{border-end-end-radius:calc(var(--r-big)*.7);--rot:-2deg}
.is-ready .tile{opacity:1;transform:none;transition:transform 1.1s var(--td,.2s) cubic-bezier(.2,.9,.25,1.12),opacity .6s var(--td,.2s)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0}
.tile img.is-prev{opacity:1;z-index:1}
.tile img.is-on{opacity:1;z-index:2;animation:wipeA 1s cubic-bezier(.45,0,.25,1) both;will-change:clip-path,transform}
.tile img.is-on.v1{animation-name:wipeB}.tile img.is-on.v2{animation-name:wipeC}.tile img.is-on.v3{animation-name:wipeD}
.tile img.is-on.is-init{animation:none}
.swipe{display:none;position:absolute;inset-block:0;inset-inline-start:0;width:34%;z-index:3;pointer-events:none;opacity:0;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);will-change:transform}
.swipe.go{animation:swipe .55s cubic-bezier(.4,0,.2,1)}
.chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.3;box-shadow:var(--shadow);animation:wobble 6s ease-in-out infinite alternate}
.chip i{width:10px;height:10px;border-radius:50%;flex:none}
.chip-1{inset-inline-start:-4px;bottom:-14px}.chip-1 i{background:var(--aqua)}
.chip-2{inset-inline-end:-2px;top:-14px;animation-delay:-3s}.chip-2 i{background:var(--vermillion)}
.spark{position:absolute;z-index:4;width:26px;animation:twinkle 3s ease-in-out infinite}
.spark-1{inset-inline-end:-14px;bottom:38%;fill:var(--saffron)}
.spark-2{inset-inline-start:-18px;top:12%;width:20px;fill:var(--coral);animation-delay:-1.5s}

/* value strip */
.strip{border-top:1px solid var(--border);background:var(--surface)}
.strip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 8px;padding-block:12px}
.vi{display:flex;align-items:center;gap:12px;padding:8px 4px}
.vi-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--on-pigment)}
.vi-ic svg{width:22px;height:22px}
.vi:nth-child(1) .vi-ic{background:var(--saffron)}.vi:nth-child(2) .vi-ic{background:var(--aqua)}
.vi:nth-child(3) .vi-ic{background:var(--apricot)}.vi:nth-child(4) .vi-ic{background:var(--coral)}
.vi b{display:block;font-size:var(--fs-btn);font-weight:600;line-height:1.3;color:var(--text)}
.vi div span{display:block;font-size:var(--fs-small);line-height:1.4;color:var(--text-soft)}

/* preview-only toggles: delete when your navbar has them */
.preview-tools{position:fixed;inset-block-end:14px;inset-inline-end:14px;z-index:50;display:flex;gap:8px}
.preview-tools button{min-height:44px;padding:0 14px;border-radius:12px;background:var(--surface);color:var(--text);border:1.5px solid var(--border-strong);font-size:var(--fs-small);font-weight:700;box-shadow:var(--shadow)}

/* motion */
.is-ready .w>span{transform:none;transition:transform .9s calc(.25s + var(--i)*.09s) cubic-bezier(.2,.85,.2,1)}
.is-ready .hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s 1.1s ease}
.is-ready .fx{opacity:1;transform:none;transition:opacity .8s var(--d,.8s),transform .8s var(--d,.8s) cubic-bezier(.2,.7,.2,1)}
@keyframes wipeA{from{clip-path:inset(0 100% 0 0);transform:scale(1.06)}to{clip-path:inset(0);transform:scale(1)}}
@keyframes wipeB{from{clip-path:inset(100% 0 0 0);transform:scale(1.06)}to{clip-path:inset(0);transform:scale(1)}}
@keyframes wipeC{from{clip-path:circle(0% at 50% 50%);transform:scale(1.08)}to{clip-path:circle(75% at 50% 50%);transform:scale(1)}}
@keyframes wipeD{from{clip-path:inset(0 0 0 100%);transform:scale(1.06)}to{clip-path:inset(0);transform:scale(1)}}
@keyframes swipe{from{opacity:.85;transform:translateX(calc(-100% * var(--dir)))}to{opacity:.85;transform:translateX(calc(300% * var(--dir)))}}
@keyframes wobble{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(2deg) translateY(-5px)}}
@keyframes twinkle{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@keyframes morph{to{border-radius:42% 58% 63% 37%/45% 35% 65% 55%;transform:translate(30px,24px) scale(1.08)}}
@keyframes drift{to{transform:rotate(14deg) scale(1.05)}}

/* responsive */
@media (min-width:375px){:root{--fs-h1:34px;--r-big:96px}}
@media (min-width:425px){:root{--fs-h1:38px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px;--r-big:110px}.collage{aspect-ratio:1/.82}}
@media (min-width:768px){:root{--fs-h1:42px;--gutter:24px;--r-big:150px}.hero{padding-top:112px}.collage{aspect-ratio:1.5/1}.strip-grid{grid-template-columns:repeat(4,1fr)}.spark{width:34px}}
@media (min-width:1024px){:root{--fs-h1:44px;--gutter:clamp(24px,3vw,40px);--r-big:170px}
  .hero{min-height:100svh}.hero-main{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;padding-block:8px 40px}
  .collage{aspect-ratio:auto;height:clamp(400px,calc(100svh - 310px),620px)}.chip-1{inset-inline-start:-18px}}
@media (min-width:1280px){:root{--fs-h1:48px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}}
@media (min-width:1440px){:root{--fs-h1:52px}}
@media (max-width:374px){.btn{width:100%}.chip,.spark{display:none}.vi-ic{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}
  .swipe{display:none}.tile img.is-on{animation:none!important}
}

/* MIX N MUSE - SECTION 2: CLASSES BY AGE (additive; every class is prefixed .ag-, tokens are scoped to .ages) */
.ages,.ages *,.ages *::before,.ages *::after{box-sizing:border-box}
.ages{font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
:where(.ages) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}
:where(.ages) button{border:0;background:none}
:where(.ages) img{display:block;max-width:100%}
.ages :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ages{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--r-big:90px;--ease:cubic-bezier(.45,0,.25,1)}
.ages{position:relative;overflow:hidden;isolation:isolate;padding-block:48px 56px}
.ag-wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.ag-blob{position:absolute;z-index:-1;width:min(60vw,520px);aspect-ratio:1;border-radius:50%;filter:blur(80px);background:var(--apricot);opacity:.25;inset:auto -12% -10% auto;animation:agMorph 16s ease-in-out infinite alternate}
.ag-squig{display:block;width:100%;height:14px;margin-bottom:28px;overflow:visible}
.ag-squig path{fill:none;stroke:var(--saffron);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.in-view .ag-squig path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease}
.ag-head{display:grid;gap:12px;margin-bottom:32px;align-items:end}
.ag-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.ages h2,.ages h3{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2}
.ages h2{font-size:var(--fs-h2)}.ages h3{font-size:var(--fs-h3)}
.ag-hl{position:relative;display:inline-block;color:var(--vermillion)}
.ag-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.ag-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .ag-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .8s ease}
.ag-lead{margin:0;color:var(--text-soft);max-width:34em}
.ag-rv{opacity:0;transform:translateY(22px)}.in-view .ag-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
.ag-stage{display:grid;gap:20px}
/* palette */
.ag-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ag-dab{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:8px;color:var(--text);background:color-mix(in srgb,var(--c) 38%,var(--surface));border:1.5px solid var(--border-strong);border-radius:58% 42% 55% 45%/50% 58% 42% 50%;transition:transform .4s cubic-bezier(.3,1.5,.4,1),background-color .4s,border-radius .6s}
.ag-dab:nth-child(2){border-radius:45% 55% 42% 58%/58% 45% 55% 42%}.ag-dab:nth-child(3){border-radius:52% 48% 60% 40%/42% 58% 42% 58%}.ag-dab:nth-child(4){border-radius:40% 60% 48% 52%/55% 45% 58% 42%}
.ag-dab:hover{transform:translateY(-4px) rotate(-2deg)}
.ag-dab.on{background:var(--c);color:var(--on-pigment);border-color:transparent;transform:scale(1.06);box-shadow:var(--shadow)}
.ag-age{white-space:nowrap;font-family:"DynaPuff",cursive;font-weight:500;font-size:15px;line-height:1}
.ag-dn{display:none;font-weight:700;font-size:var(--fs-btn);line-height:1.25;text-align:start}.ag-dn small{display:block;font-weight:500;font-size:var(--fs-small)}
.ag-prog{position:absolute;inset-inline:22%;bottom:8px;height:3px;border-radius:3px;background:rgba(61,41,37,.18);overflow:hidden;opacity:0}
.ag-prog i{display:block;height:100%;background:var(--on-pigment);transform:scaleX(0);transform-origin:left}
.ag-dab.on .ag-prog{opacity:0}
.in-view .ag-dab.on .ag-prog i{animation:agFill 6s linear forwards}
.ages:hover .ag-prog i,.ages:focus-within .ag-prog i{animation-play-state:paused}
/* canvas */
.ag-canvas{position:relative;display:grid;background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);padding:16px;isolation:isolate}
.ag-canvas::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cw,var(--saffron));opacity:var(--wash);transition:background-color .7s}
.ag-panel{grid-area:1/1;display:grid;gap:20px;align-items:center;visibility:hidden;pointer-events:none}
.ag-panel.on,.ag-panel.out{visibility:visible}.ag-panel.on{pointer-events:auto}
.ag-art{position:relative;margin:0;transform:rotate(-1.5deg)}
.ag-frame{position:relative;overflow:hidden;aspect-ratio:4/3.1;border-radius:22px;border-start-start-radius:var(--r-big);background:var(--surface-soft);clip-path:inset(100% 0 0 0);box-shadow:var(--shadow)}
.ag-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.14)}
.ag-art::before{content:"";position:absolute;z-index:-1;inset:-12px 18% -12px -12px;border-radius:44% 56% 50% 50%/50% 44% 56% 50%;background:var(--c)}
.ag-tape{position:absolute;z-index:3;top:-10px;inset-inline-start:50%;width:84px;height:24px;margin-inline-start:-42px;transform:rotate(-4deg);background:color-mix(in srgb,var(--saffron) 72%,transparent);border-radius:3px;opacity:0}
.ag-cap{position:absolute;z-index:3;inset-inline-end:10px;bottom:-12px;padding:6px 12px;border-radius:10px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);font-size:var(--fs-small);font-weight:700;box-shadow:var(--shadow)}
.on .ag-frame{clip-path:inset(0);transition:clip-path 1s var(--ease)}.on .ag-frame img{transform:none;transition:transform 1.4s var(--ease)}.on .ag-tape{opacity:1;transition:opacity .5s 1s}
.out .ag-frame{clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease)}
.ag-kicker{margin:0 0 6px;font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.ag-kicker::before{content:"";display:inline-block;width:10px;height:10px;margin-inline-end:8px;border-radius:50%;background:var(--c)}
.ag-desc{margin:10px 0 18px;color:var(--text-soft)}
.ag-facts{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 18px}
.ag-facts div{padding-inline:12px;border-inline-start:2px dashed var(--border-strong)}.ag-facts div:first-child{padding-inline-start:0;border:0}
.ages dt{font-size:var(--fs-small);color:var(--text-soft);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.ages dd{margin:0;font-weight:700;font-size:var(--fs-btn)}
.ag-makes{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ag-makes li{padding:6px 12px 6px 10px;border-radius:99px;border:1.5px solid var(--c);background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;line-height:1.4}
.ag-makes li::before{content:"✦ ";color:var(--vermillion)}
.ag-cta{display:flex;flex-wrap:wrap;gap:12px}
.ag-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;transition:transform .3s,color .3s}
.ag-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.ag-btn:hover{transform:translateY(-3px)}.ag-btn:hover::before{transform:scaleX(1)}
.ag-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.ag-btn:hover svg{transform:translateX(5px)}
.ag-btn-primary{background:var(--btn-bg);color:var(--btn-text)}.ag-btn-primary::before{background:var(--btn-hover)}
.ag-btn-ghost{border-color:var(--text);color:var(--text)}.ag-btn-ghost::before{background:var(--c)}.ag-btn-ghost:hover{color:var(--on-pigment)}
.ag-fx{opacity:0;transform:translateY(18px)}.on .ag-fx{opacity:1;transform:none;transition:opacity .7s calc(.3s + var(--i)*.08s),transform .7s calc(.3s + var(--i)*.08s) cubic-bezier(.2,.7,.2,1)}.out .ag-fx{opacity:0;transition:opacity .25s}
@keyframes agFill{to{transform:scaleX(1)}}@keyframes agMorph{to{border-radius:42% 58% 63% 37%/45% 35% 65% 55%;transform:translate(-30px,-24px) scale(1.08)}}
@media(min-width:375px){.ages{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.ages{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}.ag-age{font-size:18px}.ag-dab{min-height:72px}.ag-canvas{padding:20px}.ag-frame{aspect-ratio:4/2.8}}
@media(min-width:768px){.ages{--fs-h2:30px;--fs-h3:22px;--gutter:24px;--r-big:120px}.ages{padding-block:64px 72px}.ag-dn{display:block}.ag-dab{gap:8px;min-height:84px;padding:10px 14px}.ag-age{font-size:22px}.ag-dn small{display:none}.ag-dn{font-size:var(--fs-small)}
  .ag-canvas{padding:32px}.ag-panel{grid-template-columns:.8fr 1.2fr;gap:36px}.ag-frame{aspect-ratio:3/4}}
@media(min-width:1024px){.ages{--fs-h2:32px;--fs-h3:24px;--gutter:clamp(24px,3vw,40px);--r-big:150px}.ages{padding-block:80px}.ag-head{grid-template-columns:1.25fr .75fr;gap:40px;margin-bottom:40px}
  .ag-stage{grid-template-columns:minmax(250px,.5fr) 1.5fr;gap:40px;align-items:stretch}
  .ag-palette{display:flex;flex-direction:column;justify-content:center;gap:16px}.ag-dab{justify-content:flex-start;min-height:92px;padding:12px 24px;gap:14px}.ag-dab:nth-child(even){margin-inline-start:32px}.ag-dn small{display:block}.ag-dn{font-size:var(--fs-btn)}.ag-age{font-size:28px;min-width:2.4ch}
  .ag-dab.on::after{content:"";position:absolute;bottom:-16px;inset-inline-start:44px;width:12px;height:24px;border-radius:0 0 12px 12px;background:var(--c);transform-origin:top;animation:agDrip 1.8s ease-in-out infinite alternate}
  .ag-prog{inset-inline:24px;bottom:12px}.ag-canvas{padding:40px}.ag-panel{gap:48px}}
@keyframes agDrip{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
@media(min-width:1280px){.ages{--fs-h2:34px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}.ag-age{font-size:30px}}
@media(min-width:1440px){.ages{--fs-h2:36px;--fs-h3:26px}}
@media(max-width:374px){.ag-btn{width:100%}.ag-facts div{padding-inline:8px}.ag-age{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}.in-view .ag-dab.on .ag-prog i{animation:none}}
.ag-d{position:absolute;pointer-events:none;display:none}
.ag-brush{z-index:2;top:22px;inset-inline-end:calc(var(--gutter) + 4px);width:108px}
.ag-tr{fill:none;stroke:var(--coral);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:agTrail 4.5s ease-in-out infinite alternate}
.ag-brush-g{transform-box:fill-box;transform-origin:50% 100%;animation:agBrush 4.5s ease-in-out infinite alternate}
.ag-spiral{bottom:14px;inset-inline-start:calc(var(--gutter) + 4px);width:68px}
.ag-spiral path{fill:none;stroke:var(--apricot);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .ag-spiral path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s .6s ease}
.ag-drop{width:18px;animation:agFloat 5s ease-in-out infinite alternate}
.ag-drop1{top:40%;inset-inline-start:6px}.ag-drop2{top:16%;inset-inline-start:44%;width:14px;animation-delay:-2s}.ag-drop3{bottom:18%;inset-inline-end:8px;width:20px;animation-delay:-3.5s}
.ag-spark{position:absolute;z-index:4;width:24px;pointer-events:none;animation:agTwinkle 3s ease-in-out infinite}
.ag-spark1{top:-12px;inset-inline-start:-10px;fill:var(--saffron)}.ag-spark2{bottom:-12px;inset-inline-end:-8px;width:20px;fill:var(--coral);animation-delay:-1.5s}
.ag-splash{position:absolute;z-index:4;top:-18px;inset-inline-end:-14px;width:58px;fill:var(--c);transform:scale(0) rotate(-30deg);pointer-events:none}
.on .ag-splash{transform:none;transition:transform .9s 1s cubic-bezier(.3,1.6,.4,1)}
@keyframes agTrail{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes agBrush{from{transform:translate(-26px,6px) rotate(-8deg)}to{transform:translate(22px,-2px) rotate(8deg)}}
@keyframes agFloat{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-14px) rotate(6deg)}}
@keyframes agTwinkle{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@media(min-width:768px){.ag-brush,.ag-spiral,.ag-drop{display:block}.ag-brush{width:120px}.ag-spiral{width:84px}}
@media(max-width:374px){.ag-spark{display:none}}

/* ============================================================
   MIX N MUSE
   SECTION 3 — DISCOVER YOUR ART WORLD
   Scoped with .daw- to avoid conflicts with existing sections
============================================================ */

.discover-art,
.discover-art *,
.discover-art *::before,
.discover-art *::after {
    box-sizing: border-box;
}

.discover-art {
    --daw-radius: 24px;
    --daw-max: 1420px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    padding: clamp(70px, 8vw, 112px) 0 clamp(58px, 7vw, 90px);

    background:
        radial-gradient(
            circle at 50% 45%,
            color-mix(
                in srgb,
                var(--saffron) 8%,
                transparent
            ),
            transparent 35%
        ),
        var(--canvas);

    color: var(--text);

    transition:
        background-color .35s ease,
        color .35s ease;
}


/* ============================================================
   MAIN CONTAINER
============================================================ */

.daw-container {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 40px),
        var(--daw-max)
    );

    margin-inline: auto;
}


/* ============================================================
   DECORATIVE PAINT CORNERS
============================================================ */

.daw-paint {
    position: absolute;
    z-index: -1;

    width: clamp(145px, 18vw, 300px);
    aspect-ratio: 1;

    opacity: .9;

    pointer-events: none;

    animation:
        dawPaintFloat 7s ease-in-out infinite alternate;
}


/* Yellow top-left */

.daw-paint-yellow {
    top: -80px;
    left: -85px;

    background: var(--saffron);

    border-radius:
        58% 42% 65% 35% /
        44% 58% 42% 56%;

    transform: rotate(-13deg);
}


/* Purple top-right */

.daw-paint-purple {
    top: -75px;
    right: -80px;

    background:
        color-mix(
            in srgb,
            var(--coral) 65%,
            var(--aqua)
        );

    border-radius:
        42% 58% 35% 65% /
        60% 40% 58% 42%;

    transform: rotate(16deg);

    animation-delay: -2s;
}


/* Aqua bottom-left */

.daw-paint-aqua {
    bottom: -125px;
    left: -95px;

    background: var(--aqua);

    border-radius:
        42% 58% 62% 38% /
        58% 42% 58% 42%;

    transform: rotate(10deg);

    animation-delay: -4s;
}


/* Orange bottom-right */

.daw-paint-orange {
    right: -95px;
    bottom: -110px;

    background: var(--apricot);

    border-radius:
        62% 38% 45% 55% /
        40% 60% 40% 60%;

    transform: rotate(-10deg);

    animation-delay: -5s;
}


/* ============================================================
   DOODLES
============================================================ */

.daw-doodle {
    position: absolute;
    z-index: 2;

    display: block;

    font-family:
        "DynaPuff",
        cursive;

    pointer-events: none;

    user-select: none;
}

.daw-star {
    font-size: clamp(30px, 3vw, 52px);
    color: var(--aqua);

    animation:
        dawDoodleFloat 4s ease-in-out infinite;
}

.daw-star-one {
    top: 115px;
    left: 5%;
}

.daw-star-two {
    top: 250px;
    right: 5%;

    color: var(--vermillion);

    animation-delay: -1.4s;
}

.daw-heart {
    right: 9%;
    bottom: 125px;

    color: var(--coral);

    font-size: clamp(35px, 4vw, 60px);

    animation:
        dawDoodleFloat 5s ease-in-out infinite;

    animation-delay: -2s;
}

.daw-spark {
    left: 3%;
    bottom: 150px;

    color: var(--saffron);

    font-size: 30px;

    animation:
        dawSparkPulse 3s ease-in-out infinite;
}


/* ============================================================
   HEADING
============================================================ */

.daw-heading {
    position: relative;

    max-width: 850px;

    margin: 0 auto clamp(48px, 6vw, 72px);

    text-align: center;
}


/* eyebrow */

.daw-eyebrow {
    display: block;

    margin-bottom: 6px;

    font-family:
        "DynaPuff",
        cursive;

    font-size: clamp(18px, 2vw, 27px);

    font-weight: 500;

    letter-spacing: .12em;

    color: var(--text);

    text-transform: uppercase;
}


/* title */

.discover-art h2 {
    margin: 0;

    font-family:
        "DynaPuff",
        cursive;

    font-size:
        clamp(
            42px,
            6vw,
            76px
        );

    line-height: .98;

    font-weight: 500;

    letter-spacing: -.02em;
}

.daw-title-red {
    color: var(--vermillion);
}

.daw-title-aqua {
    color: var(--aqua);
}


/* Intro */

.daw-intro {
    margin:
        clamp(16px, 2vw, 22px)
        auto
        0;

    max-width: 600px;

    color: var(--text);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            15px,
            1.4vw,
            18px
        );

    line-height: 1.65;
}


/* ============================================================
   HEADING PAINT STROKES
============================================================ */

.daw-heading-strokes {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 20px;
}

.daw-heading-strokes i {
    display: block;

    width: 28px;
    height: 7px;

    border-radius: 50%;

    transform: rotate(-7deg);

    background: var(--vermillion);
}

.daw-heading-strokes i:nth-child(2) {
    width: 44px;

    background: var(--saffron);

    transform: rotate(5deg);
}

.daw-heading-strokes i:nth-child(3) {
    background: var(--aqua);

    transform: rotate(-3deg);
}


/* ============================================================
   ART GRID
============================================================ */

.daw-art-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        clamp(18px, 2.4vw, 38px);

    align-items: start;
}


/* ============================================================
   SECTION 3 — DISCOVER YOUR ART WORLD
   ART ITEMS
============================================================ */

.art-world-item {
    position: relative;
    min-width: 0;

    text-align: center;

    opacity: 0;

    transform:
        translateY(42px)
        rotate(var(--art-start-rotate, 0deg));

    transition:
        opacity .75s ease,
        transform .8s cubic-bezier(.2, .8, .2, 1);
}


/* Individual starting rotations */

.art-world-item:nth-child(1) {
    --art-start-rotate: -1.5deg;
    --art-color: var(--vermillion);
}

.art-world-item:nth-child(2) {
    --art-start-rotate: 1.2deg;
    --art-color: var(--saffron);
}

.art-world-item:nth-child(3) {
    --art-start-rotate: -1deg;
    --art-color: var(--aqua);
}

.art-world-item:nth-child(4) {
    --art-start-rotate: 1.6deg;
    --art-color: var(--coral);
}


/* Activated by the existing section animation */

.discover-art.daw-visible .art-world-item {
    opacity: 1;

    transform:
        translateY(0)
        rotate(0deg);

    transition-delay:
        calc(var(--art-index, 0) * .12s);
}

.art-world-item:nth-child(1) {
    --art-index: 0;
}

.art-world-item:nth-child(2) {
    --art-index: 1;
}

.art-world-item:nth-child(3) {
    --art-index: 2;
}

.art-world-item:nth-child(4) {
    --art-index: 3;
}


/* ============================================================
   IMAGE AREA
   Large colorful background behind transparent PNG
============================================================ */

.art-world-visual {
    position: relative;

    width: 100%;
    height: clamp(260px, 25vw, 350px);

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    isolation: isolate;
}


/* ============================================================
   LARGE COLORFUL PAINT BACKGROUND

   This is intentionally much bigger than the PNG.
   It replaces the old square image/card appearance.
============================================================ */

.art-world-paint-bg {
    position: absolute;

    z-index: 0;

    width: 92%;
    height: 78%;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-4deg);

    border-radius:
        48% 52% 42% 58%
        /
        56% 42% 58% 44%;

    background: var(--art-color);

    opacity: .92;

    transition:
        transform .55s cubic-bezier(.2, .9, .25, 1),
        border-radius .55s ease,
        width .55s ease,
        height .55s ease;
}


/* Individual paint shapes */

.art-world-item:nth-child(1)
.art-world-paint-bg {
    transform:
        translate(-50%, -50%)
        rotate(-7deg);

    border-radius:
        54% 46% 40% 60%
        /
        45% 58% 42% 55%;
}

.art-world-item:nth-child(2)
.art-world-paint-bg {
    transform:
        translate(-50%, -50%)
        rotate(5deg);

    border-radius:
        42% 58% 56% 44%
        /
        56% 43% 57% 44%;
}

.art-world-item:nth-child(3)
.art-world-paint-bg {
    transform:
        translate(-50%, -50%)
        rotate(-4deg);

    border-radius:
        58% 42% 44% 56%
        /
        45% 58% 42% 55%;
}

.art-world-item:nth-child(4)
.art-world-paint-bg {
    transform:
        translate(-50%, -50%)
        rotate(6deg);

    border-radius:
        44% 56% 58% 42%
        /
        58% 43% 57% 42%;
}


/* Small paint dots around each large shape */

.art-world-paint-bg::before,
.art-world-paint-bg::after {
    content: "";

    position: absolute;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: var(--art-color);

    opacity: .95;
}

.art-world-paint-bg::before {
    left: -12px;
    bottom: 18%;

    transform: scale(.8);
}

.art-world-paint-bg::after {
    right: -10px;
    top: 15%;

    transform: scale(.6);
}


/* ============================================================
   TRANSPARENT PNG IMAGE

   IMPORTANT:
   No white box.
   No square frame.
   No border.
   No background.
   No crop.
============================================================ */

.art-world-image {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;
    max-width: 315px;

    height: 270px;

    object-fit: contain;
    object-position: center;

    background: transparent;

    border: 0;
    outline: 0;

    box-shadow: none;

    padding: 0;
    margin: 0;

    transform:
        translateY(-7px)
        rotate(-1.5deg);

    filter: none;

    transition:
        transform .55s cubic-bezier(.2, .9, .25, 1),
        filter .45s ease;
}


/* Different image angles */

.art-world-item:nth-child(2)
.art-world-image {
    transform:
        translateY(-6px)
        rotate(1deg);
}

.art-world-item:nth-child(3)
.art-world-image {
    transform:
        translateY(-8px)
        rotate(-1deg);
}

.art-world-item:nth-child(4)
.art-world-image {
    transform:
        translateY(-7px)
        rotate(1.5deg);
}


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

.art-world-item:hover
.art-world-paint-bg {
    width: 96%;
    height: 82%;

    transform:
        translate(-50%, -50%)
        rotate(0deg)
        scale(1.03);

    border-radius:
        48% 52% 54% 46%
        /
        50% 44% 56% 50%;
}

.art-world-item:hover
.art-world-image {
    transform:
        translateY(-16px)
        scale(1.06)
        rotate(0deg);
}


/* ============================================================
   NUMBER BADGE
============================================================ */

.art-world-number {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--art-color);

    color: var(--canvas);

    border:
        4px solid
        var(--canvas);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    box-shadow:
        0 8px 18px
        color-mix(
            in srgb,
            var(--text) 13%,
            transparent
        );

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* Better contrast for yellow badge */

.art-world-item:nth-child(2)
.art-world-number {
    color: var(--text);
}


/* Number hover */

.art-world-item:hover
.art-world-number {
    transform:
        translateX(-50%)
        translateY(-5px)
        rotate(-7deg);

    box-shadow:
        0 12px 24px
        color-mix(
            in srgb,
            var(--text) 18%,
            transparent
        );
}


/* ============================================================
   CONTENT
============================================================ */

.art-world-content {
    position: relative;

    z-index: 4;

    padding-inline: 8px;
}

.art-world-content h3 {
    margin:
        0
        0
        8px;

    font-family:
        "DynaPuff",
        cursive;

    font-size:
        clamp(
            23px,
            2.2vw,
            31px
        );

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: .02em;

    color: var(--text);
}

.art-world-content p {
    max-width: 235px;

    margin:
        0
        auto;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            14px,
            1.15vw,
            16px
        );

    font-weight: 400;

    line-height: 1.55;

    color: var(--text);
}


/* ============================================================
   COLORFUL SQUIGGLE
============================================================ */

.art-world-squiggle {
    display: block;

    margin-top: 12px;

    color: var(--art-color);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 28px;

    line-height: 1;

    opacity: .9;

    transition:
        transform .35s ease;
}

.art-world-item:hover
.art-world-squiggle {
    transform:
        scaleX(1.15)
        rotate(-3deg);
}


/* ============================================================
   RESPONSIVE — TABLET
   768px – 1023px
============================================================ */

@media (max-width: 1023px) {

    .daw-art-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 28px;
        row-gap: 52px;
    }

    .art-world-visual {
        height: 285px;
    }

    .art-world-paint-bg {
        width: 84%;
        height: 76%;
    }

    .art-world-image {
        max-width: 285px;
        height: 235px;
    }

    .art-world-content h3 {
        font-size: 27px;
    }

    .art-world-content p {
        max-width: 280px;

        font-size: 15px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE-L
   425px – 767px
============================================================ */

@media (max-width: 767px) {

    .daw-art-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 14px;
        row-gap: 38px;
    }

    .art-world-visual {
        height: 235px;

        margin-bottom: 18px;
    }

    .art-world-paint-bg {
        width: 91%;
        height: 73%;
    }

    .art-world-image {
        width: 105%;
        max-width: 230px;

        height: 195px;
    }

    .art-world-number {
        width: 47px;
        height: 47px;

        font-size: 12px;

        border-width: 3px;
    }

    .art-world-content {
        padding-inline: 3px;
    }

    .art-world-content h3 {
        font-size: 20px;
    }

    .art-world-content p {
        max-width: 190px;

        font-size: 13px;

        line-height: 1.5;
    }

    .art-world-squiggle {
        margin-top: 9px;

        font-size: 22px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE-M
   375px – 424px
============================================================ */

@media (max-width: 424px) {

    .daw-art-grid {
        column-gap: 10px;
        row-gap: 34px;
    }

    .art-world-visual {
        height: 215px;
    }

    .art-world-paint-bg {
        width: 94%;
        height: 72%;
    }

    .art-world-image {
        width: 108%;
        height: 178px;
    }

    .art-world-number {
        width: 44px;
        height: 44px;

        font-size: 11px;
    }

    .art-world-content h3 {
        font-size: 18px;
    }

    .art-world-content p {
        max-width: 170px;

        font-size: 12px;
    }

    .art-world-squiggle {
        font-size: 20px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE-S
   320px – 374px
============================================================ */

@media (max-width: 374px) {

    .daw-art-grid {
        grid-template-columns: 1fr;

        max-width: 330px;

        margin-inline: auto;

        gap: 46px;
    }

    .art-world-visual {
        height: 275px;

        margin-bottom: 20px;
    }

    .art-world-paint-bg {
        width: 78%;
        height: 76%;
    }

    .art-world-image {
        width: 100%;
        max-width: 290px;

        height: 225px;
    }

    .art-world-number {
        width: 50px;
        height: 50px;

        font-size: 13px;
    }

    .art-world-content h3 {
        font-size: 22px;
    }

    .art-world-content p {
        max-width: 270px;

        font-size: 14px;
    }

    .art-world-squiggle {
        font-size: 23px;
    }
}


/* ============================================================
   LARGE LAPTOP / DESKTOP
   1280px+
============================================================ */

@media (min-width: 1280px) {

    .daw-art-grid {
        gap: 42px;
    }

    .art-world-visual {
        height: 340px;
    }

    .art-world-paint-bg {
        width: 92%;
        height: 80%;
    }

    .art-world-image {
        max-width: 325px;
        height: 280px;
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .art-world-item,
    .art-world-image,
    .art-world-paint-bg,
    .art-world-number,
    .art-world-squiggle {
        transition: none !important;
    }

    .art-world-item {
        opacity: 1 !important;

        transform: none !important;
    }
}
/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .daw-paint,
    .daw-doodle,
    .daw-mini-star,
    .daw-mini-heart {
        animation: none !important;
    }

    .daw-art-item {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

    .daw-image-frame,
    .daw-image-frame img,
    .daw-brush-bg {
        transition: none !important;
    }
}

/* MIX N MUSE - SECTION 3: WHY PARENTS CHOOSE US (additive; classes prefixed .wp-, tokens scoped to .wp) */
.wp{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.45,0,.25,1);position:relative;overflow:hidden;isolation:isolate;background:var(--surface-soft);padding-block:64px 72px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.wp,.wp *,.wp *::before,.wp *::after{box-sizing:border-box}
:where(.wp) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}
:where(.wp) img{display:block;max-width:100%}
.wp :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wp-wave{position:absolute;inset-inline:0;height:26px;overflow:hidden;z-index:0;pointer-events:none}.wp-wave.top{top:-1px}.wp-wave.bot{bottom:-1px;transform:scaleY(-1)}
.wp-wave svg{display:block;width:200%;height:100%;fill:var(--canvas);animation:wpWave 16s linear infinite}
.wp-wrap{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.wp-head{max-width:44em;margin-bottom:40px}
.wp-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.wp h2,.wp h3{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2;color:var(--text)}
.wp h2{font-size:var(--fs-h2)}.wp h3{font-size:var(--fs-h3)}
.wp-hl{position:relative;display:inline-block;color:var(--vermillion)}
.wp-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.wp-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .wp-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .9s ease}
.wp-lead{margin:14px 0 0;color:var(--text-soft);max-width:36em}
.wp-rv{opacity:0;transform:translateY(22px)}.in-view .wp-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
/* stage */
.wp-stage{display:grid;gap:44px 20px}
.wp-col{display:contents}
.wp-portal{position:relative;order:-1;grid-column:1/-1;width:min(100%,520px);margin-inline:auto;aspect-ratio:1/1}
.wp-rainbow{position:absolute;inset-inline:3%;top:-3%;width:94%;height:auto;overflow:visible;z-index:0}
.wp-rainbow path{fill:none;stroke-width:13;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .wp-rainbow path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease) calc(.3s + var(--k)*.25s)}
.wp-window{position:absolute;inset:9% 9% 11%;z-index:1;overflow:hidden;border:6px solid var(--surface);border-radius:46% 54% 42% 58%/56% 44% 56% 44%;background:var(--surface);box-shadow:var(--shadow);clip-path:circle(0% at 50% 50%)}
.in-view .wp-window{clip-path:circle(75% at 50% 50%);transition:clip-path 1.4s var(--ease) .2s}
.wp-window img{width:100%;height:100%;object-fit:cover;animation:wpKen 18s ease-in-out infinite alternate}
.wp-s{position:absolute;z-index:3;pointer-events:none;animation:wpFloat 6s ease-in-out infinite alternate;animation-delay:var(--fd,0s)}
.wp-s img{position:relative;width:100%;height:auto;opacity:0;transform:scale(.4) rotate(var(--sr,-12deg));filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 14px 14px rgba(61,41,37,.3))}
.in-view .wp-s img{opacity:1;transform:none;transition:transform 1s calc(1s + var(--k)*.2s) cubic-bezier(.3,1.5,.4,1),opacity .4s calc(1s + var(--k)*.2s)}
.wp-s.hot img{animation:wpJump .8s}
.wp-splat{position:absolute;z-index:-1;inset:12% 4% 2%;border-radius:45% 55% 52% 48%/50% 45% 55% 50%;background:var(--c);opacity:.6;animation:wpMorph 9s ease-in-out infinite alternate}
.wp-s1{inset-inline-end:-3%;bottom:-6%;width:46%;--c:var(--saffron);--k:0}
.wp-spark{position:absolute;z-index:4;width:24px;pointer-events:none;animation:wpTwinkle 3s ease-in-out infinite}
.wp-spark1{top:26%;inset-inline-start:-2%;fill:var(--saffron)}.wp-spark2{top:52%;inset-inline-end:-4%;width:20px;fill:var(--vermillion);animation-delay:-1.5s}
.wp-drop{position:absolute;z-index:2;width:16px;pointer-events:none;animation:wpFloat 5s ease-in-out infinite alternate}
.wp-drop1{top:8%;inset-inline-start:14%}.wp-drop2{bottom:20%;inset-inline-end:10%;animation-delay:-2.5s;width:14px}
/* notes */
.wp-note{position:relative;padding:24px 20px 20px;background:var(--surface);border:1px solid var(--border-strong);border-radius:6px 22px 22px 22px;box-shadow:var(--shadow);transform:rotate(var(--r,0deg));transform-origin:50% 0;opacity:0;transition:transform .35s cubic-bezier(.3,1.4,.4,1)}
.wp-note::before{content:"";position:absolute;top:-11px;inset-inline-start:50%;width:70px;height:22px;margin-inline-start:-35px;background:color-mix(in srgb,var(--c) 78%,transparent);transform:rotate(-3deg);border-radius:3px}
.in-view .wp-note{opacity:1;animation:wpSwing 1.1s cubic-bezier(.3,1.2,.4,1) calc(.5s + var(--k)*.18s) backwards}
.wp-note:hover,.wp-note:focus-visible{transform:rotate(0) translateY(-6px)}
.wp-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:14px;background:var(--c);color:var(--on-pigment)}.wp-ic svg{width:24px;height:24px}
.wp-num{position:absolute;top:14px;inset-inline-end:18px;font-family:"DynaPuff",cursive;font-size:22px;color:var(--text-soft);line-height:1}
.wp-note p{margin:8px 0 0;color:var(--text-soft)}
.wp-arrow{display:none;position:absolute;top:50%;width:50px;height:28px;margin-top:-14px;overflow:visible}
.wp-arrow path{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .wp-arrow path{stroke-dashoffset:0;transition:stroke-dashoffset 1s calc(1.4s + var(--k)*.2s) ease}
.wp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px}
.wp-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;transition:transform .3s,color .3s}
.wp-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.wp-btn:hover{transform:translateY(-3px)}.wp-btn:hover::before{transform:scaleX(1)}
.wp-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.wp-btn:hover svg{transform:translateX(5px)}
.wp-btn-primary{background:var(--btn-bg);color:var(--btn-text)}.wp-btn-primary::before{background:var(--btn-hover)}
.wp-btn-ghost{border-color:var(--text);color:var(--text)}.wp-btn-ghost::before{background:var(--saffron)}.wp-btn-ghost:hover{color:var(--on-pigment)}
@keyframes wpWave{to{transform:translateX(-50%)}}
@keyframes wpKen{from{transform:scale(1.04) translate(-1%,0)}to{transform:scale(1.14) translate(2%,-2%)}}
@keyframes wpFloat{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes wpJump{30%{transform:scale(1.12) rotate(-5deg) translateY(-14px)}100%{transform:none}}
@keyframes wpMorph{to{border-radius:55% 45% 48% 52%/45% 55% 45% 55%;transform:rotate(10deg) scale(1.06)}}
@keyframes wpTwinkle{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@keyframes wpSwing{0%{opacity:0;transform:translateY(-36px) rotate(calc(var(--r) + 12deg))}55%{opacity:1;transform:translateY(0) rotate(calc(var(--r) - 5deg))}100%{opacity:1;transform:translateY(0) rotate(var(--r))}}
@media(min-width:375px){.wp{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.wp{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}}
@media(min-width:768px){.wp{--fs-h2:30px;--fs-h3:22px;--gutter:24px;padding-block:80px 88px}.wp-stage{grid-template-columns:1fr 1fr}.wp-portal{width:min(100%,560px)}}
@media(min-width:1024px){.wp{--fs-h2:32px;--fs-h3:22px;--gutter:clamp(24px,3vw,40px);padding-block:96px 104px}
  .wp-stage{grid-template-columns:minmax(0,1fr) minmax(380px,1.2fr) minmax(0,1fr);align-items:center;gap:36px}
  .wp-col{display:grid;gap:36px}.wp-portal{order:0;grid-column:auto;width:100%}
  .wp-l .wp-note:nth-child(2){margin-inline-start:32px}.wp-r .wp-note:nth-child(1){margin-inline-end:32px}
  .wp-arrow{display:block}.wp-l .wp-arrow{inset-inline-end:-56px}.wp-r .wp-arrow{inset-inline-start:-56px;transform:scaleX(-1)}}
@media(min-width:1280px){.wp{--fs-h2:34px;--fs-h3:24px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}}
@media(min-width:1440px){.wp{--fs-h2:36px;--fs-h3:26px}}
@media(max-width:374px){.wp-btn{width:100%}.wp-spark{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}}

/* MIX N MUSE - SECTIONS 4 & 5: STUDENT GALLERY (.gw-) + TRIAL CTA (.tc-). Additive; tokens scoped to .gw/.tc */
.gw,.tc{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.45,0,.25,1);position:relative;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.gw,.gw *,.gw *::before,.gw *::after,.tc,.tc *,.tc *::before,.tc *::after{box-sizing:border-box}
:where(.gw,.tc) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}
:where(.gw,.tc) button{border:0;background:none}:where(.gw,.tc) img{display:block;max-width:100%}
.gw :focus-visible,.tc :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.gw h2,.gw h3,.tc h2{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2}
.gw h2,.tc h2{font-size:var(--fs-h2)}
.gw-wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
/* ===== GALLERY ===== */
.gw{--u:.7;z-index:3;overflow:hidden;isolation:isolate;padding-block:64px 72px}
.gw-head{display:grid;gap:14px;margin-bottom:32px;align-items:end}
.gw-tag,.tc-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.gw-hl{position:relative;display:inline-block;color:var(--vermillion)}
.gw-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.gw-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .gw-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .8s ease}
.gw-lead{margin:0;color:var(--text-soft);max-width:34em}
.gw-hint{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font-size:var(--fs-small);font-weight:700;transition:opacity .4s}
.gw-hint svg{width:34px;height:16px;animation:gwNudge 1.6s ease-in-out infinite alternate}.gw-hint path{fill:none;stroke:var(--vermillion);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dragged .gw-hint{opacity:0}
.gw-rv{opacity:0;transform:translateY(22px)}.in-view .gw-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
.gw-wall{--mx:50%;--my:40%;position:relative;direction:ltr;overflow:hidden;border-radius:28px;border:1px solid var(--border-strong);background:var(--gw-wall);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;clip-path:inset(0 100% 0 0 round 28px)}
.in-view .gw-wall{clip-path:inset(0 0 0 0 round 28px);transition:clip-path 1.3s var(--ease) .2s}
.gw-wall.is-drag{cursor:grabbing}
.gw-wall::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(var(--gw-dot) 1.3px,transparent 1.6px);background-size:22px 22px}
.gw-wall::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),transparent 0,var(--gw-shade) 100%)}
.gw-rail{position:absolute;z-index:1;inset-inline:0;top:16px;height:8px;background:var(--apricot);box-shadow:0 3px 0 var(--border-strong)}
.gw-track{position:relative;z-index:2;display:flex;gap:calc(var(--u)*56px);width:max-content;padding:20px calc(var(--u)*28px) 28px;will-change:transform}
.gw-item{position:relative;flex:none;width:calc(var(--w)*var(--u)*1px);padding-top:calc(var(--drop)*var(--u)*1px);transform-origin:50% 0;outline-offset:8px;margin:0}
.gw-string{position:absolute;top:0;inset-inline:8%;width:84%;height:calc(var(--drop)*var(--u)*1px);overflow:visible}
.gw-string path{fill:none;stroke:var(--text-soft);stroke-width:1.6;vector-effect:non-scaling-stroke}
.gw-nail{position:absolute;top:-4px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--text);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.gw-frame{position:relative;aspect-ratio:var(--ar);border:10px solid var(--fc);background:var(--fc);box-shadow:var(--shadow);transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.gw-frame img{width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}
.gw-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.45),transparent 55%);transition:opacity .25s}
.gw-frame:hover .gw-glare{opacity:1}
.f2{border-radius:999px 999px 12px 12px}.f3{border-radius:50%}.f5{border-radius:22px}
.f4{border-color:var(--surface);border-bottom-width:34px;background:var(--surface)}
.f6{border:0;background:transparent}.f6::before{content:"";position:absolute;z-index:2;top:-9px;left:50%;width:64px;height:20px;margin-left:-32px;background:color-mix(in srgb,var(--saffron) 78%,transparent);transform:rotate(-4deg);border-radius:3px}
.gw-plaque{display:block;margin:12px auto 0;width:max-content;max-width:100%;padding:5px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.35;text-align:center;unicode-bidi:plaintext}
.gw-cur{position:fixed;z-index:60;left:0;top:0;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--saffron);color:var(--on-pigment);font-family:"DynaPuff",cursive;font-size:14px;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.4,1),background-color .25s}
.gw-cur.on{opacity:1;transform:scale(1)}.gw-cur.view{background:var(--aqua);transform:scale(1.2)}.is-drag-cur{transform:scale(.8)!important}
.gw-lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(38,27,25,.74);backdrop-filter:blur(8px)}
.gw-lb.on{display:flex}
.gw-lb-card{display:grid;gap:14px;justify-items:center;max-width:min(92vw,640px)}
.gw-lb-img{max-width:100%;max-height:66vh;object-fit:cover;border-radius:18px;border:8px solid var(--surface);background:var(--surface);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.gw-lb-cap{text-align:center;background:var(--surface);color:var(--text);padding:12px 20px;border-radius:14px;border:1px solid var(--border-strong);opacity:0;transform:translateY(14px);transition:opacity .5s .25s,transform .5s .25s}
.gw-lb.on .gw-lb-cap{opacity:1;transform:none}
.gw-lb-cap b{display:block;font-family:"DynaPuff",cursive;font-weight:500;font-size:var(--fs-h3)}.gw-lb-cap span{color:var(--text-soft);font-size:var(--fs-small);font-weight:600}
.gw-lb-x{position:absolute;top:16px;inset-inline-end:16px;min-width:46px;min-height:46px;border-radius:50%;background:var(--surface);color:var(--text);border:1.5px solid var(--border-strong);font-size:22px;line-height:1}
/* ===== TRIAL CTA ===== */
.tc{--p:0;padding-block:24px 72px}
.tc-box{position:relative;border-radius:32px}
.tc-ghost{position:absolute;inset:0;border-radius:inherit;border:2.5px dashed var(--border-strong);background:color-mix(in srgb,var(--tc-bg) 8%,transparent)}
.tc-fill{position:relative;display:grid;gap:28px;align-items:center;padding:36px 22px;border-radius:inherit;background:var(--tc-bg);color:var(--tc-text);overflow:hidden;clip-path:inset(0 calc((1 - var(--p))*100%) 0 0 round 32px)}
.tc-roller{position:absolute;z-index:5;top:50%;inset-inline-start:calc(var(--p)*100%);width:54px;height:108px;margin-block-start:-54px;margin-inline-start:-27px;pointer-events:none;opacity:calc(min(var(--p),1 - var(--p))*12)}
.tc-roller rect:first-child{fill:var(--saffron);stroke:var(--text);stroke-width:3}.tc-roller path{fill:none;stroke:var(--text);stroke-width:4;stroke-linecap:round}.tc-roller rect:last-child{fill:var(--text)}
.tc .tc-tag{background:var(--tc-btn-bg);color:var(--tc-btn-text);border-color:transparent}
.tc h2{color:var(--tc-text)}.tc-lead{margin:12px 0 22px;color:var(--tc-text);max-width:32em}
.tc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.tc-chips li{padding:6px 12px;border-radius:99px;background:var(--tc-btn-bg);color:var(--tc-btn-text);font-size:var(--fs-small);font-weight:700}
.tc-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tc-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;transition:transform .25s ease-out,color .3s}
.tc-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;background:var(--saffron);transition:transform .45s var(--ease)}
.tc-btn:hover::before{transform:scaleX(1)}.tc-btn:hover{color:var(--on-pigment)}
.tc-btn svg{width:18px;height:18px;flex:none}
.tc-main{background:var(--tc-btn-bg);color:var(--tc-btn-text)}.tc-ghost-btn{border-color:var(--tc-text);color:var(--tc-text)}
.tc-art{position:relative;width:min(100%,360px);margin-inline:auto}
.tc-art img{width:100%;aspect-ratio:1/1;object-fit:cover;border:8px solid var(--tc-btn-bg);border-radius:46% 54% 42% 58%/56% 44% 56% 44%;animation:tcMorph 9s ease-in-out infinite alternate}
.tc-dot{position:absolute;z-index:3;border-radius:50%;pointer-events:none}
.tc-d1{width:18px;height:18px;top:6%;inset-inline-start:-2%;background:var(--saffron);animation:tcFloat 5s ease-in-out infinite alternate}
.tc-d2{width:12px;height:12px;bottom:12%;inset-inline-end:-2%;background:var(--aqua);animation:tcFloat 4s -2s ease-in-out infinite alternate}
.tc-d3{width:22px;height:22px;bottom:-2%;inset-inline-start:18%;background:var(--apricot);animation:tcFloat 6s -1s ease-in-out infinite alternate}
.tc-burst{position:fixed;z-index:120;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none}
@keyframes gwNudge{from{transform:translateX(-6px)}to{transform:translateX(6px)}}
@keyframes tcMorph{to{border-radius:55% 45% 48% 52%/45% 55% 45% 55%}}
@keyframes tcFloat{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@media(min-width:375px){.gw,.tc{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.gw,.tc{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}.gw{--u:.82}}
@media(min-width:768px){.gw,.tc{--fs-h2:30px;--fs-h3:22px;--gutter:24px}.gw{--u:.95;padding-block:80px 88px}.tc-fill{padding:48px 40px}.gw-head{grid-template-columns:1fr auto;gap:32px}}
@media(min-width:1024px){.gw,.tc{--fs-h2:32px;--fs-h3:24px;--gutter:clamp(24px,3vw,40px)}.gw{--u:1;padding-block:96px 104px}.tc{padding-bottom:96px}.tc-fill{grid-template-columns:1.2fr .8fr;gap:48px;padding:56px 56px}}
@media(min-width:1280px){.gw,.tc{--fs-h2:34px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}.gw{--u:1.12}}
@media(min-width:1440px){.gw,.tc{--fs-h2:36px;--fs-h3:26px}}
@media(max-width:374px){.tc-btn{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}}

/* MIX N MUSE - FIRST CLASS JOURNEY SECTION (additive; classes prefixed .jr-, tokens scoped to .jr) */
.jr{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.45,0,.25,1);position:relative;overflow:hidden;isolation:isolate;padding-block:64px 72px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.jr,.jr *,.jr *::before,.jr *::after{box-sizing:border-box}
:where(.jr) img{display:block;max-width:100%}
.jr h2,.jr h3{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2;color:var(--text)}
.jr h2{font-size:var(--fs-h2)}.jr h3{font-size:var(--fs-h3)}
.jr-wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.jr-head{max-width:44em;margin-bottom:36px}
.jr-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.jr-hl{position:relative;display:inline-block;color:var(--vermillion)}
.jr-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.jr-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .jr-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .8s ease}
.jr-lead{margin:14px 0 0;color:var(--text-soft);max-width:36em}
.jr-rv{opacity:0;transform:translateY(22px)}.in-view .jr-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
.jr-map{position:relative;border-radius:28px;border:2px dashed var(--border-strong);background:var(--surface-soft);padding:28px 16px 32px}
.jr-map::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - 1px),var(--jr-crease) 50%,transparent calc(50% + 1px)),linear-gradient(transparent calc(50% - 1px),var(--jr-crease) 50%,transparent calc(50% + 1px))}
.jr-svg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.jr-base{fill:none;stroke:var(--border-strong);stroke-width:3;stroke-dasharray:2 11;stroke-linecap:round}
.jr-leg{fill:none;stroke-width:9;stroke-linecap:round}
.jr-trav{position:absolute;left:0;top:0;width:0;height:0;z-index:4;pointer-events:none}
.jr-trav svg{position:absolute;left:-45px;top:-16px;width:48px;height:32px;overflow:visible;filter:drop-shadow(0 4px 4px rgba(61,41,37,.35));animation:jrBob 1.1s ease-in-out infinite alternate}
.jr-stops{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:52px 1fr;gap:28px 14px}
.jr-stop{display:contents}
.jr-pin{position:relative;grid-column:1;grid-row:var(--r);justify-self:center;align-self:start;margin-top:14px;display:grid;place-items:center;width:46px;height:46px;border-radius:52% 48% 55% 45%/48% 55% 45% 52%;background:var(--c);color:var(--on-pigment);font-family:"DynaPuff",cursive;font-size:20px;line-height:1;box-shadow:var(--shadow)}
.jr-card{grid-column:2;grid-row:var(--r);background:var(--surface);border:1px solid var(--border-strong);border-radius:6px 22px 22px 22px;padding:16px;box-shadow:var(--shadow);transform:rotate(var(--rot,0deg))}
.jr-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.jr-thumb{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;border:4px solid var(--c);background:var(--surface-soft)}
.jr-step{display:block;color:var(--text-soft);font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.jr-card p{margin:8px 0 0;color:var(--text-soft)}
.jr-compass,.jr-cloud{display:none;position:absolute;z-index:0;pointer-events:none}
.jr-needle{transform-origin:32px 32px}
.jr-star{position:absolute;z-index:3;width:20px;pointer-events:none;fill:var(--saffron);animation:jrTwinkle 3s ease-in-out infinite}
.jr-dot{position:absolute;z-index:5;width:11px;height:11px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none}
.jr.js .jr-pin{transform:scale(0)}
.jr.js .jr-card{opacity:0;transform:translateY(30px) rotate(var(--rot,0deg)) scale(.94)}
.jr .on .jr-pin{transform:scale(1);transition:transform .8s cubic-bezier(.3,1.7,.4,1)}
.jr .on .jr-pin::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid var(--c);animation:jrRing 1.2s ease-out forwards}
.jr .on .jr-card{opacity:1;transform:rotate(var(--rot,0deg));transition:opacity .6s .2s,transform .8s .2s cubic-bezier(.3,1.3,.4,1)}
@keyframes jrBob{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
@keyframes jrRing{from{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.6)}}
@keyframes jrTwinkle{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@keyframes jrDrift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@media(min-width:375px){.jr{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.jr{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}.jr-map{padding-inline:20px}}
@media(min-width:768px){.jr{--fs-h2:30px;--fs-h3:22px;--gutter:24px;padding-block:80px 88px}.jr-map{padding:40px 28px 44px}
  .jr-stops{grid-template-columns:1fr 72px 1fr;gap:44px 0}.jr-pin{grid-column:2;width:52px;height:52px;margin-top:20px}
  .jr-stop:nth-child(odd) .jr-card{grid-column:1;margin-inline-end:22px}.jr-stop:nth-child(even) .jr-card{grid-column:3;margin-inline-start:22px}
  .jr-compass{display:block;top:16px;inset-inline-end:16px;width:64px}.jr-cloud{display:block;width:84px;opacity:.7;fill:var(--surface);animation:jrDrift 9s ease-in-out infinite alternate}.jr-cloud1{top:34%;inset-inline-start:6%}.jr-cloud2{top:68%;inset-inline-end:8%;animation-delay:-4s}}
@media(min-width:1024px){.jr{--fs-h2:32px;--fs-h3:22px;--gutter:clamp(24px,3vw,40px);padding-block:96px 104px}.jr-map{padding:48px 36px 56px}
  .jr-stops{grid-template-columns:repeat(4,1fr);gap:0 24px;align-items:start}
  .jr-stop{display:flex;flex-direction:column;align-items:center}.jr-pin{grid-column:auto;grid-row:auto;margin-top:0;align-self:center}
  .jr-card{grid-column:auto;grid-row:auto;margin:28px 0 0!important;width:100%}
  .jr-stop:nth-child(2){margin-top:72px}.jr-stop:nth-child(3){margin-top:14px}.jr-stop:nth-child(4){margin-top:86px}
  .jr-cloud1{top:46%;inset-inline-start:2%}}
@media(min-width:1280px){.jr{--fs-h2:34px;--fs-h3:24px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}}
@media(min-width:1440px){.jr{--fs-h2:36px;--fs-h3:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}}

/* ============================================================
   NAVBAR FIX (mobile): paste at the very END of assets/css/styles.css
   The trial-class paint roller sticks out past the right edge, which made
   the page wider than the screen and dragged the fixed navbar sideways.
   ============================================================ */
section {
    overflow-x: clip;
}

/* ===== MIX LAB · paste at the END of styles.css ===== */

.ml {
    --fs-h2: 24px; --fs-h3: 18px; --fs-body: 15px; --fs-small: 12px; --fs-btn: 14px;
    --gutter: 16px; --tube-w: 46px; --bowl: 220px;
    --ml-glass: rgba(255, 255, 255, .55);
    --ml-edge: rgba(61, 41, 37, .16);
    --ml-c: #ccc;
    --ml-red: #C0341F; --ml-btn: #C0341F;
    position: relative; z-index: 2; overflow: hidden; isolation: isolate;
    padding-block: 64px 72px;
    font-family: "Manrope", sans-serif; font-size: var(--fs-body); line-height: 1.65;
    color: var(--text); background: var(--canvas);
}
.ml, .ml *, .ml *::before, .ml *::after { box-sizing: border-box; }
.ml :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ml h2, .ml h3 { font-family: "DynaPuff", cursive; font-weight: 500; margin: 0; line-height: 1.2; color: var(--text); }
.ml h2 { font-size: var(--fs-h2); margin-block: 14px 12px; }
.ml h3 { font-size: var(--fs-h3); overflow-wrap: anywhere; }
.ml p { margin: 0; }

.ml-wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); }
.ml-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "bench" "match" "guide"; align-items: start; }
.ml-left { display: contents; }
.ml-copy  { grid-area: copy; min-width: 0; }
.ml-bench { grid-area: bench; min-width: 0; }
.ml-match { grid-area: match; min-width: 0; }
.ml-guide { grid-area: guide; min-width: 0; }

/* Text */
.ml-tag { display: inline-flex; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ml-hl { color: var(--ml-red); }
.ml .ml-lead { color: var(--text-soft); max-width: 34em; margin-bottom: 18px; }
.ml-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.ml-steps li { display: flex; gap: 12px; align-items: center; font-weight: 700; color: var(--text); counter-increment: s; }
.ml-steps li::before { content: counter(s); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--saffron); color: var(--on-pigment); font-family: "DynaPuff", cursive; font-weight: 500; font-size: 15px; }

/* Bench */
.ml-bench { position: relative; display: grid; justify-items: center; gap: 14px; }
.ml-tubes { display: flex; justify-content: center; gap: 8px; max-width: 100%; }
.ml-tube { width: var(--tube-w); padding: 0; background: none; border: 0; cursor: pointer; transform-origin: 50% 0; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); -webkit-tap-highlight-color: transparent; }
.ml-tube svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(61, 41, 37, .22)); }
.ml-tube:hover { transform: rotate(-6deg) translateY(2px); }
.ml-tube:nth-child(even):hover { transform: rotate(6deg) translateY(2px); }
.ml-tube.is-sq { animation: mlSq .5s ease; }
.ml-tube.is-used { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 14px; }
@keyframes mlSq { 30% { transform: scale(.86, .72); } 60% { transform: scale(1.06, 1.1); } }

.ml-bowl { position: relative; width: var(--bowl); aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 6px solid var(--ml-glass); background: var(--ml-glass); box-shadow: inset 0 0 0 2px var(--ml-edge), 0 24px 40px rgba(61, 41, 37, .16); }
.ml-liquid { position: absolute; inset: auto 0 0; height: 0; background: var(--ml-c); color: var(--ml-c); transition: height 1s cubic-bezier(.3, .8, .2, 1), background-color .9s, color .9s; }
.ml-liquid svg { position: absolute; left: 0; top: -14px; width: 200%; height: 16px; fill: currentColor; animation: mlWave 3.5s linear infinite; }
.ml-liquid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .28), transparent 40%, rgba(0, 0, 0, .1)); }
@keyframes mlWave { to { transform: translateX(-50%); } }
.ml-goo { position: absolute; inset: 0; opacity: 0; filter: url(#mlGoo); pointer-events: none; transition: opacity .3s; }
.ml-goo.is-on { opacity: 1; }
.ml-goo i { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%; border-radius: 50%; }
.ml-goo.is-on i:nth-child(1) { animation: mlO1 1.2s ease-in-out; }
.ml-goo.is-on i:nth-child(2) { animation: mlO2 1.2s ease-in-out; }
@keyframes mlO1 { 0% { transform: translate(-110%, 10%) scale(.7); } 50% { transform: rotate(180deg) translate(40%, 0) scale(1.05); } 100% { transform: translate(0, 0) scale(.5); } }
@keyframes mlO2 { 0% { transform: translate(110%, 10%) scale(.7); } 50% { transform: rotate(180deg) translate(-40%, 0) scale(1.05); } 100% { transform: translate(0, 0) scale(.5); } }
.ml-shine { position: absolute; left: 12%; top: 8%; width: 30%; height: 14%; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(-28deg); filter: blur(2px); }

.ml-drop, .ml-spark, .ml-ring { position: absolute; pointer-events: none; z-index: 4; }
.ml-drop { width: 16px; height: 22px; margin-left: -8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.ml-ring { width: 80px; height: 24px; margin: -12px 0 0 -40px; border: 3px solid; border-radius: 50%; animation: mlRing .9s ease-out forwards; }
@keyframes mlRing { from { transform: scale(.2); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.ml-spark { width: 10px; height: 10px; border-radius: 50%; }

.ml-name { display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-weight: 700; }
.ml-name i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ml-c); transition: background-color .8s; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border-strong); }
.ml-name span { min-width: 0; overflow-wrap: anywhere; }

.ml-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ml-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 14px; border: 2px solid var(--ml-btn); background: var(--ml-btn); color: var(--btn-text); font: 700 var(--fs-btn) "Manrope", sans-serif; text-decoration: none; cursor: pointer; transition: transform .25s ease, background-color .25s, border-color .25s; }
.ml-btn:hover { transform: translateY(-3px) rotate(-1deg); background: var(--btn-hover); border-color: var(--btn-hover); }
.ml-btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.ml-btn-ghost:hover { background: var(--surface); border-color: var(--text); }
.ml-btn-sm { min-height: 42px; padding: 0 16px; }

.ml-trail { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 30px; }
.ml-trail i { width: 30px; height: 30px; background: var(--ml-c); border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; animation: mlStamp .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes mlStamp { from { transform: scale(0) rotate(-40deg); } }

/* Result card (always visible; wakes up after a mix) */
.ml-match { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 22px; background: var(--surface); border: 2px dashed var(--border-strong); color: var(--text); transition: border-color .4s, box-shadow .6s; }
.ml-match.is-on { border-style: solid; border-color: var(--saffron); box-shadow: var(--shadow); animation: mlPop .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mlPop { from { transform: scale(.96); } }
.ml-match img { width: 72px; height: 72px; object-fit: cover; border-radius: 50% 50% 16px 16px; background: var(--surface-soft); filter: grayscale(1); opacity: .55; transition: filter .8s, opacity .8s; }
.ml-match.is-on img { filter: none; opacity: 1; }
.ml-match-text { min-width: 0; }
.ml-match h3 { margin-bottom: 4px; }
.ml-match p { color: var(--text-soft); font-size: var(--fs-small); line-height: 1.5; margin-bottom: 10px; }

/* Colour guide */
.ml-guide { padding: 16px; border-radius: 22px; background: var(--surface-soft); border: 1px solid var(--border); }
.ml-guide p { color: var(--text-soft); font-size: var(--fs-small); margin: 4px 0 12px; }
.ml-guide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.ml-guide li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: border-color .3s, box-shadow .3s, transform .3s; }
.ml-guide li.is-hit { border-color: var(--saffron); box-shadow: 0 0 0 2px var(--saffron); transform: translateY(-2px); }
.ml-dots { display: flex; flex: none; }
.ml-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); }
.ml-dots i + i { margin-inline-start: -7px; }
.ml-guide b { display: block; font-size: var(--fs-small); line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.ml-guide small { display: block; font-size: var(--fs-small); line-height: 1.3; color: var(--text-soft); }
.ml-trail i.ghost { background: none; border: 2px dashed var(--border-strong); animation: none; }
@media (min-width: 425px) { .ml-match p { font-size: var(--fs-body); } }

/* Background paint blobs */
.ml-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ml-blobs i { position: absolute; border-radius: 50%; opacity: .22; filter: blur(10px); animation: mlDrift 14s ease-in-out infinite alternate; }
.ml-blobs i:nth-child(1) { width: 46vw; max-width: 460px; aspect-ratio: 1; inset-inline-end: -8%; top: -6%; background: var(--saffron); }
.ml-blobs i:nth-child(2) { width: 34vw; max-width: 340px; aspect-ratio: 1; inset-inline-start: -7%; bottom: -6%; background: var(--aqua); animation-delay: -5s; }
@keyframes mlDrift { to { transform: translate(4%, 6%) scale(1.12); } }

/* Scroll reveal (script.js adds .js and .in-view) */
.ml.js .ml-rv { opacity: 0; transform: translateY(22px); }
.ml.js.in-view .ml-rv { opacity: 1; transform: none; transition: opacity .8s calc(.1s + var(--i) * .12s), transform .8s calc(.1s + var(--i) * .12s) cubic-bezier(.2, .7, .2, 1); }
.ml.js .ml-tube { opacity: 0; }
.ml.js.in-view .ml-tube { opacity: 1; animation: mlIn .8s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(.3s + var(--i) * .11s); }
@keyframes mlIn { from { transform: translateY(-90px); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (min-width: 375px) { .ml { --fs-h2: 26px; --fs-h3: 19px; --tube-w: 52px; --bowl: 250px; } .ml-tubes { gap: 12px; } }
@media (min-width: 425px) { .ml-guide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ml { --fs-h2: 28px; --fs-h3: 20px; --fs-body: 16px; --fs-small: 13px; --fs-btn: 15px; --gutter: 20px; --tube-w: 58px; --bowl: 280px; } .ml-tubes { gap: 16px; } .ml-match { grid-template-columns: 92px minmax(0, 1fr); } .ml-match img { width: 92px; height: 92px; } }
@media (min-width: 768px) { .ml { --fs-h2: 30px; --fs-h3: 22px; --gutter: 24px; --tube-w: 64px; --bowl: 320px; padding-block: 80px 88px; } .ml-tubes { gap: 22px; } .ml-grid { gap: 36px; } .ml-copy { max-width: 620px; } .ml-guide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ml-match, .ml-guide { max-width: 620px; justify-self: center; width: 100%; } }
@media (min-width: 1024px) {
    .ml { --fs-h2: 32px; --fs-h3: 24px; --gutter: clamp(24px, 3vw, 40px); --bowl: 340px; padding-block: 96px 104px; }
    /* Both columns stretch to the same height: same top line, same bottom line */
    .ml-grid { grid-template-areas: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 56px; align-items: stretch; }
    .ml-left { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; grid-column: 1; }
    .ml-bench { grid-area: auto; grid-column: 2; align-content: space-between; }
    .ml-copy, .ml-match, .ml-guide { grid-area: auto; max-width: none; width: auto; justify-self: stretch; }
    .ml-guide { order: 2; }
    .ml-match { order: 3; grid-template-columns: 112px minmax(0, 1fr); }
    .ml-match img { width: 112px; height: 112px; }
}
@media (min-width: 1280px) { .ml { --fs-h2: 34px; --fs-body: 17px; --fs-small: 14px; --fs-btn: 16px; --gutter: clamp(32px, 3.5vw, 48px); --bowl: 380px; --tube-w: 70px; } .ml-grid { column-gap: 72px; } }
@media (min-width: 1440px) { .ml { --fs-h2: 36px; --fs-h3: 26px; --bowl: 400px; } }
@media (max-width: 374px) { .ml-btns .ml-btn { flex: 1 1 100%; } .ml-btn-sm { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .ml *, .ml *::before, .ml *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; transition-delay: 0s !important; }
    .ml-liquid svg, .ml-blobs i { animation: none !important; }
}

/* MIX N MUSE - PARENT POSTCARDS FAQ (additive; classes prefixed .pc-, tokens scoped to .pc) */
.pc{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.45,0,.25,1);position:relative;overflow:hidden;isolation:isolate;padding-block:64px 72px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.pc,.pc *,.pc *::before,.pc *::after{box-sizing:border-box}
:where(.pc) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}:where(.pc) button{border:0;background:none}:where(.pc) svg{display:block}
.pc :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pc h2,.pc h3{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2;color:var(--text)}
.pc h2{font-size:var(--fs-h2)}.pc h3{font-size:var(--fs-h3)}
.pc-wrap{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.pc-grid{display:grid;gap:28px;grid-template-areas:"head" "deck" "index" "cta"}
.pc-head{grid-area:head;max-width:40em}.pc-deckwrap{grid-area:deck}.pc-index{grid-area:index}.pc-cta{grid-area:cta}
.pc-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.pc-hl{position:relative;display:inline-block;color:var(--vermillion)}
.pc-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.pc-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .pc-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .8s ease}
.pc-lead{margin:14px 0 0;color:var(--text-soft);max-width:34em}
.pc-rv{opacity:0;transform:translateY(22px)}.in-view .pc-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
.pc:not(.js) .pc-rv{opacity:1;transform:none}
.pc-plane{position:absolute;z-index:0;top:44px;left:0;width:46px;pointer-events:none;fill:var(--surface);stroke:var(--text-soft);stroke-width:1.5;stroke-linejoin:round;animation:pcFly 22s linear infinite}
.pc-mat{position:relative;border-radius:32px;padding:clamp(28px,5vw,56px) clamp(14px,4vw,48px) 22px;background:color-mix(in srgb,var(--aqua) 16%,var(--canvas));border:2px dashed color-mix(in srgb,var(--aqua) 60%,transparent)}
.pc-mail{position:absolute;top:-38px;inset-inline-end:22px;width:62px}
.pc-flag{transform-origin:46px 30px;transform:rotate(0deg);transition:transform .6s cubic-bezier(.3,1.6,.4,1)}.has-answer .pc-flag{transform:rotate(-80deg)}
.pc-stampf{position:absolute;z-index:0;width:44px;padding:4px;border:2px dashed var(--text-soft);background:var(--c);color:var(--on-pigment);pointer-events:none;animation:pcFloat 5s ease-in-out infinite alternate}.pc-stampf svg{width:100%;height:auto}
.pc-sf1{top:14px;inset-inline-start:14px;--c:var(--saffron);transform:rotate(-8deg)}.pc-sf2{bottom:58px;inset-inline-end:10px;--c:var(--coral);animation-delay:-2.5s}
.pc-deck{position:relative;display:grid;max-width:540px;margin-inline:auto;padding-bottom:50px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pc-card{grid-area:1/1;position:relative;perspective:1400px;z-index:calc(10 - var(--n,0));cursor:grab;transform:translate3d(var(--dx,0px),calc(var(--n,0)*13px),0) rotate(calc(var(--rot,0deg) + var(--dr,0deg))) scale(calc(1 - var(--n,0)*.045));transition:transform .55s cubic-bezier(.3,1.25,.4,1),opacity .4s;opacity:1}
.pc-card[data-pos="4"],.pc-card[data-pos="5"]{opacity:0;pointer-events:none}
.pc-card.is-dragging{transition:none;cursor:grabbing}.pc-card.no-tr{transition:none!important}.pc-card.is-gone{opacity:0;transition:transform .45s cubic-bezier(.5,0,.8,.4),opacity .4s .05s}
.pc-flip{position:relative;display:grid;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.4,.2,.2,1.1)}
.is-flipped .pc-flip{transform:rotateY(180deg)}
.pc-face{grid-area:1/1;position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:12px;min-height:clamp(260px,64vw,310px);padding:20px 20px 18px;border:7px solid transparent;border-radius:16px;background:linear-gradient(var(--surface),var(--surface)) padding-box,repeating-linear-gradient(135deg,var(--vermillion) 0 14px,var(--surface) 14px 26px,var(--aqua) 26px 40px,var(--surface) 40px 52px) border-box;color:var(--text);box-shadow:var(--shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pc-back{transform:rotateY(180deg);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.75em - 1px),var(--pc-line) calc(1.75em - 1px),var(--pc-line) 1.75em),linear-gradient(var(--surface),var(--surface)),repeating-linear-gradient(135deg,var(--vermillion) 0 14px,var(--surface) 14px 26px,var(--aqua) 26px 40px,var(--surface) 40px 52px);background-clip:padding-box,padding-box,border-box;background-origin:padding-box,padding-box,border-box}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pc-no{display:inline-flex;padding:4px 10px;border-radius:99px;background:var(--surface-soft);border:1px solid var(--border-strong);color:var(--text);font-size:var(--fs-small);font-weight:700;letter-spacing:.06em}
.pc-stamp{position:relative;width:52px;padding:5px;border:2px dashed var(--text-soft);background:var(--c);color:var(--on-pigment);flex:none}.pc-stamp>svg{width:100%;height:auto}
.pc-postmark{position:absolute;top:10px;inset-inline-end:26px;width:62px;color:var(--text-soft);opacity:.75;transform:rotate(-14deg);pointer-events:none}
.pc-card[data-pos="0"] .pc-postmark{animation:pcThump .6s .25s cubic-bezier(.3,1.5,.4,1) both}
.pc-q{align-self:center}
.pc-hint{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:700}
.pc-hint svg{width:16px;height:16px}
.pc-lab{font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.pc-ans{margin:0;font-size:var(--fs-body);line-height:1.75;color:var(--text)}
.pc-ans span{display:inline-block;opacity:0;transform:translateY(6px)}.is-flipped .pc-ans span{opacity:1;transform:none;transition:opacity .35s calc(.5s + var(--w)*.03s),transform .35s calc(.5s + var(--w)*.03s)}
.pc-answered{position:absolute;top:18px;inset-inline-end:18px;padding:3px 10px;border:3px solid var(--btn-bg);border-radius:8px;color:var(--btn-bg);font-family:"DynaPuff",cursive;font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-10deg) scale(2.4);opacity:0}
.is-flipped .pc-answered{animation:pcSlam .45s .7s cubic-bezier(.3,1.4,.4,1) forwards}
.pc-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.pc-arr{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);transition:transform .3s,background-color .3s,color .3s}.pc-arr:hover{background:var(--saffron);color:var(--on-pigment);transform:scale(1.08)}.pc-arr svg{width:18px;height:18px}
.pc-count{direction:ltr;unicode-bidi:isolate;min-width:4.2em;text-align:center;font-family:"DynaPuff",cursive;font-size:18px;color:var(--text)}
.pc-tip{margin:12px 0 0;text-align:center;font-size:var(--fs-small);font-weight:600;color:var(--text)}
.pc-index{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pc-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:99px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.2;transition:transform .3s cubic-bezier(.3,1.5,.4,1),background-color .3s}
.pc-chip b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:var(--on-pigment);font-family:"DynaPuff",cursive;font-weight:500;font-size:12px}
.pc-chip:hover{transform:translateY(-3px) rotate(-2deg)}.pc-chip.on{background:var(--c);color:var(--on-pigment);border-color:transparent;transform:scale(1.05)}.pc-chip.on b{background:var(--surface);color:var(--text)}
.pc-cta{display:flex;flex-wrap:wrap;gap:12px}
.pc-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;transition:transform .3s,color .3s}
.pc-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}.pc-btn:hover{transform:translateY(-3px)}.pc-btn:hover::before{transform:scaleX(1)}
.pc-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.pc-btn:hover svg{transform:translateX(5px)}
.pc-btn-primary{background:var(--btn-bg);color:var(--btn-text)}.pc-btn-primary::before{background:var(--btn-hover)}
.pc-btn-ghost{border-color:var(--text);color:var(--text)}.pc-btn-ghost::before{background:var(--saffron)}.pc-btn-ghost:hover{color:var(--on-pigment)}
.pc.js:not(.in-view) .pc-card{opacity:0;transform:translate3d(70%,0,0) rotate(18deg)}
.pc.dealing .pc-card{transition-delay:calc(var(--n,0)*.12s)}
.pc:not(.js) .pc-deck{display:block}.pc:not(.js) .pc-card{margin-bottom:18px;transform:none;opacity:1!important}.pc:not(.js) .pc-flip{display:block}.pc:not(.js) .pc-face{backface-visibility:visible;transform:none;margin-bottom:8px}.pc:not(.js) .pc-ans span{opacity:1;transform:none}.pc:not(.js) .pc-ctrl,.pc:not(.js) .pc-tip,.pc:not(.js) .pc-index{display:none}
@keyframes pcFly{0%{transform:translate(-80px,30px) rotate(12deg)}50%{transform:translate(50vw,-14px) rotate(-8deg)}100%{transform:translate(110vw,36px) rotate(10deg)}}
@keyframes pcFlyR{0%{transform:translate(80px,30px) scaleX(-1) rotate(12deg)}50%{transform:translate(-50vw,-14px) scaleX(-1) rotate(-8deg)}100%{transform:translate(-110vw,36px) scaleX(-1) rotate(10deg)}}
@keyframes pcFloat{from{translate:0 0}to{translate:0 -10px}}
@keyframes pcThump{from{transform:rotate(-14deg) scale(2);opacity:0}to{transform:rotate(-14deg) scale(1);opacity:.75}}
@keyframes pcSlam{0%{opacity:0;transform:rotate(-10deg) scale(2.4)}60%{opacity:1;transform:rotate(-10deg) scale(.92)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
@media(min-width:375px){.pc{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.pc{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}}
@media(min-width:768px){.pc{--fs-h2:30px;--fs-h3:22px;--gutter:24px;padding-block:80px 88px}.pc-face{min-height:310px;padding:24px 26px 20px}.pc-stamp{width:60px}.pc-mail{width:74px}.pc-stampf{width:52px}}
@media(min-width:1024px){.pc{--fs-h2:32px;--fs-h3:24px;--gutter:clamp(24px,3vw,40px);padding-block:96px 104px}
  .pc-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"head deck" "index deck" "cta deck";grid-template-rows:auto auto 1fr;gap:28px clamp(32px,4vw,64px)}
  .pc-deckwrap{align-self:center}.pc-cta{align-self:start}.pc-face{min-height:330px}}
@media(min-width:1280px){.pc{--fs-h2:34px;--fs-h3:25px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}.pc-face{min-height:350px}}
@media(min-width:1440px){.pc{--fs-h2:36px;--fs-h3:26px}}
@media(max-width:374px){.pc-btn{width:100%}.pc-stampf,.pc-mail{display:none}.pc-face{padding:16px 14px}.pc-postmark{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}.pc-plane{display:none}}

/* ============================================================
   MIX N MUSE — EXTRAORDINARY FINAL CTA
   Scoped only to .mm-final-cta
============================================================ */

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

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

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 590px;
    padding: 44px 18px 54px;

    overflow: hidden;

    background: var(--mm-bg);
    color: var(--mm-text);

    font-family: "Manrope", sans-serif;

    display: grid;
    place-items: center;

    contain: paint;
}


/* ============================================================
   CANVAS
============================================================ */

.mm-cta-canvas {
    position: relative;
    z-index: 5;

    width: min(100%, 1380px);
    min-height: 490px;

    display: grid;
    place-items: center;

    padding: 74px 28px 76px;

    overflow: hidden;

    border-radius: 46px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255,255,255,.48),
            transparent 48%
        ),
        color-mix(
            in srgb,
            var(--mm-bg) 94%,
            var(--mm-vermillion)
        );

    border: 1px solid rgba(61,41,37,.10);

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


/* ============================================================
   CENTER CONTENT
============================================================ */

.mm-cta-content {
    position: relative;
    z-index: 20;

    width: min(100%, 760px);

    margin-inline: auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* ============================================================
   TOP LABEL
============================================================ */

.mm-cta-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 34px;

    padding: 7px 15px;

    border-radius: 999px;

    background: rgba(255,255,255,.72);

    border: 1px solid rgba(61,41,37,.12);

    color: var(--mm-text);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .10em;
    text-transform: uppercase;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.mm-label-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--mm-vermillion);

    box-shadow:
        0 0 0 4px rgba(233,79,55,.12);
}


.mm-label-dot:last-child {
    background: var(--mm-aqua);

    box-shadow:
        0 0 0 4px rgba(79,183,179,.12);
}


/* ============================================================
   KICKER
============================================================ */

.mm-cta-kicker {
    margin: 28px 0 9px;

    color: var(--mm-vermillion);

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .04em;
}


/* ============================================================
   MAIN HEADING
============================================================ */

.mm-cta-title {
    margin: 0;

    max-width: 780px;

    color: var(--mm-text);

    font-family: "DynaPuff", cursive;

    font-size: clamp(31px, 4.4vw, 52px);

    font-weight: 500;

    line-height: 1.14;

    letter-spacing: -.025em;
}


.mm-title-paint {
    position: relative;

    display: inline-block;

    color: var(--mm-vermillion);

    isolation: isolate;
}


.mm-title-paint::after {
    content: "";

    position: absolute;

    z-index: -1;

    left: 2%;
    right: -2%;

    bottom: -7px;

    height: 9px;

    border-radius: 50% 44% 48% 42%;

    background: var(--mm-saffron);

    transform:
        rotate(-1.5deg)
        scaleX(0);

    transform-origin: left center;

    transition:
        transform 1s cubic-bezier(.77,0,.18,1);
}


.mm-final-cta.is-visible
.mm-title-paint::after {
    transform: scaleX(1);
}


/* ============================================================
   DESCRIPTION
============================================================ */

.mm-cta-description {
    width: min(100%, 610px);

    margin: 18px auto 0;

    color: var(--mm-soft);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.75;
}


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

.mm-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}


.mm-cta-button {
    position: relative;

    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 13px 23px;

    border-radius: 15px;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.2;

    overflow: hidden;

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        color .3s ease,
        border-color .3s ease;
}


.mm-cta-button::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    transform:
        translateX(-105%)
        skewX(-12deg);

    background: var(--mm-saffron);

    transition:
        transform .55s cubic-bezier(.77,0,.18,1);
}


.mm-cta-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 26px rgba(61,41,37,.16);
}


.mm-cta-button:hover::before {
    transform:
        translateX(0)
        skewX(-12deg);
}


.mm-cta-button svg {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    transition:
        transform .3s ease;
}


.mm-cta-button:hover svg {
    transform: translateX(4px);
}


/* PRIMARY */

.mm-cta-primary {
    background: var(--mm-vermillion);

    color: #FFF7E8;

    border: 2px solid var(--mm-vermillion);

    box-shadow:
        0 8px 20px rgba(233,79,55,.20);
}


.mm-cta-primary:hover {
    color: #3D2925;
}


/* SECONDARY */

.mm-cta-secondary {
    background: rgba(255,255,255,.62);

    color: var(--mm-text);

    border: 2px solid var(--mm-aqua);
}


.mm-cta-secondary::before {
    background: var(--mm-aqua);
}


.mm-cta-secondary:hover {
    color: #261B19;
}


/* ============================================================
   SMALL REASSURANCE
============================================================ */

.mm-cta-note {
    margin: 17px 0 0;

    color: var(--mm-soft);

    font-size: 12px;

    font-weight: 500;

    line-height: 1.6;

    opacity: .86;
}


/* ============================================================
   SCROLL REVEAL
============================================================ */

.mm-cta-reveal {
    opacity: 0;

    transform:
        translateY(24px)
        scale(.98);

    transition:
        opacity .75s var(--ease),
        transform .85s cubic-bezier(.2,.75,.2,1);
}


.mm-final-cta.is-visible
.mm-cta-reveal {
    opacity: 1;

    transform: none;

    transition-delay: var(--cta-delay);
}


/* ============================================================
   BACKGROUND PIGMENTS
============================================================ */

.mm-cta-bg {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    overflow: hidden;
}


.mm-pigment {
    position: absolute;

    display: block;

    border-radius:
        58% 42% 63% 37% /
        42% 57% 43% 58%;

    filter:
        blur(.1px);

    opacity: .92;

    will-change:
        transform,
        border-radius;
}


/* BIG VERMILLION */

.mm-pigment-a {
    width: 330px;
    height: 220px;

    top: -105px;
    left: -100px;

    background: var(--mm-vermillion);

    transform:
        rotate(-17deg);

    animation:
        mmPigmentFloat 8s ease-in-out infinite alternate;
}


/* SAFFRON */

.mm-pigment-b {
    width: 300px;
    height: 190px;

    top: -72px;
    right: -90px;

    background: var(--mm-saffron);

    transform:
        rotate(19deg);

    animation:
        mmPigmentFloat 9s -2s ease-in-out infinite alternate;
}


/* AQUA */

.mm-pigment-c {
    width: 290px;
    height: 180px;

    bottom: -100px;
    left: -70px;

    background: var(--mm-aqua);

    transform:
        rotate(12deg);

    animation:
        mmPigmentFloat 10s -3s ease-in-out infinite alternate;
}


/* CORAL */

.mm-pigment-d {
    width: 340px;
    height: 190px;

    bottom: -100px;
    right: -80px;

    background: var(--mm-coral);

    transform:
        rotate(-13deg);

    animation:
        mmPigmentFloat 8.5s -1s ease-in-out infinite alternate;
}


/* ============================================================
   PAINT WASHES
============================================================ */

.mm-wash {
    position: absolute;

    width: 340px;
    height: 130px;

    border-radius: 50%;

    opacity: .20;

    filter: blur(22px);

    pointer-events: none;
}


.mm-wash-one {
    top: 18%;
    left: 13%;

    background: var(--mm-apricot);

    transform: rotate(-14deg);
}


.mm-wash-two {
    right: 12%;
    bottom: 17%;

    background: var(--mm-aqua);

    transform: rotate(13deg);
}


/* ============================================================
   BRUSH STROKE
============================================================ */

.mm-brush-stroke {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 50%;

    width: min(850px, 80%);
    height: 170px;

    transform:
        translate(-50%, -50%)
        rotate(-5deg);

    overflow: visible;

    opacity: .08;
}


.mm-brush-stroke path {
    fill: none;

    stroke: var(--mm-vermillion);

    stroke-width: 42;

    stroke-linecap: round;

    stroke-dasharray: 1;

    stroke-dashoffset: 1;

    vector-effect: non-scaling-stroke;

    transition:
        stroke-dashoffset 1.5s cubic-bezier(.77,0,.18,1);
}


.mm-final-cta.is-visible
.mm-brush-stroke path {
    stroke-dashoffset: 0;
}


/* ============================================================
   DOODLES
============================================================ */

.mm-doodle {
    position: absolute;

    pointer-events: none;

    overflow: visible;
}


.mm-doodle-star {
    width: 28px;
    height: 28px;

    fill: var(--mm-saffron);

    animation:
        mmTwinkle 3.5s ease-in-out infinite;
}


.mm-star-one {
    top: 16%;
    left: 24%;
}


.mm-star-two {
    right: 22%;
    bottom: 18%;

    width: 22px;
    height: 22px;

    fill: var(--mm-coral);

    animation-delay: -1.5s;
}


.mm-doodle-line {
    width: 170px;
    height: 70px;

    right: 7%;
    top: 25%;

    opacity: .55;
}


.mm-doodle-line path {
    fill: none;

    stroke: var(--mm-text);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 1;

    stroke-dashoffset: 1;

    transition:
        stroke-dashoffset 1.4s ease .4s;
}


.mm-final-cta.is-visible
.mm-doodle-line path {
    stroke-dashoffset: 0;
}


/* ============================================================
   PAINT DOTS
============================================================ */

.mm-paint-dot {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;

    animation:
        mmDotFloat 5s ease-in-out infinite alternate;
}


.mm-dot-1 {
    width: 13px;
    height: 13px;

    top: 22%;
    left: 13%;

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


.mm-dot-2 {
    width: 8px;
    height: 8px;

    top: 32%;
    left: 18%;

    background: var(--mm-coral);

    animation-delay: -2s;
}


.mm-dot-3 {
    width: 18px;
    height: 18px;

    top: 17%;
    right: 13%;

    background: var(--mm-apricot);

    animation-delay: -1s;
}


.mm-dot-4 {
    width: 9px;
    height: 9px;

    top: 30%;
    right: 18%;

    background: var(--mm-vermillion);

    animation-delay: -3s;
}


.mm-dot-5 {
    width: 14px;
    height: 14px;

    bottom: 23%;
    left: 16%;

    background: var(--mm-saffron);

    animation-delay: -1.4s;
}


.mm-dot-6 {
    width: 8px;
    height: 8px;

    bottom: 16%;
    left: 23%;

    background: var(--mm-coral);

    animation-delay: -2.7s;
}


.mm-dot-7 {
    width: 12px;
    height: 12px;

    bottom: 22%;
    right: 15%;

    background: var(--mm-aqua);

    animation-delay: -3.5s;
}


.mm-dot-8 {
    width: 7px;
    height: 7px;

    bottom: 31%;
    right: 22%;

    background: var(--mm-saffron);

    animation-delay: -4s;
}


/* ============================================================
   PARTICLES
============================================================ */

.mm-particle-field {
    position: absolute;

    inset: 0;

    z-index: 8;

    pointer-events: none;
}


.mm-particle-field span {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    opacity: 0;

    background: var(--mm-saffron);

    transform:
        translate3d(0,0,0)
        scale(.4);

    transition:
        opacity .45s ease,
        transform 1s cubic-bezier(.2,.8,.2,1);
}


.mm-particle-field span:nth-child(1) {
    top: 28%;
    left: 28%;
    background: var(--mm-vermillion);
}

.mm-particle-field span:nth-child(2) {
    top: 38%;
    left: 32%;
    background: var(--mm-aqua);
}

.mm-particle-field span:nth-child(3) {
    top: 26%;
    right: 29%;
    background: var(--mm-saffron);
}

.mm-particle-field span:nth-child(4) {
    top: 43%;
    right: 25%;
    background: var(--mm-coral);
}

.mm-particle-field span:nth-child(5) {
    bottom: 28%;
    left: 30%;
    background: var(--mm-apricot);
}

.mm-particle-field span:nth-child(6) {
    bottom: 23%;
    left: 38%;
    background: var(--mm-saffron);
}

.mm-particle-field span:nth-child(7) {
    bottom: 27%;
    right: 34%;
    background: var(--mm-aqua);
}

.mm-particle-field span:nth-child(8) {
    bottom: 35%;
    right: 29%;
    background: var(--mm-vermillion);
}

.mm-particle-field span:nth-child(9) {
    top: 20%;
    left: 42%;
    background: var(--mm-coral);
}

.mm-particle-field span:nth-child(10) {
    top: 22%;
    right: 42%;
    background: var(--mm-aqua);
}

.mm-particle-field span:nth-child(11) {
    bottom: 20%;
    left: 45%;
    background: var(--mm-vermillion);
}

.mm-particle-field span:nth-child(12) {
    bottom: 18%;
    right: 44%;
    background: var(--mm-saffron);
}


.mm-final-cta.is-visible
.mm-particle-field span {
    opacity: .72;

    transform:
    translate3d(
        calc(var(--particle-x, 0) + var(--mouse-x, 0px)),
        calc(var(--particle-y, 0) + var(--mouse-y, 0px)),
        0
    )
    scale(1);
}


.mm-particle-field span:nth-child(1) {
    --particle-x: -12px;
    --particle-y: -15px;
}

.mm-particle-field span:nth-child(2) {
    --particle-x: 13px;
    --particle-y: -10px;
}

.mm-particle-field span:nth-child(3) {
    --particle-x: 16px;
    --particle-y: -18px;
}

.mm-particle-field span:nth-child(4) {
    --particle-x: -13px;
    --particle-y: 10px;
}

.mm-particle-field span:nth-child(5) {
    --particle-x: -10px;
    --particle-y: 13px;
}

.mm-particle-field span:nth-child(6) {
    --particle-x: 12px;
    --particle-y: 9px;
}

.mm-particle-field span:nth-child(7) {
    --particle-x: 15px;
    --particle-y: 12px;
}

.mm-particle-field span:nth-child(8) {
    --particle-x: -13px;
    --particle-y: 14px;
}


/* ============================================================
   FLOATING ART — LEFT
============================================================ */

.mm-floating-art {
    position: absolute;

    z-index: 12;

    pointer-events: none;
}


.mm-art-left {
    left: 7%;
    bottom: 11%;

    width: 120px;
    height: 145px;

    transform:
        rotate(-12deg);

    animation:
        mmArtFloat 6s ease-in-out infinite alternate;
}


.mm-art-paper {
    position: absolute;

    inset: 15px 18px 10px 8px;

    background: rgba(255,255,255,.76);

    border: 1px solid rgba(61,41,37,.10);

    border-radius:
        7px 18px 11px 13px;

    transform:
        rotate(-7deg);

    box-shadow:
        0 12px 24px rgba(61,41,37,.10);
}


.mm-art-paper::after {
    content: "";

    position: absolute;

    inset: 15px;

    border:
        2px dashed
        rgba(61,41,37,.12);

    border-radius: 6px;
}


.mm-art-brush {
    position: absolute;

    z-index: 2;

    width: 70px;
    height: 100px;

    right: 0;
    top: 0;

    transform:
        rotate(28deg);
}


.mm-art-brush path {
    fill: none;

    stroke: var(--mm-vermillion);

    stroke-width: 8;

    stroke-linecap: round;
}


.mm-art-paint {
    position: absolute;

    z-index: 3;

    width: 26px;
    height: 26px;

    right: 11px;
    bottom: 13px;

    border-radius:
        60% 40% 48% 52% /
        43% 58% 42% 57%;

    background: var(--mm-aqua);

    box-shadow:
        -22px 5px 0 -6px var(--mm-saffron),
        13px -14px 0 -8px var(--mm-coral);
}


/* ============================================================
   FLOATING ART — RIGHT
============================================================ */

.mm-art-right {
    right: 6%;
    top: 13%;

    width: 135px;
    height: 105px;

    transform:
        rotate(9deg);

    animation:
        mmArtFloat 7s -2s ease-in-out infinite alternate;
}


.mm-art-swatch {
    position: absolute;

    width: 42px;
    height: 42px;

    border-radius:
        52% 48% 44% 56% /
        47% 55% 45% 53%;

    box-shadow:
        0 8px 16px rgba(61,41,37,.10);
}


.swatch-a {
    top: 7px;
    left: 5px;

    background: var(--mm-saffron);

    transform: rotate(-12deg);
}


.swatch-b {
    top: 25px;
    left: 45px;

    background: var(--mm-aqua);

    transform: rotate(8deg);
}


.swatch-c {
    top: 8px;
    right: 4px;

    background: var(--mm-coral);

    transform: rotate(17deg);
}


.mm-art-pencil {
    position: absolute;

    width: 110px;
    height: 45px;

    left: 20px;
    bottom: 0;

    transform:
        rotate(-12deg);
}


.mm-art-pencil path {
    fill: none;

    stroke: var(--mm-text);

    stroke-width: 4;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   BOTTOM PAINT
============================================================ */

.mm-bottom-paint {
    position: absolute;

    z-index: 2;

    left: 50%;
    bottom: -40px;

    width: min(850px, 75%);
    height: 95px;

    transform:
        translateX(-50%)
        rotate(-2deg);

    border-radius:
        50% 47% 55% 45% /
        55% 44% 56% 45%;

    background:
        linear-gradient(
            90deg,
            var(--mm-aqua),
            var(--mm-saffron) 35%,
            var(--mm-apricot) 67%,
            var(--mm-coral)
        );

    opacity: .82;

    filter:
        blur(.2px);
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mmPigmentFloat {

    0% {
        transform:
            translate3d(-5px, 0, 0)
            rotate(-3deg);
        border-radius:
            58% 42% 63% 37% /
            42% 57% 43% 58%;
    }

    100% {
        transform:
            translate3d(9px, 13px, 0)
            rotate(2deg);
        border-radius:
            44% 56% 39% 61% /
            57% 43% 57% 43%;
    }
}


@keyframes mmTwinkle {

    0%,
    100% {
        opacity: .55;
        transform: scale(.78) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(14deg);
    }
}


@keyframes mmDotFloat {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-11px);
    }
}


@keyframes mmArtFloat {

    from {
        margin-top: 0;
    }

    to {
        margin-top: -10px;
    }
}


/* ============================================================
   TABLET
============================================================ */

@media (min-width: 768px) {

    .mm-final-cta {
        min-height: 650px;

        padding:
            56px 24px
            68px;
    }

    .mm-cta-canvas {
        min-height: 550px;

        padding:
            86px 50px
            88px;

        border-radius: 52px;
    }

    .mm-cta-title {
        font-size: 40px;
    }

    .mm-cta-description {
        font-size: 16px;
    }

    .mm-cta-button {
        min-height: 54px;

        padding:
            14px 25px;

        font-size: 15px;
    }

    .mm-art-left {
        left: 6%;
        bottom: 12%;
    }

    .mm-art-right {
        right: 6%;
        top: 14%;
    }

    .mm-pigment-a {
        width: 390px;
        height: 250px;
    }

    .mm-pigment-b {
        width: 350px;
        height: 220px;
    }
}


/* ============================================================
   LAPTOP
============================================================ */

@media (min-width: 1024px) {

    .mm-final-cta {
        min-height: 690px;

        padding:
            62px 32px
            78px;
    }

    .mm-cta-canvas {
        min-height: 590px;

        padding:
            94px 70px
            96px;

        border-radius: 56px;
    }

    .mm-cta-title {
        font-size: 45px;
    }

    .mm-cta-description {
        max-width: 650px;

        font-size: 17px;
    }

    .mm-cta-actions {
        gap: 14px;

        margin-top: 30px;
    }

    .mm-cta-button {
        min-height: 56px;

        padding:
            15px 27px;

        font-size: 16px;
    }

    .mm-art-left {
        left: 7%;
        bottom: 12%;

        transform:
            rotate(-12deg)
            scale(1.08);
    }

    .mm-art-right {
        right: 7%;
        top: 13%;

        transform:
            rotate(9deg)
            scale(1.08);
    }

    .mm-pigment-a {
        width: 430px;
        height: 270px;
    }

    .mm-pigment-b {
        width: 390px;
        height: 240px;
    }

    .mm-pigment-c {
        width: 350px;
        height: 220px;
    }

    .mm-pigment-d {
        width: 400px;
        height: 230px;
    }
}


/* ============================================================
   LAPTOP-L
============================================================ */

@media (min-width: 1280px) {

    .mm-final-cta {
        min-height: 720px;

        padding:
            70px 42px
            86px;
    }

    .mm-cta-canvas {
        min-height: 620px;

        padding:
            105px 80px
            105px;

        border-radius: 60px;
    }

    .mm-cta-title {
        font-size: 49px;
    }

    .mm-cta-description {
        font-size: 17px;
    }

    .mm-art-left {
        left: 9%;

        transform:
            rotate(-12deg)
            scale(1.15);
    }

    .mm-art-right {
        right: 9%;

        transform:
            rotate(9deg)
            scale(1.15);
    }

    .mm-star-one {
        left: 27%;
    }

    .mm-star-two {
        right: 26%;
    }
}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 1440px) {

    .mm-final-cta {
        min-height: 750px;

        padding:
            76px 48px
            92px;
    }

    .mm-cta-canvas {
        min-height: 650px;

        padding:
            110px 90px
            110px;
    }

    .mm-cta-title {
        font-size: 52px;
    }

    .mm-cta-description {
        max-width: 680px;

        font-size: 17px;
    }

    .mm-pigment-a {
        width: 480px;
        height: 300px;
    }

    .mm-pigment-b {
        width: 430px;
        height: 270px;
    }

    .mm-pigment-c {
        width: 400px;
        height: 250px;
    }

    .mm-pigment-d {
        width: 450px;
        height: 260px;
    }
}


/* ============================================================
   MOBILE-L
============================================================ */

@media (max-width: 767px) {

    .mm-final-cta {
        min-height: 610px;

        padding:
            30px 14px
            42px;
    }

    .mm-cta-canvas {
        min-height: 530px;

        padding:
            64px 18px
            68px;

        border-radius: 32px;
    }

    .mm-cta-label {
        font-size: 11px;

        letter-spacing: .075em;
    }

    .mm-cta-kicker {
        margin-top: 22px;

        font-size: 13px;
    }

    .mm-cta-title {
        font-size: clamp(30px, 8.5vw, 38px);

        line-height: 1.17;
    }

    .mm-cta-description {
        max-width: 480px;

        margin-top: 16px;

        font-size: 15px;

        line-height: 1.68;
    }

    .mm-cta-actions {
        width: 100%;

        flex-direction: column;

        gap: 10px;

        margin-top: 24px;
    }

    .mm-cta-button {
        width: min(100%, 310px);

        min-height: 50px;

        font-size: 14px;
    }

    .mm-cta-note {
        max-width: 310px;

        margin-top: 14px;

        font-size: 11.5px;
    }

    .mm-floating-art {
        opacity: .65;

        transform: scale(.72);
    }

    .mm-art-left {
        left: -12px;
        bottom: 4%;
    }

    .mm-art-right {
        right: -13px;
        top: 7%;
    }

    .mm-doodle-line {
        width: 100px;
        height: 45px;

        right: -8px;
        top: 34%;

        opacity: .28;
    }

    .mm-star-one {
        top: 13%;
        left: 10%;
    }

    .mm-star-two {
        right: 10%;
        bottom: 14%;
    }

    .mm-bottom-paint {
        width: 120%;
    }

    .mm-pigment-a {
        width: 240px;
        height: 160px;

        top: -75px;
        left: -100px;
    }

    .mm-pigment-b {
        width: 230px;
        height: 145px;

        top: -60px;
        right: -100px;
    }

    .mm-pigment-c {
        width: 220px;
        height: 145px;

        bottom: -70px;
        left: -80px;
    }

    .mm-pigment-d {
        width: 240px;
        height: 145px;

        bottom: -70px;
        right: -90px;
    }

    .mm-brush-stroke {
        width: 115%;
        height: 110px;
    }

    .mm-particle-field span {
        width: 4px;
        height: 4px;
    }
}


/* ============================================================
   MOBILE-M
============================================================ */

@media (max-width: 424px) {

    .mm-final-cta {
        min-height: 575px;

        padding:
            24px 10px
            34px;
    }

    .mm-cta-canvas {
        min-height: 500px;

        padding:
            56px 14px
            62px;

        border-radius: 27px;
    }

    .mm-cta-label {
        max-width: 90%;

        padding:
            6px 11px;

        font-size: 10px;
    }

    .mm-label-dot {
        width: 6px;
        height: 6px;

        flex-basis: 6px;
    }

    .mm-cta-kicker {
        margin-top: 19px;

        font-size: 12px;
    }

    .mm-cta-title {
        font-size: 29px;

        letter-spacing: -.018em;
    }

    .mm-title-paint::after {
        height: 7px;
        bottom: -5px;
    }

    .mm-cta-description {
        font-size: 14px;

        line-height: 1.62;
    }

    .mm-cta-button {
        width: min(100%, 290px);

        min-height: 49px;

        padding:
            12px 17px;

        font-size: 13.5px;
    }

    .mm-cta-note {
        max-width: 270px;

        font-size: 11px;
    }

    .mm-art-left {
        left: -35px;
        bottom: 1%;

        transform:
            rotate(-12deg)
            scale(.58);
    }

    .mm-art-right {
        right: -36px;
        top: 4%;

        transform:
            rotate(9deg)
            scale(.58);
    }

    .mm-star-one {
        left: 5%;
        top: 11%;
    }

    .mm-star-two {
        right: 6%;
        bottom: 10%;
    }

    .mm-dot-1,
    .mm-dot-2,
    .mm-dot-5,
    .mm-dot-6 {
        display: none;
    }
}


/* ============================================================
   MOBILE-S — 320px to 374px
============================================================ */

@media (max-width: 374px) {

    .mm-final-cta {
        min-height: 560px;

        padding:
            20px 8px
            30px;
    }

    .mm-cta-canvas {
        min-height: 490px;

        padding:
            51px 12px
            58px;

        border-radius: 24px;
    }

    .mm-cta-label {
        font-size: 9px;

        gap: 6px;

        letter-spacing: .055em;
    }

    .mm-cta-kicker {
        margin-top: 17px;

        font-size: 11.5px;
    }

    .mm-cta-title {
        font-size: 27px;

        line-height: 1.16;
    }

    .mm-cta-description {
        max-width: 270px;

        font-size: 13.5px;

        line-height: 1.58;
    }

    .mm-cta-actions {
        margin-top: 20px;
    }

    .mm-cta-button {
        width: 100%;

        max-width: 275px;

        min-height: 48px;

        padding:
            11px 13px;

        font-size: 13px;
    }

    .mm-cta-button svg {
        width: 16px;
        height: 16px;
    }

    .mm-cta-note {
        max-width: 250px;

        font-size: 10.5px;
    }

    .mm-floating-art {
        opacity: .4;
    }

    .mm-art-left {
        left: -48px;
    }

    .mm-art-right {
        right: -48px;
    }

    .mm-pigment-a,
    .mm-pigment-b,
    .mm-pigment-c,
    .mm-pigment-d {
        opacity: .78;
    }

    .mm-doodle-line {
        display: none;
    }

    .mm-dot-3,
    .mm-dot-4,
    .mm-dot-7,
    .mm-dot-8 {
        transform: scale(.7);
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .mm-final-cta *,
    .mm-final-cta *::before,
    .mm-final-cta *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .mm-cta-reveal {
        opacity: 1;
        transform: none;
    }

    .mm-brush-stroke path,
    .mm-doodle-line path {
        stroke-dashoffset: 0;
    }

    .mm-title-paint::after {
        transform: scaleX(1);
    }
}

/* ============================================================
   MIX N MUSE — EXTRAORDINARY FOOTER
   SECTION SCOPED
============================================================ */

.mm-footer {

    --mm-footer-bg: var(--canvas);
    --mm-footer-text: var(--text);
    --mm-footer-soft: var(--text-soft);

    --mm-footer-accent: var(--aqua);
    --mm-footer-accent-2: var(--vermillion);
    --mm-footer-accent-3: var(--saffron);
    --mm-footer-accent-4: var(--coral);

    --mm-footer-border: var(--border);

    position: relative;
    isolation: isolate;

    width: 100%;

    overflow: hidden;

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

    color:
        var(--mm-footer-text);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        var(--fs-body);

    line-height:
        1.65;

    border-top:
        1px solid var(--mm-footer-border);
}


/* ============================================================
   GLOBAL FOOTER BOX SIZING
============================================================ */

.mm-footer,
.mm-footer *,
.mm-footer *::before,
.mm-footer *::after {
    box-sizing: border-box;
}


.mm-footer a {
    color: inherit;
    text-decoration: none;
}


.mm-footer button,
.mm-footer input {
    font: inherit;
}


.mm-footer button {
    cursor: pointer;
}


/* ============================================================
   TOP ARTWORK
============================================================ */

.mm-footer-top-art {

    position: relative;

    width: 100%;

    height: 88px;

    overflow: hidden;

    pointer-events: none;

    border-bottom:
        1px solid var(--mm-footer-border);
}


.mm-footer-brush {

    position: absolute;

    display: block;

    height: 9px;

    border-radius:
        50% 46% 51% 44%;

    opacity: .9;

    transform-origin: center;
}


.brush-one {

    width: 25%;

    left: -3%;
    bottom: 21px;

    background:
        var(--mm-footer-accent-2);

    transform:
        rotate(-2deg);
}


.brush-two {

    width: 31%;

    left: 34%;
    bottom: 27px;

    background:
        var(--mm-footer-accent-3);

    transform:
        rotate(1.5deg);
}


.brush-three {

    width: 24%;

    right: -2%;
    bottom: 19px;

    background:
        var(--mm-footer-accent);

    transform:
        rotate(-2deg);
}


.mm-footer-dot {

    position: absolute;

    display: block;

    border-radius: 50%;
}


.footer-dot-one {

    width: 9px;
    height: 9px;

    left: 28%;

    bottom: 29px;

    background:
        var(--mm-footer-accent-4);
}


.footer-dot-two {

    width: 6px;
    height: 6px;

    left: 69%;

    bottom: 34px;

    background:
        var(--mm-footer-accent-2);
}


.footer-dot-three {

    width: 8px;
    height: 8px;

    right: 22%;

    bottom: 28px;

    background:
        var(--mm-footer-accent-3);
}


.mm-footer-doodle {

    position: absolute;

    width: 120px;
    height: 48px;

    left: 50%;

    bottom: 8px;

    transform:
        translateX(-50%);

    opacity: .65;
}


.mm-footer-doodle path {

    fill: none;

    stroke:
        var(--mm-footer-text);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 170;

    stroke-dashoffset: 170;

    transition:
        stroke-dashoffset 1.2s
        cubic-bezier(.77,0,.18,1);
}


.mm-footer:hover
.mm-footer-doodle path {

    stroke-dashoffset: 0;
}


.mm-footer-star {

    position: absolute;

    width: 25px;
    height: 25px;

    top: 20px;

    left: 15%;

    fill:
        var(--mm-footer-accent-3);

    animation:
        mmFooterStar 4s
        ease-in-out
        infinite;
}


@keyframes mmFooterStar {

    0%,
    100% {
        transform:
            scale(.8)
            rotate(0deg);

        opacity: .55;
    }

    50% {
        transform:
            scale(1)
            rotate(12deg);

        opacity: 1;
    }
}


/* ============================================================
   FOOTER INNER
============================================================ */

.mm-footer-inner {

    width:
        min(
            calc(100% - 48px),
            1440px
        );

    margin-inline:
        auto;

    padding-block:
        58px 24px;
}


/* ============================================================
   MAIN FOUR-COLUMN AREA
============================================================ */

.mm-footer-main {

    display: grid;

    grid-template-columns:
        minmax(220px, 1.15fr)
        minmax(150px, .78fr)
        minmax(230px, 1.05fr)
        minmax(250px, 1fr);

    gap:
        44px;

    align-items:
        start;
}


/* ============================================================
   BRAND
============================================================ */

.mm-footer-brand {

    min-width: 0;

    padding-inline-end:
        14px;
}


/* EXACT LOGO SIZE SYSTEM */

.mm-footer-logo {

    display: inline-flex;

    align-items:
        center;

    width:
        min(100%, 255px);

    min-width:
        140px;

    transition:
        transform .3s
        ease;
}


.mm-footer-logo:hover {

    transform:
        translateY(-2px);
}


.mm-footer-logo-svg {

    display:
        block;

    width:
        100%;

    height:
        auto;

    overflow:
        visible;
}


/* EXACT NAVBAR LOGO COLORS */

.mm-logo-left-circle {
    fill: var(--logo-vermilion);
}

.mm-logo-right-circle {
    fill: var(--logo-saffron);
}

.mm-logo-overlap {
    fill: var(--logo-apricot);
}

.mm-logo-spark {
    fill: var(--logo-aqua);
}

.mm-logo-wordmark {

    font-family:
        "DynaPuff",
        cursive;

    font-size:
        36px;

    font-weight:
        500;

    fill:
        var(--logo-text);
}

.mm-logo-n {
    fill:
        var(--logo-aqua);
}

.mm-logo-tagline {

    font-family:
        "Manrope",
        sans-serif;

    font-weight:
        400;

    fill:
        var(--logo-text);

    opacity:
        .75;

    letter-spacing:
        3.5px;
}


/* ============================================================
   BRAND COPY
============================================================ */

.mm-footer-brand-copy {

    max-width:
        330px;

    margin:
        25px 0 20px;

    color:
        var(--mm-footer-soft);

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.75;
}


.mm-footer-brand-link {

    display:
        inline-flex;

    align-items:
        center;

    gap: 9px;

    min-height: 46px;
    padding: 11px 18px;

    border: 1px solid var(--mm-footer-accent-2);
    border-radius: 12px;

    background: var(--mm-footer-accent-2);
    color: var(--btn-text);

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.mm-footer-brand-link svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .25s ease;
}


.mm-footer-brand-link:hover {

    transform: translateY(-2px);
    background: var(--btn-hover);
    box-shadow: 0 9px 20px color-mix(in srgb, var(--mm-footer-accent-2) 22%, transparent);
}


.mm-footer-brand-link:hover svg {

    transform: translateX(3px);
}


/* ============================================================
   COLUMN HEADINGS
============================================================ */

.mm-footer-column {

    min-width:
        0;
}


.mm-footer-heading-row {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        20px;
}


.mm-footer-heading-row h2 {

    margin:
        0;

    color:
        var(--mm-footer-text);

    font-family:
        "DynaPuff",
        cursive;

    font-size:
        20px;

    font-weight:
        500;

    line-height:
        1.25;
}


.mm-footer-heading-mark {

    width:
        8px;

    height:
        22px;

    flex:
        0 0 8px;

    border-radius:
        999px;

    background:
        var(--mm-footer-accent-2);

    transform:
        rotate(8deg);
}


/* Alternate column mark */

.mm-footer-column:nth-child(2)
.mm-footer-heading-mark {

    background:
        var(--mm-footer-accent-3);
}


.mm-footer-column:nth-child(3)
.mm-footer-heading-mark {

    background:
        var(--mm-footer-accent);
}


.mm-footer-column:nth-child(4)
.mm-footer-heading-mark {

    background:
        var(--mm-footer-accent-4);
}


/* ============================================================
   QUICK LINKS
============================================================ */

.mm-footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.mm-footer-links a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    min-height:
        38px;

    padding:
        5px 0;

    color:
        var(--mm-footer-soft);

    font-size:
        13px;

    font-weight:
        600;

    border-bottom:
        1px solid transparent;

    transition:
        color .25s ease,
        padding .25s ease,
        border-color .25s ease;
}


.mm-footer-links a svg {

    width:
        16px;

    height:
        16px;

    flex:
        0 0 16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    opacity:
        .55;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.mm-footer-links a:hover {

    color:
        var(--mm-footer-text);

    padding-inline-start:
        5px;

    border-bottom-color:
        var(--mm-footer-border);
}


.mm-footer-links a:hover svg {

    opacity:
        1;

    transform:
        translateX(3px);
}


/* ============================================================
   SUPPORT
============================================================ */

.mm-footer-support-copy {

    margin:
        0 0 18px;

    color:
        var(--mm-footer-soft);

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.7;
}


.mm-footer-contact-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.mm-footer-contact {

    display:
        grid;

    grid-template-columns:
        34px minmax(0, 1fr);

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

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


.mm-contact-icon {

    display:
        grid;

    place-items:
        center;

    width:
        34px;

    height:
        34px;

    border:
        1px solid var(--mm-footer-border);

    border-radius:
        10px;

    color:
        var(--mm-footer-accent);

    background:
        color-mix(
            in srgb,
            var(--mm-footer-accent) 7%,
            transparent
        );

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease;
}


.mm-footer-contact:hover
.mm-contact-icon {

    transform:
        translateY(-2px);

    color:
        var(--mm-footer-text);

    background:
        var(--mm-footer-accent);
}


.mm-contact-icon svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.mm-footer-contact > span:last-child {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.mm-footer-contact small {

    margin-bottom:
        1px;

    color:
        var(--mm-footer-soft);

    font-size:
        10px;

    font-weight:
        600;

    opacity:
        .72;
}


.mm-footer-contact strong {

    overflow-wrap:
        anywhere;

    color:
        var(--mm-footer-text);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.45;
}


/* ============================================================
   NEWSLETTER
============================================================ */

.mm-footer-newsletter-copy {

    margin:
        0 0 18px;

    color:
        var(--mm-footer-soft);

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.7;
}


.mm-footer-newsletter-form {

    width:
        100%;
}


.mm-footer-input-wrap {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    width:
        100%;

    min-height:
        48px;

    padding:
        0 13px;

    border:
        1px solid var(--mm-footer-border);

    border-radius:
        13px;

    background:
        color-mix(
            in srgb,
            var(--mm-footer-text) 3%,
            transparent
        );

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.mm-footer-input-wrap:focus-within {

    border-color:
        var(--mm-footer-accent);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--mm-footer-accent) 12%,
            transparent
        );
}


.mm-footer-input-wrap svg {

    width:
        17px;

    height:
        17px;

    flex:
        0 0 17px;

    fill:
        none;

    stroke:
        var(--mm-footer-soft);

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.mm-footer-input-wrap input {

    width:
        100%;

    min-width:
        0;

    height:
        46px;

    padding:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--mm-footer-text);

    font-size:
        13px;

    font-weight:
        500;
}


.mm-footer-input-wrap input::placeholder {

    color:
        var(--mm-footer-soft);

    opacity:
        .68;
}


/* ============================================================
   SUBSCRIBE BUTTON
============================================================ */

.mm-footer-subscribe {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        46px;

    margin-top:
        10px;

    padding:
        11px 18px;

    border:
        1px solid var(--mm-footer-accent-2);

    border-radius:
        12px;

    background:
        var(--mm-footer-accent-2);

    color:
        var(--btn-text);

    font-size:
        13px;

    font-weight:
        700;

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.mm-footer-subscribe svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .25s ease;
}


.mm-footer-subscribe:hover {

    transform:
        translateY(-2px);

    background:
        var(--btn-hover);

    box-shadow:
        0 9px 20px
        color-mix(
            in srgb,
            var(--mm-footer-accent-2) 22%,
            transparent
        );
}


.mm-footer-subscribe:hover svg {

    transform:
        translateX(3px);
}


.mm-footer-form-message {

    min-height:
        19px;

    margin:
        8px 0 0;

    color:
        var(--mm-footer-soft);

    font-size:
        11px;

    font-weight:
        600;
}


/* ============================================================
   SOCIAL
============================================================ */

.mm-footer-social {

    margin-top:
        27px;
}


.mm-footer-social h3 {

    margin:
        0 0 12px;

    color:
        var(--mm-footer-text);

    font-family:
        "DynaPuff",
        cursive;

    font-size:
        16px;

    font-weight:
        500;
}


.mm-social-links {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.mm-social-links a {

    display:
        grid;

    place-items:
        center;

    width:
        37px;

    height:
        37px;

    border:
        1px solid var(--mm-footer-border);

    border-radius:
        11px;

    background:
        color-mix(
            in srgb,
            var(--mm-footer-text) 3%,
            transparent
        );

    color:
        var(--mm-footer-text);

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.mm-social-links a svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.mm-social-links a:hover {

    transform:
        translateY(-4px);

    color:
        #FFF7E8;

    border-color:
        var(--mm-footer-accent);

    background:
        var(--mm-footer-accent);
}


/* ============================================================
   MODERN DIVIDER
============================================================ */

.mm-footer-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    width:
        100%;

    margin:
        44px 0 22px;
}


.mm-footer-divider span {

    flex:
        1;

    height:
        1px;

    background:
        var(--mm-footer-border);
}


.mm-footer-divider i {

    position:
        relative;

    display:
        block;

    width:
        15px;

    height:
        15px;

    flex:
        0 0 15px;

    border-radius:
        50% 45% 55% 40%;

    background:
        var(--mm-footer-accent-2);

    transform:
        rotate(12deg);
}


.mm-footer-divider i::before,
.mm-footer-divider i::after {

    content:
        "";

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;
}


.mm-footer-divider i::before {

    left:
        -10px;

    top:
        5px;

    background:
        var(--mm-footer-accent-3);
}


.mm-footer-divider i::after {

    right:
        -10px;

    top:
        4px;

    background:
        var(--mm-footer-accent);
}


/* ============================================================
   BOTTOM BAR
============================================================ */

.mm-footer-bottom {

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        20px;

    min-height:
        58px;
}


.mm-footer-copyright,
.mm-footer-made {

    margin:
        0;

    color:
        var(--mm-footer-soft);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.5;
}


.mm-footer-made {

    text-align:
        end;
}


.mm-footer-made span {

    color:
        var(--mm-footer-accent-2);

    font-size:
        14px;
}


.mm-footer-bottom-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    color:
        var(--mm-footer-soft);

    font-size:
        11px;

    font-weight:
        600;
}


.mm-footer-bottom-links a {

    transition:
        color .25s ease;
}


.mm-footer-bottom-links a:hover {

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


.mm-footer-bottom-links > span {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--mm-footer-border);
}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.mm-footer a:focus-visible,
.mm-footer button:focus-visible,
.mm-footer input:focus-visible {

    outline:
        3px solid var(--focus);

    outline-offset:
        3px;
}


.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0,0,0,0);

    white-space:
        nowrap;

    border:
        0;
}


/* ============================================================
   TABLET — 768px+
============================================================ */

@media (min-width: 768px) {

    .mm-footer-inner {

        width:
            min(
                calc(100% - 64px),
                1400px
            );

        padding-block:
            62px 26px;
    }


    .mm-footer-main {

        grid-template-columns:
            1.1fr
            .85fr
            1fr
            1fr;

        gap:
            30px;
    }


    .mm-footer-logo {

        width:
            min(100%, 240px);
    }


    .mm-footer-heading-row h2 {

        font-size:
            19px;
    }
}


/* ============================================================
   LAPTOP — 1024px+
============================================================ */

@media (min-width: 1024px) {

    .mm-footer-top-art {

        height:
            96px;
    }


    .mm-footer-inner {

        width:
            min(
                calc(100% - 80px),
                1420px
            );

        padding-block:
            68px 28px;
    }


    .mm-footer-main {

        grid-template-columns:
            1.18fr
            .82fr
            1fr
            1.04fr;

        gap:
            42px;
    }


    .mm-footer-brand {

        padding-inline-end:
            24px;
    }


    .mm-footer-logo {

        width:
            250px;
    }


    .mm-footer-heading-row h2 {

        font-size:
            20px;
    }


    .mm-footer-brand-copy,
    .mm-footer-support-copy,
    .mm-footer-newsletter-copy {

        font-size:
            13.5px;
    }
}


/* ============================================================
   LAPTOP-L — 1280px+
============================================================ */

@media (min-width: 1280px) {

    .mm-footer-inner {

        width:
            min(
                calc(100% - 96px),
                1440px
            );

        padding-block:
            72px 30px;
    }


    .mm-footer-main {

        gap:
            54px;
    }


    .mm-footer-brand-copy {

        max-width:
            340px;

        font-size:
            14px;
    }


    .mm-footer-links a,
    .mm-footer-contact strong {

        font-size:
            13px;
    }
}


/* ============================================================
   DESKTOP — 1440px+
============================================================ */

@media (min-width: 1440px) {

    .mm-footer-inner {

        width:
            min(
                calc(100% - 112px),
                1480px
            );
    }


    .mm-footer-main {

        grid-template-columns:
            1.2fr
            .8fr
            1fr
            1.02fr;

        gap:
            60px;
    }


    .mm-footer-logo {

        width:
            260px;
    }
}


/* ============================================================
   MOBILE-L — below 768px
============================================================ */

@media (max-width: 767px) {

    .mm-footer-top-art {

        height:
            65px;
    }


    .mm-footer-brush {

        height:
            7px;
    }


    .brush-one {

        width:
            35%;
    }


    .brush-two {

        width:
            34%;

        left:
            33%;
    }


    .brush-three {

        width:
            32%;
    }


    .mm-footer-doodle {

        width:
            90px;

        height:
            38px;
    }


    .mm-footer-star {

        width:
            20px;

        height:
            20px;

        left:
            10%;

        top:
            13px;
    }


    .mm-footer-inner {

        width:
            calc(100% - 32px);

        padding-block:
            44px 22px;
    }


    .mm-footer-main {

        grid-template-columns:
            1fr;

        gap:
            38px;
    }


    .mm-footer-brand {

        padding-inline-end:
            0;

        text-align:
            center;
    }


    .mm-footer-logo {

        width:
            min(100%, 235px);

        margin-inline:
            auto;
    }


    .mm-footer-brand-copy {

        max-width:
            380px;

        margin:
            20px auto 17px;

        font-size:
            14px;
    }


    .mm-footer-brand-link {

        justify-content:
            center;
    }


    .mm-footer-column {

        width:
            100%;
    }


    .mm-footer-heading-row {

        justify-content:
            flex-start;

        margin-bottom:
            14px;
    }


    .mm-footer-heading-row h2 {

        font-size:
            19px;
    }


    .mm-footer-links a {

        min-height:
            40px;

        font-size:
            13.5px;
    }


    .mm-footer-support-copy,
    .mm-footer-newsletter-copy {

        max-width:
            500px;

        font-size:
            13.5px;
    }


    .mm-footer-contact-list {

        gap:
            11px;
    }


    .mm-footer-newsletter-form {

        max-width:
            500px;
    }


    .mm-footer-subscribe {

        width:
            100%;
    }


    .mm-footer-social {

        margin-top:
            25px;
    }


    .mm-social-links {

        gap:
            9px;
    }


    .mm-footer-divider {

        margin:
            34px 0 19px;
    }


    .mm-footer-bottom {

        grid-template-columns:
            1fr;

        gap:
            12px;

        text-align:
            center;
    }


    .mm-footer-copyright,
    .mm-footer-made {

        text-align:
            center;
    }


    .mm-footer-bottom-links {

        order:
            2;
    }


    .mm-footer-made {

        order:
            3;
    }
}


/* ============================================================
   MOBILE-M — below 425px
============================================================ */

@media (max-width: 424px) {

    .mm-footer-inner {

        width:
            calc(100% - 24px);

        padding-block:
            38px 20px;
    }


    .mm-footer-main {

        gap:
            34px;
    }


    .mm-footer-logo {

        width:
            min(100%, 220px);
    }


    .mm-footer-brand-copy {

        max-width:
            300px;

        font-size:
            13px;

        line-height:
            1.65;
    }


    .mm-footer-heading-row h2 {

        font-size:
            18px;
    }


    .mm-footer-links a {

        font-size:
            13px;
    }


    .mm-footer-contact {

        grid-template-columns:
            32px minmax(0,1fr);

        gap:
            9px;
    }


    .mm-contact-icon {

        width:
            32px;

        height:
            32px;
    }


    .mm-footer-contact strong {

        font-size:
            11.5px;
    }


    .mm-footer-contact small {

        font-size:
            9.5px;
    }


    .mm-footer-bottom-links {

        gap:
            7px;

        font-size:
            10px;
    }
}


/* ============================================================
   MOBILE-S — 320px–374px
============================================================ */

@media (max-width: 374px) {

    .mm-footer-inner {

        width:
            calc(100% - 20px);

        padding-block:
            34px 18px;
    }


    .mm-footer-top-art {

        height:
            58px;
    }


    .mm-footer-main {

        gap:
            30px;
    }


    .mm-footer-logo {

        width:
            min(100%, 205px);
    }


    .mm-footer-brand-copy {

        max-width:
            275px;

        font-size:
            12.5px;
    }


    .mm-footer-heading-row {

        gap:
            7px;

        margin-bottom:
            12px;
    }


    .mm-footer-heading-mark {

        width:
            7px;

        flex-basis:
            7px;

        height:
            19px;
    }


    .mm-footer-heading-row h2 {

        font-size:
            17px;
    }


    .mm-footer-links a {

        min-height:
            38px;

        font-size:
            12.5px;
    }


    .mm-footer-support-copy,
    .mm-footer-newsletter-copy {

        font-size:
            12.5px;
    }


    .mm-footer-contact strong {

        font-size:
            11px;
    }


    .mm-footer-newsletter-form {

        width:
            100%;
    }


    .mm-footer-bottom-links {

        row-gap:
            6px;

        font-size:
            9.5px;
    }


    .mm-footer-copyright,
    .mm-footer-made {

        font-size:
            10px;
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .mm-footer *,
    .mm-footer *::before,
    .mm-footer *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* ============================================================
   FOOTER ENTRANCE ANIMATION
============================================================ */

.mm-footer-main > * {

    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2,.75,.2,1);

    transition-delay:
        var(--footer-delay, 0ms);
}


.mm-footer.mm-footer-visible .mm-footer-main > * {

    opacity:
        1;

    transform:
        none;
}


@media (prefers-reduced-motion: reduce) {

    .mm-footer-main > * {

        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }
}
/* ============================================================
   MIX N MUSE — CLASSES PAGE (pages/classes.html)
   Section 1: gallery-doorway banner (75vh)
   Section 2: colour-journey path (age groups)
   Every selector is prefixed .cl-  |  colours come from dark.css
   ============================================================ */
.cl-banner,.cl-journey{font-family:"Manrope",sans-serif;font-size:16px;line-height:1.65;color:var(--text)}
.cl-banner :focus-visible,.cl-journey :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cl-wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--cl-gutter,16px)}
.cl-banner,.cl-journey{--cl-gutter:16px}

/* ---------- shared bits ---------- */
.cl-tag{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.cl-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vermillion)}
.cl-hl{position:relative;display:inline-block;color:var(--vermillion)}
.cl-hl svg{position:absolute;inset-inline:0;bottom:-.1em;width:100%;height:.3em;overflow:visible}
.cl-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.cl-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:14px;border:2px solid transparent;font-size:16px;font-weight:700;line-height:1.2;transition:transform .3s,color .3s}
.cl-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease,cubic-bezier(.77,0,.18,1))}
.cl-btn:hover{transform:translateY(-3px)}.cl-btn:hover::before{transform:scaleX(1)}
.cl-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.cl-btn:hover svg{transform:translateX(5px)}
.cl-btn-primary{background:var(--btn-bg);color:var(--btn-text);box-shadow:0 12px 26px -12px var(--btn-bg)}.cl-btn-primary::before{background:var(--btn-hover)}
.cl-btn-ghost{border-color:var(--text);color:var(--text)}.cl-btn-ghost::before{background:var(--saffron)}.cl-btn-ghost:hover{color:var(--on-pigment)}

/* ============================================================
   SECTION 1 — BANNER (75vh): centred copy between two doorway pairs
   ============================================================ */
.cl-banner{--cl-pad:clamp(28px,4.5vh,44px);position:relative;isolation:isolate;overflow:hidden;display:flex;min-height:75vh;padding-top:96px;background:var(--canvas)}
.cl-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none;animation:clMorph 16s ease-in-out infinite alternate}
.cl-blob-1{width:min(60vw,520px);aspect-ratio:1;inset-block-start:-10%;inset-inline-start:-10%;background:var(--apricot);opacity:.28}
.cl-blob-2{width:min(50vw,440px);aspect-ratio:1;inset-block-end:-12%;inset-inline-end:-8%;background:var(--aqua);opacity:.22;animation-delay:-7s}
.cl-banner .cl-wrap{flex:1;display:flex;align-items:center;padding-block:var(--cl-pad)}
.cl-stage{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy copy" "left right";gap:28px 12px;align-items:center}
.cl-copy{grid-area:copy;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:720px;margin-inline:auto}
.cl-crumb{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;margin-bottom:18px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);font-size:14px;font-weight:600;line-height:1.4}
.cl-crumb a{color:var(--text-soft);transition:color .25s}.cl-crumb a:hover{color:var(--vermillion)}
.cl-crumb i{font-style:normal;color:var(--text-soft)}
.cl-crumb [aria-current]{color:var(--text);font-weight:700}
.cl-copy h1{margin:0 0 16px;font-family:"DynaPuff",cursive;font-weight:500;font-size:clamp(32px,4.1vw,56px);line-height:1.15;color:var(--text)}
.cl-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.18em;margin-bottom:-.18em}
.cl-w>span{display:inline-block}
.cl-w.cl-hl{padding-bottom:.34em;margin-bottom:-.34em}
.cl-lead{margin:0 0 24px;max-width:34em;font-size:17px;color:var(--text-soft)}
.cl-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:24px}
.cl-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:0;padding:0;list-style:none}
.cl-stats li{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;line-height:1.4;color:var(--text)}
.cl-stats li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.cl-stats li:nth-child(1){--c:var(--saffron)}.cl-stats li:nth-child(2){--c:var(--aqua)}.cl-stats li:nth-child(3){--c:var(--coral)}

/* doorway arches */
.cl-group{display:flex;align-items:flex-end;gap:10px;height:clamp(150px,42vw,250px)}
.cl-group-l{grid-area:left}.cl-group-r{grid-area:right}
.cl-arch{position:relative;flex:1 1 0;min-width:0;margin:0;padding:6px;border-radius:999px 999px 20px 20px;background:var(--c);box-shadow:var(--shadow);animation:clBob 6s ease-in-out infinite alternate;animation-delay:var(--b,0s)}
.cl-arch.is-outer{height:72%}.cl-arch.is-inner{height:100%}
.cl-arch-in{position:relative;height:100%;overflow:hidden;border-radius:999px 999px 14px 14px;background:var(--surface-soft)}
.cl-arch-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cl-arch:hover img{transform:scale(1.08)}
.cl-cap{display:none;position:absolute;inset-inline:8px;bottom:10px;padding:6px 8px;border-radius:10px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);font-size:14px;font-weight:700;line-height:1.3;text-align:center}
.cl-spark{position:absolute;z-index:3;width:24px;pointer-events:none;animation:clTwinkle 3s ease-in-out infinite}
.cl-spark-1{top:-10px;inset-inline-end:-6px;fill:var(--saffron)}
.cl-spark-2{bottom:22%;inset-inline-start:-12px;width:20px;fill:var(--coral);animation-delay:-1.5s}

/* banner intro animation (hidden states only when JS is present) */
.cl-anim .cl-crumb,.cl-anim .cl-lead,.cl-anim .cl-cta,.cl-anim .cl-stats{opacity:0;transform:translateY(22px)}
.cl-anim .cl-w>span{transform:translateY(120%)}
.cl-anim .cl-arch{opacity:0;transform:translateY(70px) scaleY(.7);transform-origin:50% 100%}
.cl-anim .cl-arch img{transform:scale(1.3)}
.cl-ready .cl-crumb,.cl-ready .cl-lead,.cl-ready .cl-cta,.cl-ready .cl-stats{opacity:1;transform:none;transition:opacity .8s var(--d,.2s),transform .8s var(--d,.2s) cubic-bezier(.2,.7,.2,1)}
.cl-ready .cl-w>span{transform:none;transition:transform .9s calc(.3s + var(--i)*.09s) cubic-bezier(.2,.85,.2,1)}
.cl-ready .cl-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s 1.1s ease}
.cl-ready .cl-arch{opacity:1;transform:none;transition:opacity .6s var(--d,.4s),transform 1.1s var(--d,.4s) cubic-bezier(.2,.9,.25,1.1)}
.cl-ready .cl-arch img{transform:none;transition:transform 1.6s var(--d,.4s) cubic-bezier(.2,.7,.2,1)}
.cl-ready .cl-arch:hover img{transition-delay:0s;transform:scale(1.08)}

/* ============================================================
   SECTION 2 — COLOUR JOURNEY (scroll-drawn ribbon, 4 age stops)
   ============================================================ */
.cl-journey{--cl-space:clamp(48px,6vw,88px);--cl-node:64px;--cl-drop:rgba(61,41,37,.18);position:relative;isolation:isolate;overflow:hidden;padding-block:var(--cl-space);background:color-mix(in srgb,var(--saffron) 9%,var(--canvas))}
html[data-theme="dark"] .cl-journey{--cl-drop:rgba(0,0,0,.42)}
.cl-jblob{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none;width:min(46vw,460px);aspect-ratio:1;opacity:.2}
.cl-jblob-1{inset-block-start:14%;inset-inline-start:-14%;background:var(--aqua)}
.cl-jblob-2{inset-block-start:46%;inset-inline-end:-14%;background:var(--coral)}
.cl-jblob-3{inset-block-end:4%;inset-inline-start:-10%;background:var(--apricot)}
.cl-jhead{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:720px;margin:0 auto var(--cl-space)}
.cl-jhead h2{margin:16px 0 14px;font-family:"DynaPuff",cursive;font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.2;color:var(--text)}
.cl-jhead .cl-lead{margin:0;max-width:36em}

.cl-path{position:relative;display:grid;gap:var(--cl-space)}
.cl-ribbon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.cl-track{fill:none;stroke:var(--border-strong);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 12}
.cl-draw{fill:none;stroke:url(#clGrad);stroke-width:10;stroke-linecap:round}
.cl-tip{opacity:0;transition:opacity .3s}
.cl-tip circle:first-child{fill:var(--vermillion);opacity:.28}
.cl-tip circle:last-child{fill:var(--vermillion);stroke:var(--canvas);stroke-width:3}

.cl-stop{position:relative;z-index:1;display:grid;column-gap:16px;row-gap:20px;align-items:start;grid-template-columns:var(--cl-node) minmax(0,1fr);grid-template-areas:"node media" "node text"}
.cl-node{grid-area:node;justify-self:center;display:grid;place-items:center;align-content:center;width:var(--cl-node);aspect-ratio:1;border-radius:50%;background:var(--c);color:var(--on-pigment);border:5px solid var(--canvas);box-shadow:var(--shadow);font-family:"DynaPuff",cursive;font-weight:500;line-height:1.05;text-align:center;position:relative}
.cl-node b{font-weight:500;font-size:17px}
.cl-node small{display:none;font-family:"Manrope",sans-serif;font-weight:700;font-size:14px;line-height:1.2}
.cl-node::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--c);opacity:0;pointer-events:none}
.cl-node.is-current::after{animation:clPing 2.4s ease-out infinite}

.cl-media{grid-area:media;position:relative;isolation:isolate;margin:0;width:100%;max-width:470px;filter:drop-shadow(0 16px 22px var(--cl-drop))}
.cl-blobbg{position:absolute;z-index:-1;inset-block:-14px;inset-inline:-14px 14%;border-radius:46% 54% 48% 52%/52% 46% 54% 48%;background:var(--c);transform:rotate(-6deg)}
.cl-shape{position:relative;overflow:hidden;aspect-ratio:1.15/1;border-radius:var(--sh);background:var(--surface-soft)}
.cl-zoom{position:absolute;inset:0}
.cl-zoom img{position:absolute;inset:-9% 0;width:100%;height:118%;max-width:none;object-fit:cover;transform:translateY(var(--py,0px))}
.cl-sticker{position:absolute;z-index:3;inset-inline-end:-8px;bottom:-14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:var(--surface);color:var(--text);border:1.5px solid var(--border-strong);font-size:14px;font-weight:700;line-height:1.3}
.cl-sticker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}

.cl-text{grid-area:text;max-width:520px}
.cl-kicker{margin:0 0 8px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);line-height:1.4}
.cl-kicker::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c);flex:none}
.cl-text h3{margin:0 0 10px;font-family:"DynaPuff",cursive;font-weight:500;font-size:clamp(24px,2.6vw,34px);line-height:1.2;color:var(--text)}
.cl-desc{margin:0 0 20px;color:var(--text-soft)}
.cl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px;margin:0 0 20px}
.cl-facts div{padding-top:10px;border-top:3px solid var(--c)}
.cl-facts dt{font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);line-height:1.4}
.cl-facts dd{margin:2px 0 0;font-size:16px;font-weight:700;color:var(--text)}
.cl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.cl-chips li{padding:7px 14px;border-radius:999px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 16%,var(--surface));color:var(--text);font-size:14px;font-weight:600;line-height:1.4}
.cl-text .cl-btn-ghost::before{background:var(--c)}

.cl-foot{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:var(--cl-space)}
.cl-foot p{margin:0 0 20px;max-width:32em;font-size:17px;color:var(--text-soft)}

/* journey reveal states */
.cl-anim .cl-shape{clip-path:circle(0% at 50% 50%)}
.cl-anim .cl-zoom{transform:scale(1.3)}
.cl-anim .cl-blobbg{opacity:0;transform:scale(.55) rotate(-26deg)}
.cl-anim .cl-sticker{opacity:0;transform:scale(.4) rotate(-12deg)}
.cl-anim .cl-text>*{opacity:0;transform:translateY(22px)}
.cl-anim .cl-node{transform:scale(.9);opacity:.55}
.cl-anim .cl-foot,.cl-anim .cl-jhead>*{opacity:0;transform:translateY(22px)}
.cl-stop.is-in .cl-shape{clip-path:circle(80% at 50% 50%);transition:clip-path 1.1s cubic-bezier(.45,0,.25,1)}
.cl-stop.is-in .cl-zoom{transform:none;transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}
.cl-stop.is-in .cl-blobbg{opacity:1;transform:rotate(-6deg);transition:opacity .5s,transform 1s cubic-bezier(.3,1.5,.4,1)}
.cl-stop.is-in .cl-sticker{opacity:1;transform:none;transition:opacity .4s .9s,transform .8s .9s cubic-bezier(.3,1.6,.4,1)}
.cl-stop.is-in .cl-text>*{opacity:1;transform:none;transition:opacity .7s calc(.25s + var(--i)*.08s),transform .7s calc(.25s + var(--i)*.08s) cubic-bezier(.2,.7,.2,1)}
.cl-node.is-reached{transform:scale(1);opacity:1;transition:transform .6s cubic-bezier(.3,1.6,.4,1),opacity .4s}
.cl-in-view .cl-jhead>*{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
.cl-foot.is-in{opacity:1;transform:none;transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}

@keyframes clMorph{to{border-radius:42% 58% 63% 37%/45% 35% 65% 55%;transform:translate(30px,24px) scale(1.08)}}
@keyframes clBob{from{translate:0 0}to{translate:0 -8px}}
@keyframes clTwinkle{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@keyframes clPing{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}

/* ---------- responsive ---------- */
@media (min-width:425px){.cl-banner,.cl-journey{--cl-gutter:20px}.cl-node b{font-size:18px}}
@media (min-width:600px){.cl-group{height:clamp(200px,34vw,280px);gap:14px}.cl-arch{padding:7px}}
@media (max-width:479px){
  .cl-facts{grid-template-columns:1fr;gap:8px}
  .cl-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 0 2px 12px;border-top:0;border-inline-start:3px solid var(--c);padding-inline:12px 0}
}
@media (min-width:700px) and (max-width:899px){
  .cl-stop{grid-template-columns:var(--cl-node) minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"node media text";align-items:center}
  .cl-media{max-width:none}
}
@media (min-width:768px){
  .cl-banner,.cl-journey{--cl-gutter:24px}
  .cl-banner{padding-top:104px}
  .cl-cap{display:block}
  .cl-lead{font-size:18px}
  .cl-journey{--cl-node:76px}
  .cl-node b{font-size:20px}
}
@media (min-width:900px){
  .cl-journey{--cl-node:104px}
  .cl-node b{font-size:22px}
  .cl-node small{display:block}
  .cl-stop{column-gap:clamp(20px,3vw,48px);align-items:center;grid-template-columns:minmax(0,1fr) var(--cl-node) minmax(0,1fr);grid-template-areas:"media node text"}
  .cl-stop:nth-of-type(even){grid-template-areas:"text node media"}
  .cl-media{justify-self:end}
  .cl-stop:nth-of-type(even) .cl-media{justify-self:start}
  .cl-stop:nth-of-type(even) .cl-text{justify-self:end;width:100%}
  .cl-blobbg{inset-inline:-14px 14%}
  .cl-stop:nth-of-type(even) .cl-blobbg{inset-inline:14% -14px;transform:rotate(6deg)}
  .cl-stop.is-in:nth-of-type(even) .cl-blobbg{transform:rotate(6deg)}
  .cl-stop:nth-of-type(even) .cl-sticker{inset-inline-end:auto;inset-inline-start:-8px}
}
@media (min-width:1024px){
  .cl-banner,.cl-journey{--cl-gutter:clamp(24px,3vw,40px)}
  .cl-stage{--cl-aw:clamp(96px,9.6vw,168px);grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"left copy right";gap:clamp(24px,3vw,48px);min-height:min(calc(75vh - 104px - 2*var(--cl-pad)),600px)}
  .cl-group{height:auto;align-self:stretch;gap:12px}
  .cl-arch{flex:none;width:var(--cl-aw)}
  .cl-lead{font-size:clamp(17px,1.4vw,19px)}
}
@media (min-width:1024px) and (max-width:1199px){.cl-cap{display:none}}
@media (min-width:1280px){.cl-banner,.cl-journey{--cl-gutter:clamp(32px,3.5vw,48px)}.cl-group{gap:16px}}
@media (max-width:374px){.cl-btn{width:100%}.cl-spark{display:none}.cl-group{gap:6px}}
@media (prefers-reduced-motion:reduce){.cl-arch,.cl-blob,.cl-spark,.cl-node.is-current::after{animation:none!important}}


/* ---------- SECTION 3 — INSIDE EVERY CLASS (bento mosaic) ---------- */
.cl-inside{--cl-space:clamp(48px,6vw,88px);position:relative;isolation:isolate;overflow:hidden;padding-block:var(--cl-space);font-family:"Manrope",sans-serif;font-size:16px;line-height:1.65;color:var(--text);background:var(--canvas);--cl-gutter:16px}
.cl-inside :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cl-inside .cl-jhead{margin-bottom:var(--cl-space)}
.cl-bento{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"img img" "num a" "b c"}
.cl-bento>:nth-child(1){grid-area:img}.cl-bento>:nth-child(2){grid-area:num}.cl-bento>:nth-child(3){grid-area:a}.cl-bento>:nth-child(4){grid-area:b}.cl-bento>:nth-child(5){grid-area:c}
.cl-tile{position:relative;margin:0;padding:22px;border-radius:26px;background:var(--c);color:var(--on-pigment);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:190px;overflow:hidden;transition:transform .45s cubic-bezier(.3,1.4,.4,1)}
.cl-tile:hover{transform:translateY(-6px) rotate(-.6deg)}
.cl-tile h3{margin:0;font-family:"DynaPuff",cursive;font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.2}
.cl-tile p{margin:0;font-size:15px;line-height:1.5;font-weight:500}
.cl-ico{width:44px;height:44px;padding:10px;border-radius:14px;background:rgba(255,249,239,.62);margin-bottom:auto}
.cl-tile::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,249,239,.24);pointer-events:none}
.cl-big{display:flex;align-items:baseline;gap:10px;margin-bottom:auto}
.cl-big b{font-family:"DynaPuff",cursive;font-weight:500;font-size:clamp(64px,7vw,96px);line-height:1}
.cl-big i{font-style:normal;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.08em}
.cl-t-img{padding:0;background:var(--surface-soft);min-height:300px;justify-content:flex-end}
.cl-t-img::after{display:none}
.cl-t-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.cl-t-img:hover img{transform:scale(1.06)}
.cl-t-img figcaption{position:relative;z-index:2;margin:16px;padding:14px 16px;border-radius:18px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);display:flex;flex-direction:column;gap:2px}
.cl-t-img figcaption b{font-family:"DynaPuff",cursive;font-weight:500;font-size:20px;line-height:1.25}
.cl-t-img figcaption span{font-size:15px;line-height:1.5;color:var(--text-soft)}
.cl-inside .cl-foot{margin-top:var(--cl-space)}
.cl-anim .cl-tile{opacity:0;transform:translateY(34px) scale(.96)}
.cl-anim .cl-tile.is-in{opacity:1;transform:none;transition:opacity .7s calc(var(--i)*.12s),transform .9s calc(var(--i)*.12s) cubic-bezier(.2,.9,.25,1.1)}
.cl-anim .cl-tile.is-in:hover{transform:translateY(-6px) rotate(-.6deg);transition-delay:0s;transition-duration:.45s}
@media (min-width:425px){.cl-inside{--cl-gutter:20px}}
@media (min-width:768px){.cl-inside{--cl-gutter:24px}.cl-bento{gap:18px}.cl-tile{min-height:220px}}
@media (min-width:1024px){
  .cl-inside{--cl-gutter:clamp(24px,3vw,40px)}
  .cl-bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(230px,auto));grid-template-areas:"img img img img img a a a a b b b" "img img img img img num num num c c c c"}
  .cl-bento>:nth-child(1){grid-area:img}.cl-bento>:nth-child(3){grid-area:a}.cl-bento>:nth-child(4){grid-area:b}.cl-bento>:nth-child(2){grid-area:num}.cl-bento>:nth-child(5){grid-area:c}
  .cl-t-img{min-height:0}
}
@media (min-width:1280px){.cl-inside{--cl-gutter:clamp(32px,3.5vw,48px)}}
@media (max-width:374px){.cl-tile{padding:16px}}
.cl-anim .cl-jhead.cl-in-view-h>*{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}


/* ============================================================
   MIX N MUSE - LOGIN / SIGN UP / 404 PAGES
   Additive file: every class is prefixed au-, lg-, su- or nf-.
   Uses the shared tokens from dark.css (light + dark) and the
   same typography as the rest of the site:
   DynaPuff (headings) + Manrope (body). All text is 13px or more.
   Load order: dark.css > styles.css > auth.css > rtl.css
   ============================================================ */

.au *,
.au *::before,
.au *::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   MINIMAL NAVBAR  (logo left, RTL + dark mode + CTA right)
   ------------------------------------------------------------ */
.site-header .main-navbar.nav-min {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nav-min-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nav-min .nav-cta { flex-shrink: 0; }
.nav-min .control-label { font-size: 13px; }
.nav-min .cta-short,
.nav-min .cta-xs { display: none; }

@media (max-width: 479px) {
    .nav-min .cta-long { display: none; }
    .nav-min .cta-short { display: inline; }
    .nav-min .nav-cta { min-height: 40px; padding: 8px 13px; font-size: 13px; }
    .nav-min .nav-cta svg { display: none; }
    .nav-min .control-label { display: none; }
    .nav-min .icon-control { width: 40px; min-width: 40px; height: 40px; padding: 7px; }
}

@media (max-width: 374px) {
    .site-header .main-navbar.nav-min { gap: 6px; }
    .nav-min-actions { gap: 3px; }
    .nav-min .cta-short { display: none; }
    .nav-min .cta-xs { display: inline; }
    .nav-min .icon-control { width: 36px; min-width: 36px; height: 36px; }
    .nav-min .nav-cta { padding: 7px 10px; }
}

html[dir="rtl"] .nav-min .nav-cta svg { transform: scaleX(-1); }
html[dir="rtl"] .nav-min .nav-cta:hover svg { transform: scaleX(-1) translateX(3px); }

/* ------------------------------------------------------------
   PAGE SHELL  (equal top + bottom padding on every page)
   ------------------------------------------------------------ */
.au {
    --au-pad: clamp(24px, 4.5vw, 56px);
    --au-gap: clamp(24px, 4vw, 64px);
    --au-r: 28px;
    --au-hdr: 96px;
    --au-pig-1: var(--vermillion);
    --au-pig-2: var(--saffron);
    --au-pig-3: var(--aqua);
    --au-pig-4: var(--apricot);
    --au-pig-5: var(--coral);
}

@media (max-width: 767px) { .au { --au-hdr: 78px; } }

.au-main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: var(--hdr, var(--au-hdr));
    background: var(--canvas);
}

.au-stage {
    flex: 1;
    display: flex;
    align-items: center;
    padding-block: var(--au-pad);
}

.au-stage .wrap { max-width: 1400px; }

.au-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.au-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--border-strong) 1.3px, transparent 1.6px);
    background-size: 28px 28px;
    opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 72%);
}

.au-bg .blob-1 { opacity: .28; }
.au-bg .blob-2 { opacity: .2; }

/* ------------------------------------------------------------
   ENTRANCE HELPERS  (html gets .is-ready from auth.js)
   ------------------------------------------------------------ */
.au-in {
    opacity: 0;
    transform: translateY(26px);
}

.is-ready .au-in {
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--d, .2s), transform .9s var(--d, .2s) cubic-bezier(.2, .8, .2, 1);
}

.au .tag { font-size: 13px; margin-bottom: 14px; }

.au-title {
    font-family: "DynaPuff", cursive;
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.16;
    margin: 0 0 12px;
    color: var(--text);
}

.au-lead {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 34em;
}

.au-title .w.hl { padding-bottom: .36em; margin-bottom: -.36em; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.au a:focus-visible,
.au button:focus-visible,
.au input:focus-visible,
.au select:focus-visible,
.nav-min a:focus-visible,
.nav-min button:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   CARD
   ------------------------------------------------------------ */
.au-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--au-r);
    padding: clamp(22px, 3.2vw, 40px);
    box-shadow: var(--shadow);
}

.au-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg,
        var(--vermillion) 0 25%, var(--saffron) 25% 50%,
        var(--aqua) 50% 75%, var(--apricot) 75% 100%);
    transform: scaleX(0);
    transform-origin: left center;
}

html[dir="rtl"] .au-card::before { transform-origin: right center; }
.is-ready .au-card::before { transform: scaleX(1); transition: transform 1.1s .5s cubic-bezier(.77, 0, .18, 1); }

.au-card.is-shake { animation: auShake .5s; }

.au-card-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}

.au .tag { white-space: nowrap; }

@media (max-width: 440px) {
    .au-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .au-card-head .mascot { width: 72px; }
}

/* ------------------------------------------------------------
   FIELDS
   ------------------------------------------------------------ */
.au-field { position: relative; margin-bottom: 16px; }

.au-field input,
.au-field select {
    display: block;
    width: 100%;
    min-height: 58px;
    padding: 24px 52px 8px 16px;
    border: 2px solid var(--border-strong);
    border-radius: 14px;
    background: var(--canvas);
    color: var(--text);
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: border-color .25s, box-shadow .25s, background-color .25s;
    -webkit-appearance: none;
            appearance: none;
}

html[dir="rtl"] .au-field input,
html[dir="rtl"] .au-field select { padding: 24px 16px 8px 52px; }

.au-field input:focus,
.au-field select:focus {
    outline: none;
    border-color: var(--aqua);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--aqua) 30%, transparent);
}

.au-field label.au-label {
    position: absolute;
    inset-inline-start: 18px;
    top: 19px;
    max-width: calc(100% - 66px);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), color .25s;
}

html[dir="rtl"] .au-field label.au-label { transform-origin: right top; }

.au-field input:focus ~ .au-label,
.au-field input:not(:placeholder-shown) ~ .au-label,
.au-field input:-webkit-autofill ~ .au-label,
.au-field.is-filled .au-label {
    transform: translateY(-12px) scale(.875);
    color: var(--text);
}

.au-field input:focus ~ .au-label { color: color-mix(in srgb, var(--aqua) 55%, var(--text)); }

.au-line {
    position: absolute;
    inset-inline: 16px;
    top: 55px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--vermillion), var(--saffron), var(--aqua));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.77, 0, .18, 1);
    pointer-events: none;
}

html[dir="rtl"] .au-line { transform-origin: right center; }
.au-field input:focus ~ .au-line,
.au-field select:focus ~ .au-line { transform: scaleX(1); }

.au-ic,
.au-eye {
    position: absolute;
    top: 29px;
    inset-inline-end: 8px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    display: grid;
    place-items: center;
    color: var(--text-soft);
    border-radius: 12px;
}

.au-ic { pointer-events: none; inset-inline-end: 10px; }
.au-ic svg,
.au-eye svg { width: 20px; height: 20px; }

.au-eye {
    background: transparent;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.au-eye:hover { background: var(--surface-soft); color: var(--text); }
.au-eye .eye-off { display: none; }
.au-eye[aria-pressed="true"] .eye-on { display: none; }
.au-eye[aria-pressed="true"] .eye-off { display: block; }

.au-field .ok-ic { display: none; color: var(--aqua); }
.au-field.is-valid .ok-ic { display: block; animation: auPop .5s cubic-bezier(.3, 1.6, .5, 1); }
.au-field.is-valid .base-ic { display: none; }
html[data-theme="light"] .au-field .ok-ic { color: #2E8F8B; }

.au-field.has-error input,
.au-field.has-error select { border-color: var(--btn-bg); animation: auShake .4s; }

.au-err {
    display: block;
    margin: 6px 4px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--btn-bg);
}

.au-err:empty { display: none; }

.au-select-caret {
    position: absolute;
    top: 29px;
    inset-inline-end: 18px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    pointer-events: none;
    color: var(--text-soft);
}

.au-field select { padding-inline-end: 44px; cursor: pointer; }
.au-field select:required:invalid { color: transparent; }
.au-field select option { color: var(--text); background: var(--surface); }
.au-field select ~ .au-label { transform: translateY(-12px) scale(.875); color: var(--text); }

.au-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 2px 0 20px;
}

.au-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background-image: linear-gradient(var(--btn-bg), var(--btn-bg));
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size .3s, color .3s;
    cursor: pointer;
}

.au-link:hover { background-size: 100% 100%; color: var(--btn-text); }
.au-link.as-btn { background-color: transparent; padding-inline: 0; }

/* custom checkbox */
.au-check {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-soft);
    cursor: pointer;
}

.au-check input {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
}

.au-box {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-strong);
    border-radius: 8px;
    background: var(--canvas);
    transition: background-color .25s, border-color .25s, transform .25s;
}

.au-box svg { width: 15px; height: 15px; }
.au-box path {
    fill: none;
    stroke: var(--btn-text);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    transition: stroke-dashoffset .35s .1s;
}

.au-check input:checked + .au-box { background: var(--btn-bg); border-color: var(--btn-bg); transform: rotate(-6deg); }
.au-check input:checked + .au-box path { stroke-dashoffset: 0; }
.au-check input:focus-visible + .au-box { outline: 3px solid var(--focus); outline-offset: 3px; }
.au-check.has-error .au-box { border-color: var(--btn-bg); animation: auShake .4s; }
.au-check a { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.au-note {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
}

.au-note:empty { display: none; }

.au-note.is-ok {
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--aqua) 22%, var(--surface));
}

/* submit */
.au .au-submit {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
    border-radius: 16px;
}

.au-submit .done-ic { display: none; }
.au-submit.is-done { pointer-events: none; }
.au-submit.is-done .arr,
.au-submit.is-done .lbl { display: none; }
.au-submit.is-done .done-ic { display: inline-flex; align-items: center; gap: 8px; animation: auPop .5s cubic-bezier(.3, 1.6, .5, 1); }
.au-submit .done-ic svg { width: 20px; height: 20px; }

html[dir="rtl"] .au .btn svg.arr { transform: scaleX(-1); }
html[dir="rtl"] .au .btn:hover svg.arr { transform: scaleX(-1) translateX(5px); }

.au-foot {
    margin: 20px 0 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-soft);
}

.au-foot a {
    margin-inline-start: 6px;
    color: var(--text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--vermillion);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.au-foot a:hover { color: var(--vermillion); }
html[data-theme="light"] .au-foot a:hover { color: var(--btn-bg); }

/* paint-dot burst (created by JS) */
.au-dot {
    position: fixed;
    z-index: 2000;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    pointer-events: none;
}

/* ------------------------------------------------------------
   MASCOT  "Splodge"
   ------------------------------------------------------------ */
.mascot {
    flex: none;
    width: clamp(74px, 9vw, 96px);
    aspect-ratio: 1;
}

.mascot-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: auBob 3.4s ease-in-out infinite;
}

.m-body { fill: var(--vermillion); stroke: #3D2925; stroke-width: 3; stroke-linejoin: round; }
html[data-theme="dark"] .m-body { stroke: #FFF3DE; }
.m-shine { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: .55; }
.m-shadow { fill: rgba(61, 41, 37, .18); }
.m-sclera { fill: #fff; stroke: #3D2925; stroke-width: 2.5; }
.m-pupil { fill: #3D2925; transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .12s ease-out; }
.m-eyes { transform-box: fill-box; transform-origin: center; animation: auBlink 5.2s infinite; }
.m-cheek { fill: #fff; opacity: .3; }
.m-mouth { fill: none; stroke: #3D2925; stroke-width: 3.5; stroke-linecap: round; }
.m-grin { display: none; fill: #3D2925; stroke: #3D2925; stroke-width: 3; stroke-linejoin: round; }
.m-tongue { display: none; fill: var(--coral); }

.m-hand {
    fill: color-mix(in srgb, var(--vermillion) 86%, #3D2925);
    stroke: #3D2925;
    stroke-width: 3;
    transition: transform .45s cubic-bezier(.3, 1.5, .5, 1);
}

html[data-theme="dark"] .m-hand { stroke: #FFF3DE; }

.mascot.is-hiding .m-hand-l { transform: translate(19px, -35px); }
.mascot.is-hiding .m-hand-r { transform: translate(-19px, -35px); }
.mascot.is-peek .m-hand-l { transform: translate(19px, -35px); }
.mascot.is-peek .m-hand-r { transform: translate(-2px, -24px) rotate(-18deg); }
.mascot.is-hiding .m-eyes,
.mascot.is-peek .m-eyes { animation: none; }

.mascot.is-happy .m-mouth-smile { display: none; }
.mascot.is-happy .m-grin,
.mascot.is-happy .m-tongue { display: block; }
.mascot.is-happy .mascot-svg { animation: auJump .7s cubic-bezier(.3, 1.4, .5, 1) 2; }
.mascot.is-sad .m-mouth-smile { d: path("M50 96q10 -7 20 0"); }

.m-spark { fill: var(--saffron); stroke: #3D2925; stroke-width: 2; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mascot.is-happy .m-spark { animation: auTwinkle 1s ease-in-out infinite; opacity: 1; }
.mascot.is-happy .m-spark.sp2 { animation-delay: .35s; }

/* ------------------------------------------------------------
   LOGIN  -  mixing table + framed artwork
   ------------------------------------------------------------ */
.lg-grid {
    display: grid;
    gap: var(--au-gap);
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}

.lg-form { order: 1; max-width: 560px; width: 100%; margin-inline: auto; }
.lg-art { order: 2; }

.lg-art {
    --px: 0;
    --py: 0;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    aspect-ratio: 4 / 3.1;
    border-radius: calc(var(--au-r) + 14px);
    background: var(--surface-soft);
    border: 1.5px solid var(--border-strong);
    overflow: hidden;
}

.lg-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--vermillion) 14%, transparent), transparent 60%);
}

.mix-c {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    mix-blend-mode: multiply;
    opacity: .9;
    transform: translate(calc(var(--px) * var(--k, 18px)), calc(var(--py) * var(--k, 18px))) scale(0);
}

html[data-theme="dark"] .mix-c { mix-blend-mode: screen; opacity: .6; }

.is-ready .mix-c {
    animation: auMixIn 1.3s cubic-bezier(.2, .9, .25, 1) var(--d, .3s) forwards;
}

.mix-c.c1 { width: 56%; aspect-ratio: 1; inset: -10% auto auto -8%; background: var(--saffron); --k: 26px; --d: .3s; }
.mix-c.c2 { width: 52%; aspect-ratio: 1; inset: auto -6% -12% auto; background: var(--aqua); --k: -22px; --d: .55s; }
.mix-c.c3 { width: 44%; aspect-ratio: 1; inset: 30% auto auto 24%; background: var(--vermillion); --k: 14px; --d: .8s; }

.lg-photo {
    position: absolute;
    z-index: 3;
    inset-inline-start: 50%;
    top: 9%;
    width: 42%;
    aspect-ratio: 3 / 4;
    margin-inline-start: -21%;
    border-radius: 999px 999px 26px 26px;
    overflow: hidden;
    border: 6px solid var(--surface);
    box-shadow: var(--shadow);
    background: var(--surface);
    transform: translate(calc(var(--px) * -10px), calc(var(--py) * -10px)) rotate(-3deg);
    opacity: 0;
}

.is-ready .lg-photo { opacity: 1; transition: opacity .8s 1s; }

.lg-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    opacity: 0;
}

.lg-photo img.on { opacity: 1; animation: auCircle 1.1s cubic-bezier(.77, 0, .18, 1) both; }

.lg-frame-tag {
    position: absolute;
    z-index: 4;
    inset-inline-start: 6%;
    bottom: 9%;
    max-width: 52%;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    transform: rotate(-3deg);
    animation: auWobble 4s ease-in-out infinite alternate;
}

.lg-frame-tag small { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); }

.lg-chip {
    position: absolute;
    z-index: 4;
    inset-inline-end: 6%;
    top: 12%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--saffron);
    color: var(--on-pigment);
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--shadow);
    animation: auWobble 3.4s ease-in-out infinite alternate-reverse;
}

.lg-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--vermillion); }

.au-spark {
    position: absolute;
    z-index: 4;
    width: 30px;
    fill: var(--saffron);
    stroke: var(--text);
    stroke-width: 1.5;
    animation: auTwinkle 2.4s ease-in-out infinite;
}

.au-spark.s1 { inset-inline-end: 12%; bottom: 14%; }
.au-spark.s2 { inset-inline-start: 11%; top: 16%; width: 22px; animation-delay: .8s; fill: var(--aqua); }
.au-spark.s3 { inset-inline-end: 36%; top: 6%; width: 18px; animation-delay: 1.4s; fill: var(--coral); }

@media (min-width: 1024px) {
    .lg-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
    .lg-art { order: 1; aspect-ratio: 4 / 4.2; max-width: none; }
    .lg-form { order: 2; margin-inline: 0; max-width: none; }
}

/* ------------------------------------------------------------
   SIGN UP  -  colour-in canvas
   ------------------------------------------------------------ */
.su-grid {
    display: grid;
    gap: var(--au-gap);
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}

.su-art { width: 100%; max-width: 560px; margin-inline: auto; }
.su-form { width: 100%; max-width: 680px; margin-inline: auto; }

.su-canvas {
    position: relative;
    padding: clamp(12px, 2vw, 20px);
    border-radius: calc(var(--au-r) + 10px);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    box-shadow: var(--shadow);
}

.su-canvas::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: calc(var(--au-r) + 2px);
    border: 2px dashed var(--border-strong);
    pointer-events: none;
}

.su-scene { display: block; width: 100%; height: auto; direction: ltr; overflow: visible; }

.sc {
    fill: var(--surface-soft);
    stroke: #3D2925;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: fill .8s ease;
}

html[data-theme="dark"] .sc { stroke: #FFF3DE; }

.sc-sky.on { fill: color-mix(in srgb, var(--aqua) 48%, var(--surface)); }
.sc-sun.on { fill: var(--saffron); }
.sc-hill-b.on { fill: var(--apricot); }
.sc-hill-f.on { fill: var(--coral); }
.sc-house.on { fill: var(--saffron); }
.sc-roof.on { fill: var(--vermillion); }
.sc-door.on { fill: var(--aqua); }
.sc-petal.on { fill: var(--vermillion); }
.sc-core.on { fill: var(--saffron); }

.sc-cloud { fill: var(--surface); stroke: #3D2925; stroke-width: 3; stroke-linejoin: round; }
html[data-theme="dark"] .sc-cloud { stroke: #FFF3DE; }

.sc-ray {
    stroke: var(--border-strong);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke .6s .2s;
}

.sc-ray.on { stroke: var(--saffron); }

.sc-stem { fill: none; stroke: var(--border-strong); stroke-width: 5; stroke-linecap: round; transition: stroke .6s; }
.sc-stem.on { stroke: #2E8F8B; }

.sc-bow {
    fill: none;
    stroke: var(--border-strong);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 3 14;
    transition: stroke .4s;
}

.sc-bow.on { stroke-dasharray: 230; stroke-dashoffset: 230; animation: auDraw 1s forwards; }
.sc-bow.b1.on { stroke: var(--vermillion); }
.sc-bow.b2.on { stroke: var(--saffron); animation-delay: .12s; }
.sc-bow.b3.on { stroke: var(--aqua); animation-delay: .24s; }
.sc-bow.b4.on { stroke: var(--coral); animation-delay: .36s; }

.sc.on { transform-box: fill-box; transform-origin: center; animation: auPop .65s cubic-bezier(.3, 1.6, .5, 1); }
.sc-sky.on { animation: none; }
.sc-hill-b.on,
.sc-hill-f.on { transform-origin: 50% 100%; animation: auRise .8s cubic-bezier(.2, .8, .2, 1) both; }
.sc-outline { fill: none; stroke: #3D2925; stroke-width: 3; }
html[data-theme="dark"] .sc-outline { stroke: #FFF3DE; }

.sc-spark { fill: var(--saffron); stroke: #3D2925; stroke-width: 2; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
html[data-theme="dark"] .sc-spark { stroke: #FFF3DE; }
.su-canvas.is-complete .sc-spark { animation: auSparkBurst 1.4s ease-out both; }
.su-canvas.is-complete .sc-spark:nth-child(2n) { fill: var(--aqua); animation-delay: .15s; }
.su-canvas.is-complete .sc-spark:nth-child(3n) { fill: var(--coral); animation-delay: .3s; }
.su-canvas.is-complete .sc-spark:nth-child(4n) { fill: var(--vermillion); animation-delay: .45s; }

.su-progress {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding-inline: 6px;
}

.su-progress b {
    display: block;
    font-family: "DynaPuff", cursive;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.25;
    color: var(--text);
}

.su-progress span.msg { display: block; font-size: 14px; font-weight: 600; color: var(--text-soft); }

.su-dabs { display: flex; gap: 7px; flex: none; }

.su-dab {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: transparent;
    transition: background-color .5s, border-color .5s, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}

.su-dab.on { transform: scale(1.18); border-color: #3D2925; }
html[data-theme="dark"] .su-dab.on { border-color: #FFF3DE; }
.su-dab:nth-child(1).on { background: var(--saffron); }
.su-dab:nth-child(2).on { background: var(--aqua); }
.su-dab:nth-child(3).on { background: var(--coral); }
.su-dab:nth-child(4).on { background: var(--vermillion); }
.su-dab:nth-child(5).on { background: var(--apricot); }
.su-dab:nth-child(6).on { background: var(--saffron); }

.su-fields { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .su-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.su-strength {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -6px 4px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
}

.su-strength i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    transition: background-color .35s, border-color .35s;
}

.su-strength i.on { border-color: transparent; }
.su-strength[data-level="1"] i.on { background: var(--vermillion); }
.su-strength[data-level="2"] i.on { background: var(--saffron); }
.su-strength[data-level="3"] i.on { background: var(--aqua); }
.su-strength[data-level="4"] i.on { background: var(--aqua); }
.su-strength .txt { margin-inline-start: 6px; }

.su-success { display: none; text-align: center; padding-block: 8px; }
.su-card.is-success form { display: none; }
.su-card.is-success .su-head { display: none; }
.su-card.is-success .su-success { display: block; animation: auPop .7s cubic-bezier(.3, 1.4, .5, 1); }
.su-success .mascot { margin: 0 auto 10px; width: 110px; }
.su-success .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

@media (min-width: 1024px) {
    .su-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
    .su-form { order: 1; margin-inline: 0; max-width: none; }
    .su-art { order: 2; margin-inline: 0; max-width: none; }
}

@media (max-width: 1023px) {
    .su-art { order: 1; max-width: 420px; }
    .su-form { order: 2; }
}

@media (max-width: 599px) {
    .su-progress { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------
   404  -  the spilled-paint page
   ------------------------------------------------------------ */
.nf-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.nf-drips {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 0;
    height: 0;
    pointer-events: none;
}

.nf-drip {
    position: absolute;
    top: 0;
    inset-inline-start: var(--x);
    width: var(--w, 22px);
    height: var(--h, 150px);
    border-radius: 0 0 999px 999px;
    transform-origin: 50% 0;
    transform: scaleY(0);
}

.nf-drip::after {
    content: "";
    position: absolute;
    top: 30%;
    inset-inline-start: 22%;
    width: 18%;
    height: 40%;
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
}
.is-ready .nf-drip { animation: auDrip 2.2s cubic-bezier(.3, .9, .3, 1) var(--d, 0s) forwards; }
.nf-drip.c1 { background: var(--vermillion); }
.nf-drip.c2 { background: var(--saffron); }
.nf-drip.c3 { background: var(--aqua); }
.nf-drip.c4 { background: var(--apricot); }
.nf-drip.c5 { background: var(--coral); }

.nf-stage .wrap { position: relative; z-index: 1; }

.nf-panel {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.nf-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 1.2vw, 16px);
    direction: ltr;
    margin: 0 0 clamp(10px, 2vw, 22px);
    font-family: "DynaPuff", cursive;
    font-weight: 500;
    font-size: clamp(112px, 24vw, 250px);
    line-height: .92;
    user-select: none;
}

.nf-digit {
    display: inline-block;
    text-shadow: .045em .055em 0 var(--saffron);
    transform: translateY(-140%) rotate(-12deg);
    opacity: 0;
}

.nf-digit.d1 { color: var(--vermillion); }
.nf-digit.d3 { color: var(--aqua); }

.is-ready .nf-digit { opacity: 1; transform: none; animation: auDrop 1s cubic-bezier(.3, 1.5, .5, 1) var(--d) backwards; }
.nf-digit:hover { animation: auWiggle .5s ease-in-out !important; }

.nf-pal {
    display: inline-block;
    width: .9em;
    height: .9em;
    padding: 0;
    background: none;
    cursor: pointer;
    transform: translateY(-140%) rotate(-200deg);
    opacity: 0;
    -webkit-tap-highlight-color: transparent;
}

.is-ready .nf-pal { opacity: 1; transform: none; animation: auRollIn 1.2s cubic-bezier(.3, 1.2, .4, 1) .25s backwards; }
.nf-pal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nf-pal .spin { transform-origin: 100px 100px; animation: auSpin 22s linear infinite; }
.nf-pal:hover .spin { animation-duration: 6s; }
.nf-pal.is-squish { animation: auSquish .5s ease-out !important; }

.nf-pal-body { fill: var(--surface); stroke: #3D2925; stroke-width: 7; stroke-linejoin: round; }
html[data-theme="dark"] .nf-pal-body { fill: var(--surface-soft); stroke: #FFF3DE; }
.nf-pal-hole { fill: var(--canvas); stroke: #3D2925; stroke-width: 6; }
html[data-theme="dark"] .nf-pal-hole { stroke: #FFF3DE; }
.nf-dab { stroke: #3D2925; stroke-width: 5; }
.nf-dab.v { fill: var(--vermillion); }
.nf-dab.s { fill: var(--saffron); }
.nf-dab.a { fill: var(--aqua); }
.nf-dab.p { fill: var(--apricot); }
.nf-dab.c { fill: var(--coral); }
html[data-theme="dark"] .nf-dab { stroke: #FFF3DE; }

.nf-hint {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 6px 0 22px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--surface);
    border: 1.5px dashed var(--border-strong);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
}

.nf-hint svg { width: 18px; height: 18px; color: var(--vermillion); animation: auWobble 1.4s ease-in-out infinite alternate; }
html[data-theme="light"] .nf-hint svg { color: var(--btn-bg); }

.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 22px; }

.nf-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
}

.nf-panel .au-title { font-size: clamp(28px, 4.6vw, 48px); }
.nf-panel .au-lead { margin-inline: auto; }

@media (max-width: 479px) {
    .nf-actions .btn { width: 100%; }
}

/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */
@keyframes auShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}

@keyframes auPop {
    0% { transform: scale(.4); }
    60% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@keyframes auBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes auJump {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-16px) scale(.96, 1.06); }
    65% { transform: translateY(0) scale(1.06, .94); }
}

@keyframes auBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(.08); }
}

@keyframes auTwinkle {
    0%, 100% { transform: scale(.7) rotate(0); opacity: .7; }
    50% { transform: scale(1.2) rotate(18deg); opacity: 1; }
}

@keyframes auWobble {
    from { transform: rotate(-3deg) translateY(0); }
    to { transform: rotate(2deg) translateY(-6px); }
}

@keyframes auMixIn {
    from { transform: translate(calc(var(--px) * var(--k, 18px)), calc(var(--py) * var(--k, 18px))) scale(0); }
    to { transform: translate(calc(var(--px) * var(--k, 18px)), calc(var(--py) * var(--k, 18px))) scale(1); }
}

@keyframes auCircle {
    from { clip-path: circle(0% at 50% 60%); transform: scale(1.12); }
    to { clip-path: circle(75% at 50% 60%); transform: scale(1); }
}

@keyframes auRise {
    from { transform: translateY(46px); opacity: .2; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes auDraw { to { stroke-dashoffset: 0; } }

@keyframes auSparkBurst {
    0% { opacity: 0; transform: scale(0) rotate(0); }
    30% { opacity: 1; transform: scale(1.5) rotate(40deg); }
    100% { opacity: 0; transform: scale(.6) rotate(120deg); }
}

@keyframes auDrip {
    0% { transform: scaleY(0); }
    70% { transform: scaleY(1.06); }
    100% { transform: scaleY(1); }
}

@keyframes auDrop {
    0% { transform: translateY(-140%) rotate(-12deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
}

@keyframes auRollIn {
    0% { transform: translateY(-140%) rotate(-200deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
}

@keyframes auWiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-7deg) scale(1.05); }
    75% { transform: rotate(7deg) scale(1.05); }
}

@keyframes auSpin { to { transform: rotate(360deg); } }

@keyframes auSquish {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.2, .8); }
    60% { transform: scale(.9, 1.12); }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .au-in { opacity: 1; transform: none; }
    .mix-c { transform: none; animation: none !important; }
    .lg-photo { opacity: 1; }
    .nf-drip { transform: none; animation: none !important; }
    .nf-digit,
    .nf-pal { opacity: 1; transform: none; animation: none !important; }
    .au-card::before { transform: none; }
    .mascot-svg,
    .m-eyes,
    .au-spark,
    .lg-chip,
    .lg-frame-tag { animation: none !important; }
}
/* =========================================================
   MIX N MUSE - HAPPY MAIL (additive; classes .hm-, tokens scoped to .hm)
========================================================= */
.hm{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.45,0,.25,1);--c:var(--aqua);position:relative;z-index:2;overflow:hidden;isolation:isolate;background:var(--surface-soft);padding-block:76px 64px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.hm,.hm *,.hm *::before,.hm *::after{box-sizing:border-box}
:where(.hm) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}
:where(.hm) button{border:0;background:none;padding:0}
:where(.hm) img{display:block;max-width:100%}
.hm :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hm::before{content:"";position:absolute;inset-inline:0;top:0;z-index:3;height:10px;background:repeating-linear-gradient(135deg,var(--vermillion) 0 14px,var(--surface-soft) 14px 28px,var(--aqua) 28px 42px,var(--surface-soft) 42px 56px);background-size:79.2px 100%;animation:hmBand 4s linear infinite}
@keyframes hmBand{to{background-position:79.2px 0}}
.hm-wrap{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.hm-grid{display:grid;gap:34px}
.hm h2{font-family:"DynaPuff",cursive;font-weight:500;font-size:var(--fs-h2);line-height:1.2;margin:0;color:var(--text)}
.hm-dots i{position:absolute;z-index:0;left:var(--x);top:var(--y);width:14px;height:14px;border-radius:50%;background:var(--c);opacity:.5;animation:hmFloat 7s ease-in-out infinite alternate}
.hm-dots i:nth-child(even){width:10px;height:10px;animation-delay:-3s}
@keyframes hmFloat{to{transform:translate(14px,-22px) scale(1.25)}}

/* head */
.hm-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.hm-hl{position:relative;display:inline-block;color:var(--vermillion)}
.hm-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.hm-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hm.in-view .hm-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .9s ease}
.hm-lead{margin:14px 0 22px;color:var(--text-soft);max-width:34em}
.hm.js .hm-rv{opacity:0;transform:translateY(22px)}
.hm.js.in-view .hm-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
.hm-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hm-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;transition:transform .3s,color .3s}
.hm-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.hm-btn:hover{transform:translateY(-3px)}.hm-btn:hover::before{transform:scaleX(1)}
.hm-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.hm-btn:hover svg{transform:translateX(5px)}
.hm-btn-primary{background:var(--btn-bg);color:var(--btn-text)}.hm-btn-primary::before{background:var(--btn-hover)}
.hm-btn-ghost{border-color:var(--text);color:var(--text)}.hm-btn-ghost::before{background:var(--saffron)}.hm-btn-ghost:hover{color:var(--on-pigment)}

/* envelope shelf */
.hm-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border-radius:20px;background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:5px}
.hm-env{--c:var(--aqua);position:relative;height:78px;border-radius:8px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--c) 30%,var(--surface));perspective:360px;color:var(--text);text-align:start;transition:transform .35s cubic-bezier(.3,1.5,.4,1)}
.hm-env:hover{transform:translateY(-4px) rotate(calc(var(--rot) * -1))}
.hm-env[aria-pressed="true"]{outline:3px solid var(--text);outline-offset:2px}
.hm-flap{position:absolute;inset:0 0 auto 0;height:58%;background:color-mix(in srgb,var(--c) 62%,var(--surface));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .6s cubic-bezier(.3,1.2,.4,1);z-index:2}
.hm-env[aria-pressed="true"] .hm-flap{transform:rotateX(180deg)}
.hm-lbl{position:absolute;inset-inline-start:10px;top:34px;z-index:3;font-size:var(--fs-small);font-weight:700;color:var(--text)}
.hm-adr{position:absolute;inset-inline-start:10px;bottom:9px;display:grid;gap:4px}
.hm-adr b{display:block;height:3px;width:38px;border-radius:2px;background:var(--border-strong)}.hm-adr b+b{width:26px}
.hm-stp{position:absolute;inset-inline-end:8px;bottom:8px;width:18px;height:22px;background:var(--c);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-strong)}
.hm.js .hm-env{transform:translateY(-34px) rotate(var(--rot));opacity:0}
.hm.js.in-view .hm-env{opacity:1;transform:rotate(0);transition:opacity .4s calc(.5s + var(--k)*.12s),transform .9s calc(.5s + var(--k)*.12s) cubic-bezier(.3,1.6,.4,1)}
.hm.js.in-view.is-ready .hm-env{transition:transform .35s cubic-bezier(.3,1.5,.4,1)}
.hm.js.in-view.is-ready .hm-env:hover{transform:translateY(-4px) rotate(calc(var(--rot) * -1))}
.hm-prog{height:5px;margin-top:14px;border-radius:99px;background:var(--border);overflow:hidden}
.hm-prog i{display:block;height:100%;width:100%;background:var(--c);transform-origin:left;transform:scaleX(0)}
.hm.is-auto .hm-prog i{animation:hmRun 7s linear forwards}
@keyframes hmRun{to{transform:scaleX(1)}}

/* desk + letter */
.hm-desk{position:relative;min-height:320px;direction:ltr;--tx:0deg;--ty:0deg}
.hm-route{position:absolute;inset:0 0 auto 0;width:100%;height:46px;overflow:visible;pointer-events:none}
.hm-route path{fill:none;stroke:var(--vermillion);stroke-width:2;stroke-dasharray:.02 .02;stroke-linecap:round}
.hm-pl{position:absolute;top:-11px;left:-11px;width:22px;z-index:4;offset-rotate:auto;pointer-events:none}
.hm-pl svg{width:22px;display:block;fill:var(--vermillion);stroke:var(--surface-soft);stroke-width:1.5}
.hm-letter{margin-top:38px;perspective:1000px;position:relative;direction:ltr;transform:rotateX(var(--ty)) rotateY(var(--tx));transition:transform .25s ease-out;color:var(--text);text-align:start;filter:drop-shadow(0 18px 24px rgba(61,41,37,.22))}
.hm-pn{background:var(--surface);color:var(--text);padding:16px 18px;transform-origin:top center;backface-visibility:hidden;border:0 solid transparent;border-image:repeating-linear-gradient(135deg,var(--vermillion) 0 10px,var(--surface) 10px 20px,var(--aqua) 20px 30px,var(--surface) 30px 40px) 6}
.hm-pn1{position:relative;min-height:92px;border-width:6px 6px 0}
.hm-pn2{display:grid;grid-template-columns:minmax(0,1fr) clamp(86px,28%,150px);gap:18px;align-items:center;border-width:0 6px}
.hm-pn3{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-width:0 6px 6px}
.hm-dear{margin:0;font-weight:700;color:var(--text)}
.hm-q{margin:0}
.hm-q p{margin:0;font-family:"DynaPuff",cursive;font-weight:500;font-size:calc(var(--fs-body)*1.3);line-height:1.4;color:var(--text)}
.hm-q .w{display:inline-block;white-space:pre}
.hm-ph{position:relative;margin:0;padding:6px 6px 4px;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow);transform:rotate(4deg)}
.hm-ph::before{content:"";position:absolute;top:-14px;inset-inline-start:50%;width:12px;height:30px;border:3px solid var(--text);border-radius:8px;opacity:.55;z-index:2}
.hm-ph img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.hm-ph figcaption{padding:4px 0 1px;text-align:center;font-size:var(--fs-small);font-weight:700;color:var(--text)}
.hm-by{margin:0;font-weight:600;color:var(--text-soft)}
.hm-stars{display:flex;gap:4px}
.hm-stars i{width:18px;height:18px;background:var(--c);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.hm-stampbox{position:absolute;top:10px;inset-inline-end:12px;width:84px;height:84px}
.hm-stamp{position:absolute;top:0;inset-inline-end:0;width:48px;height:58px;display:grid;place-items:center;background:var(--c);-webkit-mask:radial-gradient(circle 4px at 50% 0,#0000 98%,#000) top/10px 51% repeat-x,radial-gradient(circle 4px at 50% 100%,#0000 98%,#000) bottom/10px 51% repeat-x;mask:radial-gradient(circle 4px at 50% 0,#0000 98%,#000) top/10px 51% repeat-x,radial-gradient(circle 4px at 50% 100%,#0000 98%,#000) bottom/10px 51% repeat-x}
.hm-stamp svg{width:24px;fill:#3D2925}
.hm-pm{position:absolute;top:14px;inset-inline-end:32px;width:64px;opacity:.8;animation:hmSpin 16s linear infinite}
.hm-pm text{font:600 11px "Manrope",sans-serif;letter-spacing:.05em;fill:var(--text)}
.hm-rip{position:absolute;top:0;inset-inline-end:0;width:48px;height:58px;border-radius:50%;border:2px solid var(--c);opacity:0}
@keyframes hmSpin{to{transform:rotate(360deg)}}

/* ---------- responsive: 320 / 375 / 425 / 768 / 1024 / 1280 / 1440 ---------- */
@media(min-width:375px){.hm{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.hm{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}.hm-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}.hm-env{height:84px}.hm-lbl{font-size:11px}}
@media(min-width:768px){.hm{--fs-h2:30px;--fs-h3:22px;--gutter:24px;padding-block:92px 80px}.hm-env{height:96px}.hm-lbl{top:40px;font-size:var(--fs-small)}.hm-pn{padding:22px 26px}.hm-pn2{gap:28px}.hm-desk{min-height:380px}}
@media(min-width:1024px){
  .hm{--fs-h2:32px;--fs-h3:22px;--gutter:clamp(24px,3vw,40px);padding-block:108px 100px}
  .hm-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);gap:clamp(28px,4vw,64px);align-items:center}
  .hm-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-env{height:88px}
}
@media(min-width:1280px){.hm{--fs-h2:34px;--fs-h3:24px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}.hm-env{height:96px}}
@media(min-width:1440px){.hm{--fs-h2:36px;--fs-h3:26px}}
@media(max-width:374px){.hm-btn{width:100%}.hm-env{height:70px}.hm-lbl{top:30px}.hm-stampbox{transform:scale(.8);transform-origin:top right}}
@media(prefers-reduced-motion:reduce){.hm *,.hm *::before{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}}

/* =========================================================
   MIX N MUSE - BEYOND THE EASEL (additive; classes .bx-, tokens scoped to .bx)
   Paste at the END of styles.css
========================================================= */
.bx{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--gutter:16px;--gap:12px;--ease:cubic-bezier(.45,0,.25,1);position:relative;z-index:2;overflow:hidden;isolation:isolate;background:var(--canvas);padding-block:64px 64px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.6;color:var(--text)}
.bx,.bx *,.bx *::before,.bx *::after{box-sizing:border-box}
.bx :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.bx h2,.bx h3{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2;color:inherit;overflow-wrap:anywhere}
.bx h2{font-size:var(--fs-h2);color:var(--text)}.bx h3{font-size:var(--fs-h3)}
.bx p{margin:0}.bx ul{margin:0;padding:0;list-style:none}
.bx-wrap{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter);display:grid;gap:24px}

/* header */
.bx-head{display:grid;gap:14px}
.bx-headL,.bx-headR{min-width:0}
.bx-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.bx-hl{position:relative;display:inline-block;color:var(--vermillion)}
.bx-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.bx-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .bx-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .8s ease}
.bx:not(.js) .bx-hl path{stroke-dashoffset:0}
.bx-lead{color:var(--text-soft);max-width:34em}
.bx-hint{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 14px;border-radius:99px;border:1.5px dashed var(--border-strong);background:var(--surface-soft);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.3}
.bx-hint svg{width:16px;height:16px;flex:none;color:var(--vermillion)}
.bx-hint-touch{display:none}
@media(hover:none){.bx-hint-fine{display:none}.bx-hint-touch{display:inline}}
.bx-rv{opacity:0;transform:translateY(22px)}
.in-view .bx-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
.bx:not(.js) .bx-rv{opacity:1;transform:none}

/* bento grid: mobile = 2 columns */
.bx-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b d" "c c" "e e" "f g";grid-auto-rows:auto}
.bx-a{grid-area:a;--c:var(--vermillion);--art:150px}
.bx-b{grid-area:b;--c:var(--saffron);--art:84px}
.bx-c{grid-area:c;--c:var(--aqua);--art:130px}
.bx-d{grid-area:d;--c:var(--apricot);--art:84px}
.bx-e{grid-area:e;--c:var(--coral);--art:110px}
.bx-f{grid-area:f;--c:var(--saffron);--art:64px}
.bx-g{grid-area:g;--c:var(--saffron);--art:64px}

/* tile */
.bx-t{position:relative;isolation:isolate;overflow:hidden;min-width:0;display:flex;flex-direction:column;padding:14px;border-radius:24px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;
  --lift:0px;--rx:0deg;--ry:0deg;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition:transform .35s cubic-bezier(.3,1.3,.4,1),color .45s var(--ease),border-color .45s}
.bx-t:focus-visible{--lift:-4px}
.bx-t.on{--lift:-4px}
.bx-liq{position:absolute;inset:0;z-index:2;background:var(--c);transform:translateY(calc(100% + 34px));transition:transform .8s var(--ease);pointer-events:none}
.bx-liq::before{content:"";position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:28px;background:var(--c);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q12.5 0 25 5T50 5T75 5T100 5V10H0Z'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q12.5 0 25 5T50 5T75 5T100 5V10H0Z'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%;animation:bxWave 3s linear infinite}
.bx-t:focus-visible .bx-liq,.bx-t.on .bx-liq{transform:translateY(0)}
.bx-t:focus-visible,.bx-t.on{color:var(--on-pigment);border-color:transparent}
@media(hover:hover){
  .bx-t:hover{--lift:-4px;color:var(--on-pigment);border-color:transparent}
  .bx-t:hover .bx-liq{transform:translateY(0)}
  .bx-t:hover .bx-ph{transform:scale(1.07)}
  .bx-t:hover .bx-shade{opacity:0}
}
.bx-art{position:relative;z-index:3;flex:1 1 auto;min-height:var(--art,70px);min-width:0}
.bx-body{position:relative;z-index:3;display:grid;gap:6px;min-width:0;padding-top:10px}
.bx-body p{font-size:var(--fs-small);line-height:1.55;overflow-wrap:anywhere}
.bx-k{justify-self:start;padding:4px 10px;border-radius:99px;background:var(--c);color:var(--on-pigment);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bx-t.on .bx-k,.bx-t:focus-visible .bx-k{background:var(--on-pigment);color:#FFF9EF}
@media(hover:hover){.bx-t:hover .bx-k{background:var(--on-pigment);color:#FFF9EF}}
.bx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px!important}
.bx-chips li{padding:4px 10px;border-radius:99px;border:1.5px solid currentColor;font-size:var(--fs-small);font-weight:700;line-height:1.3;background:rgba(38,27,25,.5)}
.bx-t.on .bx-chips li,.bx-t:focus-visible .bx-chips li{background:transparent}
@media(hover:hover){.bx-t:hover .bx-chips li{background:transparent}}

/* photo tiles (always light text on the dark shade) */
.bx-a,.bx-c{color:#FFF9EF}
.bx-ph{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.bx-a .bx-ph{object-position:50% 25%}
.bx-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(38,27,25,.92),rgba(38,27,25,.5) 52%,rgba(38,27,25,.08));transition:opacity .5s}
.bx-a.on .bx-shade,.bx-c.on .bx-shade,.bx-a:focus-visible .bx-shade,.bx-c:focus-visible .bx-shade{opacity:0}
.bx-a:focus-visible,.bx-c:focus-visible,.bx-a.on,.bx-c.on{color:var(--on-pigment)}

/* animations inside each tile */
.bx-dot{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:var(--d);opacity:0;animation:bxPop 3.4s var(--w) ease-in-out infinite}
.bx-wheel{position:absolute;top:0;inset-inline-end:0;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--vermillion),var(--saffron),var(--aqua),var(--apricot),var(--coral),var(--vermillion));-webkit-mask:radial-gradient(circle,transparent 22%,#000 23%);mask:radial-gradient(circle,transparent 22%,#000 23%);animation:bxSpin 12s linear infinite}
.bx-wheel2{position:absolute;top:30px;inset-inline-end:30px;width:24px;height:24px;border-radius:50%;background:var(--on-pigment);animation:bxPulse 2.4s ease-in-out infinite}
.bx-frames{position:absolute;inset-inline:0;top:0;display:flex;justify-content:center;gap:12px}
.bx-frames i{position:relative;width:34px;height:44px;margin-top:16px;border:4px solid var(--text);border-radius:4px;background:var(--c2);transform-origin:50% -16px;animation:bxSway 3.2s var(--dl) ease-in-out infinite alternate}
.bx-frames i::before{content:"";position:absolute;left:50%;bottom:100%;width:1.5px;height:12px;background:var(--text)}
.bx-d:hover .bx-frames i,.bx-d.on .bx-frames i{border-color:var(--on-pigment)}
.bx-e{flex-direction:row;align-items:center;gap:12px}
.bx-e .bx-body{flex:1 1 0;padding-top:0}
.bx-e .bx-art{flex:0 0 38%;min-height:110px;align-self:stretch}
.bx-e .bx-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:bxBob 4s ease-in-out infinite alternate}
.bx-ring{position:absolute;top:0;inset-inline-end:0;width:56px;height:56px;transform:rotate(-90deg)}
.bx-ring circle{fill:none;stroke:var(--vermillion);stroke-width:6;stroke-linecap:round;stroke-dasharray:.3 1;animation:bxRing 4s ease-in-out infinite alternate}
.bx-t.on .bx-ring circle{stroke:var(--on-pigment)}
@media(hover:hover){.bx-t:hover .bx-ring circle{stroke:var(--on-pigment)}}
.bx-big{font-family:"DynaPuff",cursive;font-size:calc(var(--fs-h2) * 1.35);line-height:1}
.bx-g{background:var(--btn-bg);color:var(--btn-text);border-color:transparent}
.bx-g .bx-spark{position:absolute;top:0;inset-inline-end:0;width:56px;height:56px;fill:var(--saffron);animation:bxSpin 8s linear infinite}
.bx-g .bx-arrow{width:30px;height:30px;transition:transform .35s}
.bx-g:hover .bx-arrow,.bx-g:focus-visible .bx-arrow{transform:translateX(8px)}
.bx-g.on,.bx-g:focus-visible{color:var(--on-pigment)}
@media(hover:hover){.bx-g:hover{color:var(--on-pigment)}.bx-g:hover .bx-spark{fill:var(--on-pigment)}}

/* word ribbon */
.bx-mq{overflow:hidden;direction:ltr;border-block:2px solid var(--text);padding-block:8px}
.bx-track{display:flex;gap:26px;width:max-content;animation:bxTrack 28s linear infinite;font-family:"DynaPuff",cursive;font-size:calc(var(--fs-h3) + 2px);line-height:1.3;white-space:nowrap}
.bx-track span:nth-child(4n+1){color:var(--vermillion)}.bx-track span:nth-child(4n+2){color:var(--aqua)}.bx-track span:nth-child(4n+3){color:var(--saffron)}.bx-track span:nth-child(4n){color:var(--apricot)}
.bx-mq:hover .bx-track{animation-play-state:paused}

/* reveal: tiles splat in */
.bx.js:not(.in-view) .bx-t{opacity:0;transform:scale(.6) rotate(-6deg)}
.bx.dealing .bx-t{transition-delay:calc(var(--k)*.09s),0s,0s}

@keyframes bxWave{to{transform:translateX(-50%)}}
@keyframes bxPop{0%,100%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}60%{transform:translate(var(--x),var(--y)) scale(1);opacity:1}85%{opacity:0}}
@keyframes bxSpin{to{transform:rotate(360deg)}}
@keyframes bxPulse{0%,100%{transform:scale(.7)}50%{transform:scale(1.25)}}
@keyframes bxSway{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes bxBob{to{transform:translateY(-8px) rotate(3deg)}}
@keyframes bxRing{from{stroke-dasharray:.25 1}to{stroke-dasharray:.95 1}}
@keyframes bxTrack{to{transform:translateX(-50%)}}

/* responsive */
@media(min-width:375px){.bx{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.bx{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--gutter:20px;--gap:14px}.bx-t{padding:18px}}
@media(min-width:768px){.bx{--fs-h2:30px;--fs-h3:22px;--gutter:24px;--gap:16px;padding-block:80px 80px}
  .bx-wrap{gap:32px}
  .bx-grid{grid-template-areas:"a a" "b c" "d c" "e e" "f g"}
  .bx-a{--art:220px}.bx-c{--art:90px}.bx-b,.bx-d{--art:100px}
  .bx-wheel{width:96px;height:96px}.bx-wheel2{top:36px;inset-inline-end:36px}
  .bx-frames i{width:40px;height:52px}
  .bx-t{padding:22px}.bx-body p{font-size:var(--fs-body)}}
@media(min-width:1024px){.bx{--fs-h2:32px;--fs-h3:24px;--gutter:clamp(24px,3vw,40px);--gap:18px;padding-block:96px 96px}
  .bx-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(24px,4vw,64px)}
  .bx-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"a a b c" "a a d c" "e e f g";grid-auto-rows:minmax(210px,auto)}
  .bx-a{--art:190px}.bx-c{--art:170px}.bx-b,.bx-d{--art:90px}.bx-f,.bx-g{--art:70px}
  .bx-t{will-change:transform}
  .bx-e .bx-art{flex-basis:36%}}
@media(min-width:1280px){.bx{--fs-h2:34px;--fs-h3:25px;--fs-body:17px;--fs-small:14px;--gutter:clamp(32px,3.5vw,48px);--gap:20px}.bx-t{padding:26px}}
@media(min-width:1440px){.bx{--fs-h2:36px;--fs-h3:26px}}
@media(max-width:374px){.bx-t{padding:12px}.bx-wheel{width:64px;height:64px}.bx-wheel2{top:22px;inset-inline-end:22px;width:20px;height:20px}.bx-b,.bx-d{--art:70px}.bx-chips li{font-size:11px}.bx-big{font-size:30px}.bx-ring,.bx-g .bx-spark{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.bx *,.bx *::before,.bx *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}.bx-track{animation:none!important}}

/* =========================================================
   MIX N MUSE - INSTRUCTORS BANNER (additive; classes .ib-, tokens scoped to .ib)
   Paste at the END of styles.css
========================================================= */
.ib{--fs-h1:32px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.45,0,.25,1);position:relative;z-index:3;isolation:isolate;display:flex;min-height:75vh;padding-top:96px;background:var(--canvas);font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.ib,.ib *,.ib *::before,.ib *::after{box-sizing:border-box}
:where(.ib) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}
:where(.ib) button{border:0;background:none;padding:0}
.ib :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ib h1{font-family:"DynaPuff",cursive;font-weight:500;font-size:var(--fs-h1);line-height:1.15;margin:0;color:var(--text);text-wrap:balance;overflow-wrap:anywhere}
:where(.ib) :where(p,ul){margin:0}:where(.ib) ul{padding:0;list-style:none}
.ib-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ib-cv{display:block;width:100%;height:100%}
.ib-in{position:relative;z-index:2;width:100%;max-width:1400px;margin-inline:auto;padding:28px var(--gutter) 70px;display:grid;gap:28px;align-content:center;align-items:center}
.ib-copy,.ib-stage{min-width:0}

/* copy */
.ib-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;font-size:var(--fs-small);font-weight:600;color:var(--text-soft)}
.ib-crumb a{color:var(--text-soft)}.ib-crumb a:hover{color:var(--vermillion)}.ib-crumb i{font-style:normal;opacity:.6}.ib-crumb span{color:var(--text)}
.ib-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.ib-w>span{display:inline-block;transform:translateY(110%) rotate(8deg);animation:ibUp .8s calc(var(--i)*.09s + .2s) cubic-bezier(.2,.8,.2,1) forwards}
.ib-hl{position:relative}
.ib-hl>span{position:relative;color:var(--vermillion)}
.ib-hl svg{position:absolute;inset-inline:0;bottom:-.06em;width:100%;height:.28em;overflow:visible}
.ib-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ibDraw 1s 1.1s ease forwards}
.ib-lead{max-width:30em;margin-top:16px;color:var(--text-soft);opacity:0;animation:ibFade .8s 1s forwards}
.ib-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;opacity:0;animation:ibFade .8s 1.2s forwards}
.ib-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;text-align:center;transition:transform .3s,color .3s}
.ib-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.ib-btn:hover{transform:translateY(-3px)}.ib-btn:hover::before{transform:scaleX(1)}
.ib-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.ib-btn:hover svg{transform:translateX(5px)}
.ib-btn-primary{background:var(--btn-bg);color:var(--btn-text)}.ib-btn-primary::before{background:var(--btn-hover)}
.ib-btn-ghost{border-color:var(--text);color:var(--text)}.ib-btn-ghost::before{background:var(--saffron)}.ib-btn-ghost:hover{color:var(--on-pigment)}
.ib-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;opacity:0;animation:ibFade .8s 1.4s forwards}
.ib-chips li{padding:6px 12px;border-radius:99px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.3}

/* orbit */
.ib-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.ib-orb{position:relative;width:min(100%,380px);aspect-ratio:1;flex:none}
.ib-ring{position:absolute;border-radius:50%;border:3px dashed var(--c);opacity:.75;animation:ibSpin var(--sp) linear infinite}
.ib-r1{inset:20%;--c:var(--aqua);--sp:40s}
.ib-r2{inset:3%;--c:var(--apricot);--sp:60s;animation-direction:reverse}
.ib-core{position:absolute;inset:36%;display:grid;place-items:center;padding:4%;background:var(--saffron);color:var(--on-pigment);font-family:"DynaPuff",cursive;font-size:clamp(13px,3.6vw,22px);line-height:1.1;text-align:center;border-radius:58% 42% 55% 45%/48% 56% 44% 52%;animation:ibBlob 9s ease-in-out infinite,ibPop 1s .4s cubic-bezier(.3,1.6,.4,1) backwards;filter:drop-shadow(0 10px 18px rgba(61,41,37,.25))}
.ib-core i{position:absolute;inset:-12%;z-index:-1;border-radius:inherit;background:var(--vermillion);opacity:.55;animation:ibBlob 7s -3s ease-in-out infinite reverse}
.ib-spk{position:absolute;z-index:1;width:clamp(18px,7%,30px);fill:var(--c);animation:ibTw 3s ease-in-out infinite}
.ib-arm{position:absolute;inset:0;animation:ibSpin var(--sp) linear infinite;animation-delay:var(--dl)}
.ib-in1{--sp:40s;--top:calc(20% + 1.5px)}
.ib-out{--sp:55s;--top:calc(3% + 1.5px)}
.ib-rev{animation-direction:reverse}
.ib-orb{--sz:clamp(46px,15%,78px)}
.ib-av{position:absolute;left:50%;top:var(--top);width:var(--sz);height:var(--sz);margin-left:calc(var(--sz) / -2);margin-top:calc(var(--sz) / -2);border-radius:50%;animation:ibSpin var(--sp) linear infinite reverse;animation-delay:var(--dl)}
.ib-rev .ib-av{animation-direction:normal}
.ib-orb:hover .ib-arm,.ib-orb:hover .ib-av,.ib-orb:hover .ib-ring,.ib-orb.hold .ib-arm,.ib-orb.hold .ib-av,.ib-orb.hold .ib-ring{animation-play-state:paused}
.ib-face{display:block;width:100%;height:100%;border-radius:50%;border:4px solid var(--surface);background:var(--c);box-shadow:0 10px 22px rgba(61,41,37,.28);overflow:hidden;transition:transform .4s cubic-bezier(.3,1.6,.4,1);animation:ibBob 3s ease-in-out infinite alternate}
.ib-face svg{display:block;width:100%;height:100%}
.ib-av:hover .ib-face,.ib-av:focus-visible .ib-face,.ib-av.on .ib-face{transform:scale(1.2)}
.ib-cap{display:grid;gap:2px;justify-items:center;width:100%;max-width:340px;min-height:62px;padding:10px 16px;border-radius:16px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);text-align:center;font-size:var(--fs-small);font-weight:600;line-height:1.35;transition:background-color .35s,color .35s}
.ib-cap b{font-family:"DynaPuff",cursive;font-weight:500;font-size:calc(var(--fs-body) + 1px);line-height:1.2;overflow-wrap:anywhere}
.ib-cap.is-live{background:var(--cc);color:var(--on-pigment);border-color:transparent}
.ib-touch{display:none}
@media(hover:none){.ib-fine{display:none}.ib-touch{display:inline}}

/* paint dripping off the bottom edge */
.ib-drips{position:absolute;z-index:3;inset-inline:0;bottom:-46px;width:100%;height:92px;pointer-events:none;overflow:visible}
.ib-edge{fill:var(--vermillion)}
.ib-dg1 .ib-dp{fill:var(--saffron)}.ib-dg2 .ib-dp{fill:var(--aqua)}
.ib-dp{transform-box:fill-box;transform-origin:50% 0;animation:ibDrip 5s var(--dl) ease-in-out infinite}

@keyframes ibUp{to{transform:none}}
@keyframes ibDraw{to{stroke-dashoffset:0}}
@keyframes ibFade{to{opacity:1}}
@keyframes ibSpin{to{transform:rotate(360deg)}}
@keyframes ibBlob{0%,100%{border-radius:58% 42% 55% 45%/48% 56% 44% 52%}33%{border-radius:42% 58% 45% 55%/58% 42% 58% 42%}66%{border-radius:52% 48% 60% 40%/42% 58% 42% 58%}}
@keyframes ibPop{from{transform:scale(0)}}
@keyframes ibBob{to{translate:0 -5px}}
@keyframes ibTw{0%,100%{transform:scale(.5) rotate(0);opacity:.5}50%{transform:scale(1.1) rotate(90deg);opacity:1}}
@keyframes ibDrip{0%{transform:scaleY(.2)}25%{transform:scaleY(1)}70%{transform:scaleY(1.12)}100%{transform:scaleY(.2)}}

/* responsive: mobile-S base, then 375 / 425 / 768 / 1024 / 1280 / 1440.
   Phones stack the copy above the orbit, so the banner is min-height 75vh and grows with its content.
   From 768px up it is exactly 75vh (never shorter than 620px, so no text is ever cut). */
@media(max-width:767px){.ib-chips{display:none}.ib-orb{width:min(100%,340px)}}
@media(min-width:375px){.ib{--fs-h1:34px}}
@media(min-width:425px){.ib{--fs-h1:38px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}.ib-orb{width:min(100%,380px)}}
@media(min-width:768px){
  .ib{--fs-h1:38px;--gutter:24px;height:75vh;min-height:620px;padding-top:104px}
  .ib-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;padding-block:16px 56px}
  .ib-orb{width:min(100%,calc(max(75vh,620px) - 250px),520px)}}
@media(min-width:1024px){
  .ib{--fs-h1:44px;--gutter:clamp(24px,3vw,40px)}
  .ib-in{gap:clamp(24px,4vw,64px)}
  .ib-chips{display:flex}
  .ib-orb{width:min(100%,calc(max(75vh,620px) - 250px),560px)}}
@media(min-width:1280px){.ib{--fs-h1:48px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}}
@media(min-width:1440px){.ib{--fs-h1:52px}}
@media(max-width:374px){.ib-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.ib *,.ib *::before,.ib *::after{animation-duration:.01s!important;animation-iteration-count:1!important;animation-delay:0s!important}.ib-w>span{transform:none}.ib-lead,.ib-cta,.ib-chips{opacity:1}.ib-hl path{stroke-dashoffset:0}}

/* ============================================================
   MIX N MUSE — INSTRUCTORS
   SECTION 05 + SECTION 07 ONLY
   ------------------------------------------------------------
   Scope:
   .im5-*
   .im7-*
   ============================================================ */


/* ============================================================
   SECTION 05 — HOW THEY TEACH
   ============================================================ */

.im5-teaching {
    --im5-bg: var(--surface-soft);
    --im5-text: var(--text);
    --im5-muted: var(--text-soft);
    --im5-border: var(--border);
    --im5-strong-border: var(--border-strong);
    --im5-red: var(--vermillion);
    --im5-yellow: var(--saffron);
    --im5-peach: var(--apricot);
    --im5-aqua: var(--aqua);
    --im5-coral: var(--coral);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    padding-block: 88px 96px;

    background:
        radial-gradient(
            circle at 8% 18%,
            color-mix(in srgb, var(--im5-red) 8%, transparent),
            transparent 23%
        ),
        radial-gradient(
            circle at 92% 82%,
            color-mix(in srgb, var(--im5-aqua) 9%, transparent),
            transparent 25%
        ),
        var(--canvas);

    color: var(--im5-text);

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.65;
}


/* Section container */

.im5-inner {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 40px),
        1360px
    );

    margin-inline: auto;
}


/* Heading */

.im5-heading {
    width: min(100%, 820px);
    margin: 0 auto 44px;
    text-align: center;
}

.im5-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin-bottom: 13px;

    color: var(--im5-red);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.im5-kicker-dot {
    width: 8px;
    height: 8px;
    flex: none;

    border-radius: 50%;

    background: var(--im5-red);

    box-shadow:
        0 0 0 5px
        color-mix(in srgb, var(--im5-red) 12%, transparent);

    animation: im5DotPulse 2.2s ease-in-out infinite;
}

.im5-heading h2 {
    margin: 0 0 14px;

    color: var(--im5-text);

    font-family: "DynaPuff", cursive;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.02em;
}

.im5-heading p {
    width: min(100%, 720px);
    margin: 0 auto;

    color: var(--im5-muted);

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}


/* Large rectangle */

.im5-canvas {
    position: relative;

    width: 100%;
    min-height: 610px;

    padding: 72px 52px 42px;

    overflow: hidden;
    isolation: isolate;

    border: 1px solid var(--im5-strong-border);
    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--surface) 92%, var(--im5-yellow) 8%),
            var(--surface)
        );

    box-shadow:
        0 25px 65px
        color-mix(in srgb, var(--text) 10%, transparent);

    transform: translateY(35px);
    opacity: 0;

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1),
        opacity .8s ease,
        box-shadow .4s ease;
}

.im5-canvas.im5-active {
    transform: translateY(0);
    opacity: 1;
}


/* Subtle inner paper texture */

.im5-canvas::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;

    opacity: .42;

    background-image:
        radial-gradient(
            color-mix(in srgb, var(--im5-text) 7%, transparent) 1px,
            transparent 1px
        );

    background-size: 17px 17px;

    pointer-events: none;
}


/* Animated top edge */

.im5-canvas::after {
    content: "";

    position: absolute;

    inset-inline: 8%;
    top: 0;

    height: 5px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            var(--im5-red) 0 26%,
            var(--im5-yellow) 26% 51%,
            var(--im5-aqua) 51% 75%,
            var(--im5-coral) 75% 100%
        );

    transform: scaleX(.15);
    transform-origin: center;

    transition:
        transform 1.3s cubic-bezier(.2,.8,.2,1);

    opacity: .9;
}

.im5-canvas.im5-active::after {
    transform: scaleX(1);
}


/* Label */

.im5-canvas-label {
    position: absolute;
    top: 24px;
    inset-inline-start: 30px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--im5-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.im5-label-star {
    color: var(--im5-yellow);
    font-size: 17px;

    animation: im5StarTwinkle 2.8s ease-in-out infinite;
}


/* Paint line */

.im5-paint-line {
    position: absolute;

    left: 0;
    right: 0;
    top: 52%;

    z-index: -1;

    height: 3px;

    overflow: hidden;

    opacity: .35;
}

.im5-paint-line span {
    display: block;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--im5-red),
            var(--im5-yellow),
            var(--im5-aqua),
            transparent
        );

    transform: translateX(-100%);
}

.im5-canvas.im5-active .im5-paint-line span {
    animation: im5PaintTravel 2.2s cubic-bezier(.4,0,.2,1) .35s forwards;
}


/* Four principles */

.im5-principles {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    width: 100%;
}


/* Individual principle */

.im5-principle {
    --im5-card-color: var(--im5-red);

    position: relative;

    min-width: 0;
    min-height: 340px;

    display: flex;
    flex-direction: column;

    padding: 24px 22px 23px;

    overflow: hidden;

    border: 1px solid var(--im5-border);
    border-radius: 24px;

    background:
        color-mix(
            in srgb,
            var(--surface) 92%,
            var(--im5-card-color) 8%
        );

    box-shadow:
        0 12px 30px
        color-mix(in srgb, var(--text) 7%, transparent);

    opacity: 0;
    transform:
        translateY(50px)
        rotate(var(--im5-rotate, 0deg))
        scale(.95);

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        opacity .7s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.im5-principle:nth-child(1) {
    --im5-card-color: var(--im5-red);
    --im5-rotate: -1.2deg;
}

.im5-principle:nth-child(2) {
    --im5-card-color: var(--im5-yellow);
    --im5-rotate: .8deg;
}

.im5-principle:nth-child(3) {
    --im5-card-color: var(--im5-aqua);
    --im5-rotate: -0.7deg;
}

.im5-principle:nth-child(4) {
    --im5-card-color: var(--im5-coral);
    --im5-rotate: 1.1deg;
}

.im5-canvas.im5-active .im5-principle {
    opacity: 1;

    transform:
        translateY(0)
        rotate(var(--im5-rotate))
        scale(1);
}

.im5-canvas.im5-active .im5-principle:nth-child(1) {
    transition-delay: .15s;
}

.im5-canvas.im5-active .im5-principle:nth-child(2) {
    transition-delay: .30s;
}

.im5-canvas.im5-active .im5-principle:nth-child(3) {
    transition-delay: .45s;
}

.im5-canvas.im5-active .im5-principle:nth-child(4) {
    transition-delay: .60s;
}


/* Color wash */

.im5-principle::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -75px;
    top: -78px;

    border-radius: 50%;

    background: var(--im5-card-color);

    opacity: .14;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        opacity .4s ease;
}

.im5-principle:hover::before {
    transform: scale(1.45);
    opacity: .22;
}


/* Bottom color sweep */

.im5-principle::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 4px;

    background: var(--im5-card-color);

    transform: scaleX(.2);
    transform-origin: center;

    transition: transform .45s ease;
}

.im5-principle:hover::after {
    transform: scaleX(1);
}


/* Number */

.im5-number {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.im5-number::after {
    content: "";

    width: 30px;
    height: 2px;

    border-radius: 999px;

    background: var(--im5-card-color);

    opacity: .7;

    transition: width .4s ease;
}

.im5-principle:hover .im5-number::after {
    width: 55px;
}

.im5-number span {
    color: var(--im5-card-color);

    font-family: "DynaPuff", cursive;
    font-size: 18px;
    font-weight: 500;
}


/* Icon */

.im5-principle-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 21px;

    border-radius: 18px;

    background:
        color-mix(
            in srgb,
            var(--im5-card-color) 14%,
            var(--surface)
        );

    color: var(--im5-card-color);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border-radius .4s ease;
}

.im5-principle:hover .im5-principle-icon {
    transform:
        translateY(-5px)
        rotate(-6deg);

    border-radius: 50% 45% 52% 48%;
}

.im5-principle-icon svg {
    width: 35px;
    height: 35px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Copy */

.im5-principle-copy {
    position: relative;
    z-index: 2;

    display: flex;
    flex: 1;
    flex-direction: column;
}

.im5-principle-copy h3 {
    margin: 0 0 11px;

    color: var(--im5-text);

    font-family: "DynaPuff", cursive;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}

.im5-principle-copy p {
    margin: 0;

    color: var(--im5-muted);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.72;
}

.im5-card-note {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: auto;
    padding-top: 20px;

    color: var(--im5-card-color);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}


/* Bottom statement */

.im5-bottom-message {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    margin-top: 30px;
    padding-top: 27px;

    border-top: 1px dashed var(--im5-strong-border);

    text-align: center;
}

.im5-bottom-message p {
    margin: 0;

    color: var(--im5-muted);

    font-size: 15px;
    font-weight: 500;
}

.im5-bottom-message strong {
    color: var(--im5-text);
    font-weight: 700;
}

.im5-brush-mark {
    display: flex;
    align-items: center;
    gap: 4px;
}

.im5-brush-mark span {
    display: block;

    height: 5px;

    border-radius: 999px;

    transform: rotate(-7deg);
}

.im5-brush-mark span:nth-child(1) {
    width: 18px;
    background: var(--im5-red);
}

.im5-brush-mark span:nth-child(2) {
    width: 28px;
    background: var(--im5-yellow);
}

.im5-brush-mark span:nth-child(3) {
    width: 14px;
    background: var(--im5-aqua);
}

.im5-sparkle {
    color: var(--im5-yellow);

    font-size: 21px;

    animation: im5FloatSpark 2.8s ease-in-out infinite;
}


/* Decorative doodles */

.im5-decoration {
    position: absolute;

    z-index: 1;

    pointer-events: none;
}

.im5-doodle {
    width: 70px;

    opacity: .7;
}

.im5-doodle svg {
    width: 100%;
    height: auto;

    fill: none;

    stroke: var(--im5-red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.im5-doodle-one {
    top: 10%;
    inset-inline-start: 2%;

    transform: rotate(-13deg);
}

.im5-doodle-two {
    bottom: 9%;
    inset-inline-end: 2%;

    transform: rotate(11deg);

    opacity: .55;
}

.im5-pigment {
    position: absolute;

    z-index: 0;

    display: block;

    border-radius:
        48% 52% 43% 57% /
        55% 44% 56% 45%;

    pointer-events: none;
}

.im5-pigment-one {
    width: 105px;
    height: 105px;

    top: 22%;
    left: -46px;

    background: var(--im5-yellow);

    opacity: .18;

    animation: im5BlobFloat 7s ease-in-out infinite;
}

.im5-pigment-two {
    width: 80px;
    height: 80px;

    right: -30px;
    top: 43%;

    background: var(--im5-aqua);

    opacity: .15;

    animation: im5BlobFloat 8s ease-in-out -2s infinite reverse;
}

.im5-pigment-three {
    width: 55px;
    height: 55px;

    left: 10%;
    bottom: 8%;

    background: var(--im5-coral);

    opacity: .16;

    animation: im5BlobFloat 6s ease-in-out -1s infinite;
}


/* ============================================================
   SECTION 07 — FINAL CTA
   ============================================================ */

.im7-trial {
    --im7-text: var(--text);
    --im7-muted: var(--text-soft);
    --im7-red: var(--vermillion);
    --im7-yellow: var(--saffron);
    --im7-peach: var(--apricot);
    --im7-aqua: var(--aqua);
    --im7-coral: var(--coral);

    position: relative;

    width: 100%;

    padding-block: 72px 96px;

    overflow: hidden;
    isolation: isolate;

    background: var(--canvas);

    color: var(--im7-text);

    font-family: "Manrope", sans-serif;
}


/* Inner */

.im7-inner {
    position: relative;
    z-index: 4;

    width: min(
        calc(100% - 40px),
        1360px
    );

    margin-inline: auto;
}


/* Main rectangle */

.im7-card {
    position: relative;

    width: 100%;
    min-height: 590px;

    display: flex;
    flex-direction: column;

    padding: 36px 48px 28px;

    overflow: hidden;
    isolation: isolate;

    border-radius: 36px;

    background:
        linear-gradient(
            135deg,
            var(--surface),
            color-mix(
                in srgb,
                var(--surface) 92%,
                var(--im7-red) 8%
            )
        );

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

    box-shadow:
        0 28px 70px
        color-mix(in srgb, var(--text) 12%, transparent);

    opacity: 0;
    transform: scale(.94) translateY(35px);

    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.2,.8,.2,1);
}

.im7-card.im7-active {
    opacity: 1;
    transform: scale(1) translateY(0);
}


/* Inner colored aura */

.im7-card::before {
    content: "";

    position: absolute;
    inset: 10px;

    z-index: -2;

    border-radius: 29px;

    background:
        radial-gradient(
            circle at 50% 25%,
            color-mix(in srgb, var(--im7-yellow) 12%, transparent),
            transparent 35%
        ),
        radial-gradient(
            circle at 12% 80%,
            color-mix(in srgb, var(--im7-aqua) 10%, transparent),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 80%,
            color-mix(in srgb, var(--im7-coral) 11%, transparent),
            transparent 28%
        );

    pointer-events: none;
}


/* Paper texture */

.im7-card::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;

    opacity: .35;

    background-image:
        radial-gradient(
            color-mix(in srgb, var(--text) 7%, transparent) 1px,
            transparent 1px
        );

    background-size: 19px 19px;

    pointer-events: none;
}


/* Animated border */

.im7-border-paint {
    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;
}

.im7-border-paint span {
    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 6px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            var(--im7-red),
            var(--im7-yellow),
            var(--im7-aqua),
            var(--im7-coral),
            var(--im7-red)
        );

    background-size: 250% 100%;

    transform: scaleX(.1);

    transform-origin: center;

    opacity: .95;
}

.im7-card.im7-active .im7-border-paint span {
    animation:
        im7BorderReveal 1.2s cubic-bezier(.2,.8,.2,1) .2s forwards,
        im7BorderMove 6s linear 1.4s infinite;
}


/* Top row */

.im7-top-row {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.im7-mini-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--im7-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.im7-mini-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--im7-red);

    box-shadow:
        0 0 0 5px
        color-mix(in srgb, var(--im7-red) 12%, transparent);

    animation: im7Pulse 2.1s ease-in-out infinite;
}

.im7-top-star {
    color: var(--im7-yellow);

    font-size: 23px;

    animation: im7Star 3s ease-in-out infinite;
}


/* Main content */

.im7-content {
    position: relative;
    z-index: 5;

    width: min(100%, 850px);

    margin: auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* Brush */

.im7-brush-icon {
    width: 70px;
    height: 70px;

    display: grid;
    place-items: center;

    margin-bottom: 19px;

    border-radius:
        53% 47% 45% 55% /
        48% 52% 48% 52%;

    background:
        color-mix(
            in srgb,
            var(--im7-yellow) 20%,
            var(--surface)
        );

    color: var(--im7-red);

    transform: rotate(-8deg) scale(.7);
    opacity: 0;

    transition:
        transform .7s cubic-bezier(.2,1.4,.4,1),
        opacity .45s ease;
}

.im7-card.im7-active .im7-brush-icon {
    transform: rotate(-8deg) scale(1);
    opacity: 1;
    transition-delay: .25s;
}

.im7-brush-icon svg {
    width: 48px;
    height: 48px;

    fill: none;

    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.im7-brush-body {
    fill: color-mix(
        in srgb,
        var(--im7-red) 18%,
        transparent
    );
}


/* Eyebrow */

.im7-eyebrow {
    margin-bottom: 11px;

    color: var(--im7-red);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.4;
    text-transform: uppercase;
}


/* Heading */

.im7-content h2 {
    margin: 0;

    color: var(--im7-text);

    font-family: "DynaPuff", cursive;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -.025em;
}

.im7-content h2 span {
    position: relative;

    color: var(--im7-red);
}

.im7-content h2 span::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -8px;

    height: 7px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--im7-yellow),
            var(--im7-aqua)
        );

    transform: scaleX(0);
    transform-origin: left;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.im7-card.im7-active .im7-content h2 span::after {
    transform: scaleX(1);
    transition-delay: .8s;
}


/* Description */

.im7-description {
    width: min(100%, 680px);

    margin: 22px auto 0;

    color: var(--im7-muted);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}


/* CTA buttons */

.im7-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 30px;
}

.im7-btn {
    position: relative;

    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 22px;

    overflow: hidden;

    border-radius: 14px;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease,
        color .3s ease;
}

.im7-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    background: var(--im7-yellow);

    transform: translateX(-105%);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1);

    z-index: -1;
}

.im7-btn:hover::before {
    transform: translateX(0);
}

.im7-btn svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .3s ease;
}

.im7-btn:hover svg {
    transform: translateX(4px);
}

.im7-btn-primary {
    background: var(--btn-bg);
    color: var(--btn-text);

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

.im7-btn-primary:hover {
    color: var(--text);
    transform: translateY(-4px);

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

.im7-btn-secondary {
    border: 2px solid var(--btn-bg);

    background: transparent;

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

.im7-btn-secondary:hover {
    color: var(--text);
    transform: translateY(-4px);
}


/* Bottom statement */

.im7-bottom {
    position: relative;
    z-index: 5;

    width: min(100%, 900px);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin: 34px auto 0;
}

.im7-bottom-line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--border-strong)
        );
}

.im7-bottom-line:last-child {
    background:
        linear-gradient(
            90deg,
            var(--border-strong),
            transparent
        );
}

.im7-bottom-copy {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    color: var(--im7-muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-align: center;
}

.im7-bottom-copy span:nth-child(2) {
    color: var(--im7-red);
}


/* Decorative paint fields */

.im7-paint-field {
    position: absolute;

    z-index: 0;

    pointer-events: none;

    border-radius:
        49% 51% 43% 57% /
        54% 44% 56% 46%;

    opacity: .13;

    filter: blur(.2px);

    animation: im7Blob 8s ease-in-out infinite;
}

.im7-field-one {
    width: 270px;
    height: 190px;

    top: 7%;
    left: -95px;

    background: var(--im7-red);

    transform: rotate(-17deg);
}

.im7-field-two {
    width: 230px;
    height: 180px;

    right: -75px;
    top: 34%;

    background: var(--im7-aqua);

    animation-delay: -2.5s;
}

.im7-field-three {
    width: 190px;
    height: 140px;

    left: 8%;
    bottom: -60px;

    background: var(--im7-yellow);

    animation-delay: -4s;
}


/* Floating dots */

.im7-dot {
    position: absolute;

    z-index: 1;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}

.im7-dot-one {
    width: 18px;
    height: 18px;

    top: 15%;
    left: 12%;

    background: var(--im7-yellow);

    animation: im7DotFloat 4s ease-in-out infinite;
}

.im7-dot-two {
    width: 11px;
    height: 11px;

    top: 27%;
    right: 14%;

    background: var(--im7-red);

    animation: im7DotFloat 3.5s ease-in-out -1s infinite;
}

.im7-dot-three {
    width: 15px;
    height: 15px;

    bottom: 21%;
    right: 7%;

    background: var(--im7-coral);

    animation: im7DotFloat 4.5s ease-in-out -2s infinite;
}

.im7-dot-four {
    width: 9px;
    height: 9px;

    bottom: 16%;
    left: 18%;

    background: var(--im7-aqua);

    animation: im7DotFloat 3.8s ease-in-out -1.4s infinite;
}


/* Stars */

.im7-star {
    position: absolute;

    z-index: 6;

    color: var(--im7-yellow);

    pointer-events: none;
}

.im7-star-one {
    top: 23%;
    left: 7%;

    font-size: 25px;

    animation: im7Star 3s ease-in-out infinite;
}

.im7-star-two {
    right: 8%;
    bottom: 25%;

    font-size: 21px;

    color: var(--im7-aqua);

    animation: im7Star 3.5s ease-in-out -1.2s infinite;
}

.im7-star-three {
    left: 14%;
    bottom: 30%;

    font-size: 18px;

    color: var(--im7-red);

    animation: im7Star 4s ease-in-out -2s infinite;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes im5DotPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.28);
    }
}

@keyframes im5StarTwinkle {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: .75;
    }

    50% {
        transform: rotate(15deg) scale(1.22);
        opacity: 1;
    }
}

@keyframes im5PaintTravel {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes im5FloatSpark {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-7px) rotate(12deg);
    }
}

@keyframes im5BlobFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(9px, -13px, 0) rotate(7deg);
    }
}

@keyframes im7BorderReveal {
    from {
        transform: scaleX(.08);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes im7BorderMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 250% 50%;
    }
}

@keyframes im7Pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}

@keyframes im7Star {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(14deg) scale(1.2);
    }
}

@keyframes im7Blob {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-5deg);
    }

    50% {
        transform: translate3d(15px, -12px, 0) rotate(5deg);
    }
}

@keyframes im7DotFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-13px);
    }
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .im5-teaching {
        padding-block: 76px 84px;
    }

    .im5-heading {
        margin-bottom: 36px;
    }

    .im5-heading h2 {
        font-size: 32px;
    }

    .im5-canvas {
        min-height: 760px;
        padding: 68px 28px 36px;
    }

    .im5-principles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .im5-principle {
        min-height: 300px;
    }

    .im5-paint-line {
        top: 51%;
    }

    .im7-trial {
        padding-block: 62px 82px;
    }

    .im7-card {
        min-height: 590px;
        padding-inline: 36px;
    }

    .im7-content h2 {
        font-size: 42px;
    }
}


/* ============================================================
   RESPONSIVE — LAPTOP
   ============================================================ */

@media (min-width: 1024px) and (max-width: 1279px) {

    .im5-inner,
    .im7-inner {
        width: min(
            calc(100% - 64px),
            1180px
        );
    }

    .im5-heading h2 {
        font-size: 34px;
    }

    .im5-canvas {
        padding-inline: 32px;
    }

    .im5-principle {
        padding-inline: 19px;
    }

    .im5-principle-copy h3 {
        font-size: 21px;
    }

    .im5-principle-copy p {
        font-size: 13px;
    }

    .im7-card {
        min-height: 570px;
        padding-inline: 40px;
    }

    .im7-content h2 {
        font-size: 43px;
    }
}


/* ============================================================
   RESPONSIVE — LAPTOP-L
   ============================================================ */

@media (min-width: 1280px) and (max-width: 1439px) {

    .im5-heading h2 {
        font-size: 36px;
    }

    .im5-canvas {
        min-height: 620px;
    }

    .im5-principle-copy p {
        font-size: 14px;
    }

    .im7-content h2 {
        font-size: 46px;
    }
}


/* ============================================================
   RESPONSIVE — DESKTOP
   ============================================================ */

@media (min-width: 1440px) {

    .im5-inner,
    .im7-inner {
        width: min(
            calc(100% - 80px),
            1400px
        );
    }

    .im5-heading h2 {
        font-size: 38px;
    }

    .im5-canvas {
        min-height: 640px;
        padding-inline: 58px;
    }

    .im5-principle {
        min-height: 350px;
    }

    .im5-principle-copy p {
        font-size: 15px;
    }

    .im7-card {
        min-height: 610px;
    }

    .im7-content h2 {
        font-size: 50px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE-L
   ============================================================ */

@media (min-width: 425px) and (max-width: 767px) {

    .im5-teaching {
        padding-block: 62px 70px;
    }

    .im5-inner,
    .im7-inner {
        width: calc(100% - 32px);
    }

    .im5-heading {
        margin-bottom: 28px;
    }

    .im5-heading h2 {
        font-size: 28px;
    }

    .im5-heading p {
        font-size: 15px;
    }

    .im5-canvas {
        min-height: auto;
        padding: 60px 18px 28px;
        border-radius: 26px;
    }

    .im5-canvas-label {
        top: 21px;
        inset-inline-start: 20px;
        font-size: 9px;
    }

    .im5-principles {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .im5-principle {
        min-height: 0;
        padding: 21px 20px 22px;
    }

    .im5-principle-copy p {
        font-size: 14px;
    }

    .im5-paint-line {
        display: none;
    }

    .im5-bottom-message {
        flex-direction: column;
        gap: 10px;
    }

    .im5-brush-mark {
        order: -1;
    }

    .im5-doodle {
        opacity: .35;
    }

    .im7-trial {
        padding-block: 48px 65px;
    }

    .im7-card {
        min-height: 570px;
        padding: 27px 20px 23px;
        border-radius: 27px;
    }

    .im7-content {
        width: 100%;
    }

    .im7-brush-icon {
        width: 62px;
        height: 62px;
    }

    .im7-content h2 {
        font-size: 34px;
    }

    .im7-description {
        font-size: 15px;
        line-height: 1.7;
    }

    .im7-actions {
        width: 100%;
        flex-direction: column;
    }

    .im7-btn {
        width: min(100%, 280px);
    }

    .im7-bottom {
        flex-direction: column;
        gap: 13px;
    }

    .im7-bottom-line {
        width: 65%;
        flex: none;
    }

    .im7-bottom-copy {
        font-size: 9px;
    }

    .im7-field-one {
        left: -130px;
    }

    .im7-field-two {
        right: -120px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE-M
   ============================================================ */

@media (min-width: 375px) and (max-width: 424px) {

    .im5-teaching {
        padding-block: 56px 64px;
    }

    .im5-inner,
    .im7-inner {
        width: calc(100% - 28px);
    }

    .im5-heading h2 {
        font-size: 26px;
    }

    .im5-heading p {
        font-size: 14px;
    }

    .im5-canvas {
        padding: 58px 15px 24px;
        border-radius: 24px;
    }

    .im5-principle {
        padding: 19px 17px 20px;
        border-radius: 20px;
    }

    .im5-principle-copy h3 {
        font-size: 20px;
    }

    .im5-principle-copy p {
        font-size: 13px;
    }

    .im5-card-note {
        font-size: 9px;
    }

    .im5-bottom-message p {
        font-size: 13px;
    }

    .im7-trial {
        padding-block: 44px 58px;
    }

    .im7-card {
        min-height: 550px;
        padding: 24px 16px 20px;
        border-radius: 24px;
    }

    .im7-content h2 {
        font-size: 30px;
    }

    .im7-eyebrow {
        font-size: 10px;
        letter-spacing: .11em;
    }

    .im7-description {
        font-size: 14px;
    }

    .im7-btn {
        min-height: 47px;
        font-size: 14px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE-S
   ============================================================ */

@media (max-width: 374px) {

    .im5-teaching {
        padding-block: 50px 58px;
    }

    .im5-inner,
    .im7-inner {
        width: calc(100% - 24px);
    }

    .im5-kicker {
        font-size: 10px;
        letter-spacing: .09em;
    }

    .im5-heading h2 {
        font-size: 24px;
    }

    .im5-heading p {
        font-size: 13px;
        line-height: 1.7;
    }

    .im5-canvas {
        padding: 55px 12px 22px;
        border-radius: 21px;
    }

    .im5-canvas-label {
        inset-inline-start: 14px;
        font-size: 8px;
    }

    .im5-principle {
        padding: 17px 15px 19px;
        border-radius: 18px;
    }

    .im5-principle-icon {
        width: 52px;
        height: 52px;
    }

    .im5-principle-copy h3 {
        font-size: 19px;
    }

    .im5-principle-copy p {
        font-size: 13px;
    }

    .im5-bottom-message {
        margin-top: 23px;
    }

    .im5-bottom-message p {
        font-size: 12px;
    }

    .im7-trial {
        padding-block: 38px 50px;
    }

    .im7-card {
        min-height: 535px;
        padding: 21px 12px 18px;
        border-radius: 21px;
    }

    .im7-mini-label {
        font-size: 8px;
        letter-spacing: .09em;
    }

    .im7-top-star {
        font-size: 18px;
    }

    .im7-brush-icon {
        width: 55px;
        height: 55px;
        margin-bottom: 15px;
    }

    .im7-content h2 {
        font-size: 27px;
        line-height: 1.18;
    }

    .im7-content h2 span::after {
        bottom: -5px;
        height: 5px;
    }

    .im7-eyebrow {
        max-width: 240px;
        font-size: 9px;
    }

    .im7-description {
        font-size: 13px;
        line-height: 1.7;
    }

    .im7-actions {
        width: 100%;
        gap: 9px;
        margin-top: 24px;
    }

    .im7-btn {
        width: 100%;
        min-height: 45px;
        padding-inline: 15px;
        font-size: 13px;
    }

    .im7-bottom {
        margin-top: 26px;
    }

    .im7-bottom-copy {
        max-width: 250px;
        font-size: 8px;
        line-height: 1.7;
    }

    .im7-dot-one,
    .im7-dot-four,
    .im7-star-three {
        display: none;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .im5-teaching *,
    .im7-trial * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .im5-canvas,
    .im5-principle,
    .im7-card {
        opacity: 1 !important;
        transform: none !important;
    }

    .im5-canvas::after,
    .im7-border-paint span,
    .im5-paint-line span {
        transform: none !important;
    }
}

/* =========================================================
   MIX N MUSE - MOSAIC GALLERY (additive; classes .mg-, tokens scoped to .mg)
========================================================= */
.mg{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.45,0,.25,1);--cols:6;--rows:16;--gap:5px;--p:.5;position:relative;z-index:2;overflow:clip;isolation:isolate;background:var(--canvas);padding-block:56px 64px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.mg,.mg *,.mg *::before,.mg *::after{box-sizing:border-box}
:where(.mg) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}
:where(.mg) button{border:0;background:none;padding:0}
:where(.mg) img{display:block;max-width:100%}
.mg :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.mg-wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.mg h2{font-family:"DynaPuff",cursive;font-weight:500;font-size:calc(var(--fs-h2)*1.2);line-height:1.15;margin:0;color:var(--text)}

/* board (the paper the mosaic sits on) */
.mg-board{position:relative;overflow:hidden;padding:clamp(10px,2.4vw,32px);border-radius:clamp(20px,3vw,36px);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow);color:var(--text)}
.mg-board::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);transform:translateX(-120%);animation:mgShine 8s 2.5s ease-in-out infinite}
@keyframes mgShine{0%{transform:translateX(-120%)}30%,100%{transform:translateX(120%)}}
.mg-top{display:flex;justify-content:space-between;margin:0 2px clamp(10px,1.6vw,18px);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
.mg-top span:nth-child(2){display:none}
.mg.js .mg-top span{opacity:0;letter-spacing:.6em}
.mg.js.in-view .mg-top span{opacity:1;letter-spacing:.16em;transition:opacity 1s .2s,letter-spacing 1.6s .2s var(--ease)}

/* mosaic grid */
.mg-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:var(--gap);aspect-ratio:var(--cols)/var(--rows)}
.mg-t{position:relative;overflow:hidden;border-radius:clamp(7px,1.5vw,16px);background:color-mix(in srgb,var(--c,var(--aqua)) 34%,var(--surface));cursor:zoom-in;transition:transform .5s cubic-bezier(.3,1.4,.4,1),box-shadow .4s}
.mg-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);scale:1.16;translate:0 calc((var(--p) - .5) * var(--par,24px));animation:mgKb 14s ease-in-out infinite alternate;animation-delay:calc(var(--o,0) * -1.3s)}
@keyframes mgKb{from{scale:1.08}to{scale:1.22}}
.mg-png img{object-fit:contain;padding:9%;scale:1;translate:0 0;animation:mgBob 4.5s ease-in-out infinite alternate;animation-delay:calc(var(--o,0) * -.7s)}
@keyframes mgBob{to{translate:0 -5%;rotate:2deg}}
.mg-t:hover{z-index:3;box-shadow:var(--shadow)}
.mg-board.is-hover .mg-t:not(:hover) img{filter:saturate(.55) brightness(.9)}
.mg-t img{transition:filter .4s}
.mg-cap{position:absolute;z-index:2;inset-inline-start:6px;bottom:6px;max-width:calc(100% - 12px);padding:2px 9px;border-radius:99px;background:var(--surface);color:var(--text);font-size:11px;font-weight:700;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.mg-note{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:clamp(8px,1.6vw,20px);background:var(--saffron);color:var(--on-pigment);cursor:default}
.mg-note p{margin:0;font-family:"DynaPuff",cursive;font-weight:500;font-size:var(--fs-body);line-height:1.2;color:var(--on-pigment)}
.mg-note span{font-size:var(--fs-small);font-weight:700;line-height:1.35;color:var(--on-pigment)}

/* tile positions, phones: 6 columns x 16 rows */
.mg-t1{grid-area:1/1/5/4}.mg-t2{grid-area:1/4/3/7}.mg-t3{grid-area:7/1/9/4}.mg-t4{grid-area:3/4/5/7}.mg-t5{grid-area:5/1/7/4}.mg-t6{grid-area:5/4/9/7}.mg-t7{grid-area:15/1/17/3}.mg-t8{grid-area:9/1/13/4}.mg-t9{grid-area:15/3/17/5}.mg-t10{grid-area:9/4/11/7}.mg-t11{grid-area:11/4/13/7}.mg-t12{grid-area:15/5/17/7}.mg-t13{grid-area:13/1/15/4}.mg-t14{grid-area:13/4/15/7}

/* entrance: tiles fly out from the centre and snap into the mosaic */
.mg.js .mg-t{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg)) scale(.5)}
.mg.js.in-view .mg-t{opacity:1;transform:none;transition:opacity .5s calc(var(--o,0) * 70ms),transform 1.05s calc(var(--o,0) * 70ms) cubic-bezier(.3,1.35,.4,1)}
.mg.js.in-view.is-ready .mg-t{transition:transform .5s cubic-bezier(.3,1.4,.4,1),box-shadow .4s}
.mg.js.in-view.is-ready .mg-t:hover{transform:scale(1.045)}
.mg.js .mg-cap{transform:translateY(160%)}
.mg.js.in-view .mg-cap{transform:none;transition:transform .6s calc(.9s + var(--o,0) * 70ms) cubic-bezier(.3,1.4,.4,1)}

/* bottom row: big title + short note */
.mg-bottom{display:grid;gap:16px;margin-top:clamp(16px,2.4vw,30px);align-items:end}
.mg-hl{position:relative;display:inline-block;color:var(--vermillion)}
.mg-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.mg-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.mg.in-view .mg-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s 1.2s ease}
.mg-lead{margin:0 0 16px;color:var(--text-soft);max-width:30em}
.mg.js .mg-rv{opacity:0;transform:translateY(22px)}
.mg.js.in-view .mg-rv{opacity:1;transform:none;transition:opacity .8s calc(.9s + var(--i) * .15s),transform .8s calc(.9s + var(--i) * .15s) cubic-bezier(.2,.7,.2,1)}
.mg-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;transition:transform .3s}
.mg-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.mg-btn:hover{transform:translateY(-3px)}.mg-btn:hover::before{transform:scaleX(1)}
.mg-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.mg-btn:hover svg{transform:translateX(5px)}
.mg-btn-primary{background:var(--btn-bg);color:var(--btn-text)}.mg-btn-primary::before{background:var(--btn-hover)}

/* artwork viewer */
.mg-lb,.mg-lb *{box-sizing:border-box}
.mg-lb{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:16px;font-family:"Manrope",sans-serif;font-size:16px;line-height:1.5;color:var(--text)}
.mg-lb[hidden]{display:none}
html.mg-lock{overflow:hidden}
.mg-lb-bd{position:absolute;inset:0;background:rgba(24,14,12,.84);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.mg-lb.is-open .mg-lb-bd{opacity:1}
.mg-lb-f{position:relative;margin:0;max-width:min(92vw,940px);max-height:86svh;display:flex;flex-direction:column;background:var(--surface);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);color:var(--text)}
.mg-lb-f img{display:block;max-width:100%;max-height:calc(86svh - 64px);margin-inline:auto;object-fit:contain;background:var(--surface-soft)}
.mg-lb-f figcaption{padding:12px 18px;font-weight:700;font-size:16px;color:var(--text);background:var(--surface)}
.mg-lb-b{position:absolute;z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);padding:0;cursor:pointer;transition:transform .3s}
.mg-lb-b:hover{transform:scale(1.1)}
.mg-lb-b svg{width:22px;height:22px}
.mg-lb-x{top:14px;inset-inline-end:14px}.mg-lb-p{top:50%;margin-top:-23px;inset-inline-start:10px}.mg-lb-n{top:50%;margin-top:-23px;inset-inline-end:10px}

/* ---------- responsive: 320 / 375 / 425 / 768 / 1024 / 1280 / 1440 ---------- */
@media(min-width:375px){.mg{--fs-h2:26px;--fs-h3:19px;--gap:6px}}
@media(min-width:425px){.mg{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}.mg-top span:nth-child(2){display:inline}.mg-cap{font-size:12px}}
@media(min-width:768px){
  .mg{--fs-h2:30px;--fs-h3:22px;--gutter:24px;--cols:12;--rows:8;--gap:8px;padding-block:80px 88px}
  .mg-top{font-size:var(--fs-small)}
  /* tile positions, tablet and up: 12 columns x 8 rows */
  .mg-t1{grid-area:1/1/5/4}.mg-t2{grid-area:1/4/3/8}.mg-t3{grid-area:3/4/5/8}.mg-t4{grid-area:1/8/3/10}.mg-t5{grid-area:3/8/5/10}.mg-t6{grid-area:1/10/5/13}.mg-t7{grid-area:5/1/7/3}.mg-t8{grid-area:5/3/9/6}.mg-t9{grid-area:7/1/9/3}.mg-t10{grid-area:5/6/7/10}.mg-t11{grid-area:7/6/9/8}.mg-t12{grid-area:7/8/9/10}.mg-t13{grid-area:5/10/7/13}.mg-t14{grid-area:7/10/9/13}
  .mg-bottom{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px)}
  .mg-note p{font-size:calc(var(--fs-body)*1.2)}
}
@media(min-width:1024px){.mg{--fs-h2:32px;--fs-h3:22px;--gutter:clamp(24px,3vw,40px);--gap:10px;padding-block:96px 104px}}
@media(min-width:1280px){.mg{--fs-h2:34px;--fs-h3:24px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}.mg-cap{font-size:13px;padding:3px 11px}}
@media(min-width:1440px){.mg{--fs-h2:36px;--fs-h3:26px;--gap:12px}}
@media(max-width:374px){.mg-btn{width:100%}.mg-cap{font-size:10.5px;padding:1px 7px}.mg-note span{display:none}}
@media(min-width:768px) and (max-width:1279px){.mg-note span{display:none}}
@media(prefers-reduced-motion:reduce){.mg *,.mg *::before,.mg *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}}

/* =========================================================
   MIX N MUSE — STEP INTO THEIR ART WORLD
   SECTION ONLY
   Prefix: cz-
========================================================= */

.cz-zoom,
.cz-zoom *,
.cz-zoom *::before,
.cz-zoom *::after {
    box-sizing: border-box;
}


/* =========================================================
   ROOT SECTION
========================================================= */

.cz-zoom {
    --cz-space-x: 16px;
    --cz-scroll-height: 250vh;

    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: var(--cz-scroll-height);

    overflow: clip;

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

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.65;
}


/* =========================================================
   LONG SCROLL AREA
========================================================= */

.cz-zoom-scroll {
    position: relative;
    width: 100%;
    min-height: var(--cz-scroll-height);
}


/* =========================================================
   STICKY VIEWPORT
========================================================= */

.cz-zoom-sticky {
    position: sticky;
    inset-block-start: 0;

    width: 100%;
    height: 100svh;
    min-height: 620px;

    display: grid;
    place-items: center;

    overflow: hidden;
}


/* =========================================================
   AMBIENT PIGMENT MARKS
========================================================= */

.cz-zoom-pigment {
    position: absolute;

    display: block;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(45px);

    opacity: .24;

    z-index: -1;

    will-change: transform;
}

.cz-zoom-pigment-a {
    width: 240px;
    height: 240px;

    inset-block-start: 10%;
    inset-inline-start: -90px;

    background: var(--apricot);

    animation: czZoomFloatA 11s ease-in-out infinite alternate;
}

.cz-zoom-pigment-b {
    width: 210px;
    height: 210px;

    inset-block-end: 8%;
    inset-inline-end: -80px;

    background: var(--aqua);

    animation: czZoomFloatB 13s ease-in-out infinite alternate;
}

.cz-zoom-pigment-c {
    width: 110px;
    height: 110px;

    inset-block-start: 25%;
    inset-inline-end: 12%;

    background: var(--saffron);

    filter: blur(28px);

    opacity: .18;

    animation: czZoomFloatC 8s ease-in-out infinite alternate;
}


/* =========================================================
   INTRO LABEL
========================================================= */

.cz-zoom-intro {
    position: absolute;

    inset-block-start: clamp(88px, 10vh, 120px);
    inset-inline: var(--cz-space-x);

    z-index: 8;

    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 1400px;
    margin-inline: auto;

    pointer-events: none;

    transition:
        opacity .5s ease,
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.cz-zoom-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 7px 16px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;

    background: var(--surface);

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    letter-spacing: .06em;
    text-transform: uppercase;

    box-shadow: 0 10px 24px rgba(61,41,37,.07);
}

.cz-zoom-kicker-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--vermillion);

    animation: czZoomPulse 2.2s ease-in-out infinite;
}

.cz-zoom-scroll-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--text-soft);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: .03em;
}

.cz-zoom-scroll-note svg {
    width: 19px;
    height: 19px;

    animation: czZoomArrow 1.7s ease-in-out infinite;
}


/* =========================================================
   ARTWORK
========================================================= */

.cz-zoom-art {
    position: relative;

    width: min(430px, 72vw);
    height: min(500px, 62vh);

    margin: 0;

    z-index: 3;

    transform-origin: center center;

    will-change:
        width,
        height,
        transform;

    transition:
        opacity .35s ease;
}


/* =========================================================
   IMAGE SHELL
========================================================= */

.cz-zoom-image-shell {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 34px;

    background: var(--surface-soft);

    border: 7px solid var(--surface);

    box-shadow:
        0 30px 70px rgba(61,41,37,.16),
        0 0 0 1px var(--border-strong);

    transform-origin: center center;

    will-change:
        width,
        height,
        border-radius,
        transform;
}

.cz-zoom-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.04);

    will-change: transform;

    transition:
        transform 1.4s cubic-bezier(.2,.7,.2,1);
}


/* Image becomes slightly deeper during expansion */

.cz-zoom-image-veil {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(61,41,37,.02) 0%,
            rgba(61,41,37,.08) 100%
        );

    opacity: 0;

    pointer-events: none;

    transition: opacity .5s ease;
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.cz-zoom-caption {
    position: absolute;

    inset-inline-start: 18px;
    inset-block-end: 18px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

    border-radius: 11px;

    background: var(--surface);

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

    color: var(--text);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.3;

    box-shadow: 0 10px 24px rgba(61,41,37,.12);

    transition:
        opacity .5s ease,
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.cz-zoom-caption-line {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--saffron);
}


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

.cz-zoom-message {
    position: absolute;

    inset: 0;

    z-index: 7;

    display: grid;
    place-items: center;

    padding-inline: var(--cz-space-x);

    pointer-events: none;

    opacity: 0;

    transform: scale(.92) translateY(25px);

    transition:
        opacity .8s cubic-bezier(.2,.7,.2,1),
        transform .9s cubic-bezier(.2,.7,.2,1);
}

.cz-zoom-message-inner {
    width: min(760px, 92vw);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding:
        clamp(28px,5vw,56px)
        clamp(22px,5vw,58px);

    border-radius: 30px;

    background: var(--surface);

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

    box-shadow:
        0 28px 70px rgba(0,0,0,.16),
        0 0 0 1px rgba(255,255,255,.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


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

.cz-zoom-message-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    letter-spacing: .06em;
    text-transform: uppercase;
}

.cz-zoom-message-tag span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--vermillion);
}


/* =========================================================
   MESSAGE HEADING
   SAME SCALE FAMILY AS CLASSES HERO
========================================================= */

.cz-zoom-message h2 {
    margin: 0 0 16px;

    max-width: 760px;

    font-family: "DynaPuff", cursive;
    font-weight: 500;

    font-size: clamp(32px, 4.1vw, 56px);

    line-height: 1.15;

    letter-spacing: -.015em;

    color: var(--text);
}

.cz-zoom-message h2 em {
    position: relative;

    display: inline-block;

    color: var(--vermillion);

    font-style: normal;
}

.cz-zoom-message h2 em::after {
    content: "";

    position: absolute;

    inset-inline: 0;
    inset-block-end: -5px;

    height: 7px;

    background: var(--saffron);

    border-radius: 50%;

    transform:
        rotate(-1.5deg)
        scaleX(.88);

    transform-origin: center;
}


/* =========================================================
   MESSAGE BODY
   SAME 17px LEAD AS EXISTING CLASSES HERO
========================================================= */

.cz-zoom-message p {
    max-width: 34em;

    margin: 0 0 24px;

    color: var(--text-soft);

    font-size: 17px;

    line-height: 1.65;
}


/* =========================================================
   BUTTONS
   SAME 16px SIZE / SAME THEME
========================================================= */

.cz-zoom-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 12px;

    margin-bottom: 24px;
}

.cz-zoom-btn {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 12px 24px;

    border: 2px solid transparent;
    border-radius: 14px;

    font-family: "Manrope", sans-serif;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.cz-zoom-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background: var(--btn-hover);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform .45s cubic-bezier(.77,0,.18,1);
}

.cz-zoom-btn:hover {
    transform: translateY(-3px);
}

.cz-zoom-btn:hover::before {
    transform: scaleX(1);
}

.cz-zoom-btn svg {
    width: 18px;
    height: 18px;

    flex: none;

    transition: transform .3s ease;
}

.cz-zoom-btn:hover svg {
    transform: translateX(5px);
}

.cz-zoom-btn-primary {
    background: var(--btn-bg);

    color: var(--btn-text);

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

.cz-zoom-btn-ghost {
    border-color: var(--text);

    background: transparent;

    color: var(--text);
}

.cz-zoom-btn-ghost::before {
    background: var(--saffron);
}

.cz-zoom-btn-ghost:hover {
    color: var(--on-pigment);
}


/* =========================================================
   THREE PRINCIPLES
========================================================= */

.cz-zoom-principles {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px 24px;
}

.cz-zoom-principles span {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}

.cz-zoom-principles i {
    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    border-radius: 50%;

    background: var(--saffron);
}

.cz-zoom-principles span:nth-child(2) i {
    background: var(--aqua);
}

.cz-zoom-principles span:nth-child(3) i {
    background: var(--coral);
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.cz-zoom-progress {
    position: absolute;

    inset-inline-end: 20px;
    inset-block-start: 50%;

    width: 3px;
    height: 110px;

    transform: translateY(-50%);

    border-radius: 999px;

    background: var(--border-strong);

    overflow: hidden;

    z-index: 9;
}

.cz-zoom-progress-fill {
    position: absolute;

    inset-inline: 0;
    inset-block-start: 0;

    width: 100%;
    height: 0;

    border-radius: inherit;

    background: var(--vermillion);

    transform-origin: top;
}

.cz-zoom-progress-label {
    position: absolute;

    inset-inline-end: 13px;
    inset-block-start: calc(50% + 62px);

    color: var(--text-soft);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;

    z-index: 9;
}


/* =========================================================
   INTERACTION STATES
========================================================= */

/* First stage */

.cz-zoom[data-cz-stage="start"] .cz-zoom-message {
    opacity: 0;
    transform: scale(.92) translateY(25px);
}

.cz-zoom[data-cz-stage="start"] .cz-zoom-image-shell {
    border-radius: 34px;
}

.cz-zoom[data-cz-stage="start"] .cz-zoom-image {
    transform: scale(1.04);
}


/* Expansion stage */

.cz-zoom[data-cz-stage="expand"] .cz-zoom-intro {
    opacity: .12;
    transform: translateY(-20px);
}

.cz-zoom[data-cz-stage="expand"] .cz-zoom-caption {
    opacity: 0;
    transform: translateY(18px);
}

.cz-zoom[data-cz-stage="expand"] .cz-zoom-image-veil {
    opacity: .16;
}


/* Final stage */

.cz-zoom[data-cz-stage="reveal"] .cz-zoom-message {
    opacity: 1;
    transform: scale(1) translateY(0);

    pointer-events: auto;
}

.cz-zoom[data-cz-stage="reveal"] .cz-zoom-intro {
    opacity: 0;
    transform: translateY(-35px);
}

.cz-zoom[data-cz-stage="reveal"] .cz-zoom-caption {
    opacity: 0;
}

.cz-zoom[data-cz-stage="reveal"] .cz-zoom-image {
    transform: scale(1.08);
}

.cz-zoom[data-cz-stage="reveal"] .cz-zoom-image-veil {
    opacity: .25;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes czZoomFloatA {
    0% {
        transform: translate3d(0,0,0) scale(1);
    }

    100% {
        transform: translate3d(45px,25px,0) scale(1.12);
    }
}

@keyframes czZoomFloatB {
    0% {
        transform: translate3d(0,0,0) scale(1);
    }

    100% {
        transform: translate3d(-35px,-30px,0) scale(1.08);
    }
}

@keyframes czZoomFloatC {
    0% {
        transform: translate3d(0,0,0);
    }

    100% {
        transform: translate3d(-20px,18px,0);
    }
}

@keyframes czZoomPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.45);
        opacity: .55;
    }
}

@keyframes czZoomArrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}


/* =========================================================
   MOBILE-L — 425px–767px
========================================================= */

@media (min-width: 425px) and (max-width: 767px) {

    .cz-zoom {
        --cz-space-x: 20px;
        --cz-scroll-height: 235vh;
    }

    .cz-zoom-sticky {
        min-height: 600px;
    }

    .cz-zoom-intro {
        inset-block-start: 82px;
    }

    .cz-zoom-art {
        width: min(430px, 68vw);
        height: min(480px, 60vh);
    }

    .cz-zoom-message-inner {
        width: min(680px, 92vw);
    }

}


/* =========================================================
   TABLET — 768px–1023px
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .cz-zoom {
        --cz-space-x: 24px;
        --cz-scroll-height: 245vh;
    }

    .cz-zoom-art {
        width: min(480px, 52vw);
        height: min(540px, 62vh);
    }

    .cz-zoom-message-inner {
        width: min(720px, 86vw);
    }

    .cz-zoom-progress {
        inset-inline-end: 24px;
    }

}


/* =========================================================
   LAPTOP — 1024px–1279px
========================================================= */

@media (min-width: 1024px) and (max-width: 1279px) {

    .cz-zoom {
        --cz-space-x: 32px;
        --cz-scroll-height: 245vh;
    }

    .cz-zoom-art {
        width: min(500px, 43vw);
        height: min(570px, 63vh);
    }

    .cz-zoom-message-inner {
        width: min(760px, 82vw);
    }

    .cz-zoom-progress {
        inset-inline-end: 32px;
    }

}


/* =========================================================
   LAPTOP-L — 1280px–1439px
========================================================= */

@media (min-width: 1280px) and (max-width: 1439px) {

    .cz-zoom {
        --cz-space-x: 40px;
        --cz-scroll-height: 250vh;
    }

    .cz-zoom-art {
        width: 520px;
        height: 590px;
    }

    .cz-zoom-message-inner {
        width: 780px;
    }

    .cz-zoom-progress {
        inset-inline-end: 40px;
    }

}


/* =========================================================
   DESKTOP — 1440px+
========================================================= */

@media (min-width: 1440px) {

    .cz-zoom {
        --cz-space-x: clamp(40px, 3.5vw, 52px);
        --cz-scroll-height: 255vh;
    }

    .cz-zoom-art {
        width: 540px;
        height: 610px;
    }

    .cz-zoom-message-inner {
        width: 800px;
    }

    .cz-zoom-progress {
        inset-inline-end: clamp(40px, 3.5vw, 52px);
    }

}


/* =========================================================
   MOBILE-M — 375px–424px
========================================================= */

@media (min-width: 375px) and (max-width: 424px) {

    .cz-zoom {
        --cz-space-x: 16px;
        --cz-scroll-height: 235vh;
    }

    .cz-zoom-sticky {
        min-height: 570px;
    }

    .cz-zoom-intro {
        inset-block-start: 78px;
    }

    .cz-zoom-kicker {
        padding: 6px 11px;
        font-size: 11px;
    }

    .cz-zoom-scroll-note {
        font-size: 11px;
    }

    .cz-zoom-art {
        width: min(330px, 74vw);
        height: min(410px, 58vh);
    }

    .cz-zoom-image-shell {
        border-width: 5px;
        border-radius: 26px;
    }

    .cz-zoom-message-inner {
        width: calc(100vw - 28px);
        padding: 25px 18px;
        border-radius: 24px;
    }

    .cz-zoom-message p {
        font-size: 15px;
    }

    .cz-zoom-principles {
        gap: 7px 13px;
    }

    .cz-zoom-principles span {
        font-size: 12px;
    }

    .cz-zoom-progress,
    .cz-zoom-progress-label {
        display: none;
    }

}


/* =========================================================
   MOBILE-S — 320px–374px
========================================================= */

@media (max-width: 374px) {

    .cz-zoom {
        --cz-space-x: 10px;
        --cz-scroll-height: 230vh;
    }

    .cz-zoom-sticky {
        min-height: 540px;
    }

    .cz-zoom-intro {
        inset-block-start: 74px;
        padding-inline: 4px;
    }

    .cz-zoom-kicker {
        padding: 6px 9px;
        gap: 6px;

        font-size: 9.5px;
        letter-spacing: .04em;
    }

    .cz-zoom-kicker-dot {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }

    .cz-zoom-scroll-note {
        font-size: 9.5px;
        gap: 4px;
    }

    .cz-zoom-scroll-note svg {
        width: 15px;
        height: 15px;
    }

    .cz-zoom-art {
        width: min(285px, 78vw);
        height: min(365px, 56vh);
    }

    .cz-zoom-image-shell {
        border-width: 4px;
        border-radius: 22px;
    }

    .cz-zoom-caption {
        inset-inline-start: 9px;
        inset-block-end: 9px;

        padding: 6px 8px;

        font-size: 10px;
    }

    .cz-zoom-caption-line {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
    }

    .cz-zoom-message {
        padding-inline: 8px;
    }

    .cz-zoom-message-inner {
        width: calc(100vw - 16px);

        padding: 22px 13px;

        border-radius: 20px;
    }

    .cz-zoom-message-tag {
        margin-bottom: 10px;
        font-size: 10px;
        gap: 6px;
    }

    .cz-zoom-message-tag span {
        width: 7px;
        height: 7px;
    }

    .cz-zoom-message h2 {
        margin-bottom: 12px;

        font-size: 32px;
        line-height: 1.13;
    }

    .cz-zoom-message h2 em::after {
        height: 5px;
        bottom: -3px;
    }

    .cz-zoom-message p {
        margin-bottom: 18px;

        font-size: 14px;
        line-height: 1.55;
    }

    .cz-zoom-actions {
        width: 100%;
        gap: 8px;
        margin-bottom: 17px;
    }

    .cz-zoom-btn {
        width: 100%;
        min-height: 44px;

        padding: 10px 15px;

        font-size: 14px;
    }

    .cz-zoom-principles {
        gap: 5px 10px;
    }

    .cz-zoom-principles span {
        font-size: 10.5px;
        gap: 5px;
    }

    .cz-zoom-principles i {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }

    .cz-zoom-progress,
    .cz-zoom-progress-label {
        display: none;
    }

}


/* =========================================================
   ACCESSIBILITY — KEYBOARD FOCUS
========================================================= */

.cz-zoom a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cz-zoom-pigment,
    .cz-zoom-kicker-dot,
    .cz-zoom-scroll-note svg {
        animation: none !important;
    }

    .cz-zoom-image,
    .cz-zoom-image-shell,
    .cz-zoom-message,
    .cz-zoom-caption,
    .cz-zoom-intro,
    .cz-zoom-btn,
    .cz-zoom-btn::before,
    .cz-zoom-btn svg {
        transition: none !important;
    }

}

/* =========================================================
   MIX N MUSE
   FROM BLANK PAGE TO "LOOK WHAT I MADE!"
   SECTION-SCOPED STYLES ONLY
========================================================= */

.mnn-art-journey {
    --mnn-canvas: #FFF7E8;
    --mnn-text: #3D2925;
    --mnn-vermilion: #E94F37;
    --mnn-saffron: #F2B544;
    --mnn-apricot: #F49B78;
    --mnn-aqua: #4FB7B3;
    --mnn-coral: #E97878;

    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;

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

    font-family: "Manrope", sans-serif;
}


/* =========================================================
   INNER
========================================================= */

.mnn-art-journey__inner {
    position: relative;
    width: min(1380px, calc(100% - 48px));
    margin-inline: auto;
    padding: clamp(72px, 9vw, 130px) 0;
}


/* =========================================================
   INTRO
========================================================= */

.mnn-intro {
    position: relative;
    z-index: 5;
    max-width: 850px;
    margin-inline: auto;
    margin-bottom: clamp(42px, 6vw, 72px);
    text-align: center;
}

.mnn-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;
    padding: 7px 15px;

    border: 1px solid rgba(61, 41, 37, .16);
    border-radius: 999px;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .13em;
    line-height: 1;

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

.mnn-intro h2 {
    margin: 18px 0 14px;

    font-family: "DynaPuff", cursive;
    font-size: clamp(32px, 4.1vw, 56px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;

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

.mnn-intro h2 span {
    color: var(--mnn-vermilion);
}

.mnn-intro p {
    max-width: 680px;
    margin-inline: auto;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;

    color: var(--mnn-text);
    opacity: .82;
}


/* =========================================================
   AMBIENT PIGMENTS
========================================================= */

.mnn-pigment {
    position: absolute;
    z-index: -1;

    width: clamp(150px, 18vw, 300px);
    aspect-ratio: 1;

    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
    opacity: .06;
}

.mnn-pigment--one {
    top: 7%;
    left: -7%;

    background: var(--mnn-vermilion);
}

.mnn-pigment--two {
    top: 35%;
    right: -8%;

    background: var(--mnn-saffron);
}

.mnn-pigment--three {
    bottom: 4%;
    left: 7%;

    background: var(--mnn-aqua);
}


/* =========================================================
   STAGE
========================================================= */

.mnn-stage {
    position: relative;
    width: 100%;
}

.mnn-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: min(1180px, 100%);
    margin-inline: auto;
    margin-bottom: 14px;
}

.mnn-stage-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mnn-stage-number {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--mnn-vermilion);
    color: #FFF7E8;

    font-size: 12px;
    font-weight: 600;
}

.mnn-stage-label-text {
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;

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

.mnn-stage-hint {
    font-size: 12px;
    font-weight: 500;

    color: var(--mnn-text);
    opacity: .55;
}


/* =========================================================
   ARTBOARD
========================================================= */

.mnn-artboard {
    position: relative;

    width: min(1180px, 100%);
    height: clamp(610px, 69vw, 780px);

    margin-inline: auto;

    overflow: hidden;

    border: 1px solid rgba(61, 41, 37, .16);
    border-radius: clamp(28px, 4vw, 52px);

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(244, 155, 120, .10),
            transparent 32%
        ),
        #FFFDF6;

    box-shadow:
        0 22px 60px rgba(61, 41, 37, .12);

    isolation: isolate;
}


/* =========================================================
   PAPER
========================================================= */

.mnn-paper-glow {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 22% 24%,
            rgba(233, 79, 55, .08),
            transparent 17%
        ),
        radial-gradient(
            circle at 78% 24%,
            rgba(242, 181, 68, .08),
            transparent 18%
        ),
        radial-gradient(
            circle at 50% 80%,
            rgba(79, 183, 179, .07),
            transparent 20%
        );
}


/* =========================================================
   SEED
========================================================= */

.mnn-seed {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 12px;
    height: 12px;

    transform: translate(-50%, -50%) scale(1);

    border-radius: 50%;

    background: var(--mnn-vermilion);

    box-shadow:
        0 0 0 8px rgba(233, 79, 55, .08),
        0 0 0 18px rgba(233, 79, 55, .035);

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1),
        opacity .5s ease;
}


/* =========================================================
   PAINT MARKS
========================================================= */

.mnn-mark {
    position: absolute;

    opacity: 0;

    transform: scale(.25) rotate(-20deg);

    transition:
        opacity .8s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.mnn-mark--red {
    top: 20%;
    left: 22%;

    width: 130px;
    height: 78px;

    border-radius: 54% 46% 58% 42%;

    background: var(--mnn-vermilion);

    transform: rotate(-17deg) scale(.25);
}

.mnn-mark--yellow {
    top: 28%;
    right: 20%;

    width: 112px;
    height: 112px;

    border-radius: 48% 52% 42% 58%;

    background: var(--mnn-saffron);

    transform: rotate(15deg) scale(.25);
}

.mnn-mark--aqua {
    bottom: 22%;
    left: 28%;

    width: 95px;
    height: 135px;

    border-radius: 60% 40% 48% 52%;

    background: var(--mnn-aqua);

    transform: rotate(24deg) scale(.25);
}

.mnn-mark--apricot {
    right: 27%;
    bottom: 18%;

    width: 120px;
    height: 72px;

    border-radius: 55% 45% 40% 60%;

    background: var(--mnn-apricot);

    transform: rotate(-13deg) scale(.25);
}


/* =========================================================
   BRUSH STROKES
========================================================= */

.mnn-stroke {
    position: absolute;

    width: 240px;
    height: 20px;

    border-radius: 999px;

    opacity: 0;

    transform-origin: center;

    transition:
        opacity .9s ease,
        transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.mnn-stroke--one {
    top: 34%;
    left: 8%;

    background: var(--mnn-coral);

    transform: rotate(14deg) translateX(-80px);
}

.mnn-stroke--two {
    right: 7%;
    bottom: 34%;

    background: var(--mnn-saffron);

    transform: rotate(-17deg) translateX(80px);
}

.mnn-stroke--three {
    top: 62%;
    left: 39%;

    width: 200px;

    background: var(--mnn-aqua);

    transform: rotate(-7deg) scaleX(.2);
}


/* =========================================================
   DOODLES
========================================================= */

.mnn-doodle {
    position: absolute;

    opacity: 0;

    color: var(--mnn-text);

    transition:
        opacity .7s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.mnn-doodle--circle {
    top: 16%;
    right: 35%;

    width: 58px;
    height: 58px;

    border: 4px solid var(--mnn-vermilion);
    border-radius: 50%;

    transform: scale(.2) rotate(-30deg);
}

.mnn-doodle--circle-two {
    right: 15%;
    bottom: 19%;

    width: 42px;
    height: 42px;

    border: 3px solid var(--mnn-aqua);
    border-radius: 50%;

    transform: scale(.2) rotate(20deg);
}

.mnn-doodle--star {
    bottom: 24%;
    left: 17%;

    font-size: 38px;

    transform: scale(.2) rotate(-40deg);
}


/* =========================================================
   CONTROLS
========================================================= */

.mnn-controls {
    position: absolute;
    z-index: 10;

    left: 50%;
    bottom: 24px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px;

    transform: translateX(-50%);

    border: 1px solid rgba(61, 41, 37, .14);
    border-radius: 999px;

    background: rgba(255, 247, 232, .88);

    box-shadow:
        0 12px 28px rgba(61, 41, 37, .10);

    backdrop-filter: blur(12px);
}

.mnn-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 42px;
    padding: 0 15px;

    border: 0;
    border-radius: 999px;

    background: transparent;
    color: var(--mnn-text);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        color .25s ease;
}

.mnn-control:hover {
    transform: translateY(-2px);
}

.mnn-control:focus-visible {
    outline: 2px solid var(--mnn-text);
    outline-offset: 3px;
}

.mnn-control.is-active {
    background: var(--mnn-text);
    color: var(--mnn-canvas);
}

.mnn-control-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.mnn-control-dot--colour {
    background: var(--mnn-vermilion);
}

.mnn-control-dot--shape {
    background: var(--mnn-saffron);
}

.mnn-control-dot--texture {
    background: var(--mnn-aqua);
}


/* =========================================================
   MESSAGES
========================================================= */

.mnn-message {
    position: absolute;
    z-index: 8;

    top: 50%;
    left: 50%;

    width: min(520px, calc(100% - 48px));

    text-align: center;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -42%)
        scale(.94);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.mnn-message-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;

    color: var(--mnn-vermilion);
}

.mnn-message h3 {
    margin: 0 0 12px;

    font-family: "DynaPuff", cursive;
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.2;

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

.mnn-message h3 em {
    color: var(--mnn-vermilion);
    font-style: normal;
}

.mnn-message p {
    max-width: 510px;
    margin-inline: auto;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;

    color: var(--mnn-text);
    opacity: .82;
}


/* =========================================================
   FINAL ART
========================================================= */

.mnn-final-art {
    position: absolute;
    z-index: 5;

    top: 50%;
    left: 50%;

    width: min(340px, 40%);
    aspect-ratio: .82;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.55)
        rotate(-5deg);

    pointer-events: none;

    transition:
        opacity 1s ease,
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.mnn-final-art__paper {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 8px solid #FFFDF6;

    background: #FFF7E8;

    box-shadow:
        0 24px 55px rgba(61, 41, 37, .22);
}

.mnn-final-art__paper::after {
    content: "";

    position: absolute;
    inset: 12px;

    border: 1px dashed rgba(61, 41, 37, .18);

    pointer-events: none;
}

.mnn-final-shape {
    position: absolute;
}

.mnn-final-shape--one {
    top: 20%;
    left: 16%;

    width: 42%;
    height: 28%;

    border-radius: 58% 42% 50% 50%;

    background: var(--mnn-vermilion);

    transform: rotate(-16deg);
}

.mnn-final-shape--two {
    top: 31%;
    right: 12%;

    width: 34%;
    height: 30%;

    border-radius: 50%;

    background: var(--mnn-saffron);
}

.mnn-final-shape--three {
    bottom: 19%;
    left: 25%;

    width: 43%;
    height: 25%;

    border-radius: 48% 52% 60% 40%;

    background: var(--mnn-aqua);

    transform: rotate(9deg);
}

.mnn-final-shape--four {
    right: 24%;
    bottom: 15%;

    width: 22%;
    height: 18%;

    border-radius: 50%;

    background: var(--mnn-apricot);
}

.mnn-final-spark {
    position: absolute;

    top: 12%;
    right: 19%;

    color: var(--mnn-aqua);

    font-size: 32px;
}

.mnn-final-smile {
    position: absolute;

    bottom: 27%;
    right: 43%;

    font-size: 38px;

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

.mnn-final-caption {
    position: absolute;

    left: 50%;
    bottom: -34px;

    transform: translateX(-50%);

    white-space: nowrap;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;

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


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

.mnn-final-message {
    position: absolute;
    z-index: 12;

    left: 50%;
    bottom: 54px;

    width: min(650px, calc(100% - 40px));

    text-align: center;

    opacity: 0;

    transform:
        translate(-50%, 20px);

    pointer-events: none;

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.mnn-final-message .mnn-message-index {
    margin-bottom: 9px;
}

.mnn-final-message h3 {
    margin: 0 0 10px;

    font-family: "DynaPuff", cursive;
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.2;

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

.mnn-final-message h3 em {
    color: var(--mnn-vermilion);
    font-style: normal;
}

.mnn-final-message > p {
    max-width: 610px;
    margin: 0 auto 17px;

    font-size: 15px;
    line-height: 1.55;

    color: var(--mnn-text);
    opacity: .82;
}


/* =========================================================
   VALUES
========================================================= */

.mnn-values {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;

    margin-bottom: 20px;
}

.mnn-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;

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

.mnn-value i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--mnn-vermilion);
}

.mnn-value:nth-child(2) i {
    background: var(--mnn-saffron);
}

.mnn-value:nth-child(3) i {
    background: var(--mnn-aqua);
}


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

.mnn-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.mnn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 20px;

    border-radius: 999px;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.mnn-btn:hover {
    transform: translateY(-2px);
}

.mnn-btn:focus-visible {
    outline: 2px solid var(--mnn-text);
    outline-offset: 3px;
}

.mnn-btn--primary {
    background: #D43F29;
    color: #FFF9EF;
}

.mnn-btn--primary:hover {
    background: #B93220;
}

.mnn-btn--secondary {
    border: 1px solid rgba(61, 41, 37, .22);
    background: transparent;
    color: var(--mnn-text);
}

.mnn-btn--secondary:hover {
    border-color: var(--mnn-text);
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.mnn-bottom-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    max-width: 720px;

    margin: clamp(55px, 7vw, 90px) auto 0;

    text-align: center;
}

.mnn-bottom-note__mark {
    flex: 0 0 auto;

    color: var(--mnn-aqua);

    font-size: 25px;
}

.mnn-bottom-note p {
    margin: 0;

    font-size: 15px;
    line-height: 1.6;

    color: var(--mnn-text);
    opacity: .85;
}

.mnn-bottom-note strong {
    font-weight: 600;
    color: var(--mnn-text);
}


/* =========================================================
   ACTIVE INTERACTION STATES
========================================================= */

.mnn-art-journey.mnn-is-exploring .mnn-seed {
    opacity: .15;

    transform:
        translate(-50%, -50%)
        scale(.5);
}

.mnn-art-journey.mnn-is-exploring .mnn-mark {
    opacity: .92;
}

.mnn-art-journey.mnn-is-exploring .mnn-mark--red {
    transform: rotate(-17deg) scale(1);
}

.mnn-art-journey.mnn-is-exploring .mnn-mark--yellow {
    transform: rotate(15deg) scale(1);
}

.mnn-art-journey.mnn-is-exploring .mnn-mark--aqua {
    transform: rotate(24deg) scale(1);
}

.mnn-art-journey.mnn-is-exploring .mnn-mark--apricot {
    transform: rotate(-13deg) scale(1);
}

.mnn-art-journey.mnn-is-exploring .mnn-stroke {
    opacity: .82;
}

.mnn-art-journey.mnn-is-exploring .mnn-stroke--one {
    transform: rotate(14deg) translateX(0);
}

.mnn-art-journey.mnn-is-exploring .mnn-stroke--two {
    transform: rotate(-17deg) translateX(0);
}

.mnn-art-journey.mnn-is-exploring .mnn-stroke--three {
    transform: rotate(-7deg) scaleX(1);
}

.mnn-art-journey.mnn-is-exploring .mnn-doodle {
    opacity: .75;
}

.mnn-art-journey.mnn-is-exploring .mnn-doodle--circle {
    transform: scale(1) rotate(0);
}

.mnn-art-journey.mnn-is-exploring .mnn-doodle--circle-two {
    transform: scale(1) rotate(0);
}

.mnn-art-journey.mnn-is-exploring .mnn-doodle--star {
    transform: scale(1) rotate(0);
}


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

.mnn-art-journey.mnn-step-idea
.mnn-message--idea,

.mnn-art-journey.mnn-step-explore
.mnn-message--explore,

.mnn-art-journey.mnn-step-create
.mnn-message--create {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =========================================================
   CREATE STATE
========================================================= */

.mnn-art-journey.mnn-step-create .mnn-mark {
    opacity: .55;

    transform: scale(.72);
}

.mnn-art-journey.mnn-step-create .mnn-final-art {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(.9)
        rotate(-2deg);
}


/* =========================================================
   FINAL STATE
========================================================= */

.mnn-art-journey.mnn-step-final .mnn-message,
.mnn-art-journey.mnn-step-final .mnn-controls {
    opacity: 0;
}

.mnn-art-journey.mnn-step-final .mnn-final-art {
    opacity: 1;

    transform:
        translate(-50%, -55%)
        scale(.78)
        rotate(0);
}

.mnn-art-journey.mnn-step-final .mnn-final-message {
    opacity: 1;

    transform:
        translate(-50%, 0);

    pointer-events: auto;
}


/* =========================================================
   STAGE PROGRESS
========================================================= */

.mnn-stage-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: min(1180px, 100%);
    margin: 15px auto 0;
}

.mnn-stage-progress {
    display: flex;
    align-items: center;
}

.mnn-progress-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: rgba(61, 41, 37, .18);

    transition:
        background .3s ease,
        transform .3s ease;
}

.mnn-progress-dot.is-active {
    background: var(--mnn-vermilion);

    transform: scale(1.35);
}

.mnn-progress-line {
    width: 34px;
    height: 1px;

    background: rgba(61, 41, 37, .16);
}

.mnn-stage-caption {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;

    color: var(--mnn-text);
    opacity: .48;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .mnn-art-journey__inner {
        width: min(94%, 900px);
        padding-block: 82px;
    }

    .mnn-artboard {
        height: 650px;
    }

    .mnn-mark--red {
        left: 15%;
    }

    .mnn-mark--yellow {
        right: 13%;
    }

    .mnn-final-art {
        width: 300px;
    }

    .mnn-final-message {
        bottom: 48px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 1024px) and (max-width: 1279px) {

    .mnn-art-journey__inner {
        width: min(94%, 1180px);
    }

    .mnn-artboard {
        height: 670px;
    }

    .mnn-final-art {
        width: 300px;
    }
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (min-width: 1280px) and (max-width: 1439px) {

    .mnn-art-journey__inner {
        width: min(92%, 1280px);
    }

    .mnn-artboard {
        height: 720px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1440px) {

    .mnn-art-journey__inner {
        width: min(90%, 1380px);
    }

    .mnn-artboard {
        height: 780px;
    }
}


/* =========================================================
   MOBILE-L
========================================================= */

@media (min-width: 425px) and (max-width: 767px) {

    .mnn-art-journey__inner {
        width: calc(100% - 28px);
        padding-block: 65px;
    }

    .mnn-intro {
        margin-bottom: 32px;
    }

    .mnn-intro p {
        font-size: 16px;
    }

    .mnn-artboard {
        height: 640px;
        border-radius: 28px;
    }

    .mnn-stage-hint {
        display: none;
    }

    .mnn-mark--red {
        left: 7%;
    }

    .mnn-mark--yellow {
        right: 7%;
    }

    .mnn-mark--aqua {
        left: 11%;
    }

    .mnn-mark--apricot {
        right: 10%;
    }

    .mnn-controls {
        width: calc(100% - 30px);
        justify-content: center;
    }

    .mnn-control {
        flex: 1;
        justify-content: center;
        padding-inline: 8px;
        font-size: 10px;
    }

    .mnn-final-art {
        width: 235px;
    }

    .mnn-final-message {
        bottom: 42px;
    }

    .mnn-final-message > p {
        font-size: 14px;
    }

    .mnn-stage-caption {
        display: none;
    }
}


/* =========================================================
   MOBILE-M
========================================================= */

@media (min-width: 375px) and (max-width: 424px) {

    .mnn-art-journey__inner {
        width: calc(100% - 24px);
        padding-block: 58px;
    }

    .mnn-intro {
        margin-bottom: 28px;
    }

    .mnn-intro h2 {
        font-size: 34px;
    }

    .mnn-intro p {
        font-size: 15px;
    }

    .mnn-artboard {
        height: 620px;
        border-radius: 25px;
    }

    .mnn-stage-hint {
        display: none;
    }

    .mnn-mark--red {
        left: 4%;
    }

    .mnn-mark--yellow {
        right: 4%;
    }

    .mnn-mark--aqua {
        left: 8%;
    }

    .mnn-mark--apricot {
        right: 7%;
    }

    .mnn-controls {
        bottom: 18px;
        width: calc(100% - 20px);
    }

    .mnn-control {
        flex: 1;
        padding-inline: 5px;
        font-size: 9px;
        gap: 5px;
    }

    .mnn-control-dot {
        width: 7px;
        height: 7px;
    }

    .mnn-message {
        width: calc(100% - 34px);
    }

    .mnn-message h3,
    .mnn-final-message h3 {
        font-size: 27px;
    }

    .mnn-message p {
        font-size: 14px;
    }

    .mnn-final-art {
        width: 205px;
    }

    .mnn-final-message {
        bottom: 37px;
        width: calc(100% - 28px);
    }

    .mnn-values {
        gap: 7px 12px;
    }

    .mnn-value {
        font-size: 9px;
    }

    .mnn-btn {
        min-height: 44px;
        padding-inline: 15px;
        font-size: 13px;
    }

    .mnn-bottom-note {
        align-items: flex-start;
    }

    .mnn-bottom-note p {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 374px) {

    .mnn-art-journey__inner {
        width: calc(100% - 20px);
        padding-block: 52px;
    }

    .mnn-intro {
        margin-bottom: 25px;
    }

    .mnn-kicker {
        font-size: 10px;
        padding-inline: 11px;
    }

    .mnn-intro h2 {
        font-size: 31px;
        line-height: 1.17;
    }

    .mnn-intro p {
        font-size: 14px;
        line-height: 1.6;
    }

    .mnn-artboard {
        height: 600px;
        border-radius: 22px;
    }

    .mnn-stage-top {
        margin-bottom: 10px;
    }

    .mnn-stage-label-text {
        font-size: 10px;
    }

    .mnn-stage-number {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .mnn-stage-hint {
        display: none;
    }

    .mnn-mark--red {
        width: 90px;
        height: 55px;
        left: 4%;
    }

    .mnn-mark--yellow {
        width: 80px;
        height: 80px;
        right: 4%;
    }

    .mnn-mark--aqua {
        width: 70px;
        height: 100px;
        left: 8%;
    }

    .mnn-mark--apricot {
        width: 88px;
        height: 52px;
        right: 7%;
    }

    .mnn-stroke {
        width: 150px;
        height: 14px;
    }

    .mnn-controls {
        bottom: 14px;
        width: calc(100% - 14px);
        padding: 5px;
    }

    .mnn-control {
        flex: 1;
        min-height: 38px;
        padding-inline: 3px;
        font-size: 8px;
        letter-spacing: .04em;
        gap: 4px;
    }

    .mnn-control-dot {
        width: 6px;
        height: 6px;
    }

    .mnn-message {
        width: calc(100% - 26px);
    }

    .mnn-message h3,
    .mnn-final-message h3 {
        font-size: 25px;
    }

    .mnn-message p,
    .mnn-final-message > p {
        font-size: 13px;
        line-height: 1.55;
    }

    .mnn-final-art {
        width: 175px;
    }

    .mnn-final-message {
        bottom: 30px;
        width: calc(100% - 20px);
    }

    .mnn-values {
        gap: 5px 9px;
        margin-bottom: 15px;
    }

    .mnn-value {
        font-size: 8px;
    }

    .mnn-final-actions {
        gap: 7px;
    }

    .mnn-btn {
        min-height: 41px;
        padding-inline: 12px;
        font-size: 12px;
    }

    .mnn-stage-bottom {
        margin-top: 10px;
    }

    .mnn-progress-line {
        width: 22px;
    }

    .mnn-stage-caption {
        display: none;
    }

    .mnn-bottom-note {
        margin-top: 48px;
    }

    .mnn-bottom-note__mark {
        font-size: 20px;
    }

    .mnn-bottom-note p {
        font-size: 13px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mnn-art-journey *,
    .mnn-art-journey *::before,
    .mnn-art-journey *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   LIVE EXPERIMENT MARKS
========================================================= */

.mnn-art-journey .mnn-live-mark {
    display: block;

    border-radius: 38% 62% 55% 45%;

    box-shadow:
        0 8px 18px rgba(61, 41, 37, .10);
}

html[data-theme="dark"] .mnn-art-journey .mnn-live-mark {
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .25);
}

/* ===== MEET THE MAKERS · Easel Stage · paste at the END of styles.css ===== */

.ez {
    --fs-h2: 26px;
    --fs-h3: 24px;
    --fs-body: 15px;
    --fs-small: 13px;
    --gutter: 16px;
    --cw: 190px;
    --ch: calc(var(--cw)*1.3);
    --dx: calc(var(--cw)*.96);
    --dz: calc(var(--cw)*.55);
    --ry: 34deg;
    --ez-red: #C0341F;
    --ez-btn: #C0341F;
    --pig: var(--vermillion);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: 64px 72px;
    background: var(--canvas);
    color: var(--text);
    font-family: "Manrope",sans-serif;
    font-size: var(--fs-body);
    line-height: 1.65;
}

.ez, .ez *, .ez *::before, .ez *::after {
    box-sizing: border-box;
}

.ez :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.ez h2, .ez h3 {
    font-family: "DynaPuff",cursive;
    font-weight: 500;
    margin: 0;
    line-height: 1.15;
    color: var(--text);
}

.ez h2 {
    font-size: var(--fs-h2);
    margin-block: 14px 12px;
}

.ez h3 {
    font-size: var(--fs-h3);
}

.ez p, .ez dl, .ez dd, .ez dt {
    margin: 0;
}

.ez-wrap {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.ez-head {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.ez-tag {
    display: inline-flex;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.ez-hl {
    color: var(--ez-red);
}

.ez-lead {
    color: var(--text-soft);
    max-width: 36em;
}

.ez-ctrl {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ez-count {
    font-weight: 700;
    color: var(--text-soft);
    margin-inline-end: 6px;
    font-size: var(--fs-small);
    letter-spacing: .08em;
}

.ez-count b {
    font: 500 26px "DynaPuff",cursive;
    color: var(--text);
}

.ez-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .25s,background-color .25s;
}

.ez-arrow:hover {
    transform: scale(1.1);
    background: var(--surface-soft);
}

/* stage */
.ez-stage {
    position: relative;
    height: calc(var(--ch) + 150px);
    perspective: 1500px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg,color-mix(in srgb,var(--pig) 12%,var(--surface-soft)),var(--surface-soft) 70%);
    touch-action: pan-y;
    cursor: grab;
    direction: ltr;
    transition: background .8s;
}

.ez-stage.drag {
    cursor: grabbing;
}

.ez-lamp {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--lx,50%) var(--ly,30%),color-mix(in srgb,var(--saffron) 38%,transparent),transparent 46%);
    pointer-events: none;
    transition: opacity .4s;
    mix-blend-mode: normal;
    opacity: .9;
}

.ez-bunting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    pointer-events: none;
}

.ez-bunting path {
    transform-origin: 50% 0;
    animation: ezSway 4s ease-in-out infinite alternate;
}

@keyframes ezSway {
    from {
        transform: rotate(-4deg);
    }
    to {
        transform: rotate(4deg);
    }
}

.ez-deck {
    position: absolute;
    left: 50%;
    top: 62px;
    width: var(--cw);
    height: var(--ch);
    margin-left: calc(var(--cw)/-2);
    transform-style: preserve-3d;
}

.ez-card {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: translateX(calc(var(--o)*var(--dx))) translateZ(calc(var(--ao)*var(--dz)*-1)) rotateY(calc(var(--o)*var(--ry)*-1)) scale(calc(1 - var(--ao)*.06));
    opacity: calc(1 - (var(--ao) - 1)*1.2);
    transition: transform 1s cubic-bezier(.3,1.15,.4,1),opacity .6s;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.ez-card[data-hide="1"] {
    opacity: 0;
    pointer-events: none;
}

.ez-card.front {
    cursor: default;
}

/* easel */
.ez-easel {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: #FFFDF6;
    border: 10px solid #B98A5A;
    box-shadow: inset 0 0 0 3px #8E6538,0 22px 34px rgba(61,41,37,.28);
}

.ez-easel::before, .ez-easel::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 12px;
    height: 92px;
    background: linear-gradient(90deg,#8E6538,#B98A5A);
    border-radius: 0 0 4px 4px;
    z-index: -1;
}

.ez-easel::before {
    left: 14%;
    transform: rotate(7deg);
    transform-origin: 50% 0;
}

.ez-easel::after {
    right: 14%;
    transform: rotate(-7deg);
    transform-origin: 50% 0;
}

.ez-ledge {
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -16px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(#C99A68,#8E6538);
}

.ez-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ez-art path {
    fill: none;
    stroke: #fff;
    stroke-width: 104;
    stroke-linecap: butt;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--p,0));
    transition: stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1) calc(var(--k)*.22s);
}

.ez-card.front .ez-art {
    --p: 1;
}

.ez-ghost {
    opacity: .16;
}

.ez-tagname {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%) rotate(-2deg);
    padding: 5px 14px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font: 700 13px "Manrope",sans-serif;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .5s .5s;
}

.ez-card.front .ez-tagname {
    opacity: 1;
}

.ez-floor {
    position: absolute;
    inset: auto 0 0;
    height: 56px;
    background: linear-gradient(180deg,color-mix(in srgb,#B98A5A 24%,var(--surface-soft)),color-mix(in srgb,#B98A5A 38%,var(--surface-soft)));
    border-top: 2px solid color-mix(in srgb,#8E6538 40%,transparent);
}

/* info */
.ez-info {
    position: relative;
    margin-top: 18px;
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.ez-info::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 6px;
    background: var(--pig);
    transition: background .6s;
}

.ez-who {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ez-portrait {
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--pig) 35%,var(--surface));
    border: 3px solid var(--pig);
    display: grid;
    place-items: center;
    font: 500 26px "DynaPuff",cursive;
    color: var(--text);
    transition: border-color .6s,background-color .6s;
}

.ez-role {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border-strong);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 4px;
}

.ez-bio {
    color: var(--text);
    font-size: calc(var(--fs-body) + 1px);
}

.ez-facts {
    display: grid;
    gap: 12px;
}

.ez-facts dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 4px;
}

.ez-facts dd {
    color: var(--text);
    font-weight: 600;
}

.ez-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ez-chip {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border-strong);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text);
}

.ez-btn {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 14px;
    border: 2px solid var(--ez-btn);
    background: var(--ez-btn);
    color: var(--btn-text);
    font: 700 15px "Manrope",sans-serif;
    text-decoration: none;
    transition: transform .25s,background-color .25s;
}

.ez-btn:hover {
    transform: translateY(-3px) rotate(-1deg);
    background: var(--btn-hover);
    border-color: var(--btn-hover);
}

.ez-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .12em;
    margin-inline-end: .25em;
}

.ez-w>span {
    display: inline-block;
}

.ez-info.swap .ez-w>span, .ez-info.swap .ez-chip, .ez-info.swap .ez-facts dd {
    animation: ezUp .7s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay: calc(var(--i,0)*40ms);
}

@keyframes ezUp {
    from {
        transform: translateY(110%);
        opacity: 0;
    }
}

/* thumbs */
.ez-thumbs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.ez-th {
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    transition: transform .35s cubic-bezier(.3,1.6,.5,1),border-color .3s;
    position: relative;
}

.ez-th img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ez-th[aria-selected="true"] {
    transform: scale(1.18);
    border-color: var(--th);
}

.ez-prog {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    transform: rotate(-90deg);
    pointer-events: none;
}

.ez-prog circle {
    fill: none;
    stroke: var(--ez-red);
    stroke-width: 5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.ez.auto .ez-th[aria-selected="true"] .ez-prog circle {
    animation: ezP 6.5s linear forwards;
}

.ez.paused .ez-prog circle {
    animation-play-state: paused;
}

@keyframes ezP {
    to {
        stroke-dashoffset: 0;
    }
}

/* reveal */
.ez.js .ez-rv {
    opacity: 0;
    transform: translateY(22px);
}

.ez.js.in-view .ez-rv {
    opacity: 1;
    transform: none;
    transition: opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1);
}

/* responsive: mobile-S < 375, mobile-M 375, mobile-L 425, tablet 768, laptop 1024, laptop-L 1280/1440 */
@media(min-width:375px) {
    .ez {
        --fs-h2: 28px;
        --cw: 218px;
    }
}

@media(min-width:425px) {
    .ez {
        --fs-h2: 30px;
        --fs-body: 16px;
        --gutter: 20px;
        --cw: 250px;
    }
    .ez-facts {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .ez-th {
        width: 68px;
        height: 68px;
    }
}

@media(min-width:768px) {
    .ez {
        --fs-h2: 34px;
        --fs-h3: 28px;
        --gutter: 24px;
        --cw: 290px;
        padding-block: 80px 88px;
    }
    .ez-head {
        grid-template-columns: minmax(0,1fr) auto;
        align-items: end;
    }
    .ez-info {
        grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
        padding: 28px;
        gap: 18px 32px;
    }
    .ez-who, .ez-bio {
        grid-column: 1;
    }
    .ez-facts {
        grid-column: 2;
        grid-row: 1/4;
        grid-template-columns: 1fr;
        align-content: start;
    }
    .ez-btn {
        grid-column: 1;
    }
}

@media(min-width:1024px) {
    .ez {
        --fs-h2: 36px;
        --cw: 316px;
        --gutter: clamp(24px,3vw,40px);
        padding-block: 96px 104px;
    }
}

@media(min-width:1280px) {
    .ez {
        --fs-h2: 40px;
        --fs-body: 17px;
        --fs-small: 14px;
        --cw: 340px;
        --gutter: clamp(32px,3.5vw,48px);
    }
    .ez-facts {
        grid-template-columns: 1fr;
    }
}

@media(min-width:1440px) {
    .ez {
        --cw: 370px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ez *, .ez *::before, .ez *::after {
        animation-duration: .01s!important;
        transition-duration: .01s!important;
        transition-delay: 0s!important;
        animation-iteration-count: 1!important;
    }
    .ez-bunting path {
        animation: none;
    }
}

/* ============================================================
   MIX N MUSE
   LITTLE ARTIST'S TOOLBOX
   VERTICAL PINNED SCROLL
   SECTION-SCOPED CSS
============================================================ */

.lat {
    --lat-body-size: var(--fs-body, 15px);
    --lat-small-size: var(--fs-small, 12px);
    --lat-button-size: var(--fs-btn, 14px);

    position: relative;

    min-height: 520vh;

    width: 100%;

    overflow: clip;
    isolation: isolate;

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

    font-family: "Manrope", sans-serif;
    font-size: var(--lat-body-size);
    line-height: 1.65;
}


.lat *,
.lat *::before,
.lat *::after {
    box-sizing: border-box;
}


.lat h2,
.lat h3,
.lat p,
.lat figure {
    margin: 0;
}


.lat button,
.lat a {
    font: inherit;
}


.lat button {
    border: 0;
}


.lat a {
    text-decoration: none;
}


.lat img {
    display: block;

    max-width: 100%;
}


.lat :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}



/* ============================================================
   PINNED AREA
============================================================ */

.lat-pin {

    position: sticky;

    top: 88px;

    width: min(
        calc(100% - 32px),
        1400px
    );

    height: calc(100svh - 104px);

    min-height: 620px;

    margin-inline: auto;

    padding:
        20px
        0
        14px;

    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    gap: 14px;

    overflow: hidden;
}



/* ============================================================
   BACKGROUND
============================================================ */

.lat-bg {

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    overflow: hidden;
}


.lat-blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}


.lat-blob-one {

    width: 360px;
    height: 360px;

    left: -180px;
    top: -140px;

    background: var(--apricot);

    opacity: .24;
}


.lat-blob-two {

    width: 320px;
    height: 320px;

    right: -150px;
    bottom: -100px;

    background: var(--aqua);

    opacity: .20;
}


.lat-spark {

    position: absolute;

    font-family: "DynaPuff", cursive;

    color: var(--saffron);

    opacity: .65;
}


.lat-spark-one {

    top: 24%;

    left: 1%;

    font-size: 28px;

    transform: rotate(-12deg);
}


.lat-spark-two {

    right: 1%;

    top: 56%;

    font-size: 34px;

    transform: rotate(14deg);
}



/* ============================================================
   TOP
============================================================ */

.lat-top {

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 24px;

    min-height: 70px;
}


.lat-title-wrap {
    min-width: 0;
}


.lat-kicker {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 7px;

    color: var(--text);

    font-size: var(--lat-small-size);

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.lat-kicker i {

    width: 9px;
    height: 9px;

    flex: none;

    border-radius: 50%;

    background: var(--vermillion);
}


.lat h2 {

    font-family: "DynaPuff", cursive;

    font-size:
        clamp(
            28px,
            3.3vw,
            46px
        );

    font-weight: 500;

    line-height: 1.1;

    color: var(--text);

    text-wrap: balance;
}


.lat h2 span {
    color: var(--vermillion);
}


.lat-counter {

    display: flex;

    align-items: baseline;

    gap: 6px;

    flex: none;
}


.lat-counter strong {

    font-family: "DynaPuff", cursive;

    font-size: 28px;

    font-weight: 500;

    line-height: 1;

    color: var(--vermillion);
}


.lat-counter span,
.lat-counter em {

    font-size: var(--lat-small-size);

    font-weight: 700;

    font-style: normal;

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



/* ============================================================
   MAIN THREE COLUMN LAYOUT
============================================================ */

.lat-main {

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(175px, .72fr)
        minmax(420px, 2fr)
        minmax(235px, .90fr);

    align-items: center;

    gap:
        clamp(
            20px,
            3vw,
            46px
        );
}



/* ============================================================
   LEFT JOURNEY
============================================================ */

.lat-journey {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.lat-step {

    width: 100%;

    min-height: 58px;

    display: grid;

    grid-template-columns:
        32px
        minmax(0, 1fr);

    align-items: center;

    gap: 9px;

    padding:
        8px
        9px;

    border-inline-start:
        2px solid
        var(--border);

    background: transparent;

    color: var(--text-soft);

    text-align: start;

    cursor: pointer;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}


.lat-step > span {

    font-size:
        var(--lat-small-size);

    font-weight: 700;

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


.lat-step b {

    display: block;

    font-size:
        var(--lat-small-size);

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: .07em;
}


.lat-step small {

    display: block;

    margin-top: 2px;

    font-size: 11px;

    line-height: 1.35;

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


.lat-step:hover {

    background:
        rgba(233, 79, 55, .055);

    color: var(--text);
}


.lat-step.is-active {

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

    background:
        rgba(233, 79, 55, .08);

    color: var(--text);

    transform:
        translateX(4px);
}


.lat-step.is-active > span {

    color: var(--vermillion);
}



/* ============================================================
   CENTER
============================================================ */

.lat-visual {

    min-width: 0;

    width: 100%;

    align-self: center;
}


.lat-visual-top {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 10px;

    color: var(--text-soft);

    font-size: var(--lat-small-size);

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.lat-visual-top i {

    width: 30px;
    height: 1px;

    flex: none;

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



/* ============================================================
   THREE EQUAL IMAGE PANELS
============================================================ */

.lat-images {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    align-items: start;
}


.lat-image-card {

    min-width: 0;

    width: 100%;
}


.lat-image-box {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / .88;

    overflow: hidden;

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

    background:
        var(--surface-soft);

    box-shadow:
        var(--shadow);

    border-radius: 22px;
}


.lat-image-card:nth-child(1)
.lat-image-box {

    border-radius:
        28px
        12px
        28px
        12px;
}


.lat-image-card:nth-child(2)
.lat-image-box {

    border-radius:
        12px
        28px
        12px
        28px;

    transform:
        translateY(14px);
}


.lat-image-card:nth-child(3)
.lat-image-box {

    border-radius:
        20px
        20px
        10px
        26px;
}


.lat-image-box::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            transparent 42%,
            rgba(61,41,37,.10)
        );
}


.lat-image-box img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    transition:
        opacity .35s ease,
        transform .55s
        cubic-bezier(.2,.8,.2,1);
}


.lat-image-box.is-changing img {

    opacity: .25;

    transform:
        scale(1.07);
}


.lat-image-card figcaption {

    display: block;

    margin-top: 7px;

    color: var(--text-soft);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.3;

    text-align: center;

    letter-spacing: .08em;
}



/* ============================================================
   MATERIAL NOTE
============================================================ */

.lat-material-line {

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding-top: 10px;
}


.lat-material-line p {

    margin-inline: 5px;

    color: var(--text-soft);

    font-size: var(--lat-body-size);

    line-height: 1.5;

    text-align: center;
}


.lat-dot {

    width: 9px;
    height: 9px;

    flex: none;

    border-radius: 50%;
}


.lat-dot-red {
    background: var(--vermillion);
}


.lat-dot-yellow {
    background: var(--saffron);
}


.lat-dot-aqua {
    background: var(--aqua);
}



/* ============================================================
   RIGHT STORY
============================================================ */

.lat-story {

    min-width: 0;

    padding-block: 20px;

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


.lat-story-top {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text-soft);

    font-size: var(--lat-small-size);

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.lat-story-top i {

    width: 28px;
    height: 1px;

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


.lat-story-copy {

    padding-block:
        20px
        22px;
}


.lat-eyebrow {

    margin-bottom: 9px !important;

    color: var(--vermillion);

    font-family: "DynaPuff", cursive;

    font-size:
        calc(
            var(--lat-body-size) + 2px
        );

    font-weight: 500;

    line-height: 1.35;
}


.lat h3 {

    color: var(--text);

    font-family: "DynaPuff", cursive;

    font-size:
        clamp(
            22px,
            2.2vw,
            34px
        );

    font-weight: 500;

    line-height: 1.2;

    text-wrap: balance;
}


.lat-story-copy > p:last-child {

    margin-top: 14px !important;

    color: var(--text-soft);

    font-size: var(--lat-body-size);

    line-height: 1.65;
}


.lat-insight {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding-top: 14px;

    border-top:
        1px dashed
        var(--border-strong);
}


.lat-insight > span {

    width: 32px;
    height: 32px;

    flex: none;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--saffron);

    color: var(--on-pigment);

    font-size: 11px;

    font-weight: 800;
}


.lat-insight b {

    display: block;

    color: var(--text);

    font-size: var(--lat-small-size);

    line-height: 1.25;

    letter-spacing: .07em;
}


.lat-insight small {

    display: block;

    margin-top: 3px;

    color: var(--text-soft);

    font-size: 11px;

    line-height: 1.45;
}



/* ============================================================
   BOTTOM PROGRESS
============================================================ */

.lat-bottom {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        8px
        22px;

    align-items: end;
}


.lat-progress {

    grid-column: 1 / -1;

    width: 100%;

    height: 3px;

    overflow: hidden;

    border-radius: 99px;

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


.lat-progress-fill {

    display: block;

    width: 20%;

    height: 100%;

    border-radius: inherit;

    background: var(--vermillion);

    transition:
        width .3s ease;
}


.lat-progress-labels {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 5px;
}


.lat-progress-labels span {

    color: var(--text-soft);

    font-size: 10px;

    font-weight: 700;

    line-height: 1.2;

    text-align: center;

    letter-spacing: .07em;

    transition:
        color .25s ease;
}


.lat-progress-labels span.is-active {

    color: var(--vermillion);
}



/* ============================================================
   CTA
============================================================ */

.lat-button {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        9px
        15px;

    border-radius: 12px;

    background: var(--btn-bg);

    color: var(--btn-text);

    font-size: var(--lat-button-size);

    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;

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

    transition:
        transform .25s ease,
        background-color .25s ease;
}


.lat-button:hover {

    background:
        var(--btn-hover);

    transform:
        translateY(-2px);
}


.lat-button svg {

    width: 17px;
    height: 17px;

    flex: none;

    transition:
        transform .25s ease;
}


.lat-button:hover svg {

    transform:
        translateX(4px);
}



/* ============================================================
   FINAL
============================================================ */

.lat-final {

    position: absolute;

    inset: 0;

    z-index: 20;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 30px;

    text-align: center;

    background:
        rgba(255,247,232,.96);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(18px);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease;
}


.lat-final > span {

    color: var(--vermillion);

    font-size: var(--lat-small-size);

    font-weight: 700;

    letter-spacing: .1em;
}


.lat-final strong {

    max-width: 800px;

    margin-top: 8px;

    color: var(--text);

    font-family: "DynaPuff", cursive;

    font-size:
        clamp(
            30px,
            4.2vw,
            58px
        );

    font-weight: 500;

    line-height: 1.15;
}


.lat.is-final .lat-final {

    opacity: 1;

    visibility: visible;

    transform: none;
}



/* ============================================================
   LAPTOP
============================================================ */

@media (min-width: 1024px) {

    .lat-pin {

        top: 86px;

        width:
            min(
                calc(100% - 48px),
                1400px
            );

        height:
            calc(100svh - 102px);
    }

    .lat-images {
        gap: 15px;
    }

    .lat-image-box {
        aspect-ratio: 1 / .91;
    }

}



/* ============================================================
   LAPTOP-L
============================================================ */

@media (min-width: 1280px) {

    .lat-pin {

        width:
            min(
                calc(100% - 64px),
                1400px
            );

        height:
            calc(100svh - 106px);
    }

    .lat-main {

        grid-template-columns:
            minmax(195px,.75fr)
            minmax(500px,2.05fr)
            minmax(255px,.9fr);

        gap: 38px;
    }

    .lat-images {
        gap: 17px;
    }

    .lat-image-box {
        aspect-ratio: 1 / .94;
    }

}



/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 1440px) {

    .lat-pin {
        min-height: 670px;
    }

    .lat-main {
        gap: 44px;
    }

}



/* ============================================================
   TABLET
============================================================ */

@media
(max-width: 1023px)
and
(min-width: 768px) {

    .lat-pin {

        top: 78px;

        width:
            calc(100% - 40px);

        height:
            calc(100svh - 92px);

        min-height: 650px;

        padding-top: 16px;
    }


    .lat-main {

        grid-template-columns:
            170px
            minmax(0,1fr);

        grid-template-areas:
            "journey visual"
            "journey story";

        gap: 16px 24px;
    }


    .lat-journey {
        grid-area: journey;
    }


    .lat-visual {
        grid-area: visual;
    }


    .lat-story {

        grid-area: story;

        padding-block:
            12px;
    }


    .lat-story-copy {

        display: grid;

        grid-template-columns:
            1fr
            1.1fr;

        gap: 18px;

        padding-block:
            12px;
    }


    .lat-eyebrow {
        margin-bottom: 5px !important;
    }


    .lat-story-copy > p:last-child {
        margin-top: 0 !important;
    }


    .lat-insight {
        display: none;
    }


    .lat-image-box {
        aspect-ratio: 1 / .90;
    }


    .lat-image-card:nth-child(2)
    .lat-image-box {
        transform: none;
    }

}



/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .lat {

        min-height: 560vh;
    }


    .lat-pin {

        top: 70px;

        width:
            calc(100% - 28px);

        height:
            calc(100svh - 80px);

        min-height: 0;

        padding:
            12px
            0
            8px;

        gap: 7px;
    }


    .lat-top {

        min-height: 54px;

        align-items: center;
    }


    .lat-kicker {

        margin-bottom: 3px;

        font-size: 9px;
    }


    .lat h2 {

        font-size:
            clamp(
                24px,
                7vw,
                33px
            );
    }


    .lat-counter strong {
        font-size: 22px;
    }


    .lat-main {

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        gap: 5px;

        min-height: 0;
    }


    /* Compact top journey */

    .lat-journey {

        flex:
            0 0 auto;

        display: grid;

        grid-template-columns:
            repeat(5,minmax(0,1fr));

        gap: 4px;
    }


    .lat-step {

        min-width: 0;

        min-height: 45px;

        display: block;

        padding:
            5px
            3px;

        border-inline-start: 0;

        border-top:
            2px solid
            var(--border);

        text-align: center;

        transform: none !important;
    }


    .lat-step > span {

        display: block;

        font-size: 9px;
    }


    .lat-step b {

        margin-top: 2px;

        font-size: 8px;

        letter-spacing: .03em;

        white-space: nowrap;
    }


    .lat-step small {
        display: none;
    }


    .lat-step.is-active {

        border-top-color:
            var(--vermillion);

        background:
            rgba(233,79,55,.07);
    }


    /* Images */

    .lat-visual {

        display: flex;

        flex-direction: column;

        justify-content: center;

        min-height: 0;

        flex: 1 1 auto;
    }


    .lat-visual-top {

        margin-bottom: 5px;

        font-size: 8px;
    }


    .lat-images {

        gap: 6px;
    }


    .lat-image-box {

        aspect-ratio: 1 / 1.02;

        border-radius: 13px !important;
    }


    .lat-image-card:nth-child(2)
    .lat-image-box {

        transform: none;
    }


    .lat-image-card figcaption {

        margin-top: 4px;

        font-size: 8px;
    }


    .lat-material-line {

        min-height: 32px;

        padding-top: 3px;
    }


    .lat-material-line p {

        font-size:
            var(--lat-body-size);

        line-height: 1.35;
    }


    .lat-dot {

        width: 7px;
        height: 7px;
    }


    /* Story */

    .lat-story {

        flex:
            0 0 auto;

        padding:
            7px
            0
            4px;

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


    .lat-story-top {

        font-size: 8px;
    }


    .lat-story-copy {

        padding:
            6px
            0
            4px;
    }


    .lat-eyebrow {

        margin-bottom: 3px !important;

        font-size:
            calc(
                var(--lat-body-size) + 1px
            );
    }


    .lat h3 {

        font-size:
            clamp(
                19px,
                5.5vw,
                27px
            );
    }


    .lat-story-copy > p:last-child {

        margin-top: 5px !important;

        font-size:
            var(--lat-body-size);

        line-height: 1.45;
    }


    .lat-insight {
        display: none;
    }


    /* Bottom */

    .lat-bottom {

        grid-template-columns: 1fr;

        gap: 5px;
    }


    .lat-progress {

        height: 2px;
    }


    .lat-progress-labels {

        gap: 1px;
    }


    .lat-progress-labels span {

        font-size: 7px;

        letter-spacing: .02em;
    }


    .lat-button {

        width: 100%;

        min-height: 37px;

        padding:
            7px
            11px;

        font-size:
            var(--lat-button-size);
    }


    .lat-spark {
        display: none;
    }

}



/* ============================================================
   MOBILE-M / MOBILE-S
============================================================ */

@media (max-width: 424px) {

    .lat {

        min-height: 570vh;
    }


    .lat-pin {

        top: 66px;

        width:
            calc(100% - 24px);

        height:
            calc(100svh - 74px);
    }


    .lat h2 {
        font-size: 24px;
    }


    .lat-counter strong {
        font-size: 20px;
    }


    .lat-image-box {
        aspect-ratio: 1 / 1.04;
    }


    .lat-story-copy > p:last-child {

        font-size:
            var(--lat-body-size);

        line-height: 1.4;
    }

}



/* ============================================================
   MOBILE-S
============================================================ */

@media (max-width: 374px) {

    .lat {

        min-height: 580vh;
    }


    .lat-pin {

        top: 63px;

        width:
            calc(100% - 20px);

        height:
            calc(100svh - 70px);

        padding-top: 9px;
    }


    .lat-kicker {
        font-size: 8px;
    }


    .lat h2 {
        font-size: 22px;
    }


    .lat-counter strong {
        font-size: 18px;
    }


    .lat-visual-top {
        display: none;
    }


    .lat-images {
        gap: 4px;
    }


    .lat-image-box {
        aspect-ratio: 1 / 1.06;

        border-radius: 10px !important;
    }


    .lat-image-card figcaption {
        font-size: 7px;
    }


    .lat-story-copy > p:last-child {
        font-size:
            var(--lat-body-size);

        line-height: 1.38;
    }


    .lat-progress-labels span {
        font-size: 6.5px;
    }


    .lat-button {
        min-height: 35px;
    }

}



/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .lat *,
    .lat *::before,
    .lat *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}

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

/* ART JOURNEY: responsive alignment and visible section actions */
.lat-image-card:nth-child(2) .lat-image-box {
    transform: none;
}

.lat-images {
    align-items: start;
}

.lat-story-copy,
.lat-story-copy > *,
.lat-material-line p {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
    .lat-pin {
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .lat-main {
        grid-template-columns: minmax(150px, .72fr) minmax(0, 2fr) minmax(210px, .9fr);
        gap: clamp(16px, 2.2vw, 34px);
    }

    .lat-bottom {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .lat-story {
        align-self: start;
        padding-top: 0;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .lat-pin {
        height: calc(100svh - 92px);
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 10px;
    }

    .lat-step {
        min-height: 48px;
    }

    .lat-story {
        padding-block: 8px;
    }

    .lat-story-copy {
        padding-block: 8px;
    }

    .lat-story-copy > p:last-child {
        line-height: 1.45;
    }

    .lat-button {
        justify-self: end;
    }
}

@media (max-width: 767px) {
    .lat-images {
        align-items: start;
    }

    .lat-image-card:nth-child(2) .lat-image-box {
        transform: none;
    }

    .lat-bottom {
        flex: 0 0 auto;
        position: relative;
        z-index: 2;
    }

    .lat-button {
        display: inline-flex;
        visibility: visible;
        opacity: 1;
    }
}

/* ART JOURNEY: give mobile-L and tablet layouts room for their content */
@media (min-width: 425px) and (max-width: 767px) {
    .lat-pin {
        height: auto;
        min-height: 0;
        grid-template-rows: auto auto auto;
        overflow: visible;
        padding-block: 12px 16px;
    }

    .lat-main {
        min-height: 0;
        justify-content: flex-start;
        gap: 12px;
    }

    .lat-story {
        padding-block: 12px;
    }

    .lat-story-copy {
        padding-block: 10px;
    }

    .lat-bottom {
        gap: 10px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .lat-pin {
        height: auto;
        min-height: 0;
        grid-template-rows: auto auto auto;
        overflow: visible;
        padding-block: 16px 20px;
    }

    .lat-main {
        min-height: 0;
        align-items: start;
        grid-template-rows: auto auto;
        gap: 18px 24px;
    }

    .lat-story {
        padding-block: 12px;
    }

    .lat-story-copy {
        display: block;
        padding-block: 12px;
    }

    .lat-story-copy h3 {
        margin-block: 6px;
    }

    .lat-story-copy > p:last-child {
        margin-top: 8px !important;
    }

    .lat-bottom {
        gap: 10px 22px;
    }
}

.h2cta {
    --h2cta-cream: #FFF9EF;
    --h2cta-cream-soft: rgba(255, 249, 239, .84);
    --h2cta-shadow: rgba(61, 41, 37, .22);

    position: relative;
    isolation: isolate;

    width: min(calc(100% - 32px), 1380px);

    margin:
        clamp(52px, 7vw, 104px)
        auto
        clamp(56px, 8vw, 120px);

    min-height: clamp(470px, 54vw, 650px);

    overflow: hidden;

    border-radius: 34px;

    background: var(--vermillion);
    color: var(--h2cta-cream);

    box-shadow:
        0 26px 70px var(--h2cta-shadow);

    font-family: "Manrope", sans-serif;
    text-align: center;

    transform: translateZ(0);
}


/* ============================================================
   INNER FRAME
============================================================ */

.h2cta__frame {
    position: relative;
    z-index: 5;

    min-height: inherit;

    margin: 12px;

    border:
        1px solid
        rgba(255, 249, 239, .30);

    border-radius: 25px;

    display: grid;
    place-items: center;

    overflow: hidden;
}


.h2cta__frame::before,
.h2cta__frame::after {
    content: "";

    position: absolute;

    pointer-events: none;

    border:
        1px solid
        rgba(255, 249, 239, .18);

    border-radius: 50%;
}


.h2cta__frame::before {
    width: 470px;
    height: 470px;

    top: -285px;
    left: -210px;
}


.h2cta__frame::after {
    width: 390px;
    height: 390px;

    right: -205px;
    bottom: -245px;
}


/* ============================================================
   CENTER CONTENT
============================================================ */

.h2cta__content {
    position: relative;
    z-index: 8;

    width: min(100% - 48px, 820px);

    padding:
        clamp(58px, 7vw, 92px)
        0;

    opacity: 0;

    transform:
        translateY(28px)
        scale(.98);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.2, .8, .2, 1);
}


.h2cta.h2cta--visible .h2cta__content {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ============================================================
   EYEBROW
============================================================ */

.h2cta__eyebrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 34px;

    padding:
        7px 14px;

    border:
        1px solid
        rgba(255, 249, 239, .34);

    border-radius: 999px;

    background:
        rgba(255, 249, 239, .10);

    color: var(--h2cta-cream);

    font-size: var(--fs-small, 13px);
    font-weight: 600;

    letter-spacing: .07em;
    line-height: 1.2;

    text-transform: uppercase;

    backdrop-filter: blur(8px);
}


.h2cta__eyebrow i {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: var(--saffron);

    box-shadow:
        0 0 0 5px
        rgba(242, 181, 68, .16);

    animation:
        h2ctaPulse
        2.2s
        ease-in-out
        infinite;
}


/* ============================================================
   HEADING
============================================================ */

.h2cta h2 {
    margin:
        20px 0
        16px;

    color: var(--h2cta-cream);

    font-family: "DynaPuff", cursive;

    font-size:
        clamp(32px, 4.1vw, 52px);

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -.02em;

    text-wrap: balance;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.h2cta__content > p {
    width: min(100%, 650px);

    margin:
        0 auto;

    color:
        var(--h2cta-cream-soft);

    font-size:
        var(--fs-body, 15px);

    font-weight: 400;

    line-height: 1.7;
}


/* ============================================================
   BUTTON AREA
============================================================ */

.h2cta__actions {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}


/* ============================================================
   BUTTON BASE
============================================================ */

.h2cta__btn {
    position: relative;
    isolation: isolate;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 50px;

    padding:
        11px 20px;

    border:
        1.5px solid
        transparent;

    border-radius: 13px;

    overflow: hidden;

    font-size:
        var(--fs-btn, 14px);

    font-weight: 600;

    line-height: 1.25;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        box-shadow .35s ease,
        color .35s ease,
        background-color .35s ease,
        border-color .35s ease;
}


/* Animated shine */

.h2cta__btn::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset:
        0 auto 0 -110%;

    width: 80%;

    background:
        rgba(255, 255, 255, .28);

    transform:
        skewX(-22deg);

    transition:
        left .65s cubic-bezier(.2, .8, .2, 1);
}


.h2cta__btn:hover::before,
.h2cta__btn:focus-visible::before {
    left: 135%;
}


/* Arrow */

.h2cta__btn svg {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    transition:
        transform .35s ease;
}


.h2cta__btn:hover,
.h2cta__btn:focus-visible {
    transform:
        translateY(-4px);
}


.h2cta__btn:hover svg,
.h2cta__btn:focus-visible svg {
    transform:
        translateX(4px);
}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.h2cta__btn--primary {
    background: var(--saffron);

    color: #3D2925;

    border-color:
        var(--saffron);

    box-shadow:
        0 12px 26px
        rgba(61, 41, 37, .18);
}


.h2cta__btn--primary:hover,
.h2cta__btn--primary:focus-visible {
    background: var(--apricot);

    border-color:
        var(--apricot);

    color: #3D2925;

    box-shadow:
        0 17px 32px
        rgba(61, 41, 37, .23);
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.h2cta__btn--secondary {
    background:
        rgba(255, 249, 239, .08);

    color:
        var(--h2cta-cream);

    border-color:
        rgba(255, 249, 239, .64);
}


.h2cta__btn--secondary:hover,
.h2cta__btn--secondary:focus-visible {
    background:
        var(--apricot);

    border-color:
        var(--apricot);

    color:
        #3D2925;
}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.h2cta__btn:focus-visible {
    outline:
        3px solid
        var(--saffron);

    outline-offset: 4px;
}


/* ============================================================
   BOTTOM ARTISTIC TEXT
============================================================ */

.h2cta__note {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 27px;

    color:
        rgba(255, 249, 239, .70);

    font-size:
        var(--fs-small, 13px);

    font-weight: 600;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.h2cta__note b {
    color:
        var(--saffron);

    font-size: 10px;
}


/* ============================================================
   DECORATIVE PAINT
============================================================ */

.h2cta__paint,
.h2cta__spark,
.h2cta__dot {
    position: absolute;
    pointer-events: none;
}


.h2cta__paint {
    z-index: 2;

    border-radius:
        48% 52% 58% 42% /
        56% 44% 56% 44%;

    opacity: .95;

    filter:
        saturate(1.03);
}


/* Saffron blob */

.h2cta__paint--one {
    width:
        clamp(125px, 15vw, 210px);

    aspect-ratio: 1;

    top: -55px;
    left: 8%;

    background:
        var(--saffron);

    transform:
        rotate(-17deg);

    animation:
        h2ctaFloatOne
        7s
        ease-in-out
        infinite;
}


/* Aqua blob */

.h2cta__paint--two {
    width:
        clamp(95px, 11vw, 160px);

    aspect-ratio: 1;

    right: 9%;
    top: 11%;

    background:
        var(--aqua);

    opacity: .84;

    transform:
        rotate(19deg);

    animation:
        h2ctaFloatTwo
        8s
        ease-in-out
        infinite;
}


/* Apricot blob */

.h2cta__paint--three {
    width:
        clamp(120px, 14vw, 190px);

    aspect-ratio: 1;

    right: 12%;
    bottom: -72px;

    background:
        var(--apricot);

    transform:
        rotate(13deg);

    animation:
        h2ctaFloatThree
        7.5s
        ease-in-out
        infinite;
}


/* ============================================================
   SPARKS
============================================================ */

.h2cta__spark {
    z-index: 7;

    color:
        var(--h2cta-cream);

    font-size:
        clamp(18px, 2vw, 30px);

    line-height: 1;

    animation:
        h2ctaSpark
        3.2s
        ease-in-out
        infinite;
}


.h2cta__spark--one {
    top: 25%;
    left: 13%;
}


.h2cta__spark--two {
    right: 15%;
    bottom: 23%;

    animation-delay:
        -1.4s;

    color:
        var(--saffron);
}


/* ============================================================
   DOTS
============================================================ */

.h2cta__dot {
    z-index: 7;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background:
        var(--coral);

    box-shadow:
        0 0 0 8px
        rgba(233, 120, 120, .14);

    animation:
        h2ctaDot
        4s
        ease-in-out
        infinite;
}


.h2cta__dot--one {
    left: 22%;
    bottom: 17%;
}


.h2cta__dot--two {
    right: 24%;
    top: 23%;

    width: 9px;
    height: 9px;

    animation-delay:
        -2s;

    background:
        var(--saffron);

    box-shadow:
        0 0 0 7px
        rgba(242, 181, 68, .14);
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes h2ctaPulse {

    0%,
    100% {
        transform: scale(.9);
        opacity: .72;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}


@keyframes h2ctaFloatOne {

    0%,
    100% {
        transform:
            rotate(-17deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(-9deg)
            translate3d(15px, 13px, 0);
    }
}


@keyframes h2ctaFloatTwo {

    0%,
    100% {
        transform:
            rotate(19deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(27deg)
            translate3d(-13px, 17px, 0);
    }
}


@keyframes h2ctaFloatThree {

    0%,
    100% {
        transform:
            rotate(13deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(5deg)
            translate3d(-16px, -14px, 0);
    }
}


@keyframes h2ctaSpark {

    0%,
    100% {
        opacity: .42;
        transform:
            scale(.82)
            rotate(0);
    }

    50% {
        opacity: 1;
        transform:
            scale(1.12)
            rotate(16deg);
    }
}


@keyframes h2ctaDot {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }
}


/* ============================================================
   TABLET+
============================================================ */

@media (min-width: 768px) {

    .h2cta {
        width:
            min(calc(100% - 48px), 1380px);
    }

    .h2cta__frame {
        margin: 14px;
    }
}


/* ============================================================
   LAPTOP-L / DESKTOP
============================================================ */

@media (min-width: 1280px) {

    .h2cta {
        min-height: 610px;
        border-radius: 38px;
    }

    .h2cta__frame {
        border-radius: 29px;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .h2cta {
        width:
            calc(100% - 24px);

        min-height: 540px;

        margin-top: 48px;
        margin-bottom: 56px;

        border-radius: 27px;
    }


    .h2cta__frame {
        margin: 9px;
        border-radius: 20px;
    }


    .h2cta__content {
        width:
            min(calc(100% - 34px), 620px);

        padding:
            58px 0 54px;
    }


    .h2cta h2 {
        margin-top: 18px;

        font-size:
            clamp(30px, 9vw, 40px);

        line-height: 1.17;
    }


    .h2cta__desktop-break {
        display: none;
    }


    .h2cta__content > p {
        font-size:
            var(--fs-body, 15px);

        line-height: 1.68;
    }


    .h2cta__actions {
        flex-direction: column;

        width: 100%;

        margin-top: 26px;
    }


    .h2cta__btn {
        width:
            min(100%, 330px);

        min-height: 48px;

        white-space:
            normal;
    }


    .h2cta__note {
        margin-top: 23px;

        flex-wrap: wrap;

        gap: 8px;

        font-size: 11px;
    }


    .h2cta__paint--one {
        left: -38px;
        top: -34px;
    }


    .h2cta__paint--two {
        right: -35px;
        top: 15%;
    }


    .h2cta__paint--three {
        right: -45px;
        bottom: -48px;
    }


    .h2cta__spark--one {
        left: 9%;
        top: 29%;
    }


    .h2cta__spark--two {
        right: 9%;
        bottom: 20%;
    }


    .h2cta__dot--one {
        left: 12%;
        bottom: 13%;
    }


    .h2cta__dot--two {
        right: 14%;
        top: 28%;
    }
}


/* ============================================================
   MOBILE-S
============================================================ */

@media (max-width: 374px) {

    .h2cta {
        min-height: 570px;
    }


    .h2cta__content {
        width:
            calc(100% - 28px);

        padding-top:
            56px;
    }


    .h2cta__eyebrow {
        font-size: 11px;
        padding-inline: 11px;
    }


    .h2cta h2 {
        font-size: 29px;
    }


    .h2cta__btn {
        width: 100%;
        padding-inline: 15px;
    }


    .h2cta__paint--two {
        opacity: .55;
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .h2cta__paint,
    .h2cta__spark,
    .h2cta__dot,
    .h2cta__eyebrow i {
        animation: none !important;
    }


    .h2cta__content {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }


    .h2cta__btn,
    .h2cta__btn svg {
        transition: none !important;
    }
}

/* =========================================================
   MIX N MUSE - MEET THE ARTISTS: SWATCH WALL + PLAY CORNER (additive; classes .sw-, tokens scoped to .sw)
   Paste at the END of styles.css
========================================================= */
.sw{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.7,0,.2,1);--dx:-26px;--pist:color-mix(in srgb,var(--aqua) 55%,var(--saffron));position:relative;z-index:2;overflow:hidden;isolation:isolate;background:var(--canvas);padding-block:72px 64px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.sw,.sw *,.sw *::before,.sw *::after{box-sizing:border-box}
:where(.sw) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}
:where(.sw) button{border:0;background:none;padding:0}
.sw :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sw h2,.sw h3{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2;color:var(--text);overflow-wrap:anywhere}
.sw h2{font-size:var(--fs-h2);text-wrap:balance}.sw h3{font-size:var(--fs-h3)}
:where(.sw) :where(p,ul){margin:0}:where(.sw) ul{padding:0;list-style:none}
.sw-wrap{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter);display:grid;gap:28px}

/* header */
.sw-head{display:grid;gap:12px;justify-items:start;max-width:46em}
.sw-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sw-hl{position:relative;display:inline-block;color:var(--vermillion)}
.sw-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.sw-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .sw-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .8s ease}
.sw:not(.js) .sw-hl path{stroke-dashoffset:0}
.sw-lead{color:var(--text-soft);max-width:36em}
.sw-rv{opacity:0;transform:translateY(22px)}
.in-view .sw-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.7,.2,1)}
.sw:not(.js) .sw-rv{opacity:1;transform:none}

/* swatch wall: mobile + tablet = vertical accordion (chips slide open downward) */
.sw-wall{display:flex;flex-direction:column;gap:10px;container-type:inline-size}
.sw-pn{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:auto 0fr;border-radius:22px;background:var(--c);color:#FFF9EF;transition:grid-template-rows .45s var(--ease)}
.sw-pn.sw-open{grid-template-rows:auto 1fr}
.sw-ph{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:scale(1.12);will-change:transform;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.sw-open .sw-ph{transform:scale(1)}
.sw-wash{position:absolute;inset:0;z-index:-2;background:var(--c);opacity:.88;transition:opacity .35s ease}
.sw-open .sw-wash{opacity:0}
.sw-pn:not(.sw-open):hover .sw-wash{opacity:.72}
.sw-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(38,27,25,.94),rgba(38,27,25,.5) 55%,rgba(38,27,25,0));opacity:0;transition:opacity .35s ease}
.sw-open .sw-shade{opacity:1}
.sw-tab{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 16px;text-align:start;color:var(--on-pigment);transition:color .25s}
.sw-open .sw-tab{color:#FFF9EF}
.sw-num{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--surface);color:var(--text);font-family:"DynaPuff",cursive;font-size:14px;line-height:1;transition:transform .35s cubic-bezier(.3,1.6,.4,1)}
.sw-pn:not(.sw-open):hover .sw-num{transform:scale(1.15) rotate(-8deg)}
.sw-tt{display:grid;min-width:0}
.sw-tn{font-family:"DynaPuff",cursive;font-size:calc(var(--fs-body) + 2px);line-height:1.2;overflow-wrap:anywhere}
.sw-tr{font-size:var(--fs-small);font-weight:700;opacity:.9}
.sw-chev{width:20px;height:20px;flex:none;margin-inline-start:auto;transition:transform .3s}
.sw-open .sw-chev{transform:rotate(180deg)}
.sw-plus{display:none;transition:transform .3s}
.sw-det{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .45s}
.sw-open .sw-det{visibility:visible;transition-delay:0s}
.sw-in{display:grid;gap:12px;justify-items:start;padding:min(54vw,240px) 16px 18px}
.sw-in>*{opacity:0;transform:translateX(var(--dx));transition:opacity .15s ease,transform .15s ease}
.sw-open .sw-in>*{opacity:1;transform:none;transition:opacity .35s ease var(--d,0s),transform .45s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.sw-in>:nth-child(1){--d:.1s}.sw-in>:nth-child(2){--d:.16s}.sw-in>:nth-child(3){--d:.22s}.sw-in>:nth-child(4){--d:.28s}.sw-in>:nth-child(5){--d:.34s}
.sw-in h3{font-size:calc(var(--fs-h3) + 6px);color:#FFF9EF}
.sw-chips{display:flex;flex-wrap:wrap;gap:6px}
.sw-chips li{padding:4px 10px;border-radius:99px;background:var(--c);color:var(--on-pigment);font-size:var(--fs-small);font-weight:700;line-height:1.35}
.sw-bio{max-width:34em;color:#FFF9EF}
.sw-mt{display:grid;gap:7px;width:100%;max-width:340px}
.sw-mt div{display:grid;grid-template-columns:minmax(88px,34%) 1fr;align-items:center;gap:10px;font-size:var(--fs-small);font-weight:700;color:#FFF9EF}
.sw-mt i{display:block;height:9px;border-radius:9px;background:rgba(255,249,239,.28);overflow:hidden}
.sw-mt i::after{content:"";display:block;height:100%;width:0;border-radius:9px;background:var(--c);transition:width .2s ease}
.sw-open .sw-mt i::after{width:var(--v);transition:width .7s cubic-bezier(.2,.8,.2,1) .3s}
.sw-go{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border-radius:14px;background:var(--c);color:var(--on-pigment);font-size:var(--fs-btn);font-weight:700;line-height:1.25;text-align:center;transition:transform .25s}
.sw-go:hover{transform:translateY(-3px)}

/* play corner */
.sw-play{display:grid;gap:14px}
.sw-gm{position:relative;overflow:hidden;display:grid;gap:12px;align-content:start;min-height:330px;padding:20px 16px;border-radius:24px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text)}
.sw-gm h3{font-size:calc(var(--fs-h3) + 2px)}
.sw-gm p{color:var(--text-soft)}
.sw-gtag{justify-self:start;padding:5px 12px;border-radius:99px;background:var(--surface-soft);border:1px solid var(--border-strong);font-size:var(--fs-small);font-weight:700;letter-spacing:.04em}
.sw-opts{display:grid;gap:8px}
.sw-opt{display:flex;align-items:center;min-height:48px;padding:10px 16px;border-radius:14px;border:2px solid var(--border-strong);background:var(--canvas);color:var(--text);text-align:start;font-size:var(--fs-body);font-weight:700;line-height:1.3;transition:transform .25s,background-color .25s,color .25s}
.sw-opt:hover{transform:translateX(6px);background:var(--saffron);color:var(--on-pigment)}
.sw-steps{display:flex;gap:6px}.sw-steps i{flex:1;height:6px;border-radius:6px;background:var(--border-strong)}.sw-steps i.d{background:var(--vermillion)}
.sw-res{display:grid;gap:12px;justify-items:start}
.sw-big{font-family:"DynaPuff",cursive;font-size:calc(var(--fs-h3) + 6px);line-height:1.2;color:var(--vermillion);overflow-wrap:anywhere}
.sw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border-radius:14px;border:2px solid transparent;background:var(--btn-bg);color:var(--btn-text);font-size:var(--fs-btn);font-weight:700;line-height:1.25;text-align:center;transition:transform .3s}
.sw-btn:hover{transform:translateY(-3px)}
.sw-btn-ghost{background:transparent;border-color:var(--text);color:var(--text)}
.sw-hud{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--fs-small);font-weight:700}
.sw-hud span{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;border:1.5px solid var(--border-strong);background:var(--canvas)}
.sw-hud i{width:14px;height:14px;border-radius:50%;background:var(--tc)}
.sw-arena{position:relative;height:210px;overflow:hidden;border-radius:18px;border:2px dashed var(--border-strong);background:var(--surface-soft);touch-action:manipulation}
.sw-bl{position:absolute;bottom:-60px;width:52px;height:52px;border-radius:58% 42% 55% 45%/48% 56% 44% 52%;background:var(--bc);animation:swRise var(--t) linear forwards}
@keyframes swRise{to{transform:translateY(calc(var(--h) * -1 - 80px)) rotate(40deg)}}
.sw-over{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:12px;text-align:center}
.sw-over p{max-width:22em}
.sw:not(.js) .sw-play{display:none}

/* responsive: mobile-S base, then 375 / 425 / 768 / 900 / 1024 / 1280 / 1440 */
@media(min-width:375px){.sw{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.sw{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}.sw-gm{padding:24px 20px}}
@media(min-width:768px){.sw{--fs-h2:30px;--fs-h3:22px;--gutter:24px;padding-block:88px 80px}.sw-wrap{gap:36px}.sw-in{padding-inline:24px}.sw-tab{padding-inline:22px}.sw-play{grid-template-columns:1fr 1fr;gap:16px}.sw-gm{padding:26px 24px}}
@media(min-width:900px){
  /* laptop: chips stand side by side and slide open sideways (also on hover) */
  .sw-wall{flex-direction:row;height:clamp(520px,72vh,640px);gap:10px}
  .sw-pn{display:block;flex:1 1 0;min-width:0;cursor:pointer;transition:flex .5s cubic-bezier(.22,.8,.2,1)}
  .sw-pn.sw-open{flex:6 1 0}
  .sw-tab{position:absolute;inset:0;flex-direction:column;justify-content:space-between;align-items:center;gap:0;padding:16px 4px;min-height:0;transition:opacity .2s ease}
  .sw-open .sw-tab{opacity:0;pointer-events:none}
  .sw-pn:not(.sw-open):hover .sw-plus{transform:rotate(90deg) scale(1.2)}
  .sw-tt{align-self:center}
  .sw-tn{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:calc(var(--fs-body) + 3px)}
  .sw-tr,.sw-chev{display:none}
  .sw-plus{display:block;width:22px;height:22px}
  .sw-det{position:absolute;inset-inline:0;bottom:0;overflow:visible;transition-duration:0s;transition-delay:.3s}
  .sw-open .sw-det{transition-delay:0s}
  /* text keeps a fixed width while the chip animates, so nothing reflows mid-slide */
  .sw-in{padding:28px;width:min(100%,580px)}
  @supports (width:1cqw){.sw-in{width:min(580px,calc((100cqw - 50px) * 6 / 11))}}
}
@media(min-width:1024px){.sw{--fs-h2:32px;--fs-h3:24px;--gutter:clamp(24px,3vw,40px);padding-block:104px 96px}.sw-wrap{gap:40px}.sw-gm{min-height:350px}}
@media(min-width:1280px){.sw{--fs-h2:34px;--fs-h3:25px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}.sw-arena{height:230px}}
@media(min-width:1440px){.sw{--fs-h2:36px;--fs-h3:26px}}
@media(max-width:374px){.sw-go{width:100%}.sw-bl{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.sw *,.sw *::before,.sw *::after{animation-duration:.01s!important;transition-duration:.01s!important;transition-delay:0s!important}}

/* ============================================================
   MIX N MUSE — ABOUT HERO
   75VH FIVE-SLICE IMAGE MASK
   FULLY SECTION SCOPED: .abhero-
============================================================ */


/* ============================================================
   HERO ROOT
============================================================ */

.abhero {

    position: relative;

    width: 100%;
    height: 75vh;

    min-height: 560px;

    margin: 0;
    padding: 0 !important;

    display: flex;
    align-items: center;

    overflow: hidden;

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

    isolation: isolate;
}


/* ============================================================
   MAIN CONTENT WRAPPER
============================================================ */

.abhero-wrap {

    position: relative;

    width: min(100%, 1440px);
    height: 100%;

    margin-inline: auto;

    padding-inline: clamp(20px, 4vw, 64px);

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: clamp(28px, 5vw, 76px);

    z-index: 4;
}


/* ============================================================
   LEFT CONTENT
============================================================ */

.abhero-copy {

    position: relative;

    width: 100%;
    max-width: 650px;

    margin: 0;

    align-self: center;

    z-index: 10;
}


/* ============================================================
   TAG / EYEBROW
============================================================ */

.abhero-tag {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 36px;

    padding: 7px 14px;

    margin: 0 0 18px;

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

    border-radius: 999px;

    background: var(--surface);

    color: var(--text);

    font-family: "Manrope", sans-serif;

    font-size: var(--fs-small);

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .04em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* Tag pigment dot */

.abhero-tag::before {

    content: "";

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--vermillion);

    box-shadow:
        0 0 0 4px
        rgba(233, 79, 55, .10);
}


/* ============================================================
   HEADING
   USES SAME DYNAPUFF / HERO SCALE
============================================================ */

.abhero h1 {

    position: relative;

    margin: 0 0 18px;

    color: var(--text);

    font-family: "DynaPuff", cursive;

    font-size:
        clamp(32px, 4.1vw, 56px);

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -.025em;

    max-width: 11em;
}


/* ============================================================
   HIGHLIGHTED "BECOME ART."
============================================================ */

.abhero-highlight {

    position: relative;

    display: inline-block;

    color: var(--vermillion);

    white-space: nowrap;

    padding-bottom: .12em;
}


/* Hand-drawn underline */

.abhero-highlight svg {

    position: absolute;

    left: 0;
    right: 0;

    bottom: -.02em;

    width: 100%;
    height: .30em;

    overflow: visible;

    pointer-events: none;
}


.abhero-highlight svg path {

    fill: none;

    stroke: var(--saffron);

    stroke-width: 5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   HERO DESCRIPTION
============================================================ */

.abhero-lead {

    width: 100%;
    max-width: 34em;

    margin: 0 0 26px;

    color: var(--text-soft);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(15px, 1.35vw, 17px);

    font-weight: 400;

    line-height: 1.65;
}


/* ============================================================
   BUTTON AREA
============================================================ */

.abhero-actions {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 12px;

    margin: 0;
}


/* ============================================================
   HERO BUTTON BASE
============================================================ */

.abhero-btn {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 12px 22px;

    border: 2px solid transparent;

    border-radius: 14px;

    font-family: "Manrope", sans-serif;

    font-size: var(--fs-btn);

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform .28s ease,
        color .28s ease,
        border-color .28s ease,
        background-color .28s ease,
        box-shadow .28s ease;
}


/* Animated pigment layer */

.abhero-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    transform:
        scaleX(0);

    transform-origin: left center;

    transition:
        transform .38s
        cubic-bezier(.77, 0, .18, 1);

}


/* Button text */

.abhero-btn span {

    position: relative;

    z-index: 2;
}


/* Button arrow */

.abhero-btn svg {

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    position: relative;

    z-index: 2;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .28s ease;
}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.abhero-btn-primary {

    background: var(--btn-bg);

    color: var(--btn-text);

    border-color: var(--btn-bg);

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


.abhero-btn-primary::before {

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


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.abhero-btn-secondary {

    background: transparent;

    color: var(--text);

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


.abhero-btn-secondary::before {

    background: var(--saffron);
}


/* ============================================================
   BUTTON HOVER
============================================================ */

.abhero-btn:hover {

    transform: translateY(-3px);
}


.abhero-btn:hover::before {

    transform: scaleX(1);
}


.abhero-btn:hover svg {

    transform: translateX(5px);
}


.abhero-btn-primary:hover {

    color: var(--btn-text);

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


.abhero-btn-secondary:hover {

    color: var(--on-pigment);

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


/* ============================================================
   BUTTON ACTIVE
============================================================ */

.abhero-btn:active {

    transform: translateY(-1px) scale(.985);
}


/* ============================================================
   KEYBOARD FOCUS
============================================================ */

.abhero-btn:focus-visible {

    outline:
        3px solid var(--focus);

    outline-offset: 4px;
}


/* ============================================================
   RIGHT VISUAL
============================================================ */

.abhero-visual {

    position: relative;

    width: 100%;

    height:
        min(62vh, 540px);

    min-height: 330px;

    margin: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 5;
}


/* ============================================================
   FIVE-SLICE IMAGE CONTAINER

   WIDTH STRUCTURE:

   13% → 21% → 32% → 21% → 13%

   HEIGHT STRUCTURE:

   70% → 88% → 100% → 88% → 70%
============================================================ */

.abhero-slices {

    position: relative;

    width: min(100%, 710px);

    height:
        min(62vh, 520px);

    margin: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    gap:
        clamp(4px, .65vw, 10px);

    transform:
        rotate(-14deg);

    transform-origin:
        center center;

    filter:
        drop-shadow(
            0 24px 30px
            rgba(61, 41, 37, .16)
        );

    z-index: 5;

    transition:
        filter .35s ease;
}


/* ============================================================
   ALL FIVE SLICES
============================================================ */

.abhero-slice {

    position: relative;

    flex: 0 0 auto;

    height: 100%;

    margin: 0;

    overflow: hidden;

    border-radius: 999px;

    background:
        var(--surface-soft);

    isolation: isolate;

    transform:
        translateZ(0);

    backface-visibility: hidden;
}


/* ============================================================
   SLICE WIDTHS

   OUTER 1 = 13%
   INNER 2 = 21%
   CENTER 3 = 32%
   INNER 4 = 21%
   OUTER 5 = 13%
============================================================ */

.abhero-slice:nth-child(1) {

    width: 13%;

    height: 70%;
}


.abhero-slice:nth-child(2) {

    width: 21%;

    height: 88%;
}


.abhero-slice:nth-child(3) {

    width: 32%;

    height: 100%;
}


.abhero-slice:nth-child(4) {

    width: 21%;

    height: 88%;
}


.abhero-slice:nth-child(5) {

    width: 13%;

    height: 70%;
}


/* ============================================================
   IMAGE BASE

   Each image is enlarged to represent the same
   complete artwork coordinate system.
============================================================ */

.abhero-slice img {

    position: absolute;

    display: block;

    max-width: none;

    margin: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    pointer-events: none;

    user-select: none;

    transform:
        translateZ(0);

    backface-visibility: hidden;
}


/* ============================================================
   CONTINUOUS IMAGE ALIGNMENT

   The source image is mathematically scaled according
   to the width of each slice.

   This keeps the photograph flowing across the
   five masks instead of showing five unrelated crops.
============================================================ */


/* ------------------------------------------------------------
   SLICE 1
   13%
------------------------------------------------------------ */

.abhero-slice:nth-child(1) img {

    width: 769.23%;

    height: 142.86%;

    left: 0;

    top: -21.43%;
}


/* ------------------------------------------------------------
   SLICE 2
   21%

   Previous width = 13%
   13 / 21 = 61.90%
------------------------------------------------------------ */

.abhero-slice:nth-child(2) img {

    width: 476.19%;

    height: 113.64%;

    left: -61.90%;

    top: -6.82%;
}


/* ------------------------------------------------------------
   SLICE 3
   32%

   Previous combined width:

   13 + 21 = 34

   34 / 32 = 106.25%
------------------------------------------------------------ */

.abhero-slice:nth-child(3) img {

    width: 312.50%;

    height: 100%;

    left: -106.25%;

    top: 0;
}


/* ------------------------------------------------------------
   SLICE 4
   21%

   Previous combined width:

   13 + 21 + 32 = 66

   66 / 21 = 314.29%
------------------------------------------------------------ */

.abhero-slice:nth-child(4) img {

    width: 476.19%;

    height: 113.64%;

    left: -314.29%;

    top: -6.82%;
}


/* ------------------------------------------------------------
   SLICE 5
   13%

   Previous combined width:

   13 + 21 + 32 + 21 = 87

   87 / 13 = 669.23%
------------------------------------------------------------ */

.abhero-slice:nth-child(5) img {

    width: 769.23%;

    height: 142.86%;

    left: -669.23%;

    top: -21.43%;
}


/* ============================================================
   DECORATIVE PIGMENT SHAPES
============================================================ */

.abhero-paint {

    position: absolute;

    pointer-events: none;

    z-index: 1;

    border-radius: 50%;

    opacity: .8;
}


/* Large saffron organic shape */

.abhero-paint-a {

    width:
        clamp(150px, 18vw, 280px);

    aspect-ratio: 1;

    right:
        clamp(-90px, -5vw, -30px);

    top:
        clamp(40px, 8vh, 110px);

    background:
        var(--saffron);

    opacity: .18;

    filter:
        blur(.2px);
}


/* Aqua lower pigment */

.abhero-paint-b {

    width:
        clamp(120px, 15vw, 220px);

    aspect-ratio: 1;

    right:
        clamp(100px, 17vw, 260px);

    bottom:
        clamp(-70px, -3vh, -20px);

    background:
        var(--aqua);

    opacity: .16;
}


/* Apricot small wash */

.abhero-paint-c {

    width:
        clamp(70px, 8vw, 120px);

    aspect-ratio: 1;

    left:
        clamp(25px, 8vw, 130px);

    bottom:
        clamp(50px, 10vh, 120px);

    background:
        var(--apricot);

    opacity: .18;
}


/* ============================================================
   DECORATIVE DOTS
============================================================ */

.abhero-dot {

    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;

    z-index: 7;
}


/* Vermillion */

.abhero-dot-one {

    width: 11px;
    height: 11px;

    right:
        clamp(20px, 5vw, 80px);

    top:
        22%;

    background:
        var(--vermillion);

    box-shadow:
        0 0 0 5px
        rgba(233, 79, 55, .08);
}


/* Saffron */

.abhero-dot-two {

    width: 9px;
    height: 9px;

    left:
        clamp(30px, 6vw, 100px);

    bottom:
        18%;

    background:
        var(--saffron);
}


/* Aqua */

.abhero-dot-three {

    width: 7px;
    height: 7px;

    right:
        38%;

    top:
        13%;

    background:
        var(--aqua);
}


/* ============================================================
   DECORATIVE SPARKS
============================================================ */

.abhero-spark {

    position: absolute;

    display: block;

    color:
        var(--saffron);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(20px, 2vw, 30px);

    line-height: 1;

    pointer-events: none;

    z-index: 8;

    animation:
        abheroSpark
        4s ease-in-out
        infinite;
}


/* First spark */

.abhero-spark-one {

    left:
        clamp(150px, 19vw, 290px);

    bottom:
        13%;

    animation-delay:
        -.8s;
}


/* Second spark */

.abhero-spark-two {

    right:
        8%;

    top:
        18%;

    font-size:
        clamp(14px, 1.4vw, 22px);

    animation-delay:
        -2.2s;
}


/* Spark animation */

@keyframes abheroSpark {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

        opacity: .55;
    }

    50% {

        transform:
            translateY(-7px)
            rotate(10deg);

        opacity: 1;
    }
}


/* ============================================================
   META LABEL BELOW IMAGE
============================================================ */

.abhero-meta {

    position: absolute;

    right: 2%;

    bottom: 4%;

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    color:
        var(--text-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        var(--fs-small);

    font-weight: 600;

    letter-spacing: .04em;

    text-transform: uppercase;

    white-space: nowrap;

    z-index: 8;
}


.abhero-meta-line {

    width:
        clamp(24px, 3vw, 42px);

    height: 2px;

    flex: 0 0 auto;

    background:
        var(--saffron);

    border-radius: 999px;
}


/* ============================================================
   DESKTOP HOVER DETAIL
============================================================ */

@media (hover: hover) and (pointer: fine) {

    .abhero-slices:hover {

        filter:
            drop-shadow(
                0 28px 34px
                rgba(61, 41, 37, .20)
            );
    }


    .abhero-slice {

        transition:
            transform .35s
            cubic-bezier(.22, 1, .36, 1);
    }


    .abhero-slices:hover
    .abhero-slice:nth-child(1) {

        transform:
            translateY(4px);
    }


    .abhero-slices:hover
    .abhero-slice:nth-child(2) {

        transform:
            translateY(-3px);
    }


    .abhero-slices:hover
    .abhero-slice:nth-child(3) {

        transform:
            translateY(-6px);
    }


    .abhero-slices:hover
    .abhero-slice:nth-child(4) {

        transform:
            translateY(-3px);
    }


    .abhero-slices:hover
    .abhero-slice:nth-child(5) {

        transform:
            translateY(4px);
    }
}


/* ============================================================
   LAPTOP
   1024px — 1279px
============================================================ */

@media (min-width: 1024px)
and (max-width: 1279px) {

    .abhero {

        height: 75vh;

        min-height: 540px;
    }


    .abhero-wrap {

        grid-template-columns:
            minmax(0, .92fr)
            minmax(0, 1.08fr);

        gap: 30px;

        padding-inline: 28px;
    }


    .abhero-copy {

        max-width: 540px;
    }


    .abhero-visual {

        height:
            min(58vh, 440px);

        min-height: 300px;
    }


    .abhero-slices {

        width:
            min(100%, 600px);

        height:
            min(58vh, 430px);

        gap: 6px;
    }


    .abhero-meta {

        display: none;
    }
}


/* ============================================================
   LAPTOP-L
   1280px — 1439px
============================================================ */

@media (min-width: 1280px)
and (max-width: 1439px) {

    .abhero {

        height: 75vh;
    }


    .abhero-wrap {

        gap: 48px;

        padding-inline: 40px;
    }


    .abhero-visual {

        height:
            min(61vh, 500px);
    }


    .abhero-slices {

        width:
            min(100%, 660px);

        height:
            min(61vh, 500px);
    }
}


/* ============================================================
   DESKTOP
   1440px+
============================================================ */

@media (min-width: 1440px) {

    .abhero {

        height: 75vh;
    }


    .abhero-wrap {

        gap: 64px;

        padding-inline: 48px;
    }


    .abhero-visual {

        height:
            min(62vh, 540px);
    }


    .abhero-slices {

        width:
            min(100%, 710px);

        height:
            min(62vh, 520px);
    }
}


/* ============================================================
   TABLET
   768px — 1023px
============================================================ */

@media (min-width: 768px)
and (max-width: 1023px) {

    .abhero {

        height: 75vh;

        min-height: 520px;
    }


    .abhero-wrap {

        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.1fr);

        gap: 20px;

        padding-inline: 24px;
    }


    .abhero-copy {

        max-width: 470px;
    }


    .abhero-visual {

        height:
            min(50vh, 390px);

        min-height: 260px;
    }


    .abhero-slices {

        width: 100%;

        height:
            min(50vh, 380px);

        gap: 5px;
    }


    .abhero-meta {

        display: none;
    }


    .abhero-paint-c {

        display: none;
    }
}


/* ============================================================
   MOBILE-L
   425px — 767px
============================================================ */

@media (min-width: 425px)
and (max-width: 767px) {

    .abhero {

        height: 75vh;

        min-height: 590px;
    }


    .abhero-wrap {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 20px;

        padding-inline: 18px;
    }


    .abhero-copy {

        width: 100%;

        max-width: 620px;

        text-align: center;
    }


    .abhero-tag {

        margin-bottom: 14px;
    }


    .abhero h1 {

        max-width: 13em;

        margin-inline: auto;

        margin-bottom: 15px;

        font-size:
            clamp(32px, 8vw, 44px);

        line-height: 1.14;
    }


    .abhero-lead {

        max-width: 42em;

        margin-inline: auto;

        margin-bottom: 20px;

        font-size: 15px;

        line-height: 1.55;
    }


    .abhero-actions {

        justify-content: center;

        gap: 10px;
    }


    .abhero-visual {

        width: 100%;

        height: 28vh;

        min-height: 175px;

        max-height: 220px;
    }


    .abhero-slices {

        width: min(96vw, 570px);

        height:
            min(28vh, 215px);

        gap: 4px;

        transform:
            rotate(-12deg);
    }


    .abhero-meta {

        display: none;
    }


    .abhero-paint-a {

        opacity: .12;
    }


    .abhero-paint-b {

        opacity: .10;
    }


    .abhero-paint-c {

        display: none;
    }


    .abhero-dot-three,
    .abhero-spark-two {

        display: none;
    }
}


/* ============================================================
   MOBILE-M
   375px — 424px
============================================================ */

@media (min-width: 375px)
and (max-width: 424px) {

    .abhero {

        height: 75vh;

        min-height: 600px;
    }


    .abhero-wrap {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 17px;

        padding-inline: 15px;
    }


    .abhero-copy {

        width: 100%;

        text-align: center;
    }


    .abhero-tag {

        min-height: 34px;

        padding: 6px 12px;

        font-size: 11px;
    }


    .abhero h1 {

        max-width: 12em;

        margin-inline: auto;

        margin-bottom: 14px;

        font-size: 34px;

        line-height: 1.14;
    }


    .abhero-lead {

        max-width: 34em;

        margin-inline: auto;

        margin-bottom: 18px;

        font-size: 14px;

        line-height: 1.55;
    }


    .abhero-actions {

        justify-content: center;

        gap: 8px;
    }


    .abhero-btn {

        min-height: 44px;

        padding: 10px 15px;

        font-size: 13px;

        border-radius: 12px;
    }


    .abhero-btn svg {

        width: 16px;
        height: 16px;

        flex-basis: 16px;
    }


    .abhero-visual {

        width: 100%;

        height: 180px;

        min-height: 160px;

        max-height: 190px;
    }


    .abhero-slices {

        width: 98vw;

        height: 175px;

        gap: 3px;

        transform:
            rotate(-11deg);
    }


    .abhero-meta {

        display: none;
    }


    .abhero-dot-three,
    .abhero-spark-two {

        display: none;
    }


    .abhero-paint-c {

        display: none;
    }
}


/* ============================================================
   MOBILE-S
   320px — 374px
============================================================ */

@media (max-width: 374px) {

    .abhero {

        height: 75vh;

        min-height: 610px;
    }


    .abhero-wrap {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 15px;

        padding-inline: 12px;
    }


    .abhero-copy {

        width: 100%;

        text-align: center;
    }


    .abhero-tag {

        min-height: 32px;

        padding: 6px 10px;

        gap: 7px;

        font-size: 10px;
    }


    .abhero-tag::before {

        width: 7px;
        height: 7px;

        flex-basis: 7px;
    }


    .abhero h1 {

        max-width: 11em;

        margin-inline: auto;

        margin-bottom: 13px;

        font-size: 32px;

        line-height: 1.13;
    }


    .abhero-lead {

        max-width: 32em;

        margin-inline: auto;

        margin-bottom: 17px;

        font-size: 14px;

        line-height: 1.5;
    }


    .abhero-actions {

        justify-content: center;

        gap: 6px;
    }


    .abhero-btn {

        min-height: 42px;

        padding: 9px 11px;

        gap: 7px;

        border-radius: 11px;

        font-size: 12px;
    }


    .abhero-btn svg {

        width: 15px;
        height: 15px;

        flex-basis: 15px;
    }


    .abhero-visual {

        width: 100%;

        height: 160px;

        min-height: 155px;

        max-height: 160px;
    }


    .abhero-slices {

        width: 98vw;

        height: 145px;

        gap: 3px;

        transform:
            rotate(-10deg);
    }


    .abhero-meta {

        display: none;
    }


    .abhero-dot-three,
    .abhero-spark-two {

        display: none;
    }


    .abhero-paint-c {

        display: none;
    }


    .abhero-paint-a {

        opacity: .08;
    }


    .abhero-paint-b {

        opacity: .08;
    }
}


/* ============================================================
   RTL — LOCAL HERO BEHAVIOUR

   Main RTL styling remains in rtl.css.
   These rules keep the visual slices LTR so the
   photograph itself does not become scrambled.
============================================================ */

html[dir="rtl"] .abhero-wrap {

    direction: rtl;
}


html[dir="rtl"] .abhero-copy {

    text-align: right;
}


html[dir="rtl"] .abhero-actions {

    justify-content: flex-start;
}


html[dir="rtl"] .abhero-highlight svg {

    transform:
        scaleX(-1);
}


html[dir="rtl"] .abhero-btn svg {

    transform:
        scaleX(-1);
}


html[dir="rtl"] .abhero-btn:hover svg {

    transform:
        scaleX(-1)
        translateX(5px);
}


/*
   Do NOT reverse the image slices.
   The five slices form one continuous photograph.
*/

html[dir="rtl"] .abhero-slices {

    direction: ltr;
}


html[dir="rtl"] .abhero-meta {

    right: auto;

    left: 2%;

    direction: rtl;
}


@media (max-width: 767px) {

    html[dir="rtl"] .abhero-copy {

        text-align: center;
    }


    html[dir="rtl"] .abhero-actions {

        justify-content: center;
    }
}


/* ============================================================
   DARK MODE SAFETY
   The main dark.css already defines the theme variables.
   These selectors ensure this hero always follows them.
============================================================ */

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

    background: var(--canvas);

    color: var(--text);
}


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

    color: var(--text);
}


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

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


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

    background: var(--surface-soft);

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

    color: var(--text);
}


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

    background: var(--btn-bg);

    border-color: var(--btn-bg);

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


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

    background: transparent;

    border-color: var(--text);

    color: var(--text);
}


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

    background: var(--saffron);

    border-color: var(--saffron);

    color: var(--on-pigment);
}


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

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


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

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


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

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


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

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


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .abhero-slices {

        transform:
            rotate(-14deg);

        transition: none;
    }


    .abhero-slice {

        transition: none !important;
    }


    .abhero-spark {

        animation: none;
    }


    .abhero-btn,
    .abhero-btn::before,
    .abhero-btn svg {

        transition: none;
    }
}

/* ============================================================
   ABOUT HERO — FINAL POSITION / ALIGNMENT FIX
   Scoped only to .abhero
============================================================ */

/* Push the actual hero content slightly below the navbar
   while keeping the overall section exactly 75vh. */
.abhero {
    box-sizing: border-box;

    padding-top: clamp(68px, 5.5vw, 88px) !important;

    align-items: center;
}


/* Keep the two main columns vertically centered
   inside the adjusted hero area. */
.abhero-wrap {
    height: 100%;

    align-items: center;

    box-sizing: border-box;
}


/* Left text stays vertically centered */
.abhero-copy {
    align-self: center;

    transform: translateY(8px);
}


/* ============================================================
   IMAGE COMPOSITION
   Remove the previous diagonal tilt completely.
============================================================ */

.abhero-slices {
    transform: rotate(0deg) !important;

    transform-origin: center center;

    align-items: center;

    justify-content: center;

    margin-top: 8px;
}


/* Keep every slice centered vertically according
   to its intended size. */
.abhero-slice:nth-child(1) {
    height: 70%;
}

.abhero-slice:nth-child(2) {
    height: 88%;
}

.abhero-slice:nth-child(3) {
    height: 100%;
}

.abhero-slice:nth-child(4) {
    height: 88%;
}

.abhero-slice:nth-child(5) {
    height: 70%;
}


/* ============================================================
   REMOVE HOVER TILT / MOVEMENT FROM THE IMAGE
   The image should remain a clean centered shape.
============================================================ */

@media (hover: hover) and (pointer: fine) {

    .abhero-slices:hover {
        transform: rotate(0deg) !important;
    }

    .abhero-slices:hover .abhero-slice:nth-child(1),
    .abhero-slices:hover .abhero-slice:nth-child(2),
    .abhero-slices:hover .abhero-slice:nth-child(3),
    .abhero-slices:hover .abhero-slice:nth-child(4),
    .abhero-slices:hover .abhero-slice:nth-child(5) {
        transform: none;
    }
}


/* ============================================================
   LAPTOP
============================================================ */

@media (min-width: 1024px) and (max-width: 1279px) {

    .abhero {
        padding-top: 76px !important;
    }

    .abhero-copy {
        transform: translateY(6px);
    }

    .abhero-slices {
        transform: rotate(0deg) !important;
        margin-top: 6px;
    }
}


/* ============================================================
   LAPTOP-L
============================================================ */

@media (min-width: 1280px) and (max-width: 1439px) {

    .abhero {
        padding-top: 82px !important;
    }

    .abhero-copy {
        transform: translateY(8px);
    }

    .abhero-slices {
        transform: rotate(0deg) !important;
        margin-top: 8px;
    }
}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 1440px) {

    .abhero {
        padding-top: 86px !important;
    }

    .abhero-copy {
        transform: translateY(10px);
    }

    .abhero-slices {
        transform: rotate(0deg) !important;
        margin-top: 10px;
    }
}


/* ============================================================
   TABLET
============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .abhero {
        padding-top: 74px !important;
    }

    .abhero-copy {
        transform: translateY(5px);
    }

    .abhero-slices {
        transform: rotate(0deg) !important;
        margin-top: 6px;
    }
}


/* ============================================================
   MOBILE-L
============================================================ */

@media (min-width: 425px) and (max-width: 767px) {

    .abhero {
        padding-top: 76px !important;
    }

    .abhero-copy {
        transform: none;
    }

    .abhero-slices {
        transform: rotate(0deg) !important;
        margin-top: 4px;
    }
}


/* ============================================================
   MOBILE-M
============================================================ */

@media (min-width: 375px) and (max-width: 424px) {

    .abhero {
        padding-top: 74px !important;
    }

    .abhero-copy {
        transform: none;
    }

    .abhero-slices {
        transform: rotate(0deg) !important;
        margin-top: 3px;
    }
}


/* ============================================================
   MOBILE-S
============================================================ */

@media (max-width: 374px) {

    .abhero {
        padding-top: 72px !important;
    }

    .abhero-copy {
        transform: none;
    }

    .abhero-slices {
        transform: rotate(0deg) !important;
        margin-top: 2px;
    }
}

/* ============================================================
   MIX N MUSE — ABOUT PAGE
   MISSION & VISION + OUR HISTORY
   ------------------------------------------------------------
   FULLY SCOPED
   .abmv-* = Mission & Vision
   .abh-*  = Our History
   Does not modify existing sections.
============================================================ */


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

.abmv,
.abmv *,
.abmv *::before,
.abmv *::after,
.abh,
.abh *,
.abh *::before,
.abh *::after {
    box-sizing: border-box;
}


.abmv {
    --abmv-h2: 24px;
    --abmv-h3: 19px;
    --abmv-body: 15px;
    --abmv-small: 12px;
    --abmv-gap: 16px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding-block: 70px 76px;

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

    font-family: "Manrope", sans-serif;
    font-size: var(--abmv-body);
    line-height: 1.65;
}


/* subtle pigment atmosphere */

.abmv::before,
.abmv::after {
    content: "";
    position: absolute;
    z-index: -1;

    width: 220px;
    aspect-ratio: 1;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

    opacity: .14;
}

.abmv::before {
    inset-inline-start: -110px;
    top: 18%;

    background: var(--apricot);
}

.abmv::after {
    inset-inline-end: -110px;
    bottom: 8%;

    background: var(--aqua);
}


.abmv-wrap,
.abh-wrap {
    width: min(
        calc(100% - (2 * var(--abmv-gap))),
        1400px
    );

    margin-inline: auto;
}


/* heading */

.abmv-head {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}


.abmv-tag,
.abh-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 34px;

    padding: 7px 14px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;

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

    font-size: var(--abmv-small);
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: .06em;
    text-transform: uppercase;
}


.abmv-tag-dot,
.abh-tag-dot {
    width: 8px;
    height: 8px;

    flex: none;

    border-radius: 50%;
    background: var(--vermillion);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--vermillion) 12%,
            transparent
        );
}


.abmv-head h2,
.abh-head h2 {
    margin: 18px 0 12px;

    color: var(--text);

    font-family: "DynaPuff", cursive;
    font-size: var(--abmv-h2);
    font-weight: 500;
    line-height: 1.18;

    text-wrap: balance;
}


.abmv-head h2 span,
.abh-head h2 span {
    color: var(--vermillion);
}


.abmv-head > p {
    max-width: 680px;
    margin: 0 auto;

    color: var(--text-soft);

    line-height: 1.72;
}


/* ============================================================
   PURPOSE STAGE
============================================================ */

.abmv-stage {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(120px, .42fr)
        minmax(0, 1fr);

    align-items: stretch;

    gap: clamp(14px, 2vw, 32px);

    margin-top: 46px;
}


/* cards */

.abmv-card {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-width: 0;

    border: 1px solid var(--border-strong);
    border-radius: 26px;

    background: var(--surface);

    box-shadow: var(--shadow);

    transform:
    translate3d(
        var(--abmv-pointer-x, 0px),
        calc(35px + var(--abmv-pointer-y, 0px)),
        0
    )
    rotate(var(--abmv-rotate));
    opacity: 0;

    transition:
        transform .85s cubic-bezier(.16,1,.3,1),
        opacity .7s ease,
        box-shadow .35s ease;
}


.abmv-card-mission {
    --abmv-rotate: -1.2deg;
}


.abmv-card-vision {
    --abmv-rotate: 1.2deg;
}


.abmv.is-visible .abmv-card {
    transform:
        translate3d(
            var(--abmv-pointer-x, 0px),
            var(--abmv-pointer-y, 0px),
            0
        )
        rotate(var(--abmv-rotate));

    opacity: 1;
}

.abmv.is-visible .abmv-card-vision {
    transition-delay: .16s;
}


.abmv-card:hover {
    box-shadow:
        0 20px 48px
        color-mix(
            in srgb,
            var(--text) 12%,
            transparent
        );
}


.abmv-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 16px 18px 12px;
}


.abmv-number {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: none;

    border-radius: 50%;

    background: var(--saffron);
    color: var(--on-pigment);

    font-family: "DynaPuff", cursive;
    font-size: 16px;
    font-weight: 500;
}


.abmv-card-vision .abmv-number {
    background: var(--aqua);
}


.abmv-mini-label {
    color: var(--text-soft);

    font-size: var(--abmv-small);
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;

    text-align: end;
}


/* image */

.abmv-card-media {
    position: relative;

    margin-inline: 14px;

    overflow: hidden;

    aspect-ratio: 1.45 / 1;

    border-radius:
        18px
        18px
        10px
        10px;

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


.abmv-card-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(61,41,37,.28)
        );

    pointer-events: none;
}


.abmv-card-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);
}


.abmv-card:hover .abmv-card-media img {
    transform: scale(1.045);
}


.abmv-media-stamp {
    position: absolute;
    z-index: 2;

    inset-inline-start: 12px;
    bottom: 12px;

    min-height: 32px;

    display: inline-flex;
    align-items: center;

    padding: 6px 11px;

    border-radius: 9px;

    background: var(--vermillion);
    color: var(--btn-text);

    font-size: var(--abmv-small);
    font-weight: 700;

    letter-spacing: .08em;
}


/* content */

.abmv-card-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 22px 22px 24px;
}


.abmv-kicker {
    display: block;

    margin-bottom: 7px;

    color: var(--vermillion);

    font-size: var(--abmv-small);
    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.abmv-card-content h3 {
    margin: 0 0 13px;

    max-width: 14ch;

    color: var(--text);

    font-family: "DynaPuff", cursive;
    font-size: var(--abmv-h3);
    font-weight: 500;
    line-height: 1.22;

    text-wrap: balance;
}


.abmv-card-content p {
    margin: 0 0 11px;

    color: var(--text-soft);

    line-height: 1.7;
}


.abmv-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 7px;

    margin: auto 0 0;
    padding: 18px 0 0;

    list-style: none;
}


.abmv-values li {
    min-width: 0;

    padding: 10px 8px;

    border-top: 2px solid var(--border-strong);

    color: var(--text);

    font-size: var(--abmv-small);
    font-weight: 700;
    line-height: 1.35;
}


.abmv-values li span {
    display: block;

    margin-bottom: 4px;

    color: var(--vermillion);

    font-family: "DynaPuff", cursive;
    font-size: 14px;
    font-weight: 500;
}


/* ============================================================
   CENTRAL MUSE SPARK
============================================================ */

.abmv-core {
    position: relative;

    align-self: center;

    width: min(100%, 170px);
    aspect-ratio: 1;

    margin-inline: auto;

    display: grid;
    place-items: center;
}


.abmv-orbit {
    position: absolute;

    inset: 10%;

    border:
        1.5px dashed
        color-mix(
            in srgb,
            var(--saffron) 80%,
            transparent
        );

    border-radius: 50%;

    animation:
        abmvOrbit 12s linear infinite;
}


.abmv-orbit-two {
    inset: 23%;

    border-color:
        color-mix(
            in srgb,
            var(--aqua) 80%,
            transparent
        );

    animation-direction: reverse;
    animation-duration: 8s;
}


.abmv-core-spark {
    position: relative;

    width: 74px;
    height: 74px;

    display: grid;
    place-items: center;

    background: var(--aqua);

    clip-path:
        polygon(
            50% 0%,
            61% 36%,
            100% 50%,
            62% 62%,
            50% 100%,
            38% 63%,
            0% 50%,
            38% 37%
        );

    transform: scale(.4) rotate(-25deg);
    opacity: 0;

    transition:
        transform .8s cubic-bezier(.3,1.5,.4,1),
        opacity .45s ease;
}


.abmv.is-visible .abmv-core-spark {
    transform: scale(1) rotate(0);
    opacity: 1;
    transition-delay: .35s;
}


.abmv-core-spark span {
    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: var(--canvas);
}


.abmv-core-word {
    position: absolute;

    bottom: 1px;

    color: var(--text);

    font-family: "DynaPuff", cursive;
    font-size: 14px;
    font-weight: 500;

    letter-spacing: .08em;
}


.abmv-core-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    animation: abmvDotFloat 4s ease-in-out infinite alternate;
}


.abmv-core-dot-a {
    top: 7%;
    inset-inline-start: 16%;
    background: var(--vermillion);
}


.abmv-core-dot-b {
    top: 50%;
    inset-inline-end: 3%;
    background: var(--saffron);
    animation-delay: -1.2s;
}


.abmv-core-dot-c {
    bottom: 12%;
    inset-inline-start: 10%;
    background: var(--apricot);
    animation-delay: -2.1s;
}


/* ============================================================
   MISSION PATH
============================================================ */

.abmv-path {
    margin-top: 42px;
}


.abmv-path-line {
    width: 100%;
    height: 48px;
}


.abmv-path-line svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}


.abmv-path-line path {
    fill: none;

    stroke: var(--saffron);
    stroke-width: 5;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 1;
    stroke-dashoffset: 1;

    vector-effect: non-scaling-stroke;
}


.abmv.is-visible .abmv-path-line path {
    stroke-dashoffset: 0;

    transition:
        stroke-dashoffset 1.5s
        .5s
        cubic-bezier(.65,0,.25,1);
}


.abmv-path-items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px 14px;

    margin-top: -4px;
}


.abmv-path-items span {
    color: var(--text);

    font-size: var(--abmv-small);
    font-weight: 700;

    letter-spacing: .08em;
}


.abmv-path-items i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--vermillion);
}


.abmv-path-items i:nth-of-type(2) {
    background: var(--aqua);
}


.abmv-path-items i:nth-of-type(3) {
    background: var(--apricot);
}


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

.abh {
    --abh-h2: 24px;
    --abh-h3: 18px;
    --abh-body: 15px;
    --abh-small: 12px;
    --abh-gap: 16px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding-block: 76px 82px;

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

    font-family: "Manrope", sans-serif;
    font-size: var(--abh-body);
    line-height: 1.65;
}


.abh::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 320px;
    height: 180px;

    inset-inline-end: -100px;
    top: 8%;

    border-radius: 50%;

    background: var(--apricot);

    opacity: .12;

    transform: rotate(-18deg);
}


.abh-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(240px, .85fr);

    align-items: end;

    gap: clamp(28px, 6vw, 100px);

    margin-bottom: 54px;
}


.abh-head h2 {
    max-width: 720px;

    margin-bottom: 0;
}


.abh-intro {
    max-width: 510px;

    margin: 0;

    color: var(--text-soft);

    line-height: 1.75;
}


/* grid */

.abh-timeline {
    position: relative;
}


.abh-paint-track {
    display: none;
}


/* events */

.abh-events {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: clamp(12px, 1.8vw, 28px);

    align-items: start;
}


.abh-event {
    min-width: 0;

    display: flex;
    flex-direction: column;

    opacity: 0;

    transform: translateY(38px);

    transition:
        opacity .7s ease,
        transform .85s cubic-bezier(.16,1,.3,1);
}


.abh.is-visible .abh-event {
    opacity: 1;

    transform: translateY(0);
}


.abh.is-visible .abh-event-two {
    transition-delay: .13s;
}


.abh.is-visible .abh-event-three {
    transition-delay: .26s;
}


.abh.is-visible .abh-event-four {
    transition-delay: .39s;
}


/* event content */

.abh-event-body {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;

    overflow: hidden;

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

    border-radius: 22px;

    background: var(--canvas);

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


.abh-event-image {
    position: relative;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: var(--surface);
}


.abh-event-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(61,41,37,.24)
        );

    pointer-events: none;
}


.abh-event-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);
}


.abh-event:hover .abh-event-image img {
    transform: scale(1.055);
}


.abh-image-label {
    position: absolute;
    z-index: 2;

    inset-inline-start: 11px;
    bottom: 11px;

    display: inline-flex;
    align-items: center;

    min-height: 29px;

    padding: 5px 9px;

    border-radius: 8px;

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

    font-size: var(--abh-small);
    font-weight: 700;

    letter-spacing: .06em;
}


.abh-event-copy {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;

    padding: 19px 19px 21px;
}


.abh-year {
    display: block;

    margin-bottom: 7px;

    color: var(--abh-color);

    font-size: var(--abh-small);
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.abh-event-copy h3 {
    margin: 0 0 10px;

    color: var(--text);

    font-family: "DynaPuff", cursive;
    font-size: var(--abh-h3);
    font-weight: 500;
    line-height: 1.25;

    text-wrap: balance;
}


.abh-event-copy p {
    margin: 0;

    color: var(--text-soft);

    line-height: 1.68;
}


.abh-note {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: auto;
    padding-top: 13px;

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

    color: var(--text);

    font-size: var(--abh-small);
    font-weight: 700;
}


.abh-note span {
    color: var(--abh-color);

    font-size: 17px;
}


/* history ending */

.abh-footer {
    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 18px;

    margin-top: 42px;
}


.abh-footer-line {
    display: flex;
    align-items: center;
    gap: 5px;
}


.abh-footer-line span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--vermillion);
}


.abh-footer-line span:nth-child(2) {
    background: var(--saffron);
}


.abh-footer-line span:nth-child(3) {
    background: var(--aqua);
}


.abh-footer p {
    margin: 0;

    color: var(--text-soft);

    font-size: var(--abh-small);
    line-height: 1.5;
}


.abh-footer p strong {
    color: var(--text);
    font-weight: 700;
}


.abh-footer-spark {
    color: var(--aqua);

    font-family: "DynaPuff", cursive;
    font-size: 25px;

    animation:
        abhSpark 2.8s ease-in-out infinite;
}


/* ============================================================
   ANIMATION
============================================================ */

@keyframes abmvOrbit {
    to {
        transform: rotate(360deg);
    }
}


@keyframes abmvDotFloat {
    0% {
        transform: translate3d(0,0,0);
    }

    100% {
        transform: translate3d(7px,-9px,0);
    }
}


@keyframes abhSpark {
    0%,
    100% {
        transform: scale(.85) rotate(0);
        opacity: .65;
    }

    50% {
        transform: scale(1.15) rotate(90deg);
        opacity: 1;
    }
}


/* ============================================================
   375px+
============================================================ */

@media (min-width: 375px) {

    .abmv {
        --abmv-h2: 26px;
        --abmv-h3: 20px;
    }

    .abh {
        --abh-h2: 26px;
        --abh-h3: 19px;
    }

}


/* ============================================================
   425px+
============================================================ */

@media (min-width: 425px) {

    .abmv,
    .abh {
        --abmv-body: 16px;
        --abmv-small: 13px;
        --abh-body: 16px;
        --abh-small: 13px;
        --abmv-gap: 20px;
    }

    .abmv {
        --abmv-h2: 28px;
        --abmv-h3: 21px;
    }

    .abh {
        --abh-h2: 28px;
        --abh-h3: 20px;
    }

    .abmv-card-content {
        padding-inline: 24px;
    }

    .abh-event-copy {
        padding-inline: 22px;
    }

}


/* ============================================================
   HISTORY GRID — 768px+ (2 × 2)
============================================================ */

@media (min-width: 768px) {

    .abh-events {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   TABLET — 768px+
============================================================ */

@media (min-width: 768px) {

    .abmv,
    .abh {
        --abmv-gap: 24px;
    }

    .abmv {
        --abmv-h2: 30px;
        --abmv-h3: 22px;

        padding-block: 88px 92px;
    }

    .abh {
        --abh-h2: 30px;
        --abh-h3: 21px;

        padding-block: 90px 94px;
    }

    .abmv-stage {
        gap: 18px;
    }

    .abmv-card-media {
        aspect-ratio: 1.35 / 1;
    }

    .abmv-card-content {
        padding: 24px 24px 26px;
    }

    .abmv-card-content h3 {
        max-width: 17ch;
    }

    .abh-head {
        margin-bottom: 60px;
    }

    .abh-event-copy {
        padding: 21px 20px 23px;
    }

}


/* ============================================================
   LAPTOP — 1024px+
============================================================ */

@media (min-width: 1024px) {

    .abmv {
        --abmv-h2: 32px;
        --abmv-h3: 23px;
        --abmv-gap: clamp(24px, 3vw, 40px);

        padding-block: 96px 100px;
    }

    .abh {
        --abh-h2: 32px;
        --abh-h3: 22px;
        --abh-gap: clamp(24px, 3vw, 40px);

        padding-block: 96px 104px;
    }

    .abmv-stage {
        gap: clamp(18px, 2.2vw, 34px);
        margin-top: 54px;
    }

    .abmv-core {
        width: min(100%, 190px);
    }

    .abmv-card-media {
        margin-inline: 16px;
    }

    .abmv-card-content {
        padding: 24px 26px 28px;
    }

    .abh-events {
        gap: clamp(16px, 1.8vw, 30px);
    }

    .abh-event-copy {
        padding: 23px 22px 25px;
    }

}


/* ============================================================
   LAPTOP-L — 1280px+
============================================================ */

@media (min-width: 1280px) {

    .abmv {
        --abmv-h2: 34px;
        --abmv-h3: 25px;
        --abmv-body: 17px;
        --abmv-small: 14px;
        --abmv-gap: clamp(32px, 3.5vw, 48px);
    }

    .abh {
        --abh-h2: 34px;
        --abh-h3: 24px;
        --abh-body: 17px;
        --abh-small: 14px;
        --abh-gap: clamp(32px, 3.5vw, 48px);
    }

    .abmv {
        padding-block: 104px 112px;
    }

    .abh {
        padding-block: 108px 116px;
    }

    .abmv-stage {
        margin-top: 62px;
        gap: 28px;
    }

    .abmv-card-top {
        padding-inline: 22px;
    }

    .abmv-card-content {
        padding: 26px 28px 30px;
    }

    .abmv-core {
        width: 210px;
    }

    .abh-head {
        margin-bottom: 66px;
    }

    .abh-event-copy {
        padding: 25px 24px 27px;
    }

}


/* ============================================================
   DESKTOP — 1440px+
============================================================ */

@media (min-width: 1440px) {

    .abmv {
        --abmv-h2: 36px;
        --abmv-h3: 26px;
    }

    .abh {
        --abh-h2: 36px;
        --abh-h3: 25px;
    }

    .abmv-stage {
        gap: 34px;
    }

    .abmv-core {
        width: 225px;
    }

}


/* ============================================================
   MOBILE — REORGANISE, DON'T SHRINK
============================================================ */

@media (max-width: 767px) {

    .abmv {
        padding-block: 58px 64px;
    }

    .abh {
        padding-block: 62px 68px;
    }

    .abmv-head,
    .abh-head {
        text-align: center;
    }

    .abmv-head h2,
    .abh-head h2 {
        max-width: 100%;
    }

    .abmv-head > p {
        max-width: 34em;
    }

    .abmv-stage {
        display: flex;
        flex-direction: column;

        margin-top: 34px;
    }

    .abmv-card {
        width: 100%;
    }

    .abmv-core {
        order: 2;

        width: 130px;

        margin-block: 2px;
    }

    .abmv-card-mission {
        order: 1;
    }

    .abmv-card-vision {
        order: 3;
    }

    .abmv-core-spark {
        width: 60px;
        height: 60px;
    }

    .abmv-core-word {
        font-size: 12px;
    }

    .abmv-card-content {
        padding: 20px 20px 22px;
    }

    .abmv-card-content h3 {
        max-width: 100%;
    }

    .abmv-values {
        margin-top: 8px;
    }

    .abmv-path {
        margin-top: 30px;
    }

    .abmv-path-line {
        height: 38px;
    }


    /* history mobile */

    .abh-head {
        display: block;

        margin-bottom: 36px;
    }

    .abh-intro {
        max-width: 38em;

        margin: 18px auto 0;
    }

    .abh-events {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        gap: 24px;
    }

    .abh-event-body {
        width: auto;
        margin-inline: 16px;
    }

    .abh-event-image {
        aspect-ratio: 1.45 / 1;
    }

    .abh-footer {
        grid-template-columns: 1fr auto;

        gap: 12px;
    }

    .abh-footer-line {
        grid-column: 1 / -1;
    }

}


/* ============================================================
   VERY SMALL MOBILE — 320–374px
============================================================ */

@media (max-width: 374px) {

    .abmv {
        --abmv-h2: 24px;
        --abmv-h3: 19px;
        --abmv-body: 15px;
        --abmv-small: 12px;
    }

    .abh {
        --abh-h2: 24px;
        --abh-h3: 18px;
        --abh-body: 15px;
        --abh-small: 12px;
    }

    .abmv-card-top {
        padding-inline: 14px;
    }

    .abmv-card-content {
        padding-inline: 16px;
    }

    .abmv-values {
        gap: 4px;
    }

    .abmv-values li {
        padding-inline: 5px;
    }

    .abh-event-copy {
        padding-inline: 16px;
    }

}


/* ============================================================
   5–6 INCH PHONES — 480px+  (HISTORY 2 COLUMNS)
============================================================ */

@media (min-width: 480px) and (max-width: 767px) {

    .abh-events {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   HISTORY IMAGE PADDING — SMALL AND MEDIUM PHONES
============================================================ */

@media (min-width: 375px) and (max-width: 424px) {

    .abh-event-body {
        margin-inline: 19px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .abmv *,
    .abmv *::before,
    .abmv *::after,
    .abh *,
    .abh *::before,
    .abh *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .abmv-card,
    .abmv-core-spark,
    .abh-event {
        transform: none !important;
        opacity: 1 !important;
    }

    .abmv-path-line path {
        stroke-dashoffset: 0 !important;
    }
}

/* =========================================================
   MIX N MUSE - CONTACT BANNER (additive; classes .cb-, tokens scoped to .cb)
========================================================= */
.cb{--fs-h1:32px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.45,0,.25,1);--mx:0;--my:0;--sy:0;position:relative;z-index:3;isolation:isolate;display:flex;min-height:75vh;padding-top:96px;overflow:hidden;background:var(--canvas);font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--text)}
.cb,.cb *,.cb *::before,.cb *::after{box-sizing:border-box}
:where(.cb) :where(a,button){font:inherit;color:inherit;text-decoration:none;cursor:pointer}
:where(.cb) button{border:0;background:none;padding:0}
:where(.cb) img{display:block;max-width:100%}
.cb :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cb h1{font-family:"DynaPuff",cursive;font-weight:500;font-size:var(--fs-h1);line-height:1.15;margin:0;color:var(--text);text-wrap:balance;overflow-wrap:anywhere}

/* background: blobs + dotted grid */
.cb-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle,var(--border) 1px,transparent 1.5px) 0 0/26px 26px;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.cb-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.38;animation:cbDrift 14s ease-in-out infinite alternate}
.cb-b1{width:44vmax;height:44vmax;background:var(--apricot);top:-16vmax;inset-inline-start:-12vmax}
.cb-b2{width:36vmax;height:36vmax;background:var(--aqua);bottom:-12vmax;inset-inline-end:-10vmax;animation-delay:-5s}
.cb-b3{width:22vmax;height:22vmax;background:var(--saffron);top:32%;inset-inline-end:30%;opacity:.28;animation-delay:-9s}
@keyframes cbDrift{to{transform:translate3d(5vmax,4vmax,0) scale(1.15)}}

/* intro: two painted studio doors swing apart (CSS only, so content never depends on JS) */
.cb-door{position:absolute;top:0;bottom:0;z-index:9;width:50.5%;pointer-events:none}
.cb-dl{left:0;background:var(--vermillion);animation:cbDoorL 1.3s .25s cubic-bezier(.7,0,.2,1) both}
.cb-dr{left:auto;right:0;background:var(--aqua);animation:cbDoorR 1.3s .25s cubic-bezier(.7,0,.2,1) both}
.cb-door::after{content:"";position:absolute;bottom:-15px;left:0;right:0;height:16px;background:radial-gradient(circle at 11px 0,currentColor 10px,transparent 11px) 0 0/24px 16px repeat-x}
.cb-dl{color:var(--vermillion)}.cb-dr{color:var(--aqua)}
@keyframes cbDoorL{to{transform:translateX(-102%);visibility:hidden}}
@keyframes cbDoorR{to{transform:translateX(102%);visibility:hidden}}

.cb-in{position:relative;z-index:2;width:100%;max-width:1400px;margin-inline:auto;padding:28px var(--gutter) 84px;display:grid;gap:28px;align-content:center;align-items:center}
.cb-copy,.cb-stage{min-width:0}
.cb-copy{transform:translateY(calc(var(--sy) * -28px))}
.cb-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;font-size:var(--fs-small);font-weight:600;color:var(--text-soft)}
.cb-crumb a{color:var(--text-soft)}.cb-crumb a:hover{color:var(--vermillion)}
.cb-hi{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:5px 14px 5px 10px;border:1.5px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:700;min-width:116px;opacity:0;animation:cbFade .7s 1.3s both}
.cb-hi i{width:9px;height:9px;border-radius:50%;background:var(--vermillion);flex:none;animation:cbPing 2s infinite}
@keyframes cbPing{0%{box-shadow:0 0 0 0 var(--vermillion)}70%,100%{box-shadow:0 0 0 8px transparent}}
.cb-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.cb-w>span{display:inline-block;transform:translateY(110%) rotate(8deg);animation:cbUp .9s calc(var(--i) * .1s + 1.2s) cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes cbUp{to{transform:none}}
.cb-hl>span{position:relative;color:var(--vermillion)}
.cb-hl svg{position:absolute;inset-inline:0;bottom:-.06em;width:100%;height:.28em;overflow:visible}
.cb-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:cbDraw 1s 2.2s ease forwards}
@keyframes cbDraw{to{stroke-dashoffset:0}}
.cb-lead{max-width:30em;margin:16px 0 0;color:var(--text-soft);opacity:0;animation:cbFade .8s 1.9s forwards}
.cb-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;opacity:0;animation:cbFade .8s 2.1s forwards}
.cb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none;opacity:0;animation:cbFade .8s 2.3s forwards}
.cb-chips li{padding:6px 12px;border-radius:99px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.3}
@keyframes cbFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cb-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;text-align:center;transition:transform .3s,color .3s}
.cb-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.cb-btn:hover{transform:translateY(-3px)}.cb-btn:hover::before{transform:scaleX(1)}
.cb-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}.cb-btn:hover svg{transform:translateX(5px)}
.cb-btn-primary{background:var(--btn-bg);color:var(--btn-text)}.cb-btn-primary::before{background:var(--btn-hover)}
.cb-btn-ghost{border-color:var(--text);color:var(--text)}.cb-btn-ghost::before{background:var(--saffron)}.cb-btn-ghost:hover{color:var(--on-pigment)}

/* stage: arch window, art orbit, polaroids, hanging sign */
.cb-stage{display:flex;justify-content:center;direction:ltr}
.cb-orb{position:relative;width:min(100%,340px);aspect-ratio:1;flex:none}
.cb-px{--d:1;translate:calc(var(--mx) * var(--d) * 16px) calc(var(--my) * var(--d) * 14px)}
.cb-ring{position:absolute;inset:2%;border-radius:50%;border:2.5px dashed var(--aqua);opacity:.7;animation:cbSpin 45s linear infinite}
.cb-bd{position:absolute;z-index:3;width:clamp(34px,12%,46px);aspect-ratio:1;margin:calc(clamp(34px,12%,46px) / -2);display:grid;place-items:center;border-radius:50%;background:var(--surface);border:1.5px solid var(--border-strong);box-shadow:var(--shadow);animation:cbOrbit 45s linear infinite,cbPop .8s both cubic-bezier(.3,1.8,.5,1)}
.cb-bd svg{width:56%;stroke:var(--c)}
.cb-bd1{top:0;left:50%;animation-delay:0s,1.7s}.cb-bd2{top:50%;left:100%;animation-delay:0s,1.85s}.cb-bd3{top:100%;left:50%;animation-delay:0s,2s}.cb-bd4{top:50%;left:0;animation-delay:0s,2.15s}
@keyframes cbSpin{to{transform:rotate(360deg)}}
@keyframes cbOrbit{to{rotate:-360deg}}
@keyframes cbPop{from{scale:0}}
.cb-arch{position:absolute;z-index:2;left:50%;top:50%;width:58%;height:76%;margin:0;transform:translate(-50%,-50%);overflow:hidden;border-radius:999px 999px 16px 16px;border:6px solid var(--surface);background:var(--surface-soft);box-shadow:var(--shadow);clip-path:inset(100% 0 0 0);animation:cbWipe 1.3s 1.6s cubic-bezier(.2,.9,.2,1) forwards;cursor:pointer}
@keyframes cbWipe{to{clip-path:inset(0)}}
.cb-ly{position:absolute;inset:0}
.cb-ly img{width:100%;height:100%;object-fit:cover;animation:cbKb 14s ease-in-out infinite alternate}
@keyframes cbKb{from{scale:1.02}to{scale:1.12}}
.cb-nx{clip-path:circle(0% at 50% 50%)}
.cb-cap{position:absolute;z-index:2;inset-inline:0;bottom:0;padding:6px 8px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.3;text-align:center}
.cb-pol{position:absolute;z-index:4;margin:0;width:26%;padding:4% 4% 10%;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow);opacity:0;animation:cbPolIn .9s both cubic-bezier(.3,1.5,.4,1)}
.cb-pol img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.cb-p1{left:-2%;bottom:4%;rotate:-8deg;animation-delay:2s}.cb-p2{right:-3%;bottom:20%;rotate:7deg;animation-delay:2.2s}
@keyframes cbPolIn{from{opacity:0;transform:translateY(30px) scale(.7)}to{opacity:1}}
.cb-sign{position:absolute;z-index:5;top:-3%;right:0;width:clamp(96px,32%,130px);transform-origin:50% 0;opacity:0;animation:cbDrop .9s 2.4s both cubic-bezier(.3,1.5,.4,1),cbSwing 4.6s 3.3s ease-in-out infinite alternate}
.cb-str{position:absolute;left:50%;top:-16px;width:2px;height:22px;margin-left:-1px;background:var(--text)}
.cb-board{margin-top:6px;padding:8px 8px 9px;border:2px solid var(--text);border-radius:12px;background:var(--saffron);color:var(--on-pigment);font-family:"DynaPuff",cursive;font-weight:500;font-size:var(--fs-small);line-height:1.2;text-align:center}
@keyframes cbDrop{from{opacity:0;transform:translateY(-110px)}to{opacity:1;transform:none}}
@keyframes cbSwing{from{rotate:-7deg}to{rotate:7deg}}
.cb-spk{position:absolute;z-index:1;width:clamp(18px,7%,30px);fill:var(--c);animation:cbTw 3s ease-in-out infinite}
@keyframes cbTw{0%,100%{transform:scale(.6) rotate(0);opacity:.55}50%{transform:scale(1.15) rotate(25deg);opacity:1}}
.cb-sp2{position:absolute;z-index:6;border-radius:50% 45% 55% 50%;pointer-events:none}

/* greetings ribbon */
.cb-mq{position:absolute;z-index:4;inset-inline:0;bottom:12px;overflow:hidden;background:var(--saffron);color:var(--on-pigment);border-block:2px solid var(--text);transform:rotate(-1.2deg) scaleX(1.04)}
.cb-track{display:flex;align-items:center;gap:18px;width:max-content;padding:7px 0;animation:cbMq 28s linear infinite}
.cb-track span{font-family:"DynaPuff",cursive;font-weight:500;font-size:clamp(16px,3.2vw,22px);line-height:1.3;white-space:nowrap;color:var(--on-pigment)}
.cb-sp{width:16px;height:16px;flex:none;background:var(--vermillion);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:cbSpin 6s linear infinite}
@keyframes cbMq{to{transform:translateX(-50%)}}

/* ---------- responsive: 320 / 375 / 425 / 768 / 1024 / 1280 / 1440 ---------- */
@media(max-width:767px){.cb-chips{display:none}.cb-stage{margin-top:22px}.cb-orb{width:min(100%,340px)}}
@media(min-width:375px){.cb{--fs-h1:34px}}
@media(min-width:425px){.cb{--fs-h1:38px;--fs-body:16px;--fs-small:13px;--fs-btn:15px;--gutter:20px}.cb-orb{width:min(100%,380px)}}
@media(min-width:768px){
  .cb{--fs-h1:38px;--gutter:24px;height:75vh;min-height:620px;padding-top:104px}
  .cb-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;padding-block:16px 76px}
  .cb-orb{width:min(100%,calc(max(75vh,620px) - 215px),520px)}
}
@media(min-width:1024px){
  .cb{--fs-h1:44px;--gutter:clamp(24px,3vw,40px)}
  .cb-in{gap:clamp(24px,4vw,64px)}
  .cb-chips{display:flex}
  .cb-orb{width:min(100%,calc(max(75vh,620px) - 215px),560px)}
}
@media(min-width:1280px){.cb{--fs-h1:48px;--fs-body:17px;--fs-small:14px;--fs-btn:16px;--gutter:clamp(32px,3.5vw,48px)}}
@media(min-width:1440px){.cb{--fs-h1:52px}}
@media(max-width:374px){.cb-btn{width:100%}.cb-sign{width:92px}.cb-board{font-size:11px}}
@media(prefers-reduced-motion:reduce){
  .cb-door{display:none}
  .cb *,.cb *::before,.cb *::after{animation-duration:.01s!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01s!important}
  .cb-track{animation:none!important}
}

/* ============================================================
   MIX N MUSE — CONTACT PAGE
   CONTACT INFORMATION + MESSAGE FORM + USA MAP
   SECTION SCOPED ONLY
============================================================ */

.ct-info,
.ct-message,
.ct-map {
    --ct-ease: cubic-bezier(.22, .8, .24, 1);
    --ct-radius: 28px;

    position: relative;
    width: 100%;
    overflow: hidden;

    font-family: "Manrope", sans-serif;
    color: var(--text);
    background: var(--canvas);
}

.ct-info *,
.ct-info *::before,
.ct-info *::after,
.ct-message *,
.ct-message *::before,
.ct-message *::after,
.ct-map *,
.ct-map *::before,
.ct-map *::after {
    box-sizing: border-box;
}

.ct-info :where(h2, h3, p),
.ct-message :where(h2, h3, p),
.ct-map :where(h2, h3, p) {
    margin: 0;
}

.ct-info :where(a),
.ct-message :where(a),
.ct-map :where(a) {
    color: inherit;
    text-decoration: none;
}

.ct-info :where(button, input, select, textarea),
.ct-message :where(button, input, select, textarea),
.ct-map :where(button, input, select, textarea) {
    font: inherit;
}


/* ============================================================
   SHARED CONTAINER
============================================================ */

.ct-container {
    width: min(
        calc(100% - 32px),
        1400px
    );

    margin-inline: auto;
}


/* ============================================================
   SHARED EYEBROW
============================================================ */

.ct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 32px;

    padding: 6px 13px 6px 9px;

    border: 1.5px solid var(--border-strong);
    border-radius: 999px;

    background: var(--surface);

    color: var(--text);

    font-size: var(--fs-small, 12px);
    font-weight: 700;
    line-height: 1.25;

    letter-spacing: .055em;
    text-transform: uppercase;
}

.ct-eyebrow-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--vermillion);

    box-shadow:
        0 0 0 5px color-mix(
            in srgb,
            var(--vermillion) 14%,
            transparent
        );

    animation: ctEyebrowPulse 2.5s ease-in-out infinite;
}


/* ============================================================
   01 — CONTACT INFORMATION
============================================================ */

.ct-info {
    isolation: isolate;

    padding-block: clamp(72px, 8vw, 120px);
}

.ct-info-bg {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;
}

.ct-info-dot {
    position: absolute;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: var(--saffron);

    opacity: .9;

    animation:
        ctFloat 5s ease-in-out infinite;
}

.ct-info-dot-1 {
    top: 16%;
    inset-inline-start: 7%;
}

.ct-info-dot-2 {
    top: 62%;
    inset-inline-end: 8%;

    width: 15px;
    height: 15px;

    background: var(--aqua);

    animation-delay: -2s;
}

.ct-info-dot-3 {
    bottom: 10%;
    inset-inline-start: 35%;

    width: 8px;
    height: 8px;

    background: var(--coral);

    animation-delay: -3.5s;
}

.ct-info-orbit {
    position: absolute;

    width: 320px;
    aspect-ratio: 1;

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

    border-radius: 50%;

    opacity: .55;

    animation: ctOrbitSpin 28s linear infinite;
}

.ct-info-orbit-1 {
    top: 7%;
    inset-inline-end: -100px;
}

.ct-info-orbit-2 {
    bottom: -150px;
    inset-inline-start: -100px;

    width: 420px;

    animation-direction: reverse;
    animation-duration: 36s;
}


/* HEADING */

.ct-info-heading {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, .72fr);

    gap: clamp(30px, 6vw, 100px);

    align-items: end;

    margin-bottom: clamp(46px, 6vw, 78px);
}

.ct-info-heading h2 {
    max-width: 700px;

    margin-top: 16px;

    font-family: "DynaPuff", cursive;
    font-weight: 500;

    font-size: clamp(32px, 4.1vw, 52px);
    line-height: 1.12;

    letter-spacing: -.025em;
}

.ct-info-heading h2 span {
    display: block;

    color: var(--vermillion);
}

.ct-info-intro {
    max-width: 430px;

    justify-self: end;

    color: var(--text-soft);

    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.75;
}


/* CONTACT STAGE */

.ct-contact-stage {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(280px, .85fr)
        minmax(0, 1.5fr);

    gap: clamp(42px, 7vw, 110px);

    align-items: center;

    min-height: 410px;

    padding: clamp(26px, 4vw, 52px);

    border-block:
        1.5px solid var(--border-strong);
}


/* ORBIT */

.ct-orbit-wrap {
    position: relative;

    width: min(100%, 390px);
    aspect-ratio: 1;

    margin-inline: auto;

    display: grid;
    place-items: center;
}

.ct-orbit-ring {
    position: absolute;
    inset: 8%;

    border: 1.5px dashed var(--border-strong);

    border-radius: 50%;

    animation: ctOrbitSpin 25s linear infinite;
}

.ct-orbit-ring-two {
    inset: 21%;

    border-style: solid;

    border-color: color-mix(
        in srgb,
        var(--aqua) 42%,
        transparent
    );

    animation-direction: reverse;
    animation-duration: 18s;
}

.ct-orbit-center {
    position: relative;

    display: grid;
    place-items: center;

    width: 128px;
    height: 128px;

    border-radius: 50%;

    background: var(--surface);

    border: 2px solid var(--border-strong);

    color: var(--vermillion);

    box-shadow: var(--shadow);

    animation: ctCenterFloat 4.5s ease-in-out infinite;
}

.ct-orbit-center svg {
    position: relative;
    z-index: 2;

    width: 48px;
    height: 48px;
}

.ct-orbit-paint {
    position: absolute;

    width: 72px;
    height: 38px;

    border-radius: 50% 42% 48% 38%;

    background: var(--saffron);

    opacity: .42;

    transform: rotate(-24deg);

    animation: ctPaintPulse 3.2s ease-in-out infinite;
}

.ct-orbit-dot {
    position: absolute;

    width: 18px;
    height: 18px;

    margin: -9px;

    border-radius: 50%;

    background: var(--vermillion);

    box-shadow:
        0 0 0 7px color-mix(
            in srgb,
            var(--vermillion) 12%,
            transparent
        );

    animation: ctOrbitDot 10s linear infinite;
}

.ct-orbit-dot-one {
    top: 8%;
    left: 50%;
}

.ct-orbit-dot-two {
    top: 50%;
    right: 8%;

    background: var(--aqua);

    animation-delay: -3.3s;
}

.ct-orbit-dot-three {
    bottom: 8%;
    left: 50%;

    background: var(--saffron);

    animation-delay: -6.6s;
}


/* CONTACT LIST */

.ct-contact-list {
    position: relative;

    display: grid;

    border-top: 1.5px solid var(--border-strong);
}

.ct-contact-item {
    position: relative;

    display: grid;

    grid-template-columns:
        34px
        52px
        minmax(0, 1fr)
        30px;

    gap: 15px;

    align-items: center;

    min-height: 105px;

    padding: 17px 4px;

    border-bottom: 1.5px solid var(--border-strong);

    transition:
        background-color .35s var(--ct-ease),
        padding-inline .35s var(--ct-ease);
}

.ct-contact-item::before {
    content: "";

    position: absolute;

    inset-block: 0;
    inset-inline-start: 0;

    width: 4px;

    background: var(--c);

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform .4s var(--ct-ease);
}

.ct-contact-item:hover {
    padding-inline: 14px;

    background: color-mix(
        in srgb,
        var(--c) 7%,
        transparent
    );
}

.ct-contact-item:hover::before {
    transform: scaleY(1);
}

.ct-contact-number {
    color: var(--text-soft);

    font-family: "DynaPuff", cursive;
    font-size: 15px;
}

.ct-contact-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: color-mix(
        in srgb,
        var(--c) 16%,
        var(--surface)
    );

    color: var(--c);

    transition:
        transform .35s var(--ct-ease),
        background-color .35s;
}

.ct-contact-icon svg {
    width: 22px;
    height: 22px;
}

.ct-contact-item:hover .ct-contact-icon {
    transform: rotate(-8deg) scale(1.08);

    background: var(--c);

    color: var(--on-pigment);
}

.ct-contact-copy {
    min-width: 0;

    display: grid;

    gap: 4px;
}

.ct-contact-label {
    color: var(--text-soft);

    font-size: var(--fs-small, 12px);
    font-weight: 700;

    letter-spacing: .09em;
}

.ct-contact-copy strong {
    overflow-wrap: anywhere;

    color: var(--text);

    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 700;

    line-height: 1.35;
}

.ct-contact-copy small {
    color: var(--text-soft);

    font-size: var(--fs-small, 12px);
    line-height: 1.45;
}

.ct-contact-arrow {
    color: var(--c);

    font-size: 23px;

    transition: transform .35s var(--ct-ease);
}

.ct-contact-item:hover .ct-contact-arrow {
    transform: translateX(5px);
}

.ct-contact-phone {
    --c: var(--vermillion);
}

.ct-contact-email {
    --c: var(--aqua);
}

.ct-contact-location {
    --c: var(--saffron);
}


/* FOOTER STRIP */

.ct-info-footer {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 34px;

    color: var(--text-soft);

    font-size: var(--fs-small, 12px);
    font-weight: 700;

    letter-spacing: .03em;
}

.ct-info-footer i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--vermillion);
}


/* ============================================================
   02 — MESSAGE FORM
============================================================ */

.ct-message {
    padding-block: clamp(70px, 8vw, 115px);

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--surface-soft) 92%, var(--vermillion)),
            var(--surface-soft)
        );
}

.ct-message::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    inset-inline-end: -130px;

    border-radius: 50%;

    border: 1px solid color-mix(
        in srgb,
        var(--vermillion) 25%,
        transparent
    );

    animation: ctOrbitSpin 30s linear infinite;
}

.ct-message-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr);

    gap: clamp(40px, 7vw, 100px);

    align-items: stretch;
}


/* LEFT */

.ct-message-copy {
    display: flex;
    flex-direction: column;

    min-height: 100%;

    padding-block: 8px;
}

.ct-message-copy h2 {
    max-width: 570px;

    margin-top: 16px;

    font-family: "DynaPuff", cursive;
    font-weight: 500;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.14;

    letter-spacing: -.025em;
}

.ct-message-copy h2 span {
    display: block;

    color: var(--vermillion);
}

.ct-message-lead {
    max-width: 540px;

    margin-top: 18px !important;

    color: var(--text-soft);

    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.75;
}


/* POINTS */

.ct-message-list {
    display: grid;

    margin-top: 30px;

    border-top: 1.5px solid var(--border-strong);
}

.ct-message-point {
    display: grid;

    grid-template-columns: 36px 1fr;

    gap: 12px;

    align-items: center;

    min-height: 58px;

    border-bottom: 1.5px solid var(--border);

    color: var(--text);
}

.ct-message-point span {
    color: var(--vermillion);

    font-family: "DynaPuff", cursive;
    font-size: 13px;
}

.ct-message-point p {
    color: var(--text);

    font-size: var(--fs-body, 15px);
    line-height: 1.45;
}


/* RESPONSE */

.ct-response-note {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: auto;
    padding-top: 28px;
}

.ct-response-mark {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;

    background: var(--saffron);

    color: var(--on-pigment);

    animation: ctStarSpin 7s linear infinite;
}

.ct-response-note strong {
    display: block;

    color: var(--text);

    font-size: var(--fs-small, 12px);
    letter-spacing: .08em;
}

.ct-response-note p {
    margin-top: 3px !important;

    color: var(--text-soft);

    font-size: var(--fs-small, 12px);
}


/* FORM */

.ct-form-wrap {
    position: relative;

    min-width: 0;

    padding: clamp(22px, 3vw, 34px);

    background: var(--surface);

    border:
        1.5px solid
        var(--border-strong);

    border-radius: var(--ct-radius);

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

.ct-form-wrap::before {
    content: "";

    position: absolute;

    top: -3px;
    inset-inline-start: 9%;

    width: 82%;

    height: 5px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--vermillion) 0 30%,
            var(--saffron) 30% 55%,
            var(--aqua) 55% 78%,
            var(--coral) 78%
        );

    transform-origin: left center;

    animation: ctFormPaint 1.2s var(--ct-ease) both;
}

.ct-form-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 1.5px solid var(--border-strong);

    color: var(--text);

    font-size: var(--fs-small, 12px);
    font-weight: 700;

    letter-spacing: .08em;
}

.ct-form-required {
    color: var(--text-soft);

    font-size: 11px;

    letter-spacing: .03em;
}


/* FORM ROW */

.ct-form-row {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.ct-field {
    position: relative;

    min-width: 0;

    margin-top: 21px;
}

.ct-field label {
    display: block;

    margin-bottom: 8px;

    color: var(--text);

    font-size: var(--fs-small, 12px);
    font-weight: 700;

    line-height: 1.4;
}

.ct-field label span {
    color: var(--vermillion);
}

.ct-field input,
.ct-field select,
.ct-field textarea {
    display: block;

    width: 100%;

    border: 0;
    border-bottom: 1.5px solid var(--border-strong);

    border-radius: 0;

    outline: 0;

    padding:
        10px
        2px
        11px;

    background: transparent;

    color: var(--text);

    font-size: var(--fs-body, 15px);
    line-height: 1.5;

    transition:
        border-color .25s,
        box-shadow .25s,
        background-color .25s;
}

.ct-field input::placeholder,
.ct-field textarea::placeholder {
    color: var(--text-soft);

    opacity: .72;
}

.ct-field select {
    cursor: pointer;
}

.ct-field textarea {
    min-height: 142px;

    resize: vertical;
}

.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
    border-bottom-color: var(--vermillion);

    box-shadow:
        0 3px 0 -1px var(--vermillion);
}

.ct-field.is-invalid input,
.ct-field.is-invalid select,
.ct-field.is-invalid textarea {
    border-bottom-color: var(--vermillion);

    box-shadow:
        0 3px 0 -1px var(--vermillion);
}

.ct-field.is-valid input,
.ct-field.is-valid select,
.ct-field.is-valid textarea {
    border-bottom-color: var(--aqua);
}

.ct-error {
    display: block;

    min-height: 0;

    margin-top: 6px;

    color: var(--vermillion);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.35;
}

.ct-field.is-invalid {
    animation: ctFieldShake .28s ease;
}


/* FORM BOTTOM */

.ct-form-bottom {
    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 20px;

    align-items: center;

    margin-top: 26px;
}

.ct-form-bottom p {
    max-width: 330px;

    color: var(--text-soft);

    font-size: 11px;
    line-height: 1.55;
}


/* SUBMIT */

.ct-submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 12px 20px;

    border: 2px solid transparent;
    border-radius: 13px;

    background: var(--btn-bg);
    color: var(--btn-text);

    cursor: pointer;

    font-size: var(--fs-btn, 14px);
    font-weight: 700;

    line-height: 1.2;

    transition:
        transform .3s var(--ct-ease),
        background-color .3s;
}

.ct-submit::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    background: var(--btn-hover);

    transform: scaleX(0);

    transform-origin: left center;

    transition: transform .45s var(--ct-ease);
}

.ct-submit:hover {
    transform: translateY(-3px);
}

.ct-submit:hover::before {
    transform: scaleX(1);
}

.ct-submit svg {
    width: 18px;
    height: 18px;

    transition: transform .3s var(--ct-ease);
}

.ct-submit:hover svg {
    transform: translateX(5px);
}

.ct-submit:focus-visible,
.ct-map-cta:focus-visible,
.ct-map-link:focus-visible,
.ct-contact-item:focus-visible {
    outline: 3px solid var(--focus, var(--text));
    outline-offset: 4px;
}

.ct-submit-success {
    display: none;
}

.ct-form.is-sent .ct-submit-text {
    display: none;
}

.ct-form.is-sent .ct-submit-success {
    display: inline;
}

.ct-form.is-sent .ct-submit {
    background: var(--aqua);
    color: var(--on-pigment);
}

.ct-form-status {
    min-height: 20px;

    margin-top: 12px;

    color: var(--text-soft);

    font-size: var(--fs-small, 12px);
    line-height: 1.45;
}


/* ============================================================
   03 — USA MAP
============================================================ */

.ct-map {
    padding-block: clamp(72px, 8vw, 120px);
}

.ct-map-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, .75fr);

    gap: clamp(30px, 6vw, 100px);

    align-items: end;

    margin-bottom: 48px;
}

.ct-map-heading h2 {
    max-width: 680px;

    margin-top: 16px;

    font-family: "DynaPuff", cursive;
    font-weight: 500;

    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.14;
}

.ct-map-heading h2 span {
    display: block;

    color: var(--vermillion);
}

.ct-map-heading > p {
    max-width: 450px;

    justify-self: end;

    color: var(--text-soft);

    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.75;
}


/* MAP LAYOUT */

.ct-map-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, .65fr);

    gap: 0;

    border:
        1.5px solid
        var(--border-strong);

    border-radius: var(--ct-radius);

    overflow: hidden;

    background: var(--surface);

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


/* MAP */

.ct-map-frame {
    position: relative;

    min-height: 510px;

    overflow: hidden;

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

.ct-map-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 510px;

    border: 0;

    filter:
        saturate(.72)
        contrast(.96);

    transition: filter .5s;
}

.ct-map-frame:hover iframe {
    filter:
        saturate(.92)
        contrast(1);
}

.ct-map-label {
    position: absolute;

    z-index: 4;

    left: 22px;
    bottom: 20px;

    padding: 8px 12px;

    border:
        1.5px solid
        var(--border-strong);

    border-radius: 999px;

    background: var(--surface);

    color: var(--text);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .05em;
}


/* MAP PIN */

.ct-map-pin {
    position: absolute;

    z-index: 5;

    top: 45%;
    left: 50%;

    display: flex;

    align-items: center;

    gap: 8px;

    transform: translate(-50%, -50%);

    padding: 8px 12px 8px 8px;

    border:
        1.5px solid
        var(--border-strong);

    border-radius: 999px;

    background: var(--surface);

    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .05em;

    box-shadow: var(--shadow);

    animation: ctMapPinFloat 4s ease-in-out infinite;
}

.ct-map-pin-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--vermillion);

    color: var(--on-pigment);
}

.ct-map-pin-icon svg {
    width: 19px;
    height: 19px;
}

.ct-map-pin-pulse {
    position: absolute;

    left: 25px;
    top: 25px;

    width: 34px;
    height: 34px;

    margin: -17px;

    border-radius: 50%;

    border: 2px solid var(--vermillion);

    opacity: 0;

    animation: ctMapPulse 2.4s ease-out infinite;
}


/* DECORATION */

.ct-map-sun {
    position: absolute;

    z-index: 3;

    top: 28px;
    inset-inline-end: 35px;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: var(--saffron);

    opacity: .88;

    pointer-events: none;

    animation: ctSunFloat 5s ease-in-out infinite;
}

.ct-map-sun span {
    position: absolute;

    inset: -12px;

    border: 1px dashed var(--saffron);

    border-radius: 50%;

    animation: ctSunSpin 12s linear infinite;
}


/* MAP DETAILS */

.ct-map-details {
    display: flex;

    flex-direction: column;

    padding: clamp(25px, 3vw, 42px);

    background: var(--surface);

    border-inline-start:
        1.5px solid
        var(--border-strong);
}

.ct-map-detail-head {
    display: flex;

    gap: 17px;

    align-items: flex-start;
}

.ct-map-detail-number {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;

    background: var(--vermillion);

    color: var(--on-pigment);

    font-family: "DynaPuff", cursive;
    font-size: 14px;
}

.ct-map-detail-head > div {
    min-width: 0;
}

.ct-map-detail-head span:not(.ct-map-detail-number) {
    color: var(--text-soft);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;
}

.ct-map-detail-head h3 {
    margin-top: 5px;

    color: var(--text);

    font-family: "DynaPuff", cursive;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    line-height: 1.2;
}

.ct-map-rule {
    width: 100%;
    height: 1.5px;

    margin-block: 25px;

    background:
        linear-gradient(
            90deg,
            var(--vermillion),
            var(--saffron),
            var(--aqua),
            transparent
        );
}

.ct-map-detail-block {
    padding-block: 17px;

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

.ct-map-detail-block > span {
    display: block;

    margin-bottom: 6px;

    color: var(--text-soft);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;
}

.ct-map-detail-block strong {
    display: block;

    color: var(--text);

    font-size: var(--fs-body, 15px);
    line-height: 1.45;
}

.ct-map-detail-block p {
    margin-top: 4px;

    color: var(--text-soft);

    font-size: var(--fs-small, 12px);
    line-height: 1.55;
}

.ct-map-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.ct-map-tags span {
    padding: 6px 9px;

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

    border-radius: 999px;

    background: var(--surface-soft);

    color: var(--text);

    font-size: 11px;
    font-weight: 700;
}

.ct-map-link {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    width: 100%;

    margin-top: auto;
    padding-top: 24px;

    color: var(--vermillion) !important;

    font-size: var(--fs-btn, 14px);
    font-weight: 700;

    border: 0;

    transition: gap .3s var(--ct-ease);
}

.ct-map-link:hover {
    gap: 17px;
}

.ct-map-link svg {
    width: 18px;
    height: 18px;
}


/* BOTTOM CTA */

.ct-map-bottom {
    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 30px;

    align-items: center;

    margin-top: 30px;

    padding:
        clamp(23px, 3vw, 32px)
        clamp(25px, 4vw, 45px);

    border-radius: 22px;

    background: var(--vermillion);

    color: var(--on-pigment);
}

.ct-map-bottom-kicker {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .1em;
}

.ct-map-bottom p {
    max-width: 720px;

    color: var(--on-pigment);

    font-family: "DynaPuff", cursive;
    font-size: clamp(17px, 1.6vw, 22px);
    font-weight: 500;

    line-height: 1.35;
}

.ct-map-cta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 12px 19px;

    border: 2px solid var(--on-pigment);
    border-radius: 13px;

    background: var(--surface);

    color: var(--text) !important;

    font-size: var(--fs-btn, 14px);
    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .3s var(--ct-ease),
        background-color .3s,
        color .3s;
}

.ct-map-cta:hover {
    transform: translateY(-3px);

    background: var(--saffron);

    color: var(--on-pigment) !important;
}

.ct-map-cta svg {
    width: 18px;
    height: 18px;

    transition: transform .3s;
}

.ct-map-cta:hover svg {
    transform: translateX(5px);
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes ctEyebrowPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px
            color-mix(
                in srgb,
                var(--vermillion) 10%,
                transparent
            );
    }

    50% {
        box-shadow:
            0 0 0 8px
            color-mix(
                in srgb,
                var(--vermillion) 3%,
                transparent
            );
    }
}

@keyframes ctFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -14px, 0);
    }
}

@keyframes ctOrbitSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ctCenterFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes ctPaintPulse {

    0%,
    100% {
        transform: rotate(-24deg) scale(.9);
    }

    50% {
        transform: rotate(-17deg) scale(1.08);
    }
}

@keyframes ctOrbitDot {
    from {
        transform: rotate(0deg)
                   translateX(155px)
                   rotate(0deg);
    }

    to {
        transform: rotate(360deg)
                   translateX(155px)
                   rotate(-360deg);
    }
}

@keyframes ctStarSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ctFormPaint {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes ctFieldShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

@keyframes ctMapPinFloat {

    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, calc(-50% - 7px));
    }
}

@keyframes ctMapPulse {

    0% {
        transform: scale(.6);
        opacity: .7;
    }

    75%,
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes ctSunFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes ctSunSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   MOBILE-S
============================================================ */

@media (max-width: 374px) {

    .ct-container {
        width: min(
            calc(100% - 26px),
            1400px
        );
    }

    .ct-info,
    .ct-message,
    .ct-map {
        padding-block: 58px;
    }

    .ct-info-heading,
    .ct-map-heading {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .ct-info-heading h2,
    .ct-message-copy h2,
    .ct-map-heading h2 {
        font-size: 32px;
    }

    .ct-info-intro,
    .ct-map-heading > p {
        justify-self: start;
    }

    .ct-contact-stage {
        grid-template-columns: 1fr;

        gap: 24px;

        padding: 20px 0;

        min-height: 0;
    }

    .ct-orbit-wrap {
        width: min(100%, 270px);
    }

    .ct-contact-item {
        grid-template-columns: 27px 42px minmax(0, 1fr) 20px;

        gap: 8px;

        min-height: 94px;
    }

    .ct-contact-icon {
        width: 40px;
        height: 40px;
    }

    .ct-contact-copy strong {
        font-size: 14px;
    }

    .ct-message-grid,
    .ct-map-layout {
        grid-template-columns: 1fr;
    }

    .ct-message-copy {
        min-height: 0;
    }

    .ct-response-note {
        margin-top: 25px;
    }

    .ct-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ct-form-bottom {
        grid-template-columns: 1fr;
    }

    .ct-submit {
        width: 100%;
    }

    .ct-map-frame,
    .ct-map-frame iframe {
        min-height: 360px;
    }

    .ct-map-details {
        border-inline-start: 0;
        border-top: 1.5px solid var(--border-strong);
    }

    .ct-map-bottom {
        grid-template-columns: 1fr;
    }

    .ct-map-cta {
        width: 100%;
    }

}


/* ============================================================
   MOBILE-M
============================================================ */

@media (min-width: 375px) and (max-width: 424px) {

    .ct-info-heading,
    .ct-map-heading {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .ct-info-intro,
    .ct-map-heading > p {
        justify-self: start;
    }

    .ct-contact-stage {
        grid-template-columns: 1fr;

        gap: 28px;

        padding-inline: 0;
    }

    .ct-orbit-wrap {
        width: min(100%, 300px);
    }

    .ct-message-grid,
    .ct-map-layout {
        grid-template-columns: 1fr;
    }

    .ct-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ct-form-bottom,
    .ct-map-bottom {
        grid-template-columns: 1fr;
    }

    .ct-submit,
    .ct-map-cta {
        width: 100%;
    }

    .ct-map-details {
        border-inline-start: 0;
        border-top: 1.5px solid var(--border-strong);
    }

    .ct-map-frame,
    .ct-map-frame iframe {
        min-height: 390px;
    }

}


/* ============================================================
   MOBILE-L
============================================================ */

@media (min-width: 425px) and (max-width: 767px) {

    .ct-container {
        width: min(
            calc(100% - 40px),
            1400px
        );
    }

    .ct-info-heading,
    .ct-map-heading {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .ct-info-intro,
    .ct-map-heading > p {
        justify-self: start;
    }

    .ct-contact-stage {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-inline: 0;
    }

    .ct-orbit-wrap {
        width: min(100%, 330px);
    }

    .ct-message-grid,
    .ct-map-layout {
        grid-template-columns: 1fr;
    }

    .ct-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ct-form-bottom,
    .ct-map-bottom {
        grid-template-columns: 1fr;
    }

    .ct-submit,
    .ct-map-cta {
        width: 100%;
    }

    .ct-map-details {
        border-inline-start: 0;
        border-top: 1.5px solid var(--border-strong);
    }

    .ct-map-frame,
    .ct-map-frame iframe {
        min-height: 430px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .ct-container {
        width: min(
            calc(100% - 48px),
            1400px
        );
    }

    .ct-info-heading,
    .ct-map-heading {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .75fr);

        gap: 35px;
    }

    .ct-contact-stage {
        grid-template-columns:
            minmax(230px, .75fr)
            minmax(0, 1.25fr);

        gap: 38px;

        padding-inline: 0;
    }

    .ct-orbit-wrap {
        width: min(100%, 310px);
    }

    .ct-contact-item {
        grid-template-columns:
            28px
            45px
            minmax(0, 1fr)
            24px;

        gap: 10px;
    }

    .ct-message-grid {
        grid-template-columns:
            minmax(0, .8fr)
            minmax(0, 1.2fr);

        gap: 35px;
    }

    .ct-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ct-form-bottom {
        grid-template-columns: 1fr;
    }

    .ct-submit {
        width: 100%;
    }

    .ct-map-layout {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(270px, .75fr);
    }

    .ct-map-frame,
    .ct-map-frame iframe {
        min-height: 470px;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (min-width: 1024px) and (max-width: 1279px) {

    .ct-container {
        width: min(
            calc(100% - 64px),
            1400px
        );
    }

    .ct-contact-stage {
        min-height: 390px;
    }

    .ct-orbit-wrap {
        width: min(100%, 330px);
    }

    .ct-message-grid {
        gap: 48px;
    }

    .ct-map-frame,
    .ct-map-frame iframe {
        min-height: 490px;
    }

}


/* ============================================================
   LAPTOP-L
============================================================ */

@media (min-width: 1280px) and (max-width: 1439px) {

    .ct-container {
        width: min(
            calc(100% - 80px),
            1400px
        );
    }

    .ct-info-heading h2 {
        font-size: 48px;
    }

    .ct-message-copy h2 {
        font-size: 46px;
    }

}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 1440px) {

    .ct-container {
        width: min(
            calc(100% - 96px),
            1400px
        );
    }

    .ct-info-heading h2 {
        font-size: 52px;
    }

    .ct-message-copy h2 {
        font-size: 48px;
    }

    .ct-map-heading h2 {
        font-size: 50px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ct-info *,
    .ct-info *::before,
    .ct-info *::after,
    .ct-message *,
    .ct-message *::before,
    .ct-message *::after,
    .ct-map *,
    .ct-map *::before,
    .ct-map *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

}

/* ===== INSIDE THE STUDIO · bento with video · paste at the END of styles.css ===== */

@property --im6-ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* CONTACT INFORMATION: center the section heading and supporting copy */
.ct-info .ct-info-heading {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(14px, 3vw, 24px);
    text-align: center;
}

.ct-info .ct-eyebrow {
    justify-self: center;
}

.ct-info .ct-info-heading h2 {
    margin-inline: auto;
}

.ct-info .ct-info-intro {
    max-width: 44rem;
    justify-self: center;
    text-align: center;
}

.im6 {
    --fs-h2: 26px;
    --fs-h3: 19px;
    --fs-body: 15px;
    --fs-small: 13px;
    --gutter: 16px;
    --gap: 12px;
    --im6-red: #C0341F;
    --im6-btn: #C0341F;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: 64px 72px;
    background: var(--canvas);
    color: var(--text);
    font-family: "Manrope", sans-serif;
    font-size: var(--fs-body);
    line-height: 1.6;
}

.im6, .im6 *, .im6 *::before, .im6 *::after {
    box-sizing: border-box;
}

.im6 :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.im6 h2, .im6 h3 {
    font-family: "DynaPuff", cursive;
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
    color: var(--text);
}

.im6 h2 {
    font-size: var(--fs-h2);
    margin-block: 14px 12px;
}

.im6 h3 {
    font-size: var(--fs-h3);
}

.im6 p, .im6 ul, .im6 figure, .im6 blockquote {
    margin: 0;
}

.im6 ul {
    list-style: none;
    padding: 0;
}

.im6-wrap {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* heading */
.im6-head {
    margin-bottom: 22px;
    max-width: 760px;
}

.im6-tag {
    display: inline-flex;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.im6-hl {
    color: var(--im6-red);
}

.im6-lead {
    color: var(--text-soft);
}

/* bento grid: mobile = 2 columns */
.im6-bento {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "v v"
        "a r1"
        "b b"
        "r2 r2"
        "c c"
        "r3 r3";
}

.im6-a  { grid-area: a; }
.im6-b  { grid-area: b; }
.im6-c  { grid-area: c; }
.im6-v  { grid-area: v; }
.im6-r1 { grid-area: r1; }
.im6-r2 { grid-area: r2; }
.im6-r3 { grid-area: r3; }

.im6-t {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: translate .4s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s;
}

.im6-t:hover {
    translate: 0 -6px;
}

/* photo tiles */
.im6-photo {
    aspect-ratio: 3 / 4;
    background: var(--surface-soft);
}

.im6-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.im6-photo:hover img {
    transform: scale(1.07);
}

.im6-a img  { object-position: 50% 22%; }
.im6-r1 img { object-position: 62% 30%; }

.im6-photo figcaption {
    position: absolute;
    inset-inline-start: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.3;
}

/* values tile */
.im6-values {
    display: grid;
    gap: 12px;
    align-content: space-between;
    padding: 20px;
    background: color-mix(in srgb, var(--saffron) 16%, var(--surface));
}

.im6-values ul {
    display: grid;
    gap: 8px;
}

.im6-values li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text);
    font-weight: 600;
}

.im6-values li::before {
    content: "\2713";
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--saffron);
    color: var(--on-pigment);
    font-size: 13px;
    font-weight: 800;
}

.im6-team {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-weight: 700;
    font-size: var(--fs-small);
}

.im6-avatars {
    display: flex;
}

.im6-av {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--surface);
    background: var(--surface-soft);
    margin-inline-start: -12px;
    transition: margin .4s cubic-bezier(.3, 1.5, .5, 1);
}

.im6-av:first-child {
    margin-inline-start: 0;
}

.im6-values:hover .im6-av + .im6-av {
    margin-inline-start: -4px;
}

.im6-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.7;
}

/* centre each face inside its little circle */
.im6-av:nth-child(1) img { object-position: 20% 50%;  transform-origin: 50% 38%; }
.im6-av:nth-child(2) img { object-position: 65% 50%;  transform-origin: 50% 38%; }
.im6-av:nth-child(3) img { object-position: 50% 2%;   transform-origin: 42% 50%; }
.im6-av:nth-child(4) img { object-position: 100% 50%; transform-origin: 61% 40%; }

/* quote tile */
.im6-quote {
    display: grid;
    gap: 10px;
    align-content: center;
    padding: 22px 22px 20px;
    background: color-mix(in srgb, var(--aqua) 16%, var(--surface));
}

.im6-qm {
    font: 500 56px/0.6 "DynaPuff", cursive;
    color: var(--im6-red);
    animation: im6Float 4s ease-in-out infinite;
}

.im6-quote p {
    font: 500 var(--fs-h3)/1.35 "DynaPuff", cursive;
    color: var(--text);
}

.im6-quote cite {
    font-style: normal;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--text-soft);
}

@keyframes im6Float {
    50% { transform: translateY(-5px) rotate(-4deg); }
}

/* video tile with a spinning colour ring */
.im6-video {
    padding: 4px;
    border: 0;
    aspect-ratio: 3 / 4;
    background: conic-gradient(from var(--im6-ang), var(--vermillion), var(--saffron), var(--aqua), var(--coral), var(--vermillion));
    animation: im6Spin 8s linear infinite;
}

@keyframes im6Spin {
    to { --im6-ang: 360deg; }
}

.im6-vin {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 21px;
    background: var(--surface-soft);
    transform: perspective(900px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
    transition: transform .35s ease-out;
}

.im6-vin video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.im6-live, .im6-cap {
    position: absolute;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.3;
}

.im6-live {
    top: 12px;
    inset-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.im6-live i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vermillion);
    animation: im6Pulse 1.8s ease-out infinite;
}

@keyframes im6Pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vermillion) 60%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

.im6-cap {
    inset-inline-start: 12px;
    bottom: 20px;
    max-width: calc(100% - 84px);
}

.im6-play {
    position: absolute;
    z-index: 2;
    inset-inline-end: 12px;
    bottom: 14px;
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: transform .25s;
}

.im6-play:hover {
    transform: scale(1.1);
}

.im6-play svg {
    width: 20px;
    height: 20px;
}

.im6-play .im6-ic-play, .im6-play[data-state="paused"] .im6-ic-pause {
    display: none;
}

.im6-play[data-state="paused"] .im6-ic-play {
    display: block;
}

.im6-bar {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    height: 5px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.im6-bar i {
    display: block;
    height: 100%;
    background: var(--vermillion);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}

/* worlds tile */
.im6-worlds {
    display: grid;
    gap: 14px;
    align-content: space-between;
    padding: 20px;
}

.im6-worlds ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.im6-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 700;
    animation: im6Bob 3.2s ease-in-out infinite;
    animation-delay: calc(var(--k) * .3s);
}

.im6-chip::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c);
}

@keyframes im6Bob {
    50% { transform: translateY(-5px); }
}

.im6-link {
    justify-self: start;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(var(--aqua), var(--aqua)) 0 100% / 100% 3px no-repeat;
    padding-bottom: 2px;
    transition: background-size .3s;
}

.im6-link:hover {
    background-size: 100% 100%;
}

/* CTA tile */
.im6-cta {
    display: grid;
    gap: 10px;
    align-content: center;
    padding: 22px;
    background: color-mix(in srgb, var(--vermillion) 12%, var(--surface));
}

.im6-cta p {
    color: var(--text);
}

.im6-btn {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 14px;
    border: 2px solid var(--im6-btn);
    background: var(--im6-btn);
    color: var(--btn-text);
    font: 700 15px "Manrope", sans-serif;
    text-decoration: none;
    transition: transform .25s, background-color .25s;
}

.im6-btn:hover {
    transform: translateY(-3px) rotate(-1deg);
    background: var(--btn-hover);
    border-color: var(--btn-hover);
}

/* reveal (script.js adds .js and .in-view) */
.im6.js .im6-rv {
    opacity: 0;
    transform: translateY(22px);
}

.im6.js.in-view .im6-rv {
    opacity: 1;
    transform: none;
    transition: opacity .8s calc(.1s + var(--i) * .12s), transform .8s calc(.1s + var(--i) * .12s) cubic-bezier(.2, .7, .2, 1);
}

.im6.js .im6-t {
    opacity: 0;
    transform: translateY(40px) rotate(var(--rot, 0deg)) scale(.94);
}

.im6.js.in-view .im6-t {
    opacity: 1;
    transform: none;
    transition: opacity .7s calc(.25s + var(--i) * .09s), transform .9s calc(.25s + var(--i) * .09s) cubic-bezier(.3, 1.4, .5, 1), translate .4s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s;
}

/* responsive: mobile-S < 375, mobile-M 375, mobile-L 425, tablet 768, laptop 1024, laptop-L 1280 / 1440 */
@media (min-width: 375px) {
    .im6 { --fs-h2: 28px; --fs-h3: 20px; }
}

@media (min-width: 425px) {
    .im6 { --fs-h2: 30px; --fs-h3: 21px; --fs-body: 16px; --gutter: 20px; --gap: 14px; }
}

@media (min-width: 768px) {
    .im6 { --fs-h2: 34px; --fs-h3: 22px; --gutter: 24px; --gap: 16px; padding-block: 80px 88px; }
    .im6-bento {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-areas:
            "v a"
            "v r2"
            "v b"
            "c c"
            "r1 r3";
    }
    .im6-video { aspect-ratio: auto; min-height: 640px; }
    .im6-photo { aspect-ratio: auto; min-height: 210px; }
    .im6-r1 { min-height: 260px; }
}

@media (min-width: 1024px) {
    .im6 { --fs-h2: 36px; --gutter: clamp(24px, 3vw, 40px); padding-block: 96px 104px; }
    .im6-bento {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-rows: repeat(3, minmax(230px, auto));
        grid-template-areas:
            "a v r1"
            "b v r2"
            "c v r3";
    }
    .im6-video { min-height: 0; }
    .im6-photo, .im6-r1 { min-height: 0; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .im6-bento { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .9fr); }
}

@media (min-width: 1280px) {
    .im6 { --fs-h2: 40px; --fs-h3: 24px; --fs-body: 17px; --fs-small: 14px; --gutter: clamp(32px, 3.5vw, 48px); --gap: 18px; }
    .im6-bento { grid-template-rows: repeat(3, minmax(250px, auto)); }
}

@media (min-width: 1440px) {
    .im6 { --gap: 20px; }
    .im6-bento { grid-template-rows: repeat(3, minmax(270px, auto)); }
}

@media (prefers-reduced-motion: reduce) {
    .im6 *, .im6 *::before, .im6 *::after {
        animation: none !important;
        transition-duration: .01s !important;
        transition-delay: 0s !important;
    }
}

/* =========================================================
   CONTACT INFORMATION — ALIGNMENT FIX ONLY
   Scoped to the contact information section
   ========================================================= */

:where(.contact-info-section) {
    width: 100%;
}

:where(.contact-info-section) .contact-info-inner {
    width: min(100%, 1400px);
    margin-inline: auto;
}

/* Main top content */
:where(.contact-info-section) .contact-info-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(40px, 7vw, 110px);
}

/* Left heading area */
:where(.contact-info-section) .contact-info-heading {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
}

/* Right text area */
:where(.contact-info-section) .contact-info-description {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
}

/* Keep the small section label aligned from the same top baseline */
:where(.contact-info-section) .contact-info-label {
    margin: 0 0 18px;
    line-height: 1.3;
}

/* Main heading */
:where(.contact-info-section) .contact-info-heading h1,
:where(.contact-info-section) .contact-info-heading h2 {
    margin: 0;
    line-height: 1.12;
}

/* Description */
:where(.contact-info-section) .contact-info-description p {
    margin: 0;
    max-width: 620px;
    line-height: 1.7;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    :where(.contact-info-section) .contact-info-top {
        column-gap: 32px;
    }

    :where(.contact-info-section) .contact-info-description p {
        max-width: 100%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    :where(.contact-info-section) .contact-info-top {
        grid-template-columns: 1fr;
        row-gap: 28px;
        align-items: start;
    }

    :where(.contact-info-section) .contact-info-heading,
    :where(.contact-info-section) .contact-info-description {
        align-self: stretch;
    }

    :where(.contact-info-section) .contact-info-description p {
        max-width: 100%;
    }
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    :where(.contact-info-section) .contact-info-top {
        row-gap: 22px;
    }

    :where(.contact-info-section) .contact-info-label {
        margin-bottom: 14px;
    }
}


/* =========================================================
   RTL
   ========================================================= */

html[dir="rtl"] :where(.contact-info-section) .contact-info-top {
    direction: rtl;
}

html[dir="rtl"] :where(.contact-info-section) .contact-info-description p {
    text-align: right;
}

/* =========================================================
   MIX N MUSE — CONTACT FINAL CTA
   SECTION-SCOPED ONLY
   Prefix: cncta-
   ========================================================= */

:where(.cncta-section) {
    --cncta-bg: #E94F37;
    --cncta-text: #FFF7E8;
    --cncta-soft: rgba(255, 247, 232, .84);
    --cncta-dark: #3D2925;
    --cncta-yellow: #F2B544;
    --cncta-apricot: #F49B78;
    --cncta-aqua: #4FB7B3;
    --cncta-surface: #FFF9EF;

    position: relative;
    width: 100%;
    padding: clamp(42px, 6vw, 86px)
             clamp(16px, 3vw, 40px);

    overflow: hidden;

    background: var(--canvas, #FFF7E8);
    color: var(--text, #3D2925);

    font-family: "Manrope", sans-serif;

    isolation: isolate;
}


/* ---------------------------------------------------------
   MAIN RECTANGULAR CONTAINER
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-wrap {
    position: relative;

    width: min(100%, 1400px);
    min-height: clamp(420px, 52vw, 620px);

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding:
        clamp(42px, 6vw, 82px)
        clamp(20px, 6vw, 100px);

    border-radius: clamp(24px, 3vw, 42px);

    background: var(--cncta-bg);

    box-shadow:
        0 24px 60px rgba(61, 41, 37, .18);

    text-align: center;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-content {
    position: relative;
    z-index: 5;

    width: min(100%, 850px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-inline: auto;
}


/* ---------------------------------------------------------
   KICKER
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 42px;

    padding: 8px 16px;

    border: 1px solid rgba(255, 247, 232, .48);
    border-radius: 999px;

    background: rgba(255, 247, 232, .10);

    color: var(--cncta-text);

    font-size: clamp(12px, .9vw, 14px);
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.3;

    animation: cncta-kicker-in .8s ease both;
}


:where(.cncta-section) .cncta-kicker-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--cncta-yellow);

    box-shadow:
        0 0 0 5px rgba(242, 181, 68, .16);

    animation: cncta-dot-pulse 2s ease-in-out infinite;
}


/* ---------------------------------------------------------
   MAIN HEADING
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-title {
    width: 100%;
    max-width: 850px;

    margin: clamp(20px, 2.5vw, 30px) auto 0;

    color: var(--cncta-text);

    font-family: "DynaPuff", cursive;
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.025em;

    text-wrap: balance;

    animation: cncta-title-in .9s cubic-bezier(.2,.75,.25,1) both;
}


:where(.cncta-section) .cncta-title span {
    position: relative;

    display: inline-block;

    color: var(--cncta-yellow);

    white-space: nowrap;
}


/* little painted underline */

:where(.cncta-section) .cncta-title span::after {
    content: "";

    position: absolute;

    left: 2%;
    right: -2%;

    bottom: -8px;

    height: 7px;

    border-radius: 50%;

    background: var(--cncta-yellow);

    transform: rotate(-1.5deg) scaleX(0);
    transform-origin: left center;

    animation:
        cncta-underline .9s .55s cubic-bezier(.2,.8,.2,1)
        forwards;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-description {
    width: min(100%, 680px);

    margin: clamp(22px, 2.5vw, 30px) auto 0;

    color: var(--cncta-soft);

    font-family: "Manrope", sans-serif;
    font-size: clamp(15px, 1.15vw, 17px);
    font-weight: 400;

    line-height: 1.75;

    text-wrap: balance;

    animation: cncta-description-in .8s .18s ease both;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: clamp(26px, 3vw, 34px);

    animation: cncta-buttons-in .8s .28s ease both;
}


:where(.cncta-section) .cncta-btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding:
        12px
        clamp(20px, 2.2vw, 28px);

    border-radius: 12px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;

    line-height: 1.25;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        background-color .28s ease,
        color .28s ease,
        border-color .28s ease;
}


:where(.cncta-section) .cncta-btn-primary {
    color: var(--cncta-dark);
    background: var(--cncta-surface);

    border: 1px solid var(--cncta-surface);

    box-shadow:
        0 10px 24px rgba(61, 41, 37, .18);
}


:where(.cncta-section) .cncta-btn-secondary {
    color: var(--cncta-text);

    background: transparent;

    border: 1.5px solid rgba(255, 247, 232, .78);
}


:where(.cncta-section) .cncta-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 28px rgba(61, 41, 37, .20);
}


:where(.cncta-section) .cncta-btn-primary:hover {
    background: var(--cncta-yellow);
    border-color: var(--cncta-yellow);
}


:where(.cncta-section) .cncta-btn-secondary:hover {
    color: var(--cncta-dark);
    background: var(--cncta-yellow);
    border-color: var(--cncta-yellow);
}


:where(.cncta-section) .cncta-arrow {
    display: inline-block;

    font-size: 1.2em;

    transition: transform .28s ease;
}


:where(.cncta-section) .cncta-btn:hover .cncta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   BOTTOM NOTE
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-note {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(100%, 720px);

    gap: 14px;

    margin-top: clamp(28px, 4vw, 42px);

    color: rgba(255, 247, 232, .78);

    font-size: clamp(12px, .9vw, 14px);
    font-weight: 500;

    line-height: 1.5;

    animation: cncta-note-in .8s .45s ease both;
}


:where(.cncta-section) .cncta-note-line {
    width: clamp(28px, 5vw, 70px);
    height: 1px;

    flex: 0 1 70px;

    background: rgba(255, 247, 232, .42);
}


/* ---------------------------------------------------------
   BRUSH SVG
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-brush {
    position: absolute;

    z-index: 1;

    left: 50%;
    bottom: -30px;

    width: min(90%, 900px);
    height: 180px;

    transform:
        translateX(-50%)
        rotate(-2deg);

    pointer-events: none;

    opacity: .42;
}


:where(.cncta-section) .cncta-brush-back {
    fill: none;

    stroke: var(--cncta-yellow);
    stroke-width: 34;

    stroke-linecap: round;

    opacity: .28;
}


:where(.cncta-section) .cncta-brush-front {
    fill: none;

    stroke: var(--cncta-apricot);
    stroke-width: 15;

    stroke-linecap: round;

    stroke-dasharray: 900;
    stroke-dashoffset: 900;

    animation:
        cncta-brush-draw 2.1s .35s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


/* ---------------------------------------------------------
   DECORATIVE PAINT BLOBS
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-paint {
    position: absolute;

    z-index: 2;

    pointer-events: none;

    border-radius: 48% 52% 42% 58% / 55% 43% 57% 45%;

    opacity: .8;
}


:where(.cncta-section) .cncta-paint-one {
    width: clamp(100px, 13vw, 180px);
    height: clamp(60px, 7vw, 100px);

    top: -30px;
    left: 7%;

    background: var(--cncta-yellow);

    transform: rotate(-12deg);

    animation: cncta-float-one 6s ease-in-out infinite;
}


:where(.cncta-section) .cncta-paint-two {
    width: clamp(90px, 11vw, 155px);
    height: clamp(55px, 6vw, 90px);

    right: 7%;
    bottom: -20px;

    background: var(--cncta-aqua);

    transform: rotate(14deg);

    animation: cncta-float-two 7s ease-in-out infinite;
}


:where(.cncta-section) .cncta-paint-three {
    width: clamp(55px, 7vw, 90px);
    height: clamp(38px, 4vw, 58px);

    top: 14%;
    right: 13%;

    background: var(--cncta-apricot);

    transform: rotate(-25deg);

    animation: cncta-float-three 5s ease-in-out infinite;
}


/* ---------------------------------------------------------
   DECORATIVE DOTS
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-dot {
    position: absolute;

    z-index: 2;

    border-radius: 50%;

    pointer-events: none;
}


:where(.cncta-section) .cncta-dot-one {
    width: 16px;
    height: 16px;

    left: 10%;
    top: 30%;

    background: var(--cncta-yellow);

    animation: cncta-dot-float 4s ease-in-out infinite;
}


:where(.cncta-section) .cncta-dot-two {
    width: 11px;
    height: 11px;

    right: 9%;
    top: 43%;

    background: var(--cncta-aqua);

    animation: cncta-dot-float 5s .5s ease-in-out infinite;
}


:where(.cncta-section) .cncta-dot-three {
    width: 8px;
    height: 8px;

    left: 17%;
    bottom: 19%;

    background: var(--cncta-apricot);

    animation: cncta-dot-float 4.5s 1s ease-in-out infinite;
}


/* ---------------------------------------------------------
   SPARKS
   --------------------------------------------------------- */

:where(.cncta-section) .cncta-spark {
    position: absolute;

    z-index: 3;

    color: var(--cncta-yellow);

    font-size: clamp(20px, 2vw, 30px);

    pointer-events: none;

    animation: cncta-spark 2.8s ease-in-out infinite;
}


:where(.cncta-section) .cncta-spark-one {
    left: 18%;
    top: 18%;
}


:where(.cncta-section) .cncta-spark-two {
    right: 18%;
    bottom: 18%;

    color: var(--cncta-aqua);

    animation-delay: 1s;
}


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

:where(.cncta-section) .cncta-btn:focus-visible {
    outline: 3px solid var(--focus, #3D2925);
    outline-offset: 4px;
}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cncta-title-in {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cncta-buttons-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes cncta-note-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes cncta-underline {
    to {
        transform: rotate(-1.5deg) scaleX(1);
    }
}


@keyframes cncta-brush-draw {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes cncta-dot-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }
}


@keyframes cncta-float-one {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-12deg);
    }

    50% {
        transform: translate3d(12px, 10px, 0) rotate(-7deg);
    }
}


@keyframes cncta-float-two {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(14deg);
    }

    50% {
        transform: translate3d(-14px, -9px, 0) rotate(8deg);
    }
}


@keyframes cncta-float-three {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-25deg);
    }

    50% {
        transform: translate3d(-8px, 12px, 0) rotate(-16deg);
    }
}


@keyframes cncta-dot-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-13px);
    }
}


@keyframes cncta-spark {

    0%,
    100% {
        opacity: .45;
        transform: scale(.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(18deg);
    }
}


/* =========================================================
   LAPTOP-L / DESKTOP
   ========================================================= */

@media (min-width: 1280px) {

    :where(.cncta-section) {
        padding-inline:
            clamp(24px, 3vw, 48px);
    }

    :where(.cncta-section) .cncta-wrap {
        min-height: 560px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    :where(.cncta-section) {
        padding:
            48px
            20px;
    }

    :where(.cncta-section) .cncta-wrap {
        min-height: 500px;

        padding:
            52px
            30px;
    }

    :where(.cncta-section) .cncta-description {
        max-width: 600px;
    }
}


/* =========================================================
   MOBILE-L / MOBILE-M / MOBILE-S
   ========================================================= */

@media (max-width: 767px) {

    :where(.cncta-section) {
        padding:
            34px
            16px;
    }

    :where(.cncta-section) .cncta-wrap {
        min-height: 520px;

        padding:
            48px
            18px;

        border-radius: 24px;
    }

    :where(.cncta-section) .cncta-content {
        max-width: 100%;
    }

    :where(.cncta-section) .cncta-title {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.14;
    }

    :where(.cncta-section) .cncta-description {
        font-size: 15px;
        line-height: 1.7;
    }

    :where(.cncta-section) .cncta-actions {
        width: 100%;

        flex-direction: column;

        gap: 11px;
    }

    :where(.cncta-section) .cncta-btn {
        width: min(100%, 290px);
        min-height: 52px;
    }

    :where(.cncta-section) .cncta-note {
        max-width: 290px;
        line-height: 1.6;
    }

    :where(.cncta-section) .cncta-note-line {
        display: none;
    }

    :where(.cncta-section) .cncta-paint-one {
        left: -25px;
        top: -10px;
    }

    :where(.cncta-section) .cncta-paint-two {
        right: -25px;
        bottom: -10px;
    }

    :where(.cncta-section) .cncta-paint-three {
        right: 4%;
        top: 7%;
    }

    :where(.cncta-section) .cncta-spark-one {
        left: 7%;
        top: 20%;
    }

    :where(.cncta-section) .cncta-spark-two {
        right: 7%;
        bottom: 19%;
    }
}


/* Mobile-S */
@media (max-width: 374px) {

    :where(.cncta-section) {
        padding-inline: 12px;
    }

    :where(.cncta-section) .cncta-wrap {
        min-height: 540px;
        padding-inline: 14px;
        border-radius: 20px;
    }

    :where(.cncta-section) .cncta-kicker {
        font-size: 11px;
        padding-inline: 12px;
    }

    :where(.cncta-section) .cncta-title {
        font-size: 31px;
    }

    :where(.cncta-section) .cncta-description {
        font-size: 14px;
    }

    :where(.cncta-section) .cncta-note {
        font-size: 12px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    :where(.cncta-section) *,
    :where(.cncta-section) *::before,
    :where(.cncta-section) *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    :where(.cncta-section) .cncta-brush-front {
        stroke-dashoffset: 0;
    }

    :where(.cncta-section) .cncta-title span::after {
        transform: rotate(-1.5deg) scaleX(1);
    }
}

:where(.cncta-section) .cncta-content {
    opacity: .001;
    transform: translateY(16px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.75,.25,1);
}

:where(.cncta-section).cncta-visible .cncta-content,
:where(.cncta-section).cncta-ready .cncta-content {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    :where(.cncta-section) .cncta-content {
        opacity: 1;
        transform: none;
    }
}
/* =========================================================
   MIX N MUSE - MIX & PAINT ARCADE (additive; classes .mp-, tokens scoped to .mp)
   Paste at the END of styles.css
========================================================= */
.mp{--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-small:12px;--gutter:16px;--gap:12px;--ease:cubic-bezier(.22,.8,.2,1);--paper:#FFF9EF;--ink:#3D2925;position:relative;z-index:2;overflow:hidden;isolation:isolate;background:var(--canvas);padding-block:64px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.6;color:var(--text)}
.mp,.mp *,.mp *::before,.mp *::after{box-sizing:border-box}
.mp :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.mp h2,.mp h3{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2;color:inherit;overflow-wrap:anywhere;text-wrap:balance}
.mp h2{font-size:var(--fs-h2);color:var(--text)}.mp h3{font-size:var(--fs-h3)}
:where(.mp) :where(p,ul){margin:0}:where(.mp) ul{padding:0;list-style:none}
:where(.mp) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.mp-wrap{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter);display:grid;gap:24px}

/* header */
.mp-head{max-width:46em}
.mp-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.mp-hl{position:relative;display:inline-block;color:var(--vermillion)}
.mp-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.mp-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .mp-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .8s ease}
.mp:not(.js) .mp-hl path{stroke-dashoffset:0}
.mp-lead{margin-top:12px;color:var(--text-soft)}
.mp-ns{padding:12px 16px;border:2px dashed var(--border-strong);border-radius:14px;background:var(--surface-soft);font-weight:600}
.mp-rv{opacity:0;transform:translateY(22px)}
.in-view .mp-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) cubic-bezier(.2,.8,.2,1)}
.mp:not(.js) .mp-rv{opacity:1;transform:none}

/* cabinet */
.mp-cab{position:relative;border:3px solid var(--text);border-radius:26px;background:var(--surface);box-shadow:0 9px 0 var(--border-strong);overflow:hidden}
.mp-mq{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px;background:repeating-linear-gradient(135deg,var(--vermillion) 0 18px,var(--saffron) 18px 36px,var(--aqua) 36px 54px,var(--apricot) 54px 72px);border-bottom:3px solid var(--text)}
.mp-mq h3{padding:6px 16px;border-radius:99px;background:var(--surface);color:var(--text)}
.mp-lv{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.mp-lv button{display:flex;align-items:center;gap:8px;min-height:42px;padding:6px 14px;border-radius:99px;background:var(--surface);color:var(--text);border:2px solid var(--text);font-weight:700;font-size:var(--fs-small);line-height:1.2;transition:transform .25s}
.mp-lv button[aria-current="true"]{background:var(--text);color:var(--surface)}
.mp-lv .mp-st{letter-spacing:1px;font-size:11px;white-space:nowrap}
@media(hover:hover){.mp-lv button:hover{transform:translateY(-3px) rotate(-2deg)}}

.mp-play{display:grid;gap:12px;padding:12px;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "dish" "shelf" "album"}
.mp-stage{grid-area:stage;position:relative;min-width:0;display:grid;align-content:center;gap:10px;padding:10px;border-radius:20px;background:var(--surface-soft);border:2px dashed var(--border-strong)}
.mp-pic{display:block;width:100%;max-width:760px;height:auto;margin-inline:auto;border-radius:14px;background:var(--paper);border:3px solid var(--ink);touch-action:manipulation}
.mp-rg{cursor:pointer;transition:filter .25s;outline:none}
.mp-g:not(.mp-fin) .mp-rg:hover,.mp-g:not(.mp-fin) .mp-rg:focus-visible{filter:brightness(.9)}
.mp-rg:focus-visible{stroke:var(--vermillion);stroke-width:6}
.mp-rg.mp-bad{animation:mp-shake .45s}
@keyframes mp-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.mp-num circle{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.mp-num text{font:700 15px "Manrope",sans-serif;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.mp-num{pointer-events:none}
.mp-fin .mp-num{display:none}
.mp-prog{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-small);line-height:1.3}
.mp-prog span:first-child,.mp-prog span:last-child{white-space:nowrap}
.mp-bar{flex:1;height:10px;border-radius:10px;background:var(--border-strong);overflow:hidden}
.mp-bar i{display:block;height:100%;width:0;background:var(--vermillion);border-radius:10px;transition:width .5s var(--ease)}
.mp-need{display:flex;flex-wrap:wrap;gap:8px}
.mp-need li{display:flex;align-items:center;gap:8px;padding:5px;padding-inline-end:12px;border-radius:99px;border:1.5px solid var(--border-strong);background:var(--surface);font-size:var(--fs-small);font-weight:700;line-height:1.25;transition:opacity .3s}
.mp-need li b{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--text);background:var(--sw);color:var(--on-pigment,#3D2925);font-size:11px}
.mp-need li small{display:block;font-size:11px;font-weight:600;color:var(--text-soft)}
.mp-need li.mp-ok{opacity:.55;text-decoration:line-through}

/* dish + Spark */
.mp-dish{grid-area:dish;min-width:0;display:grid;gap:12px;align-content:space-between;padding:14px;border-radius:20px;background:var(--surface-soft);border:2px solid var(--border-strong)}
.mp-mixrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.mp-blob{width:clamp(84px,24vw,124px);aspect-ratio:1;background:var(--mix,transparent);border:3px solid var(--text);border-radius:58% 42% 55% 45%/48% 56% 44% 52%;animation:mp-morph 6s ease-in-out infinite;transition:background-color .4s;box-shadow:inset 0 -10px 0 rgba(0,0,0,.08)}
.mp-blob.mp-pop{animation:mp-morph 6s ease-in-out infinite,mp-pop .45s cubic-bezier(.3,1.7,.4,1)}
@keyframes mp-morph{0%,100%{border-radius:58% 42% 55% 45%/48% 56% 44% 52%}50%{border-radius:42% 58% 45% 55%/56% 44% 56% 44%}}
@keyframes mp-pop{from{scale:.7}}
.mp-dn{font-family:"DynaPuff",cursive;font-size:calc(var(--fs-body) + 4px);line-height:1.2;overflow-wrap:anywhere;color:var(--text)}
.mp-dr{margin-top:2px;font-size:var(--fs-small);color:var(--text-soft);font-weight:600;line-height:1.4}
.mp-clean{margin-top:10px;min-height:44px;padding:8px 16px;border-radius:14px;border:2px solid var(--text);background:var(--surface);color:var(--text);font-weight:700;font-size:var(--fs-small);transition:transform .25s}
@media(hover:hover){.mp-clean:hover{transform:translateY(-3px)}}
.mp-spark{display:grid;grid-template-columns:50px minmax(0,1fr);gap:10px;align-items:center}
.mp-spk{width:50px;fill:var(--saffron);stroke:var(--text);stroke-width:1.6;animation:mp-fl 3s ease-in-out infinite alternate}
.mp-eye{fill:#3D2925;stroke:none;transform-box:fill-box;transform-origin:center;animation:mp-blink 4s infinite}
@keyframes mp-fl{to{transform:translateY(-6px) rotate(8deg)}}
@keyframes mp-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.mp-say{padding:10px 14px;border-radius:16px;border:2px solid var(--text);background:var(--surface);color:var(--text);font-weight:700;font-size:var(--fs-small);line-height:1.45;min-height:3.4em}

/* paint pots */
.mp-shelf{grid-area:shelf;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mp-pot{display:grid;justify-items:center;align-content:center;gap:8px;padding:12px 4px 8px;border-radius:18px;border:2px solid var(--border-strong);background:var(--surface-soft);transition:transform .3s cubic-bezier(.3,1.6,.4,1);animation:mp-wob 3.6s var(--d) ease-in-out infinite}
@keyframes mp-wob{0%,100%{rotate:-2deg}50%{rotate:2deg}}
@media(hover:hover){.mp-pot:hover{transform:translateY(-6px) rotate(-4deg)}}
.mp-pot:active{transform:scale(.94)}
.mp-jar{position:relative;display:block;width:clamp(36px,9vw,50px);aspect-ratio:.8;border-radius:10px 10px 16px 16px;background:var(--c);border:3px solid var(--text);box-shadow:inset 8px 0 0 rgba(255,255,255,.28)}
.mp-jar::before{content:"";position:absolute;inset:-9px -4px auto;height:10px;border-radius:5px;background:var(--text)}
.mp-pn{font-size:var(--fs-small);font-weight:700;line-height:1.2;color:var(--text)}

/* sticker album */
.mp-album{grid-area:album;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mp-sl{display:grid;place-items:center;align-content:center;gap:6px;padding:10px 4px;min-height:104px;border-radius:18px;border:2px dashed var(--border-strong);background:var(--surface-soft);text-align:center;font-size:11px;font-weight:700;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.mp-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper)}
.mp-ico svg{width:34px;height:34px}
.mp-sl.mp-on{border-style:solid;border-color:var(--text);background:var(--surface)}
.mp-sl.mp-new{animation:mp-pop2 .6s cubic-bezier(.3,1.7,.4,1)}
@keyframes mp-pop2{from{transform:scale(.4) rotate(-20deg)}}
.mp-sl.mp-off .mp-ico{opacity:.35;filter:grayscale(1)}

/* win card (covers the picture) */
.mp-win{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:16px;border-radius:18px;background:color-mix(in srgb,var(--canvas) 90%,transparent);backdrop-filter:blur(5px)}
.mp-win[hidden]{display:none}
.mp-win:not([hidden]){animation:mp-fade .4s}
@keyframes mp-fade{from{opacity:0}}
.mp-win h3{font-size:calc(var(--fs-h3) + 4px);color:var(--text)}
.mp-win p{color:var(--text);font-weight:600}
.mp-wb{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:14px;border:2px solid transparent;background:var(--btn-bg);color:var(--btn-text);font-size:var(--fs-small);font-weight:700;line-height:1.2;text-decoration:none;transition:transform .3s}
.mp-btn[hidden]{display:none}
.mp-btn2{background:var(--surface);color:var(--text);border-color:var(--text)}
@media(hover:hover){.mp-btn:hover{transform:translateY(-3px)}}

/* effects layer (appended to body, fixed) */
.mp-cf,.mp-dp{position:fixed;z-index:60;pointer-events:none}
.mp-cf{width:10px;height:14px;border-radius:3px;animation:mp-cf 1.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes mp-cf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.mp-dp{width:22px;height:22px;border-radius:50%}

/* breakpoints */
@media(min-width:375px){.mp{--fs-h2:26px;--fs-h3:19px}}
@media(min-width:425px){.mp{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--gutter:20px;--gap:14px}.mp-play{padding:14px;gap:14px}.mp-mq{padding:14px 18px}}
@media(min-width:600px){.mp-dish{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.mp-shelf,.mp-album{gap:12px}}
@media(min-width:768px){.mp{--fs-h2:30px;--fs-h3:22px;--gutter:24px;--gap:16px;padding-block:80px}.mp-spark{grid-template-columns:60px minmax(0,1fr)}.mp-spk{width:60px}}
@media(min-width:900px){
  .mp-play{grid-template-columns:150px minmax(0,1fr) 270px;grid-template-areas:"shelf stage dish" "album album album";gap:16px;padding:18px}
  .mp-shelf{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
  .mp-pot{grid-template-columns:auto auto;justify-content:center;justify-items:start;gap:12px;padding:10px 8px}
  .mp-jar{width:36px}
  .mp-dish{grid-template-columns:minmax(0,1fr);align-content:space-evenly}
  .mp-mixrow{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .mp-blob{width:150px}
}
@media(min-width:1024px){.mp{--fs-h2:32px;--fs-h3:24px;--gutter:clamp(24px,3vw,40px);--gap:18px;padding-block:96px}.mp-play{grid-template-columns:170px minmax(0,1fr) 300px}}
@media(min-width:1280px){.mp-blob{width:180px}.mp{--fs-h2:34px;--fs-h3:25px;--fs-body:17px;--fs-small:14px;--gutter:clamp(32px,3.5vw,48px);--gap:20px}.mp-play{grid-template-columns:190px minmax(0,1fr) 330px;gap:20px;padding:22px}}
@media(min-width:1440px){.mp{--fs-h2:36px;--fs-h3:26px}}
@media(max-width:374px){.mp-lv button{padding:6px 10px}.mp-pot{padding-inline:2px}.mp-pn{font-size:11px}.mp-sl{font-size:10px}.mp-need li{padding-inline-end:8px}}
@media(prefers-reduced-motion:reduce){.mp *,.mp *::before,.mp *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}}


/* =========================================================
   HOME 2 — CREATIVE CTA
   Fully scoped with h2cta-
========================================================= */

.h2cta {
    position: relative;
    width: 100%;
    padding: clamp(34px, 5vw, 76px) var(--gutter, 16px);
    overflow: hidden;
    isolation: isolate;

    background: var(--canvas, #FFF7E8);
    color: var(--text, #3D2925);

    font-family: "Manrope", sans-serif;
}

.h2cta-inner {
    position: relative;
    width: min(100%, 1400px);
    min-height: clamp(440px, 52vw, 610px);
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    isolation: isolate;

    padding:
        clamp(52px, 6vw, 86px)
        clamp(22px, 5vw, 90px);

    background: var(--vermilion, #E94F37);
    border: 1px solid rgba(61, 41, 37, 0.16);
    border-radius: clamp(26px, 3vw, 44px);

    box-shadow:
        0 24px 55px rgba(61, 41, 37, 0.17);

    transform: translateZ(0);
}

/* ---------------------------------------------------------
   SOFT INNER GLOW
--------------------------------------------------------- */

.h2cta-inner::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 0.16) 0,
            rgba(255, 255, 255, 0.05) 24%,
            transparent 52%
        );

    pointer-events: none;
    z-index: -1;
}

/* ---------------------------------------------------------
   LARGE HAND-DRAWN RINGS
--------------------------------------------------------- */

.h2cta-inner::after {
    content: "";
    position: absolute;

    width: clamp(300px, 42vw, 650px);
    aspect-ratio: 1;

    left: 50%;
    top: 50%;

    border:
        2px solid rgba(255, 249, 239, 0.17);

    border-radius: 47% 53% 49% 51%;

    transform:
        translate(-50%, -50%)
        rotate(-9deg);

    box-shadow:
        0 0 0 22px rgba(255, 249, 239, 0.035),
        0 0 0 44px rgba(255, 249, 239, 0.025);

    animation:
        h2cta-ring-drift 9s ease-in-out infinite;

    pointer-events: none;
    z-index: 0;
}

@keyframes h2cta-ring-drift {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            rotate(-9deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(4deg)
            scale(1.055);
    }
}

/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.h2cta-content {
    position: relative;
    z-index: 10;

    width: min(100%, 820px);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* ---------------------------------------------------------
   EYEBROW
--------------------------------------------------------- */

.h2cta-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 40px;
    padding: 8px 17px;

    border:
        1px solid rgba(255, 249, 239, 0.55);

    border-radius: 999px;

    color: #FFF9EF;

    font-family: "Manrope", sans-serif;
    font-size: var(--fs-small, 13px);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    background: rgba(61, 41, 37, 0.12);

    animation:
        h2cta-eyebrow-in 0.8s ease both;
}

.h2cta-eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #F2B544;

    box-shadow:
        0 0 0 5px rgba(242, 181, 68, 0.15);

    animation:
        h2cta-dot-pulse 2s ease-in-out infinite;
}

@keyframes h2cta-eyebrow-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes h2cta-dot-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}

/* ---------------------------------------------------------
   HEADING
--------------------------------------------------------- */

.h2cta-title {
    max-width: 800px;

    margin:
        clamp(18px, 2.4vw, 28px)
        0
        0;

    color: #FFF9EF;

    font-family: "DynaPuff", sans-serif;
    font-size: clamp(32px, 4.1vw, 56px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.025em;

    text-wrap: balance;

    animation:
        h2cta-title-in 0.9s 0.12s ease both;
}

.h2cta-title span {
    position: relative;

    display: inline-block;

    color: #F2B544;

    text-shadow:
        0 3px 0 rgba(61, 41, 37, 0.08);
}

.h2cta-title span::after {
    content: "";

    position: absolute;

    left: 2%;
    right: 0;
    bottom: -9px;

    height: 6px;

    border-radius: 999px;

    background: #F2B544;

    transform-origin: left center;
    transform: scaleX(0) rotate(-1deg);

    animation:
        h2cta-underline 1s 0.75s cubic-bezier(.65,.05,.36,1) forwards;
}

@keyframes h2cta-title-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes h2cta-underline {
    to {
        transform: scaleX(1) rotate(-1deg);
    }
}

/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.h2cta-description {
    max-width: 650px;

    margin:
        clamp(22px, 2.5vw, 30px)
        auto
        0;

    color: #FFF3DE;

    font-family: "Manrope", sans-serif;
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.75;
    font-weight: 400;

    text-wrap: balance;

    animation:
        h2cta-description-in 0.9s 0.28s ease both;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.h2cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: clamp(25px, 3vw, 34px);

    animation:
        h2cta-buttons-in 0.9s 0.4s ease both;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.h2cta-button {
    position: relative;

    min-height: 48px;
    min-width: 150px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 12px 21px;

    border-radius: 13px;

    font-family: "Manrope", sans-serif;
    font-size: var(--fs-btn, 14px);
    line-height: 1.2;
    font-weight: 700;

    text-decoration: none;

    overflow: hidden;
    isolation: isolate;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        color 220ms ease,
        background 220ms ease;
}

.h2cta-button::before {
    content: "";

    position: absolute;
    inset: 0;

    transform:
        translateX(-105%)
        skewX(-12deg);

    transition:
        transform 420ms cubic-bezier(.22,.61,.36,1);

    z-index: -1;
}

.h2cta-button:hover::before {
    transform:
        translateX(0)
        skewX(-12deg);
}

.h2cta-button:hover {
    transform: translateY(-3px);
}

.h2cta-button:active {
    transform: translateY(0);
}

/* Primary */

.h2cta-button-primary {
    color: #3D2925;

    background: #FFF9EF;

    border: 1px solid #FFF9EF;

    box-shadow:
        0 10px 22px rgba(61, 41, 37, 0.18);
}

.h2cta-button-primary::before {
    background: #F2B544;
}

.h2cta-button-primary:hover {
    color: #3D2925;

    box-shadow:
        0 14px 28px rgba(61, 41, 37, 0.23);
}

/* Secondary */

.h2cta-button-secondary {
    color: #FFF9EF;

    background: rgba(61, 41, 37, 0.13);

    border: 1px solid rgba(255, 249, 239, 0.72);
}

.h2cta-button-secondary::before {
    background: #FFF9EF;
}

.h2cta-button-secondary:hover {
    color: #3D2925;

    border-color: #FFF9EF;
}

/* Arrow */

.h2cta-arrow {
    display: inline-flex;

    font-size: 20px;
    line-height: 1;

    transition:
        transform 220ms ease;
}

.h2cta-button:hover .h2cta-arrow {
    transform: translateX(4px);
}

/* ---------------------------------------------------------
   NOTE
--------------------------------------------------------- */

.h2cta-note {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-top: clamp(26px, 3vw, 38px);

    color: rgba(255, 243, 222, 0.88);

    font-family: "Manrope", sans-serif;
    font-size: var(--fs-small, 13px);
    line-height: 1.5;
    font-weight: 500;

    animation:
        h2cta-note-in 1s 0.55s ease both;
}

.h2cta-note-line {
    width: clamp(28px, 5vw, 70px);
    height: 1px;

    flex: 0 1 auto;

    background: rgba(255, 243, 222, 0.4);
}

@keyframes h2cta-note-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------------------------------------------------------
   FLOATING PARTICLES
--------------------------------------------------------- */

.h2cta-particle {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 2;
}

.h2cta-particle:nth-child(odd) {
    background: #F2B544;
}

.h2cta-particle:nth-child(even) {
    background: #FFF3DE;
}

.h2cta-particle-1 {
    top: 15%;
    left: 9%;

    animation:
        h2cta-float-a 5.5s ease-in-out infinite;
}

.h2cta-particle-2 {
    top: 24%;
    right: 12%;

    width: 14px;
    height: 14px;

    background: #F49B78 !important;

    animation:
        h2cta-float-b 7s ease-in-out infinite;
}

.h2cta-particle-3 {
    top: 67%;
    left: 7%;

    width: 6px;
    height: 6px;

    animation:
        h2cta-float-c 4.5s ease-in-out infinite;
}

.h2cta-particle-4 {
    top: 75%;
    right: 9%;

    width: 8px;
    height: 8px;

    background: #4FB7B3 !important;

    animation:
        h2cta-float-a 6.5s 0.8s ease-in-out infinite;
}

.h2cta-particle-5 {
    top: 12%;
    left: 29%;

    width: 6px;
    height: 6px;

    animation:
        h2cta-float-b 5.8s 0.5s ease-in-out infinite;
}

.h2cta-particle-6 {
    top: 17%;
    right: 30%;

    width: 5px;
    height: 5px;

    background: #4FB7B3 !important;

    animation:
        h2cta-float-c 4.8s 1s ease-in-out infinite;
}

.h2cta-particle-7 {
    bottom: 15%;
    left: 26%;

    width: 12px;
    height: 12px;

    background: #F49B78 !important;

    animation:
        h2cta-float-a 7.2s 0.4s ease-in-out infinite;
}

.h2cta-particle-8 {
    bottom: 19%;
    right: 26%;

    width: 6px;
    height: 6px;

    animation:
        h2cta-float-b 5.2s 1.2s ease-in-out infinite;
}

@keyframes h2cta-float-a {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(15px, -24px, 0);
    }
}

@keyframes h2cta-float-b {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-18px, 22px, 0) scale(1.35);
    }
}

@keyframes h2cta-float-c {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(20px, -15px, 0);
    }
}

/* ---------------------------------------------------------
   STARS
--------------------------------------------------------- */

.h2cta-star {
    position: absolute;

    color: #F2B544;

    font-family: sans-serif;
    line-height: 1;

    pointer-events: none;
    z-index: 3;

    animation:
        h2cta-star-pulse 2.8s ease-in-out infinite;
}

.h2cta-star-1 {
    top: 17%;
    left: 17%;

    font-size: 21px;
}

.h2cta-star-2 {
    right: 17%;
    bottom: 20%;

    font-size: 15px;

    animation-delay: 0.8s;
}

.h2cta-star-3 {
    left: 18%;
    bottom: 25%;

    font-size: 12px;

    animation-delay: 1.4s;
}

@keyframes h2cta-star-pulse {
    0%,
    100% {
        opacity: .5;
        transform: scale(.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(18deg);
    }
}

/* ---------------------------------------------------------
   ORBITS
--------------------------------------------------------- */

.h2cta-orbit {
    position: absolute;

    width: clamp(220px, 27vw, 390px);
    aspect-ratio: 1;

    left: 50%;
    top: 50%;

    border:
        1px dashed rgba(255, 249, 239, 0.18);

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;
}

.h2cta-orbit-a {
    transform:
        translate(-50%, -50%)
        rotate(18deg);

    animation:
        h2cta-orbit-a 18s linear infinite;
}

.h2cta-orbit-b {
    width: clamp(280px, 34vw, 500px);

    transform:
        translate(-50%, -50%)
        rotate(-28deg);

    opacity: .55;

    animation:
        h2cta-orbit-b 25s linear infinite;
}

.h2cta-orbit span {
    position: absolute;

    top: -5px;
    left: 50%;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #F2B544;

    box-shadow:
        0 0 0 6px rgba(242, 181, 68, 0.12);
}

.h2cta-orbit-b span {
    background: #4FB7B3;
}

@keyframes h2cta-orbit-a {
    to {
        transform:
            translate(-50%, -50%)
            rotate(378deg);
    }
}

@keyframes h2cta-orbit-b {
    to {
        transform:
            translate(-50%, -50%)
            rotate(-388deg);
    }
}

/* ---------------------------------------------------------
   BRUSH MARKS
--------------------------------------------------------- */

.h2cta-brush {
    position: absolute;

    width: clamp(100px, 11vw, 170px);
    height: 20px;

    border-radius: 50%;

    background: rgba(255, 249, 239, 0.14);

    pointer-events: none;
    z-index: 2;

    animation:
        h2cta-brush-float 6s ease-in-out infinite;
}

.h2cta-brush-left {
    left: -24px;
    top: 38%;

    transform: rotate(-13deg);
}

.h2cta-brush-right {
    right: -30px;
    bottom: 31%;

    transform: rotate(15deg);

    animation-delay: 1.4s;
}

@keyframes h2cta-brush-float {
    0%,
    100% {
        opacity: .6;
        transform: translateY(0) rotate(-13deg);
    }

    50% {
        opacity: 1;
        transform: translateY(-12px) rotate(-8deg);
    }
}

/* ---------------------------------------------------------
   BOTTOM PIGMENT TRAIL
--------------------------------------------------------- */

.h2cta-pigment-trail {
    position: absolute;

    left: 50%;
    bottom: 23px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 10px;

    z-index: 5;
}

.h2cta-pigment-trail i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #F2B544;

    animation:
        h2cta-trail-pulse 2.2s ease-in-out infinite;
}

.h2cta-pigment-trail i:nth-child(2) {
    background: #FFF3DE;
    animation-delay: .15s;
}

.h2cta-pigment-trail i:nth-child(3) {
    width: 10px;
    height: 10px;
    background: #F49B78;
    animation-delay: .3s;
}

.h2cta-pigment-trail i:nth-child(4) {
    width: 13px;
    height: 13px;
    background: #F2B544;
    animation-delay: .45s;
}

.h2cta-pigment-trail i:nth-child(5) {
    width: 9px;
    height: 9px;
    background: #4FB7B3;
    animation-delay: .6s;
}

.h2cta-pigment-trail i:nth-child(6) {
    background: #FFF3DE;
    animation-delay: .75s;
}

.h2cta-pigment-trail i:nth-child(7) {
    width: 6px;
    height: 6px;
    background: #F49B78;
    animation-delay: .9s;
}

@keyframes h2cta-trail-pulse {
    0%,
    100% {
        transform: translateY(0);
        opacity: .7;
    }

    50% {
        transform: translateY(-7px);
        opacity: 1;
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* Mobile-S */
@media (max-width: 374px) {

    .h2cta {
        padding: 28px 12px;
    }

    .h2cta-inner {
        min-height: 520px;
        padding: 42px 17px 55px;
        border-radius: 24px;
    }

    .h2cta-content {
        width: 100%;
    }

    .h2cta-eyebrow {
        max-width: 100%;
        padding: 7px 12px;
        font-size: 11px;
        letter-spacing: .04em;
        text-align: center;
    }

    .h2cta-title {
        font-size: 32px;
        line-height: 1.08;
    }

    .h2cta-title span::after {
        bottom: -6px;
        height: 4px;
    }

    .h2cta-description {
        font-size: 15px;
        line-height: 1.65;
    }

    .h2cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .h2cta-button {
        width: 100%;
        min-height: 48px;
    }

    .h2cta-note {
        font-size: 11px;
        gap: 8px;
    }

    .h2cta-note-line {
        width: 18px;
    }

    .h2cta-pigment-trail {
        bottom: 17px;
    }

    .h2cta-orbit {
        width: 240px;
    }

    .h2cta-orbit-b {
        width: 290px;
    }

    .h2cta-particle-1,
    .h2cta-particle-5,
    .h2cta-particle-6 {
        display: none;
    }
}

/* Mobile-M */
@media (min-width: 375px) and (max-width: 424px) {

    .h2cta {
        padding: 30px 14px;
    }

    .h2cta-inner {
        min-height: 500px;
        padding: 45px 20px 56px;
        border-radius: 25px;
    }

    .h2cta-title {
        font-size: 34px;
    }

    .h2cta-description {
        font-size: 15px;
    }

    .h2cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .h2cta-button {
        width: 100%;
    }

    .h2cta-note {
        font-size: 12px;
    }
}

/* Mobile-L */
@media (min-width: 425px) and (max-width: 767px) {

    .h2cta {
        padding: 34px 18px;
    }

    .h2cta-inner {
        min-height: 500px;
        padding: 48px 30px 60px;
    }

    .h2cta-title {
        font-size: 38px;
    }

    .h2cta-description {
        max-width: 570px;
        font-size: 16px;
    }

    .h2cta-actions {
        gap: 14px;
    }

    .h2cta-button {
        min-width: 165px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {

    .h2cta {
        padding:
            42px
            clamp(24px, 3vw, 40px);
    }

    .h2cta-inner {
        min-height: 500px;
        padding: 58px 45px 68px;
    }

    .h2cta-title {
        font-size: 42px;
    }

    .h2cta-description {
        font-size: 16px;
    }

    .h2cta-button {
        min-height: 50px;
        font-size: 15px;
    }
}

/* Laptop */
@media (min-width: 1024px) and (max-width: 1279px) {

    .h2cta {
        padding-inline: clamp(32px, 3.5vw, 48px);
    }

    .h2cta-inner {
        min-height: 520px;
    }

    .h2cta-title {
        font-size: 44px;
    }

    .h2cta-description {
        font-size: 16px;
    }

    .h2cta-button {
        font-size: 15px;
    }
}

/* Laptop-L */
@media (min-width: 1280px) and (max-width: 1439px) {

    .h2cta-inner {
        min-height: 560px;
    }

    .h2cta-title {
        font-size: 48px;
    }

    .h2cta-description {
        font-size: 17px;
    }

    .h2cta-button {
        font-size: 16px;
    }
}

/* Desktop */
@media (min-width: 1440px) {

    .h2cta-inner {
        min-height: 590px;
    }

    .h2cta-title {
        font-size: 52px;
    }

    .h2cta-description {
        font-size: 17px;
    }

    .h2cta-button {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------
   KEYBOARD FOCUS
--------------------------------------------------------- */

.h2cta-button:focus-visible {
    outline: 3px solid var(--focus, #3D2925);
    outline-offset: 4px;
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .h2cta *,
    .h2cta::before,
    .h2cta::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .h2cta-title span::after {
        transform: scaleX(1) rotate(-1deg);
    }
}

/* =========================================================
   MIX N MUSE — ABOUT
   LITTLE PROOF + FAMILY VOICES
   ---------------------------------------------------------
   FULLY SCOPED
   .abimpact-* = animated statistics
   .abvoices-* = testimonial marquee
========================================================= */


/* =========================================================
   SHARED RESET
========================================================= */

.abimpact *,
.abimpact *::before,
.abimpact *::after,
.abvoices *,
.abvoices *::before,
.abvoices *::after {
    box-sizing: border-box;
}


/* =========================================================
   1. LITTLE PROOF
========================================================= */

.abimpact {
    --abimpact-body: 15px;
    --abimpact-small: 12px;
    --abimpact-h2: 30px;

    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding-block: 78px 82px;

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

    font-family: "Manrope", sans-serif;

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


/* subtle floating colour washes */

.abimpact__wash {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;
}


.abimpact__wash-dot {
    position: absolute;

    display: block;

    width: 150px;
    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .10;

    filter: blur(1px);

    animation:
        abimpactWashFloat
        8s
        ease-in-out
        infinite
        alternate;
}


.abimpact__wash-dot--one {
    top: 8%;
    inset-inline-start: -80px;

    background: var(--apricot);
}


.abimpact__wash-dot--two {
    top: 38%;
    inset-inline-end: -100px;

    width: 190px;

    background: var(--aqua);

    animation-delay: -2s;
}


.abimpact__wash-dot--three {
    bottom: -90px;
    inset-inline-start: 38%;

    width: 180px;

    background: var(--saffron);

    animation-delay: -4s;
}


.abimpact__wrap,
.abvoices__wrap {
    width: min(
        calc(100% - 32px),
        1400px
    );

    margin-inline: auto;
}


/* heading */

.abimpact__head {
    max-width: 760px;

    margin-inline: auto;

    text-align: center;
}


.abimpact__tag,
.abvoices__tag {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 34px;

    padding: 7px 14px;

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

    border-radius: 999px;

    background: var(--surface);

    color: var(--text);

    font-size: var(--abimpact-small);
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.abimpact__tag-dot,
.abvoices__tag-dot {
    width: 8px;
    height: 8px;

    flex: none;

    border-radius: 50%;

    background: var(--vermillion);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--vermillion) 12%,
            transparent
        );
}


.abimpact__head h2,
.abvoices__head h2 {
    margin: 18px 0 12px;

    color: var(--text);

    font-family: "DynaPuff", cursive;

    font-size: var(--abimpact-h2);

    font-weight: 500;

    line-height: 1.18;

    letter-spacing: -.4px;

    text-wrap: balance;
}


.abimpact__head h2 span,
.abvoices__head h2 span {
    color: var(--vermillion);
}


.abimpact__head p {
    max-width: 680px;

    margin: 0 auto;

    color: var(--text-soft);

    font-size: var(--abimpact-body);

    line-height: 1.72;
}


/* =========================================================
   STATS STAGE
========================================================= */

.abimpact__stage {
    position: relative;

    margin-top: 54px;
}


.abimpact__drawing {
    position: absolute;

    z-index: 0;

    width: 100%;

    pointer-events: none;
}


.abimpact__drawing path {
    fill: none;

    stroke: var(--vermillion);

    stroke-width: 3;

    stroke-linecap: round;

    stroke-dasharray: 1;

    stroke-dashoffset: 1;

    pathLength: 1;

    animation:
        abimpactDraw
        1.7s
        cubic-bezier(.65,0,.35,1)
        forwards;
}


.abimpact__drawing--top {
    top: -24px;

    inset-inline: 0;

    height: 55px;
}


.abimpact__drawing--bottom {
    bottom: -28px;

    inset-inline: 0;

    height: 42px;

    opacity: .7;

    transform: scaleY(-1);
}


.abimpact__drawing--bottom path {
    stroke: var(--aqua);

    animation-delay: .35s;
}


/* stats */

.abimpact__stats {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch;

    border-top: 1px solid var(--border-strong);

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


.abimpact__stat {
    position: relative;

    min-width: 0;

    padding: 28px 24px 32px;

    border-inline-end: 1px solid var(--border);

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(26px);

    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.16,1,.3,1),
        background-color .3s ease;
}


.abimpact__stat:last-child {
    border-inline-end: 0;
}


.abimpact.is-visible .abimpact__stat {
    opacity: 1;

    transform:
        translateY(0);
}


.abimpact.is-visible
.abimpact__stat:nth-child(2) {
    transition-delay: .12s;
}


.abimpact.is-visible
.abimpact__stat:nth-child(3) {
    transition-delay: .24s;
}


.abimpact.is-visible
.abimpact__stat:nth-child(4) {
    transition-delay: .36s;
}


.abimpact__stat:hover {
    background:
        color-mix(
            in srgb,
            var(--surface) 62%,
            transparent
        );
}


.abimpact__stat-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 32px;
}


.abimpact__index {
    color: var(--text-soft);

    font-size: var(--abimpact-small);

    font-weight: 700;

    letter-spacing: .08em;
}


.abimpact__mark {
    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    color: var(--vermillion);

    font-family: "DynaPuff", cursive;

    font-size: 18px;

    animation:
        abimpactMark
        3s
        ease-in-out
        infinite;
}


.abimpact__stat--saffron
.abimpact__mark {
    color: var(--saffron);
}


.abimpact__stat--aqua
.abimpact__mark {
    color: var(--aqua);
}


.abimpact__stat--coral
.abimpact__mark {
    color: var(--coral);
}


.abimpact__number {
    display: block;

    margin-top: 24px;

    color: var(--text);

    font-family: "DynaPuff", cursive;

    font-size: clamp(42px, 5vw, 72px);

    font-weight: 500;

    line-height: .95;

    letter-spacing: -1px;

    white-space: nowrap;
}


.abimpact__stat--vermilion
.abimpact__number {
    color: var(--vermillion);
}


.abimpact__stat--saffron
.abimpact__number {
    color: var(--saffron);
}


.abimpact__stat--aqua
.abimpact__number {
    color: var(--aqua);
}


.abimpact__stat--coral
.abimpact__number {
    color: var(--coral);
}


.abimpact__stat h3 {
    margin: 18px 0 9px;

    color: var(--text);

    font-size: clamp(18px, 1.6vw, 23px);

    font-weight: 600;

    line-height: 1.25;
}


.abimpact__stat p {
    max-width: 29ch;

    margin: 0;

    color: var(--text-soft);

    font-size: var(--abimpact-body);

    line-height: 1.65;
}


.abimpact__stroke {
    display: block;

    width: 58px;
    height: 4px;

    margin-top: 23px;

    border-radius: 999px;

    background: var(--vermillion);

    transform-origin: left center;

    transform:
        scaleX(.35);

    transition:
        transform .5s ease;
}


.abimpact__stat--saffron
.abimpact__stroke {
    background: var(--saffron);
}


.abimpact__stat--aqua
.abimpact__stroke {
    background: var(--aqua);
}


.abimpact__stat--coral
.abimpact__stroke {
    background: var(--coral);
}


.abimpact__stat:hover
.abimpact__stroke {
    transform:
        scaleX(1);
}


/* footer */

.abimpact__footer {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 30px;

    margin-top: 58px;

    padding-top: 26px;

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


.abimpact__footer-copy {
    min-width: 0;
}


.abimpact__footer-label {
    display: block;

    margin-bottom: 8px;

    color: var(--text-soft);

    font-size: var(--abimpact-small);

    font-weight: 700;

    letter-spacing: .08em;
}


.abimpact__footer-copy p {
    max-width: 760px;

    margin: 0;

    color: var(--text-soft);

    font-size: var(--abimpact-body);

    line-height: 1.65;
}


.abimpact__footer-copy strong {
    color: var(--text);

    font-weight: 600;
}


.abimpact__footer-art {
    position: relative;

    width: 130px;
    height: 52px;
}


.abimpact__paint {
    position: absolute;

    display: block;

    height: 12px;

    border-radius: 999px;

    transform-origin: center;
}


.paint-one {
    width: 72px;

    top: 10px;
    inset-inline-end: 20px;

    background: var(--vermillion);

    transform:
        rotate(-8deg);
}


.paint-two {
    width: 55px;

    top: 25px;
    inset-inline-end: 38px;

    background: var(--saffron);

    transform:
        rotate(7deg);
}


.paint-three {
    width: 34px;

    top: 38px;
    inset-inline-end: 15px;

    background: var(--aqua);

    transform:
        rotate(-5deg);
}


.abimpact__footer-spark {
    position: absolute;

    top: -4px;
    inset-inline-end: 0;

    color: var(--aqua);

    font-family: "DynaPuff", cursive;

    font-size: 24px;

    animation:
        abimpactSpark
        2.8s
        ease-in-out
        infinite;
}


/* =========================================================
   2. FAMILY VOICES
========================================================= */

.abvoices {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding-block: 86px 88px;

    background: var(--surface);

    color: var(--text);

    font-family: "Manrope", sans-serif;

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


.abvoices__wrap {
    overflow: hidden;
}


.abvoices__head {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, .75fr);

    align-items: end;

    gap: clamp(30px, 7vw, 120px);

    margin-bottom: 52px;
}


.abvoices__heading-side {
    min-width: 0;
}


.abvoices__head h2 {
    max-width: 620px;

    margin-bottom: 0;

    font-size: clamp(32px, 4vw, 52px);

    line-height: 1.08;
}


.abvoices__intro {
    max-width: 510px;

    margin: 0;

    color: var(--text-soft);

    font-size: var(--abimpact-body);

    line-height: 1.75;
}


/* marquee viewport */

.abvoices__marquee {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 22px;

    width: calc(100% + 48px);

    margin-inline: -24px;

    overflow: hidden;

    padding-block: 6px 12px;
}


/* soft edge fade */

.abvoices__marquee::before,
.abvoices__marquee::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;
    bottom: 0;

    width: 90px;

    pointer-events: none;
}


.abvoices__marquee::before {
    inset-inline-start: 0;

    background:
        linear-gradient(
            to right,
            var(--surface),
            transparent
        );
}


.abvoices__marquee::after {
    inset-inline-end: 0;

    background:
        linear-gradient(
            to left,
            var(--surface),
            transparent
        );
}


/* rows */

.abvoices__track {
    display: flex;

    width: max-content;

    flex: none;
}


.abvoices__track--one {
    animation:
        abvoicesMoveLeft
        34s
        linear
        infinite;
}


.abvoices__track--two {
    animation:
        abvoicesMoveRight
        39s
        linear
        infinite;
}


.abvoices__group {
    display: flex;

    align-items: stretch;

    gap: 18px;

    flex: none;

    padding-inline-end: 18px;
}


/* testimonial piece */

.abvoices__voice {
    position: relative;

    display: grid;

    grid-template-columns: 94px minmax(250px, 330px);

    align-items: center;

    gap: 18px;

    width: 455px;

    min-height: 150px;

    margin: 0;

    padding: 16px;

    border-top: 1px solid var(--border-strong);

    border-bottom: 1px solid var(--border-strong);

    background:
        color-mix(
            in srgb,
            var(--canvas) 62%,
            var(--surface)
        );

    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        background-color .3s ease;
}


.abvoices__voice::before {
    content: "";

    position: absolute;

    top: 0;
    inset-inline-start: 0;

    width: 5px;
    height: 100%;

    background: var(--vermillion);

    transform:
        scaleY(.35);

    transform-origin: center;

    transition:
        transform .4s ease;
}


.abvoices__voice--two::before,
.abvoices__voice--five::before {
    background: var(--saffron);
}


.abvoices__voice--three::before,
.abvoices__voice--six::before {
    background: var(--aqua);
}


.abvoices__voice:hover {
    transform:
        translateY(-7px);
}


.abvoices__voice:hover::before {
    transform:
        scaleY(1);
}


.abvoices__portrait {
    position: relative;

    width: 94px;
    height: 116px;

    overflow: hidden;

    border-radius:
        48% 52% 45% 55%
        /
        44% 48% 52% 56%;

    background: var(--surface-soft);

    transform:
        rotate(-3deg);

    transition:
        transform .45s cubic-bezier(.16,1,.3,1);
}


.abvoices__voice:nth-child(even)
.abvoices__portrait {
    transform:
        rotate(3deg);
}


.abvoices__voice:hover
.abvoices__portrait {
    transform:
        rotate(0)
        scale(1.06);
}


.abvoices__portrait img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter: saturate(.94);

    transition:
        transform .6s ease,
        filter .4s ease;
}


.abvoices__voice:hover
.abvoices__portrait img {
    transform:
        scale(1.08);

    filter: saturate(1.08);
}


.abvoices__voice figcaption {
    min-width: 0;
}


.abvoices__voice blockquote {
    margin: 0;

    color: var(--text);

    font-family: "DynaPuff", cursive;

    font-size: clamp(16px, 1.35vw, 19px);

    font-weight: 500;

    line-height: 1.4;
}


.abvoices__voice figcaption span {
    display: block;

    margin-top: 13px;

    color: var(--text-soft);

    font-size: var(--abimpact-small);

    font-weight: 600;

    line-height: 1.4;
}


/* bottom statement */

.abvoices__bottom {
    display: grid;

    grid-template-columns:
        minmax(70px, .18fr)
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 20px;

    margin-top: 52px;

    padding-top: 24px;

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


.abvoices__bottom-line {
    width: 100%;
    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--vermillion) 0 33%,
            var(--saffron) 33% 66%,
            var(--aqua) 66% 100%
        );
}


.abvoices__bottom p {
    margin: 0;

    color: var(--text-soft);

    font-size: var(--abimpact-body);

    line-height: 1.55;
}


.abvoices__bottom strong {
    color: var(--text);

    font-weight: 600;
}


.abvoices__bottom-spark {
    color: var(--saffron);

    font-family: "DynaPuff", cursive;

    font-size: 25px;

    animation:
        abimpactSpark
        3s
        ease-in-out
        infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes abimpactDraw {

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes abimpactWashFloat {

    0% {
        transform:
            translate3d(0,0,0)
            scale(.92);
    }

    100% {
        transform:
            translate3d(14px,-20px,0)
            scale(1.05);
    }

}


@keyframes abimpactMark {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0)
            scale(.9);

        opacity: .65;
    }

    50% {
        transform:
            translateY(-4px)
            rotate(12deg)
            scale(1.08);

        opacity: 1;
    }

}


@keyframes abimpactSpark {

    0%,
    100% {
        transform:
            rotate(0)
            scale(.85);

        opacity: .65;
    }

    50% {
        transform:
            rotate(90deg)
            scale(1.1);

        opacity: 1;
    }

}


@keyframes abvoicesMoveLeft {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


@keyframes abvoicesMoveRight {

    from {
        transform:
            translateX(-50%);
    }

    to {
        transform:
            translateX(0);
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.abvoices__voice:focus-within {
    outline:
        2px solid var(--focus, var(--text));

    outline-offset: 4px;
}


/* =========================================================
   MOBILE-LARGE / 425+
========================================================= */

@media (min-width: 425px) {

    .abimpact,
    .abvoices {
        --abimpact-body: 16px;
        --abimpact-small: 13px;
    }

    .abimpact__wrap,
    .abvoices__wrap {
        width: min(
            calc(100% - 40px),
            1400px
        );
    }

}


/* =========================================================
   TABLET — 768px+
========================================================= */

@media (min-width: 768px) {

    .abimpact {
        --abimpact-h2: 34px;

        padding-block: 92px 98px;
    }


    .abvoices {
        padding-block: 98px 102px;
    }


    .abimpact__wrap,
    .abvoices__wrap {
        width: min(
            calc(100% - 48px),
            1400px
        );
    }


    .abimpact__stat {
        padding-inline: 22px;
    }


    .abvoices__voice {
        width: 470px;
    }

}


/* =========================================================
   LAPTOP — 1024px+
========================================================= */

@media (min-width: 1024px) {

    .abimpact {
        --abimpact-h2: 38px;
        --abimpact-body: 16px;

        padding-block: 102px 108px;
    }


    .abvoices {
        padding-block: 106px 112px;
    }


    .abimpact__wrap,
    .abvoices__wrap {
        width: min(
            calc(100% - clamp(48px, 6vw, 80px)),
            1400px
        );
    }


    .abimpact__stat {
        padding: 32px 28px 36px;
    }


    .abimpact__number {
        font-size: clamp(48px, 4.4vw, 70px);
    }


    .abvoices__voice {
        width: 490px;

        grid-template-columns:
            104px minmax(260px, 1fr);
    }


    .abvoices__portrait {
        width: 104px;
        height: 126px;
    }

}


/* =========================================================
   LAPTOP-L — 1280px+
========================================================= */

@media (min-width: 1280px) {

    .abimpact {
        --abimpact-h2: 42px;
        --abimpact-body: 17px;
        --abimpact-small: 14px;
    }


    .abvoices {
        --abimpact-body: 17px;
        --abimpact-small: 14px;
    }


    .abimpact__stats {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .abimpact__stat {
        padding: 34px 32px 38px;
    }


    .abimpact__number {
        font-size: 72px;
    }


    .abvoices__voice {
        width: 520px;

        min-height: 166px;
    }

}


/* =========================================================
   DESKTOP — 1440px+
========================================================= */

@media (min-width: 1440px) {

    .abimpact {
        --abimpact-h2: 44px;
    }


    .abvoices__head h2 {
        font-size: 52px;
    }


    .abvoices__voice {
        width: 540px;
    }

}


/* =========================================================
   MOBILE — DO NOT SHRINK; REORGANISE
========================================================= */

@media (max-width: 767px) {

    .abimpact {
        padding-block: 64px 68px;
    }


    .abvoices {
        padding-block: 68px 72px;
    }


    .abimpact__wrap,
    .abvoices__wrap {
        width: min(
            calc(100% - 32px),
            680px
        );
    }


    .abimpact__head h2 {
        font-size: 30px;
    }


    .abimpact__head p {
        max-width: 39em;
    }


    .abimpact__stage {
        margin-top: 40px;
    }


    .abimpact__drawing {
        display: none;
    }


    .abimpact__stats {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        border-top: 1px solid var(--border-strong);
        border-bottom: 0;
    }


    .abimpact__stat {
        padding: 22px 16px 25px;

        border-inline-end: 1px solid var(--border);

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


    .abimpact__stat:nth-child(2n) {
        border-inline-end: 0;
    }


    .abimpact__number {
        margin-top: 18px;

        font-size: clamp(38px, 12vw, 52px);
    }


    .abimpact__stat h3 {
        margin-top: 14px;

        font-size: 17px;
    }


    .abimpact__stat p {
        font-size: 14px;
        line-height: 1.58;
    }


    .abimpact__footer {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 38px;
    }


    .abimpact__footer-art {
        justify-self: end;
    }


    /* voices */

    .abvoices__head {
        display: block;

        margin-bottom: 38px;
    }


    .abvoices__head h2 {
        max-width: 100%;

        margin-top: 16px;

        font-size: 32px;
    }


    .abvoices__intro {
        max-width: 40em;

        margin-top: 17px;

        font-size: 15px;
    }


    .abvoices__marquee {
        width: calc(100% + 32px);

        margin-inline: -16px;

        gap: 16px;
    }


    .abvoices__marquee::before,
    .abvoices__marquee::after {
        width: 34px;
    }


    .abvoices__group {
        gap: 12px;

        padding-inline-end: 12px;
    }


    .abvoices__voice {
        display: grid;

        grid-template-columns:
            74px minmax(205px, 1fr);

        gap: 13px;

        width: min(86vw, 365px);

        min-height: 135px;

        padding: 13px;
    }


    .abvoices__portrait {
        width: 74px;
        height: 94px;
    }


    .abvoices__voice blockquote {
        font-size: 15px;

        line-height: 1.38;
    }


    .abvoices__voice figcaption span {
        margin-top: 9px;

        font-size: 11px;
    }


    .abvoices__bottom {
        grid-template-columns: 1fr auto;

        gap: 14px;

        margin-top: 36px;
    }


    .abvoices__bottom-line {
        display: none;
    }


    .abvoices__bottom p {
        font-size: 14px;
    }

}


/* =========================================================
   MOBILE-M — 375px to 424px
========================================================= */

@media (min-width: 375px) and (max-width: 424px) {

    .abimpact__number {
        font-size: 44px;
    }


    .abimpact__stat {
        padding-inline: 17px;
    }


    .abvoices__voice {
        width: 88vw;
    }

}


/* =========================================================
   MOBILE-S — <=374px
========================================================= */

@media (max-width: 374px) {

    .abimpact__wrap,
    .abvoices__wrap {
        width: calc(100% - 24px);
    }


    .abimpact__head h2 {
        font-size: 27px;
    }


    .abimpact__head p {
        font-size: 14px;
    }


    .abimpact__stats {
        grid-template-columns: 1fr;
    }


    .abimpact__stat,
    .abimpact__stat:nth-child(2n) {
        border-inline-end: 0;
    }


    .abimpact__number {
        font-size: 48px;
    }


    .abimpact__stat h3 {
        font-size: 18px;
    }


    .abimpact__stat p {
        max-width: 34em;
    }


    .abvoices__head h2 {
        font-size: 29px;
    }


    .abvoices__voice {
        grid-template-columns:
            68px minmax(190px, 1fr);

        width: 92vw;

        gap: 11px;
    }


    .abvoices__portrait {
        width: 68px;
        height: 88px;
    }


    .abvoices__voice blockquote {
        font-size: 14px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .abimpact *,
    .abimpact *::before,
    .abimpact *::after,
    .abvoices *,
    .abvoices *::before,
    .abvoices *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }


    .abvoices__track {
        transform: none !important;
    }


    .abimpact__stat {
        opacity: 1;
        transform: none;
    }


    .abimpact__drawing path {
        stroke-dashoffset: 0;
    }

}

/* =========================================================
   MIX N MUSE - TRIAL BOOKING FORM (additive; classes .tf-, tokens scoped to .tf)
   Field look comes from your existing .au-field / .au-check styles, so it matches signup.
========================================================= */
.tf{--tf-red:#C62828;--tf-gut:16px;position:relative;z-index:2;isolation:isolate;overflow:hidden;padding-block:56px 72px;background:var(--canvas);font-family:"Manrope",sans-serif;font-size:16px;line-height:1.6;color:var(--text);scroll-margin-top:84px}
.tf,.tf *,.tf *::before,.tf *::after{box-sizing:border-box}
:where(.tf) button{font:inherit;color:inherit;cursor:pointer}
.tf :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tf-wrap{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--tf-gut)}
.tf-grid{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:minmax(0,1fr)}
.tf-art{order:1;width:100%;max-width:420px;margin-inline:auto}
.tf-form{order:2;width:100%;max-width:680px;margin-inline:auto}
.tf.js .tf-card,.tf.js .tf-art{opacity:0;transform:translateY(26px)}
.tf.js.in-view .tf-card,.tf.js.in-view .tf-art{opacity:1;transform:none;transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.tf.js.in-view .tf-art{transition-delay:.15s}

/* card + heading (same look as the signup card) */
.tf-card{position:relative;overflow:clip;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:28px;padding:clamp(22px,3.2vw,40px);box-shadow:var(--shadow);color:var(--text)}
.tf-card::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:linear-gradient(90deg,var(--vermillion) 0 25%,var(--saffron) 25% 50%,var(--aqua) 50% 75%,var(--apricot) 75% 100%)}
.tf-card.is-shake{animation:auShake .5s}
.tf-head{margin-top:6px}
.tf-tag{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;margin-bottom:14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.tf-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vermillion)}
.tf-title{font-family:"DynaPuff",cursive;font-weight:500;font-size:clamp(28px,3.6vw,42px);line-height:1.16;margin:0 0 12px;color:var(--text)}
.tf-title-s{font-size:clamp(24px,3vw,34px)}
.tf-hl{position:relative;display:inline-block;color:var(--vermillion)}
.tf-hl svg{position:absolute;inset-inline:0;bottom:-.1em;width:100%;height:.28em;overflow:visible}
.tf-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.tf.in-view .tf-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .9s ease}
.tf-lead{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--text-soft);max-width:34em}

/* sticky progress pill for phones and tablets (the picture is above the form there) */
.tf-mini{position:sticky;top:78px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px;padding:8px 12px;border:1.5px solid var(--border-strong);border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(8px)}
.tf-mini b{font-family:"DynaPuff",cursive;font-weight:500;font-size:14px;line-height:1.2;color:var(--text)}

/* fields: reuse .au-field, add textarea, date and red error states */
.tf-fields{display:grid;gap:0 16px;grid-template-columns:minmax(0,1fr)}
.tf .au-field textarea{display:block;width:100%;min-height:116px;padding:30px 16px 32px;border:2px solid var(--border-strong);border-radius:14px;background:var(--canvas);color:var(--text);font-family:"Manrope",sans-serif;font-size:16px;font-weight:600;line-height:1.5;resize:vertical;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.tf .au-field textarea:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px color-mix(in srgb,var(--aqua) 30%,transparent)}
.tf .au-field textarea:focus ~ .au-label,.tf .au-field textarea:not(:placeholder-shown) ~ .au-label{transform:translateY(-12px) scale(.875);color:var(--text)}
.tf .au-field textarea:focus ~ .au-line{transform:scaleX(1)}
.tf .is-area .au-line{top:auto;bottom:3px}
.tf-count{position:absolute;inset-inline-end:16px;bottom:8px;font-size:12px;font-weight:700;color:var(--text-soft);pointer-events:none}
.tf .is-date .au-label{transform:translateY(-12px) scale(.875);color:var(--text)}
.tf .is-date input{padding-inline-end:52px}
.tf .is-date input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tf .is-date input::-webkit-datetime-edit{color:var(--text)}
.tf-consent{margin:4px 0 20px}
.tf .au-check{color:var(--text)}

/* red validation (border, label, icon, message, checkbox) */
.tf .au-field.has-error input,.tf .au-field.has-error select,.tf .au-field.has-error textarea{border-color:var(--tf-red);box-shadow:0 0 0 4px color-mix(in srgb,var(--tf-red) 18%,transparent);animation:auShake .4s}
.tf .au-field.has-error .au-label{color:var(--tf-red)}
.tf .au-field.has-error .au-ic,.tf .au-field.has-error .au-select-caret{color:var(--tf-red)}
.tf .au-err{display:flex;align-items:flex-start;gap:7px;margin:7px 4px 0;font-size:13px;font-weight:700;line-height:1.35;color:var(--tf-red)}
.tf .au-err:empty{display:none}
.tf .au-err:not(:empty)::before{content:"!";flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;background:var(--tf-red);color:var(--surface);font-size:12px;font-weight:800;line-height:17px;text-align:center}
.tf .au-check.has-error .au-box{border-color:var(--tf-red);box-shadow:0 0 0 4px color-mix(in srgb,var(--tf-red) 18%,transparent);animation:auShake .4s}
.tf .au-check.has-error>span:last-child{color:var(--tf-red)}
.tf-summary{margin:0 0 18px;padding:14px 16px;border:2px solid var(--tf-red);border-radius:14px;background:color-mix(in srgb,var(--tf-red) 10%,var(--surface));color:var(--text);font-size:14px;font-weight:600;line-height:1.5;outline:none}
.tf-summary[hidden]{display:none}
.tf-summary strong{display:block;margin-bottom:6px;color:var(--tf-red);font-weight:800}
.tf-summary ul{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none}
.tf-summary button{padding:2px 0;background:none;border:0;color:var(--text);font-weight:700;text-decoration:underline;text-decoration-color:var(--tf-red);text-underline-offset:3px}
.tf-submit{width:100%;min-height:56px;font-size:16px;border-radius:16px}
.tf-foot{margin:16px 0 0;text-align:center;font-size:14px;font-weight:600;color:var(--text-soft)}

/* success state */
.tf-success{display:none;text-align:center;padding-block:8px}
.tf-card.is-success form,.tf-card.is-success .tf-head,.tf-card.is-success .tf-mini{display:none}
.tf-card.is-success .tf-success{display:block;animation:auPop .7s cubic-bezier(.3,1.4,.5,1)}
.tf-success .mascot{margin:0 auto 10px;width:110px}
.tf-recap{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin:20px 0;text-align:start}
.tf-recap div{padding:10px 14px;border:1.5px solid var(--border-strong);border-radius:14px;background:var(--surface-soft)}
.tf-recap dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.tf-recap dd{margin:2px 0 0;font-size:15px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.tf-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* colouring canvas */
.tf-canvas{position:relative;padding:clamp(12px,2vw,20px);border-radius:38px;background:var(--surface);border:1.5px solid var(--border-strong);box-shadow:var(--shadow)}
.tf-canvas::before{content:"";position:absolute;inset:10px;border-radius:30px;border:2px dashed var(--border-strong);pointer-events:none}
.tf-scene{display:block;width:100%;height:auto;direction:ltr;overflow:visible}
.tf-r{fill:var(--surface-soft);stroke:#3D2925;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;transition:fill .8s ease,stroke .6s}
.tf-r.on{transform-box:fill-box;transform-origin:center;animation:auPop .65s cubic-bezier(.3,1.6,.5,1)}
.r-sky.on{fill:color-mix(in srgb,var(--aqua) 48%,var(--surface));animation:none}
.r-sun.on{fill:var(--saffron)}
.r-ray{fill:none;stroke:var(--border-strong);stroke-width:4}.r-ray.on{stroke:var(--saffron)}
.r-hill-b.on{fill:var(--apricot)}.r-hill-f.on{fill:var(--coral)}
.r-b1.on{fill:var(--vermillion)}.r-b2.on{fill:var(--saffron)}.r-b3.on{fill:var(--aqua)}
.r-b1,.r-b2,.r-b3{stroke-width:2.5}
.r-basket.on{fill:color-mix(in srgb,var(--apricot) 55%,#8D5A3B)}
.r-rope{fill:none;stroke:var(--border-strong);stroke-width:3}.r-rope.on{stroke:#3D2925;animation:none}
.r-flag.f1.on{fill:var(--vermillion)}.r-flag.f2.on{fill:var(--saffron)}.r-flag.f3.on{fill:var(--aqua)}.r-flag.f4.on{fill:var(--coral)}.r-flag.f5.on{fill:var(--apricot)}
.tf-string{fill:none;stroke:#3D2925;stroke-width:2.5;stroke-linecap:round}
.tf-cloud{fill:var(--surface);stroke:#3D2925;stroke-width:3;stroke-linejoin:round}
.tf-outline{fill:none;stroke:#3D2925;stroke-width:3;stroke-linejoin:round}
.tf-balloon{transform:translateY(var(--lift,0px));transition:transform 1s cubic-bezier(.3,1.4,.4,1)}
.tf-canvas.is-complete .tf-balloon{animation:tfFloat 4s ease-in-out infinite}
@keyframes tfFloat{0%,100%{transform:translateY(-16px)}50%{transform:translateY(-28px)}}
.tf-canvas .sc-spark{fill:var(--saffron);stroke:#3D2925;stroke-width:2;stroke-linejoin:round;opacity:0;transform-box:fill-box;transform-origin:center}
.tf-canvas.is-complete .sc-spark{animation:auSparkBurst 1.4s ease-out both}
.tf-canvas.is-complete .sc-spark:nth-child(2n){fill:var(--aqua);animation-delay:.15s}
.tf-canvas.is-complete .sc-spark:nth-child(3n){fill:var(--coral);animation-delay:.3s}
.tf-prog{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:14px;padding-inline:6px}
.tf-prog b{display:block;font-family:"DynaPuff",cursive;font-weight:500;font-size:18px;line-height:1.25;color:var(--text)}
.tf-prog .msg{display:block;font-size:14px;font-weight:600;color:var(--text-soft)}
.tf-dabs{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.tf-dab{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong);background:transparent;transition:background-color .5s,border-color .5s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.tf-dab.on{transform:scale(1.18);border-color:#3D2925}
.tf-dab:nth-child(1).on{background:var(--saffron)}.tf-dab:nth-child(2).on{background:var(--aqua)}.tf-dab:nth-child(3).on{background:var(--coral)}.tf-dab:nth-child(4).on{background:var(--vermillion)}.tf-dab:nth-child(5).on{background:var(--saffron)}.tf-dab:nth-child(6).on{background:var(--aqua)}.tf-dab:nth-child(7).on{background:var(--apricot)}.tf-dab:nth-child(8).on{background:var(--vermillion)}
.tf-dot{position:fixed;z-index:2000;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none}

/* ---------- responsive: 320 / 375 / 425 / 768 / 1024 / 1280 / 1440 ---------- */
@media(min-width:425px){.tf{--tf-gut:20px}}
@media(min-width:640px){.tf-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}.tf-prog{flex-direction:row;align-items:center;justify-content:space-between}}
@media(min-width:768px){.tf{--tf-gut:24px;padding-block:80px 96px}}
@media(min-width:1024px){
  .tf{--tf-gut:clamp(24px,3vw,40px);padding-block:96px 112px}
  .tf-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:start}
  .tf-form{order:1;max-width:none;margin-inline:0}
  .tf-art{order:2;max-width:none;margin-inline:0;position:sticky;top:112px}
  .tf-mini{display:none}
  .tf-prog{flex-direction:column;align-items:flex-start}
}
@media(min-width:1280px){.tf{--tf-gut:clamp(32px,3.5vw,48px)}}
@media(max-width:1023px){.tf-art{max-width:420px}}
@media(max-width:424px){.tf-mini .tf-dab{width:12px;height:12px;border-width:1.5px}.tf-mini .tf-dabs{gap:4px}.tf-mini b{font-size:12.5px;line-height:1.25}}
@media(max-width:374px){.tf-recap{grid-template-columns:minmax(0,1fr)}.tf-btns .btn{width:100%}.tf-mini b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.tf *,.tf *::before,.tf *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}}

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

.cs-page {
    min-height: 100vh;
    background: var(--canvas, #FFF7E8);
    color: var(--text, #3D2925);
}


/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.cs-coming-soon {
    position: relative;

    min-height: 100svh;
    min-height: 100vh;

    width: 100%;
    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 72% 20%,
            color-mix(
                in srgb,
                var(--saffron) 10%,
                transparent
            ),
            transparent 24%
        ),
        var(--canvas, #FFF7E8);

    display: flex;
    flex-direction: column;

    padding:
        clamp(82px, 8vw, 112px)
        clamp(16px, 3.5vw, 48px)
        clamp(24px, 4vw, 42px);
}


/* ============================================================
   TOP CONTROLS
   ============================================================ */

.cs-controls {
    position: absolute;

    top:
        clamp(16px, 2.2vw, 28px);

    right:
        clamp(16px, 3.5vw, 48px);

    z-index: 50;

    display: flex;
    align-items: center;
    gap: 8px;
}


.cs-control {
    min-width: 48px;
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 13px;

    border: 1px solid var(--border-strong);
    border-radius: 12px;

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

    cursor: pointer;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(61, 41, 37, .07);

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.cs-control svg {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;
}

.cs-sun-icon {
    display: none;
}

html[data-theme="light"] .cs-moon-icon {
    display: block;
}

html[data-theme="dark"] .cs-sun-icon {
    display: block;
}

html[data-theme="dark"] .cs-moon-icon {
    display: none;
}


.cs-control:hover {
    transform: translateY(-2px);

    background: var(--surface-soft);
    color: var(--vermillion);

    border-color:
        color-mix(
            in srgb,
            var(--vermillion) 35%,
            var(--border-strong)
        );
}


.cs-control:focus-visible,
.cs-home-button:focus-visible {
    outline: 3px solid var(--focus, #3D2925);
    outline-offset: 3px;
}


/* ============================================================
   DECORATIVE BACKGROUND
   ============================================================ */

.cs-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: -1;
}


.cs-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

    opacity: .52;

    animation:
        csFloat 7s ease-in-out infinite;
}


.cs-orb-a {
    width: 180px;
    height: 180px;

    top: 12%;
    right: -45px;

    background: var(--saffron);

    opacity: .16;
}


.cs-orb-b {
    width: 130px;
    height: 130px;

    left: -35px;
    bottom: 10%;

    background: var(--apricot);

    opacity: .18;

    animation-delay: -2s;
}


.cs-orb-c {
    width: 90px;
    height: 90px;

    right: 38%;
    top: 8%;

    background: var(--aqua);

    opacity: .13;

    animation-delay: -4s;
}


.cs-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    animation:
        csDotFloat 5s ease-in-out infinite;
}


.cs-dot-a {
    left: 7%;
    top: 22%;

    background: var(--vermillion);
}


.cs-dot-b {
    left: 43%;
    top: 14%;

    width: 7px;
    height: 7px;

    background: var(--saffron);

    animation-delay: -1.2s;
}


.cs-dot-c {
    right: 7%;
    top: 34%;

    width: 13px;
    height: 13px;

    background: var(--aqua);

    animation-delay: -2.2s;
}


.cs-dot-d {
    right: 34%;
    bottom: 13%;

    width: 8px;
    height: 8px;

    background: var(--coral);

    animation-delay: -3.1s;
}


.cs-dot-e {
    left: 33%;
    bottom: 7%;

    width: 6px;
    height: 6px;

    background: var(--saffron);

    animation-delay: -4s;
}


.cs-ring {
    position: absolute;

    border: 1px solid
        color-mix(
            in srgb,
            var(--vermillion) 18%,
            transparent
        );

    border-radius: 50%;

    animation:
        csRingPulse 5s ease-in-out infinite;
}


.cs-ring-a {
    width: 250px;
    height: 250px;

    right: 7%;
    top: 8%;
}


.cs-ring-b {
    width: 145px;
    height: 145px;

    left: 5%;
    bottom: 5%;

    border-color:
        color-mix(
            in srgb,
            var(--aqua) 22%,
            transparent
        );

    animation-delay: -2s;
}


.cs-doodle {
    position: absolute;

    width: 150px;
    height: auto;

    left: 4%;
    top: 7%;

    opacity: .24;

    transform: rotate(-8deg);
}


.cs-doodle path {
    fill: none;

    stroke: var(--vermillion);
    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 4 7;

    animation:
        csDoodleMove 8s linear infinite;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.cs-content {
    position: relative;
    z-index: 5;

    width: min(1400px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(380px, .98fr);

    align-items: center;

    gap: clamp(28px, 5vw, 90px);

    flex: 1;
}


/* ============================================================
   COPY
   ============================================================ */

.cs-copy {
    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 690px;
}


.cs-eyebrow {
    width: fit-content;

    min-height: 42px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 15px;

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

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--surface) 88%,
            transparent
        );

    font-size: 13px;
    font-weight: 600;

    letter-spacing: .01em;

    animation:
        csReveal .75s ease both;
}


.cs-eyebrow-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--vermillion);

    box-shadow:
        0 0 0 5px
        color-mix(
            in srgb,
            var(--vermillion) 12%,
            transparent
        );

    animation:
        csPulse 2s ease-in-out infinite;
}


.cs-title {
    margin: 22px 0 0;

    font-family: "DynaPuff", cursive;

    font-weight: 500;

    font-size: clamp(
        32px,
        4.1vw,
        52px
    );

    line-height: 1.08;

    letter-spacing: -.025em;

    color: var(--text);

    max-width: 640px;
}


.cs-title-line {
    display: block;

    animation:
        csTitleRise .8s cubic-bezier(.2,.75,.2,1) both;
}


.cs-title-line:nth-child(1) {
    animation-delay: .08s;
}


.cs-title-line:nth-child(2) {
    animation-delay: .20s;
}


.cs-title-line:nth-child(3) {
    animation-delay: .32s;
}


.cs-title-accent {
    color: var(--vermillion);
}


.cs-brush-line {
    width: min(290px, 72%);

    height: 15px;

    margin-top: -2px;

    overflow: visible;
}


.cs-brush-line span {
    display: block;

    width: 100%;
    height: 9px;

    border-radius: 70% 30% 65% 35%;

    background: var(--saffron);

    transform-origin: left center;

    animation:
        csBrushDraw .95s cubic-bezier(.65,0,.25,1) .48s both;
}


.cs-description {
    max-width: 630px;

    margin: 20px 0 0;

    color: var(--text-soft, #5C443E);

    font-size: clamp(
        15px,
        1.35vw,
        17px
    );

    line-height: 1.75;

    animation:
        csReveal .8s ease .42s both;
}


.cs-mini-message {
    display: flex;
    align-items: center;
    gap: 12px;

    max-width: 570px;

    margin-top: 20px;

    padding: 12px 15px;

    border-left: 3px solid var(--aqua);

    background:
        color-mix(
            in srgb,
            var(--aqua) 7%,
            transparent
        );

    animation:
        csReveal .8s ease .54s both;
}


.cs-mini-icon {
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--saffron);
    color: var(--on-pigment, #3D2925);

    font-size: 15px;
}


.cs-mini-message p {
    margin: 0;

    color: var(--text);

    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}


/* ============================================================
   COUNTDOWN
   ============================================================ */

.cs-countdown {
    display: flex;
    align-items: center;

    width: fit-content;

    margin-top: 28px;

    animation:
        csReveal .8s ease .65s both;
}


.cs-time {
    min-width: 75px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;
}


.cs-time strong {
    display: block;

    font-family: "DynaPuff", cursive;
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 500;

    line-height: 1;

    color: var(--text);
}


.cs-time span {
    font-size: 10px;
    font-weight: 600;

    letter-spacing: .09em;

    color: var(--text-soft, #5C443E);
}


.cs-time-divider {
    margin: 0 7px 13px;

    color: var(--vermillion);

    font-family: "DynaPuff", cursive;
    font-size: 22px;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.cs-progress-wrap {
    width: min(560px, 100%);

    margin-top: 20px;

    animation:
        csReveal .8s ease .76s both;
}


.cs-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 600;

    color: var(--text-soft, #5C443E);
}


.cs-progress {
    position: relative;

    height: 7px;

    overflow: visible;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--text) 10%,
            transparent
        );
}


.cs-progress-fill {
    position: absolute;

    inset: 0 auto 0 0;

    width: 76%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--vermillion),
            var(--saffron),
            var(--apricot)
        );

    transform-origin: left;

    animation:
        csProgress .9s cubic-bezier(.2,.8,.2,1) 1s both;
}


.cs-progress-dot {
    position: absolute;

    top: 50%;
    left: 76%;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    background: var(--saffron);

    border: 3px solid var(--canvas);

    box-shadow:
        0 3px 12px
        color-mix(
            in srgb,
            var(--saffron) 35%,
            transparent
        );

    animation:
        csDotPulse 2s ease-in-out infinite;
}


/* ============================================================
   HOME BUTTON
   ============================================================ */

.cs-actions {
    margin-top: 22px;

    animation:
        csReveal .8s ease .86s both;
}


.cs-home-button {
    position: relative;

    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 12px 20px;

    overflow: hidden;

    border: 1px solid var(--vermillion);
    border-radius: 13px;

    background: var(--vermillion);
    color: #FFF9EF;

    font-size: 15px;
    font-weight: 600;

    box-shadow:
        0 10px 25px
        color-mix(
            in srgb,
            var(--vermillion) 20%,
            transparent
        );

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        color .3s ease;
}


.cs-home-button::before {
    content: "";

    position: absolute;

    inset: 0;

    background: var(--saffron);

    transform:
        translateX(-105%);

    transition:
        transform .4s cubic-bezier(.65,0,.25,1);
}


.cs-home-button span,
.cs-home-button svg {
    position: relative;
    z-index: 2;
}


.cs-home-button svg {
    width: 19px;
    height: 19px;

    transition:
        transform .3s ease;
}


.cs-home-button:hover {
    transform: translateY(-3px);

    color: var(--on-pigment, #3D2925);

    box-shadow:
        0 14px 30px
        color-mix(
            in srgb,
            var(--vermillion) 28%,
            transparent
        );
}


.cs-home-button:hover::before {
    transform: translateX(0);
}


.cs-home-button:hover svg {
    transform: translateX(4px);
}


/* ============================================================
   ART AREA
   ============================================================ */

.cs-art-area {
    position: relative;

    width: 100%;
    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;
}


.cs-child-art {
    position: relative;

    z-index: 7;

    display: block;

    width: min(650px, 100%);

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 22px
            rgba(61,41,37,.12)
        );

    animation:
        csCharacterFloat 5.5s ease-in-out infinite;

    transform-origin: center bottom;
}


/* ============================================================
   PAINT SHAPES
   ============================================================ */

.cs-paint-back {
    position: absolute;

    z-index: 1;

    pointer-events: none;

    border-radius:
        48% 52% 58% 42% /
        42% 45% 55% 58%;

    animation:
        csPaintFloat 6s ease-in-out infinite;
}


.cs-paint-back-a {
    width: 390px;
    height: 390px;

    right: 5%;
    top: 10%;

    background: var(--saffron);

    opacity: .55;

    transform:
        rotate(-12deg);
}


.cs-paint-back-b {
    width: 300px;
    height: 280px;

    left: 7%;
    bottom: 10%;

    background: var(--apricot);

    opacity: .54;

    transform:
        rotate(18deg);

    animation-delay: -2s;
}


.cs-paint-back-c {
    width: 220px;
    height: 190px;

    right: 18%;
    bottom: 3%;

    background: var(--aqua);

    opacity: .40;

    transform:
        rotate(-24deg);

    animation-delay: -4s;
}


/* ============================================================
   ART CIRCLE
   ============================================================ */

.cs-art-circle {
    position: absolute;

    z-index: 2;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    border:
        1px dashed
        color-mix(
            in srgb,
            var(--vermillion) 32%,
            transparent
        );

    animation:
        csSlowRotate 25s linear infinite;
}


.cs-art-circle::before,
.cs-art-circle::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border: 1px solid
        color-mix(
            in srgb,
            var(--saffron) 35%,
            transparent
        );
}


.cs-art-circle::before {
    inset: 28px;
}


.cs-art-circle::after {
    inset: 58px;
}


.cs-art-circle span {
    position: absolute;

    top: -5px;
    left: 50%;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    transform: translateX(-50%);

    background: var(--vermillion);
}


/* ============================================================
   ART LABEL
   ============================================================ */

.cs-art-label {
    position: absolute;

    z-index: 10;

    right: 4%;
    bottom: 8%;

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--text);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .04em;

    animation:
        csReveal .8s ease 1s both;
}


.cs-label-line {
    display: block;

    width: 42px;
    height: 2px;

    background: var(--vermillion);

    border-radius: 999px;
}


/* ============================================================
   FLOATING PALETTE DOTS
   ============================================================ */

.cs-floating-palette {
    position: absolute;

    z-index: 11;

    right: 4%;
    top: 14%;

    width: 70px;
    height: 110px;
}


.cs-palette-dot {
    position: absolute;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    box-shadow:
        0 5px 12px
        rgba(61,41,37,.12);

    animation:
        csPaletteFloat 3.5s ease-in-out infinite;
}


.cs-palette-red {
    left: 8px;
    top: 8px;

    background: var(--vermillion);
}


.cs-palette-yellow {
    right: 4px;
    top: 37px;

    background: var(--saffron);

    animation-delay: -.7s;
}


.cs-palette-aqua {
    left: 17px;
    bottom: 9px;

    background: var(--aqua);

    animation-delay: -1.5s;
}


.cs-palette-coral {
    right: 1px;
    bottom: 0;

    background: var(--coral);

    animation-delay: -2.2s;
}


/* ============================================================
   PENCIL DECORATION
   ============================================================ */

.cs-pencil {
    position: absolute;

    z-index: 12;

    left: 12%;
    bottom: 16%;

    width: 13px;
    height: 105px;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            var(--vermillion) 0 35%,
            var(--saffron) 35% 68%,
            var(--apricot) 68%
        );

    transform:
        rotate(31deg);

    box-shadow:
        0 7px 15px
        rgba(61,41,37,.15);

    animation:
        csPencilFloat 4.5s ease-in-out infinite;
}


.cs-pencil::before {
    content: "";

    position: absolute;

    top: -17px;
    left: 1px;

    width: 11px;
    height: 20px;

    background: var(--text);

    clip-path: polygon(
        50% 0,
        100% 100%,
        0 100%
    );
}


.cs-pencil::after {
    content: "";

    position: absolute;

    bottom: -8px;
    left: 1px;

    width: 11px;
    height: 13px;

    background: var(--saffron);

    border-radius: 0 0 5px 5px;
}


/* ============================================================
   FOOTER NOTE
   ============================================================ */

.cs-footer-note {
    position: relative;
    z-index: 10;

    width: min(1400px, 100%);

    margin:
        20px auto 0;

    padding-top: 15px;

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

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    color: var(--text-soft, #5C443E);

    font-size: 11px;
    font-weight: 500;

    text-align: center;
}


.cs-footer-note span:first-child {
    color: var(--text);
    font-weight: 600;
}


.cs-footer-separator {
    color: var(--vermillion);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes csReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes csTitleRise {
    from {
        opacity: 0;
        transform: translateY(34px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes csBrushDraw {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}


@keyframes csProgress {
    from {
        width: 0;
    }

    to {
        width: 76%;
    }
}


@keyframes csPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}


@keyframes csDotPulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.18);
    }
}


@keyframes csFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}


@keyframes csDotFloat {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(8px, -14px);
    }
}


@keyframes csRingPulse {
    0%,
    100% {
        transform: scale(.96);
        opacity: .45;
    }

    50% {
        transform: scale(1.05);
        opacity: .85;
    }
}


@keyframes csDoodleMove {
    to {
        stroke-dashoffset: -55;
    }
}


@keyframes csCharacterFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(-1deg);
    }
}


@keyframes csPaintFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-12deg);
    }

    50% {
        transform: translateY(-13px) rotate(-8deg);
    }
}


@keyframes csSlowRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes csPaletteFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-9px) rotate(7deg);
    }
}


@keyframes csPencilFloat {
    0%,
    100% {
        transform: translateY(0) rotate(31deg);
    }

    50% {
        transform: translateY(-10px) rotate(27deg);
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1023px) {

    .cs-coming-soon {
        padding-top: 88px;
    }


    .cs-content {
        grid-template-columns: 1fr;

        gap: 18px;

        align-items: center;
    }


    .cs-copy {
        max-width: 760px;

        margin-inline: auto;

        text-align: center;
    }


    .cs-eyebrow {
        margin-inline: auto;
    }


    .cs-title {
        margin-inline: auto;
    }


    .cs-description {
        margin-inline: auto;
    }


    .cs-mini-message {
        margin-inline: auto;

        text-align: left;
    }


    .cs-countdown {
        margin-inline: auto;
    }


    .cs-progress-wrap {
        margin-inline: auto;

        text-align: left;
    }


    .cs-actions {
        text-align: center;
    }


    .cs-art-area {
        min-height: 430px;

        max-width: 700px;

        margin-inline: auto;
    }


    .cs-child-art {
        width: min(530px, 85%);
    }


    .cs-paint-back-a {
        width: 320px;
        height: 320px;
    }


    .cs-art-circle {
        width: 350px;
        height: 350px;
    }


    .cs-art-label {
        right: 8%;
    }
}


/* ============================================================
   MOBILE-L / MOBILE-M / MOBILE-S
   ============================================================ */

@media (max-width: 767px) {

    .cs-coming-soon {
        min-height: 100svh;

        padding:
            78px
            16px
            22px;
    }


    .cs-controls {
        top: 14px;
        right: 16px;
    }


    .cs-control {
        min-width: 44px;
        min-height: 44px;

        padding: 8px 11px;
    }


    .cs-control span {
        display: none;
    }


    .cs-content {
        gap: 5px;
    }


    .cs-copy {
        text-align: center;
    }


    .cs-eyebrow {
        min-height: 40px;

        padding:
            7px 12px;

        font-size: 11px;
    }


    .cs-title {
        margin-top: 17px;

        font-size:
            clamp(32px, 10vw, 42px);

        line-height: 1.1;
    }


    .cs-brush-line {
        width: 205px;

        margin-inline: auto;
    }


    .cs-description {
        margin-top: 15px;

        font-size: 14px;

        line-height: 1.65;
    }


    .cs-mini-message {
        max-width: 500px;

        justify-content: center;

        text-align: left;

        margin-top: 15px;
    }


    .cs-mini-message p {
        font-size: 12px;
    }


    .cs-countdown {
        margin-top: 22px;

        justify-content: center;

        width: 100%;
    }


    .cs-time {
        min-width:
            clamp(52px, 15vw, 68px);
    }


    .cs-time strong {
        font-size:
            clamp(22px, 7vw, 29px);
    }


    .cs-time span {
        font-size: 8px;
    }


    .cs-time-divider {
        margin-inline: 2px;

        font-size: 17px;
    }


    .cs-progress-wrap {
        width: 100%;

        margin-top: 17px;
    }


    .cs-progress-label {
        font-size: 9px;
    }


    .cs-home-button {
        min-height: 48px;

        padding-inline: 18px;

        font-size: 14px;
    }


    .cs-art-area {
        min-height:
            clamp(300px, 88vw, 400px);

        margin-top: 5px;
    }


    .cs-child-art {
        width:
            min(460px, 94vw);

        max-height: 390px;
    }


    .cs-paint-back-a {
        width: 240px;
        height: 240px;

        right: 6%;
        top: 12%;
    }


    .cs-paint-back-b {
        width: 190px;
        height: 170px;

        left: 6%;
        bottom: 8%;
    }


    .cs-paint-back-c {
        width: 145px;
        height: 125px;

        right: 16%;
    }


    .cs-art-circle {
        width: 275px;
        height: 275px;
    }


    .cs-art-label {
        right: 3%;
        bottom: 4%;

        font-size: 9px;
    }


    .cs-label-line {
        width: 25px;
    }


    .cs-floating-palette {
        right: 3%;
        top: 9%;

        transform: scale(.75);
        transform-origin: top right;
    }


    .cs-pencil {
        left: 7%;
        bottom: 14%;

        transform: scale(.8) rotate(31deg);
    }


    .cs-ring-a {
        width: 170px;
        height: 170px;

        right: -55px;
    }


    .cs-ring-b {
        width: 100px;
        height: 100px;

        left: -35px;
    }


    .cs-doodle {
        width: 95px;

        left: -8px;
    }


    .cs-footer-note {
        margin-top: 9px;

        padding-top: 11px;

        font-size: 9px;

        line-height: 1.5;
    }
}


/* ============================================================
   MOBILE-S
   ============================================================ */

@media (max-width: 374px) {

    .cs-coming-soon {
        padding-top: 74px;
    }


    .cs-title {
        font-size: 31px;
    }


    .cs-description {
        font-size: 13px;
    }


    .cs-mini-message {
        padding: 9px 11px;
    }


    .cs-mini-icon {
        width: 27px;
        height: 27px;

        font-size: 12px;
    }


    .cs-countdown {
        transform: scale(.94);
    }


    .cs-art-area {
        min-height: 285px;
    }


    .cs-child-art {
        width: 100%;
    }


    .cs-art-circle {
        width: 235px;
        height: 235px;
    }


    .cs-art-label {
        display: none;
    }
}


/* ============================================================
   LAPTOP-L / DESKTOP
   ============================================================ */

@media (min-width: 1280px) {

    .cs-content {
        gap: clamp(
            50px,
            6vw,
            105px
        );
    }


    .cs-copy {
        max-width: 720px;
    }


    .cs-art-area {
        min-height: 610px;
    }


    .cs-child-art {
        width: min(690px, 100%);
    }


    .cs-title {
        font-size:
            clamp(
                42px,
                3.5vw,
                52px
            );
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .cs-page *,
    .cs-page *::before,
    .cs-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }


    .cs-title-line,
    .cs-brush-line span,
    .cs-progress-fill {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   MIX N MUSE - LIVING CANVAS HERO (additive; classes .lc-, tokens scoped to .lc)
   Paste at the END of styles.css
========================================================= */
.lc{--fs-h1:32px;--fs-body:15px;--fs-small:12px;--fs-btn:14px;--gutter:16px;--ease:cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;padding-top:96px;background:var(--canvas);font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.6;color:var(--text)}
.lc,.lc *,.lc *::before,.lc *::after{box-sizing:border-box}
.lc :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:where(.lc) :where(p,ul,h1){margin:0}:where(.lc) ul{padding:0;list-style:none}
:where(.lc) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.lc-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;animation:lc-bm 16s ease-in-out infinite alternate}
.lc-b1{width:min(60vw,520px);aspect-ratio:1;inset:-8% auto auto -12%;background:var(--apricot);opacity:.3}
.lc-b2{width:min(50vw,440px);aspect-ratio:1;inset:auto -10% 12% auto;background:var(--aqua);opacity:.22;animation-delay:-7s}
@keyframes lc-bm{to{transform:translate(30px,20px) scale(1.12)}}
.lc-main{flex:1;display:grid;gap:34px;align-items:center;width:100%;max-width:1400px;margin-inline:auto;padding:24px var(--gutter) 44px}
.lc-copy,.lc-stage{min-width:0}

/* reveal (only hidden when JS is on, so no-JS still shows everything) */
.lc.js .lc-fx{opacity:0;transform:translateY(24px)}
.lc.js.lc-ready .lc-fx{opacity:1;transform:none;transition:opacity .8s var(--d),transform .8s var(--d) var(--ease)}
.lc.js .lc-w>span{transform:translateY(118%)}
.lc.js.lc-ready .lc-w>span{transform:none;transition:transform .85s calc(.2s + var(--i)*.09s) var(--ease)}

/* copy */
.lc-tag{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.lc-tag::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--vermillion);animation:lc-pulse 1.6s ease-in-out infinite}
@keyframes lc-pulse{50%{transform:scale(1.5);opacity:.5}}
.lc h1.lc-title{font-family:"DynaPuff",cursive;font-weight:500;font-size:var(--fs-h1);line-height:1.16;margin:0 0 16px;color:var(--text);overflow-wrap:anywhere}
.lc-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.18em;margin-bottom:-.18em}
.lc-w>span{display:inline-block}
.lc-hl{color:var(--vermillion);position:relative;padding-bottom:.34em;margin-bottom:-.34em}
.lc-hl svg{position:absolute;inset-inline:0;bottom:.08em;width:100%;height:.3em;overflow:visible}
.lc-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.lc-ready .lc-hl path,.lc:not(.js) .lc-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s 1.3s ease}
.lc:not(.js) .lc-hl path{transition:none}
.lc-lead{max-width:32em;margin-bottom:24px;color:var(--text-soft)}
.lc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.lc-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:14px;border:2px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.2;text-decoration:none;transition:transform .3s,color .3s}
.lc-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.lc-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}
.lc-btn-p{background:var(--btn-bg);color:var(--btn-text);box-shadow:0 12px 26px -12px var(--btn-bg)}
.lc-btn-p::before{background:var(--text)}
.lc-btn-g{border-color:var(--text);color:var(--text);background:transparent}
.lc-btn-g::before{background:var(--saffron)}
.lc-btn-g:hover,.lc-btn-g:focus-visible{color:#3D2925}
@media(hover:hover){.lc-btn:hover{transform:translateY(-3px)}.lc-btn:hover::before{transform:scaleX(1)}.lc-btn:hover svg{transform:translateX(5px)}.lc-btn-p:hover{color:var(--canvas)}}
.lc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:30em}
.lc-stats li{display:grid;align-content:center;gap:2px;padding:12px 10px;border-radius:18px;border:1.5px solid var(--border-strong);background:var(--surface);text-align:center}
.lc-stats b{font-family:"DynaPuff",cursive;font-weight:500;font-size:calc(var(--fs-body) + 6px);line-height:1.15;color:var(--vermillion)}
.lc-stats span{font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--text-soft)}
.lc-stats b span{font:inherit;color:inherit}

/* living canvas */
.lc-stage{position:relative;width:min(100%,560px,max(300px,calc((100svh - 240px) / 1.05)));aspect-ratio:1/1.05;margin-inline:auto}
.lc-frame{position:absolute;inset:0;z-index:1;border-radius:44% 56% 48% 52%/42% 46% 54% 58%;overflow:hidden;border:4px solid var(--text);background:var(--surface-soft);box-shadow:0 14px 0 var(--border-strong);animation:lc-wob 9s ease-in-out infinite alternate;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
@keyframes lc-wob{50%{border-radius:52% 48% 56% 44%/50% 40% 60% 50%}}
.lc-frame>img,.lc-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.lc-bw{object-fit:cover;object-position:var(--px,50%) var(--py,50%);filter:grayscale(1) contrast(.9) brightness(1.04);opacity:0;transition:opacity .6s}
.lc-bw.lc-on{opacity:1}
.lc:not(.js) .lc-bw{filter:none}
.lc-cv{pointer-events:none}
.lc-cur{position:absolute;z-index:3;left:0;top:0;width:46px;height:46px;border-radius:50%;border:3px solid var(--text);background:color-mix(in srgb,var(--saffron) 55%,transparent);pointer-events:none;transform:translate(-50%,-50%) scale(0);transition:transform .2s}
.lc-cur.lc-show{transform:translate(-50%,-50%) scale(1)}
.lc-cap{position:absolute;z-index:3;inset-inline:12%;top:8%;width:max-content;max-width:76%;margin-inline:auto;padding:6px 14px;border-radius:99px;background:var(--surface);border:2px solid var(--text);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.3;text-align:center;transition:opacity .3s}
.lc-cap.lc-swap{opacity:0}
.lc-hint{position:absolute;z-index:3;inset:auto 0 26%;display:flex;justify-content:center;pointer-events:none;transition:opacity .5s}
.lc-hint>span{padding:7px 16px;border-radius:99px;background:var(--text);color:var(--canvas);font-size:var(--fs-small);font-weight:700;line-height:1.3;animation:lc-bob 2.4s ease-in-out infinite}
.lc-hint-touch{display:none}
@media(hover:none){.lc-hint-fine{display:none}.lc-hint-touch{display:inline}.lc-cur{display:none}}
@media(hover:hover) and (pointer:fine){.lc-frame{cursor:none}}
.lc-hint.lc-gone{opacity:0}
@keyframes lc-bob{50%{transform:translateY(-6px)}}
.lc-brush{position:absolute;z-index:4;left:0;top:0;width:56px;pointer-events:none;opacity:0;transform-origin:50% 3%;transform:translate(-50%,-3%) rotate(200deg);filter:drop-shadow(0 6px 0 rgba(0,0,0,.14));transition:opacity .3s}
.lc-brush.lc-show{opacity:1}

/* floating art supplies */
.lc-tube{position:absolute;z-index:3;width:44px;height:92px;--c:var(--vermillion);animation:lc-fl 5s ease-in-out infinite alternate;animation-delay:var(--dl,0s);pointer-events:none}
.lc-tube::before{content:"";position:absolute;inset:14px 0 0;border:3px solid var(--text);border-radius:6px 6px 14px 14px;background:linear-gradient(90deg,rgba(255,255,255,.3) 0 18%,transparent 18%),var(--c)}
.lc-tube::after{content:"";position:absolute;inset:0 10px auto;height:18px;border:3px solid var(--text);border-radius:5px;background:var(--text)}
@keyframes lc-fl{to{transform:translateY(-14px) rotate(12deg)}}
.lc-t1{inset-block-start:1%;inset-inline-start:-1%;rotate:-18deg}
.lc-t2{inset-block-end:22%;inset-inline-end:-2%;--c:var(--aqua);--dl:-1.5s;rotate:22deg}
.lc-t3{inset-block-start:48%;inset-inline-start:-6%;--c:var(--saffron);--dl:-3s;rotate:-62deg;width:36px;height:76px}
.lc-badge{position:absolute;z-index:4;inset-block-end:-3%;inset-inline-start:2%;width:96px;height:96px;border-radius:50%;background:var(--saffron);border:3px solid var(--text);display:grid;place-items:center;pointer-events:none}
.lc-ring{position:absolute;inset:0;width:100%;height:100%;animation:lc-spin 14s linear infinite}
.lc-ring text{font:700 11.5px "Manrope",sans-serif;letter-spacing:.14em;fill:#3D2925;text-transform:uppercase}
.lc-sp{width:30px;fill:var(--vermillion);stroke:#3D2925;stroke-width:1.6;animation:lc-spin 6s linear infinite reverse}
@keyframes lc-spin{to{transform:rotate(360deg)}}
.lc-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:var(--surface);border:2px solid var(--text);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.3;white-space:nowrap;animation:lc-bob 4s ease-in-out infinite;pointer-events:none}
.lc-chip i{width:9px;height:9px;border-radius:50%;background:var(--aqua)}
.lc-c1{inset-block-start:34%;inset-inline-end:-2%}

/* controls */
.lc-ctrl{position:absolute;z-index:5;inset-block-end:-18px;inset-inline-end:4%;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:99px;background:var(--surface);border:2px solid var(--text)}
.lc-pp{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--text);color:var(--canvas)}
.lc-pp svg{width:16px;height:16px}
.lc-ic-play{display:none}.lc-pp[aria-pressed="true"] .lc-ic-play{display:block}.lc-pp[aria-pressed="true"] .lc-ic-pause{display:none}
.lc-dots{display:flex;gap:6px}
.lc-dot{position:relative;width:22px;height:22px;display:grid;place-items:center;border-radius:50%}
.lc-dot::before{content:"";width:10px;height:10px;border-radius:99px;background:var(--border-strong);transition:width .35s var(--ease),background-color .3s}
.lc-dot[aria-current="true"]::before{width:22px;background:var(--text)}
.lc-dot[aria-current="true"]::after{content:"";position:absolute;inset-block:6px;inset-inline-start:0;width:calc(22px * var(--p,0));border-radius:99px;background:var(--vermillion);max-width:22px}

/* ribbon */
.lc-rib{position:relative;margin-top:auto;background:var(--text);color:var(--canvas);padding:16px 0 30px;overflow:hidden}
.lc-rib::after{content:"";position:absolute;inset:auto 0 0;height:14px;background:repeating-linear-gradient(90deg,var(--vermillion) 0 40px,var(--saffron) 40px 80px,var(--aqua) 80px 120px,var(--apricot) 120px 160px)}
.lc-trk{display:flex;gap:34px;width:max-content;direction:ltr;animation:lc-mq 28s linear infinite;font-family:"DynaPuff",cursive;font-size:19px;line-height:1.3;white-space:nowrap}
.lc-trk span{display:inline-flex;align-items:center;gap:34px}
.lc-trk span::after{content:"";width:14px;height:14px;background:var(--saffron);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes lc-mq{to{transform:translateX(-50%)}}

/* breakpoints */
@media(min-width:375px){.lc{--fs-h1:34px}}
@media(min-width:425px){.lc{--fs-h1:36px;--fs-body:16px;--fs-small:13px;--gutter:20px}.lc-badge{width:112px;height:112px}.lc-sp{width:34px}}
@media(min-width:768px){.lc-brush{width:78px}.lc{--fs-h1:42px;--gutter:24px;padding-top:112px}.lc-main{gap:44px;padding-bottom:56px}.lc-tube{width:50px;height:104px}.lc-trk{font-size:22px}}
@media(min-width:1024px){.lc{--fs-h1:46px;--gutter:clamp(24px,3vw,40px)}.lc-main{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;padding-block:8px 56px}.lc-stage{margin-inline-end:0}.lc-badge{width:128px;height:128px}}
@media(min-width:1280px){.lc{--fs-h1:54px;--fs-body:17px;--fs-small:14px;--gutter:clamp(32px,3.5vw,48px)}.lc-main{gap:64px}}
@media(min-width:1440px){.lc{--fs-h1:60px}}
@media(max-width:424px){.lc-badge{width:84px;height:84px}.lc-sp{width:24px}.lc-ring text{font-size:12px}.lc-chip{padding:6px 12px}.lc-c1{inset-inline-end:0}.lc-t2{inset-inline-end:1%}.lc-t1{inset-inline-start:0}}
@media(max-width:374px){.lc-t3{display:none}.lc-stats li{padding:10px 4px}.lc-btn{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.lc *,.lc *::before,.lc *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}.lc-trk{animation:none!important}}


/* =========================================================
   MIX N MUSE - A DAY IN CLASS (additive; classes .cd-, tokens scoped to .cd)
   Paste at the END of styles.css
========================================================= */
.cd{--fs-h2:24px;--fs-h3:19px;--fs-body:15px;--fs-small:12px;--gutter:16px;--gap:16px;--ease:cubic-bezier(.2,.8,.2,1);--paper:#FFF9EF;--ink:#3D2925;position:relative;z-index:2;overflow-x:clip;isolation:isolate;background:var(--canvas);padding-block:64px;font-family:"Manrope",sans-serif;font-size:var(--fs-body);line-height:1.6;color:var(--text)}
.cd,.cd *,.cd *::before,.cd *::after{box-sizing:border-box}
.cd :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cd h2,.cd h3{font-family:"DynaPuff",cursive;font-weight:500;margin:0;line-height:1.2;color:var(--text);overflow-wrap:anywhere;text-wrap:balance}
.cd h2{font-size:var(--fs-h2)}.cd h3{font-size:var(--fs-h3)}
:where(.cd) :where(p,ul,ol,figure){margin:0}:where(.cd) :where(ul,ol){padding:0;list-style:none}
.cd-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;animation:cd-bm 16s ease-in-out infinite alternate}
.cd-b1{width:min(55vw,480px);aspect-ratio:1;inset:6% auto auto -12%;background:var(--apricot);opacity:.26}
.cd-b2{width:min(50vw,420px);aspect-ratio:1;inset:auto -10% 6% auto;background:var(--aqua);opacity:.2;animation-delay:-7s}
@keyframes cd-bm{to{transform:translate(30px,20px) scale(1.12)}}
.cd-wrap{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter);display:grid;gap:28px}

/* header + reveal */
.cd-head{max-width:46em}
.cd-tag{display:inline-flex;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.cd-hl{position:relative;display:inline-block;color:var(--vermillion)}
.cd-hl svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.cd-hl path{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .cd-hl path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .8s ease}
.cd:not(.js) .cd-hl path{stroke-dashoffset:0}
.cd-lead{margin-top:12px;color:var(--text-soft)}
.cd-rv{opacity:0;transform:translateY(22px)}
.in-view .cd-rv{opacity:1;transform:none;transition:opacity .8s calc(.1s + var(--i)*.12s),transform .8s calc(.1s + var(--i)*.12s) var(--ease)}
.cd:not(.js) .cd-rv{opacity:1;transform:none}

.cd-grid{display:grid;gap:18px;align-items:start}

/* sticky stage */
.cd-stage{position:sticky;top:84px;z-index:3;height:272px;min-width:0;overflow:hidden;border-radius:26px;border:3px solid var(--text);background:var(--surface);box-shadow:0 8px 0 var(--border-strong);display:grid;grid-template-rows:minmax(0,1fr) auto;padding:12px 12px 8px}
.cd-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 28%,transparent),transparent 62%);transition:background .6s;z-index:0}
.cd-num{position:absolute;z-index:0;inset-inline-start:10px;inset-block-start:-14px;font-family:"DynaPuff",cursive;font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--c) 70%,transparent);pointer-events:none;transition:opacity .3s}
.cd-num.cd-swap{opacity:0}
.cd-dab{position:absolute;z-index:1;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);opacity:.85;animation:cd-fl 5s ease-in-out infinite alternate;transition:background-color .5s}
.cd-d1{--s:22px;inset-block-start:16%;inset-inline-end:10%}
.cd-d2{--s:14px;inset-block-end:34%;inset-inline-start:8%;animation-delay:-2s;background:var(--saffron)}
.cd-d3{--s:10px;inset-block-start:46%;inset-inline-end:5%;animation-delay:-3.4s;background:var(--aqua)}
@keyframes cd-fl{to{transform:translateY(-12px) scale(1.15)}}

/* polaroid that develops */
.cd-pol{position:relative;z-index:2;justify-self:center;align-self:center;height:100%;max-height:100%;aspect-ratio:1/1.02;max-width:100%;padding:8px 8px 0;background:var(--paper);border:2px solid var(--ink);border-radius:8px;box-shadow:0 10px 0 rgba(0,0,0,.12);transform:rotate(-2.5deg);display:grid;grid-template-rows:minmax(0,1fr) auto;transition:transform .7s var(--ease)}
.cd-pol.cd-flip{transform:rotate(2.5deg) scale(1.02)}
.cd-ph{position:relative;overflow:hidden;border-radius:3px;background:#E9DECB}
.cd-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.cd-ph img.cd-on{opacity:1;animation:cd-dev 1.3s var(--ease) both}
@keyframes cd-dev{0%{opacity:.25;filter:blur(14px) sepia(1) saturate(2.4) brightness(1.5)}55%{opacity:1;filter:blur(4px) sepia(.6) saturate(1.6) brightness(1.2)}100%{opacity:1;filter:none}}
.cd:not(.js) .cd-ph img{animation:none}
.cd-pc{padding:6px 4px 7px;text-align:center;font-size:var(--fs-small);font-weight:700;line-height:1.3;color:var(--ink);font-family:"Manrope",sans-serif;transition:opacity .25s}
.cd-pc.cd-swap{opacity:0}

/* paint track */
.cd-trackwrap{position:relative;z-index:2;padding-top:6px}
.cd-track{display:block;width:100%;height:auto;overflow:visible}
.cd-base,.cd-fill{fill:none;stroke-linecap:round}
.cd-base{stroke:var(--border-strong);stroke-width:7}
.cd-fill{stroke:var(--c);stroke-width:7;transition:stroke .5s}
.cd-stops circle{fill:var(--surface);stroke:var(--text);stroke-width:3;transition:fill .3s}
.cd-stops circle.cd-hit{fill:var(--c)}
.cd-mark path{fill:var(--saffron);stroke:var(--text);stroke-width:2;stroke-linejoin:round}
.cd-lb{position:absolute;inset-block-end:-2px;left:12%;transform:translateX(-50%);font-size:11px;font-weight:700;line-height:1.2;color:var(--text);white-space:nowrap}
.cd-trackwrap{padding-bottom:16px}

/* steps */
.cd-steps{display:grid;gap:14px}
.cd-step{display:grid;align-items:center;min-height:300px}
.cd-card{position:relative;display:grid;gap:12px;padding:20px 18px;border-radius:24px;border:2px solid var(--border-strong);background:var(--surface);transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;transform:scale(.97)}
.cd-card::before{content:"";position:absolute;inset-block:18px;inset-inline-start:0;width:6px;border-radius:0 6px 6px 0;background:var(--c);transform:scaleY(.3);transition:transform .5s var(--ease)}
.cd-act .cd-card{border-color:var(--c);transform:none;box-shadow:0 12px 0 -4px color-mix(in srgb,var(--c) 45%,transparent)}
.cd-act .cd-card::before{transform:scaleY(1)}
.cd-k{display:inline-flex;justify-self:start;padding:5px 12px;border-radius:99px;background:var(--c);color:#3D2925;font-size:var(--fs-small);font-weight:700;letter-spacing:.04em;line-height:1.3}
.cd-card p{color:var(--text-soft)}
.cd-chips{display:flex;flex-wrap:wrap;gap:8px}
.cd-chips li{padding:6px 12px;border-radius:99px;border:1.5px solid var(--border-strong);background:var(--surface-soft);color:var(--text);font-size:var(--fs-small);font-weight:700;line-height:1.3;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
.cd-act .cd-chips li,.cd:not(.js) .cd-chips li{opacity:1;transform:none}
.cd-act .cd-chips li:nth-child(2){transition-delay:.1s}.cd-act .cd-chips li:nth-child(3){transition-delay:.2s}
.cd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;justify-self:start;min-height:48px;padding:12px 22px;border-radius:14px;background:var(--btn-bg);color:var(--btn-text);font-size:var(--fs-small);font-weight:700;line-height:1.2;text-decoration:none;box-shadow:0 12px 26px -12px var(--btn-bg);transition:transform .3s}
.cd-btn svg{width:18px;height:18px;flex:none;transition:transform .3s}
@media(hover:hover){.cd-btn:hover{transform:translateY(-3px)}.cd-btn:hover svg{transform:translateX(5px)}}

/* breakpoints */
@media(min-width:375px){.cd{--fs-h2:26px}}
@media(min-width:425px){.cd{--fs-h2:28px;--fs-h3:20px;--fs-body:16px;--fs-small:13px;--gutter:20px}.cd-stage{height:300px}.cd-num{font-size:140px}.cd-card{padding:24px 22px}}
@media(min-width:768px){.cd{--fs-h2:30px;--fs-h3:22px;--gutter:24px;padding-block:80px}.cd-stage{top:96px;height:360px;padding:16px 16px 10px}.cd-num{font-size:170px}.cd-step{min-height:340px}.cd-lb{font-size:12px}}
@media(min-width:900px){
  .cd-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px}
  .cd-stage{top:112px;height:min(74vh,600px);min-height:440px;padding:20px 20px 12px}
  .cd-num{font-size:min(260px,30vh);inset-block-start:-10px;inset-inline-start:16px}
  .cd-steps{gap:0}
  .cd-step{min-height:max(56vh,380px)}
  .cd-step:first-child{align-items:start;min-height:max(44vh,340px)}
  .cd-step:last-child{align-items:end;min-height:max(44vh,340px)}
}
@media(min-width:1024px){.cd{--fs-h2:32px;--fs-h3:24px;--gutter:clamp(24px,3vw,40px);padding-block:96px}.cd-grid{gap:56px}}
@media(min-width:1280px){.cd{--fs-h2:34px;--fs-h3:26px;--fs-body:17px;--fs-small:14px;--gutter:clamp(32px,3.5vw,48px)}.cd-card{padding:30px 28px}}
@media(min-width:1440px){.cd{--fs-h2:36px}}
/* A DAY IN CLASS: stack the picture before all four steps on mobile and tablet */
@media (max-width: 1023px) {
  .cd-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .cd-stage {
    position: relative;
    top: auto;
    order: 0;
    width: 100%;
    height: clamp(240px, 58vw, 360px);
    min-height: 0;
  }

  .cd-steps {
    order: 1;
    gap: 14px;
  }

  .cd-step,
  .cd-step:first-child,
  .cd-step:last-child {
    min-height: 0;
    align-items: stretch;
  }
}

@media(max-width:374px){.cd-stage{height:252px;padding:10px 10px 6px}.cd-num{font-size:100px}.cd-card{padding:18px 14px}.cd-lb{font-size:10px}.cd-btn{padding-inline:16px}}
/* A DAY IN CLASS: laptop 1024px only — keep the photo filling the polaroid
   and give the paint-track labels room so the last one is not clipped */
@media (width: 1024px) {
  .cd-stage {
    height: min(74vh, 600px);
    min-height: 440px;
  }

    .cd-pol {
    flex-shrink: 0;
    aspect-ratio: auto;
    width: 100%;
    max-width: 100%;
    height: calc(100% - 28px);
    max-height: calc(100% - 28px);
  }
  .cd-ph img {
    object-fit: cover;
    object-position: center;
  }

  .cd-lb {
    font-size: 11px;
  }

  .cd-trackwrap {
    padding-top: 2px;
    padding-bottom: 14px;
  }
}
@media(prefers-reduced-motion:reduce){.cd *,.cd *::before,.cd *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}}

/* Shared back-to-top control */
.back-to-top{position:fixed;z-index:1200;right:22px;bottom:22px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1.5px solid var(--border-strong);border-radius:16px;background:var(--vermillion);color:var(--surface);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background-color .2s ease;cursor:pointer}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--saffron);color:var(--text)}
.back-to-top:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.back-to-top svg{width:22px;height:22px}
@media(max-width:600px){.back-to-top{right:14px;bottom:14px;width:44px;height:44px;border-radius:14px}}

/* ============================================================
   MIX N MUSE STUDIO METHOD: MOBILE-S + MOBILE-M
   Stack the 4 cards in one column, same as MOBILE-L
   ============================================================ */

@media (max-width: 424px) {

    .im5-canvas {
        min-height: auto;
    }

    .im5-canvas-label {
        top: 21px;
    }

    .im5-principles {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .im5-principle {
        min-height: 0;
    }

    .im5-paint-line {
        display: none;
    }

    .im5-bottom-message {
        flex-direction: column;
        gap: 10px;
    }

    .im5-brush-mark {
        order: -1;
    }

    .im5-doodle {
        opacity: .35;
    }
}