/* =========================================================
   ZENDOJO
   SHARED NAVBAR STYLES
   Typography: Archivo Black + Inter
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================== */

:root {
    --font-display: "Archivo Black", sans-serif;
    --font-body: "Inter", sans-serif;

    --nav-height: 76px;
    --container-width: 1440px;

    --nav-padding-inline: clamp(18px, 3vw, 48px);

    --transition-fast: 180ms ease;
    --transition-medium: 260ms ease;
    --transition-slow: 360ms ease;

    --radius-small: 8px;
    --radius-medium: 10px;
    --radius-large: 14px;

    --focus-ring:
        0 0 0 3px rgba(229, 57, 53, 0.22);
}


/* =========================================================
   RESET
   ========================================================== */

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

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

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;

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

    transition:
        background-color var(--transition-medium),
        color var(--transition-medium);
}

body.drawer-open {
    overflow: hidden;
}

button,
a {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

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

svg {
    display: block;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================== */

button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: var(--nav-background);
    border-bottom: 1px solid var(--nav-border);

    transition:
        background-color var(--transition-medium),
        border-color var(--transition-medium);
}


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

.navbar {
    width: 100%;
}

.navbar-inner {
    width: min(100%, var(--container-width));
    min-height: var(--nav-height);

    margin-inline: auto;
    padding-inline: var(--nav-padding-inline);

    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    column-gap: 24px;
}


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

.nav-brand,
.drawer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: max-content;

    color: var(--color-text);

    white-space: nowrap;
}

.nav-brand {
    justify-self: start;
}

.brand-mark {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

.brand-mark svg {
    width: 100%;
    height: 100%;
}

/* Dojo Sunrise logo */
.dojo-roof,
.dojo-beam,
.dojo-post,
.dojo-base {
    fill: var(--color-text);
}

.dojo-sun {
    fill: var(--color-accent);
}

.brand-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.035em;
    line-height: 1;
}


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

.desktop-nav {
    justify-self: center;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2vw, 30px);
}

.nav-item {
    position: relative;
}

.nav-link {
    position: relative;

    min-height: 42px;

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

    gap: 6px;

    padding: 8px 0;

    color: var(--nav-text);

    background: transparent;

    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-accent);
}

.dropdown-trigger {
    cursor: pointer;
}

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

    transition: transform var(--transition-fast);
}

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


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

.dropdown-menu {
    position: absolute;

    top: calc(100% + 10px);
    inset-inline-start: 50%;

    min-width: 190px;

    padding: 8px;

    background: var(--dropdown-background);
    border: 1px solid var(--dropdown-border);

    border-radius: var(--radius-medium);

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

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

    transform: translate(-50%, -6px);

    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast);
}

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

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

.dropdown-link {
    min-height: 40px;

    display: flex;
    align-items: center;

    padding: 9px 12px;

    border-radius: 7px;

    color: var(--dropdown-text);

    font-size: 13px;
    font-weight: 400;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.dropdown-link:hover,
.dropdown-link.active {
    color: var(--color-accent);
    background: var(--dropdown-hover);
}


/* =========================================================
   NAV ACTIONS
   ========================================================== */

.nav-actions {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-icon-btn {
    width: 38px;
    height: 38px;

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

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

    border-radius: 50%;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.nav-icon-btn:hover {
    color: var(--color-accent);
    background: var(--icon-hover);
}

.nav-icon-btn:active {
    transform: scale(0.94);
}

.nav-icon-btn .icon {
    width: 20px;
    height: 20px;
}

.icon-sun {
    display: none;
}

.icon-moon {
    display: block;
}


/* =========================================================
   RTL BUTTON
   ========================================================== */

.rtl-toggle {
    min-width: 42px;
    height: 36px;

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

    padding-inline: 8px;

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

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

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.rtl-toggle:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--icon-hover);
}


/* =========================================================
   LOGIN BUTTON
   ========================================================== */

.login-btn {
    min-width: 82px;
    min-height: 38px;

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

    padding: 8px 17px;

    color: var(--login-text);
    background: var(--color-accent);

    border: 1px solid var(--color-accent);
    border-radius: 7px;

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

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.login-btn:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.login-btn:active {
    transform: translateY(1px);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================== */

.menu-toggle {
    display: none;

    width: 40px;
    height: 40px;

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

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

    border-radius: 7px;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.menu-toggle:hover {
    color: var(--color-accent);
    background: var(--icon-hover);
}

.menu-toggle svg {
    width: 22px;
    height: 22px;
}


/* =========================================================
   DRAWER OVERLAY
   ========================================================== */

.drawer-overlay {
    position: fixed;
    inset: 0;

    z-index: 1090;

    background: rgba(17, 17, 17, 0.55);

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

    transition:
        opacity var(--transition-medium),
        visibility var(--transition-medium);
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   MOBILE DRAWER
   ========================================================== */

.mobile-drawer {
    position: fixed;

    top: 0;
    bottom: 0;
    inset-inline-start: 0;

    z-index: 1100;

    width: min(88vw, 390px);
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background: var(--drawer-background);
    border-inline-end: 1px solid var(--drawer-border);

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

    transform: translateX(-105%);
    visibility: hidden;

    transition:
        transform var(--transition-medium),
        visibility var(--transition-medium);
}

.mobile-drawer.open {
    transform: translateX(0);
    visibility: visible;
}


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

.drawer-header {
    min-height: 76px;

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

    padding: 12px 18px;

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

.drawer-brand .brand-mark {
    width: 38px;
    height: 38px;
}

.drawer-brand .brand-name {
    font-size: 17px;
}

.drawer-close {
    width: 42px;
    height: 42px;

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

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

    border-radius: 8px;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.drawer-close:hover {
    color: var(--color-accent);
    background: var(--icon-hover);
}

.drawer-close svg {
    width: 22px;
    height: 22px;
}


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

.drawer-content {
    flex: 1;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 16px 18px 20px;

    scrollbar-width: thin;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

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

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

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

    padding: 11px 12px;

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

    border-radius: 8px;

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

    text-align: start;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

a.mobile-nav-link:hover,
.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: var(--color-accent);
    background: var(--drawer-hover);
}

.mobile-dropdown-trigger {
    cursor: pointer;
}

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

    flex: 0 0 auto;

    transition: transform var(--transition-fast);
}

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


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

.mobile-submenu {
    max-height: 0;
    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transition:
        max-height var(--transition-medium),
        opacity var(--transition-medium),
        visibility var(--transition-medium);
}

.mobile-nav-group.open .mobile-submenu {
    max-height: 320px;

    opacity: 1;
    visibility: visible;
}

.mobile-sub-link {
    min-height: 42px;

    display: flex;
    align-items: center;

    margin-inline-start: 13px;
    padding: 9px 13px;

    color: var(--drawer-subtext);

    border-inline-start: 1px solid var(--drawer-border);

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

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.mobile-sub-link:hover,
.mobile-sub-link.active {
    color: var(--color-accent);
    background: var(--drawer-hover);
}


/* =========================================================
   DRAWER FOOTER
   ========================================================== */

.drawer-footer {
    flex: 0 0 auto;

    padding: 16px 18px 20px;

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

.drawer-login-btn {
    width: 100%;
    min-height: 48px;

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

    color: var(--login-text);
    background: var(--color-accent);

    border: 1px solid var(--color-accent);
    border-radius: 8px;

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

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.drawer-login-btn:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}


/* =========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 1023px) {

    :root {
        --nav-height: 70px;
    }

    .navbar-inner {
        display: flex;
        justify-content: space-between;
        gap: 14px;
    }

    .nav-brand {
        flex: 1 1 auto;
    }

    .desktop-nav {
        display: none;
    }

    .nav-actions {
        flex: 0 0 auto;
        justify-self: auto;

        gap: 6px;
    }

    .login-btn {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================== */

@media (max-width: 374px) {

    :root {
        --nav-height: 66px;
        --nav-padding-inline: 12px;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .brand-name {
        font-size: 16px;
    }

    .nav-actions {
        gap: 2px;
    }

    .nav-icon-btn,
    .menu-toggle {
        width: 36px;
        height: 36px;
    }

    .rtl-toggle {
        min-width: 38px;
        height: 34px;

        padding-inline: 6px;

        font-size: 11px;
    }

    .mobile-drawer {
        width: min(92vw, 350px);
    }

}


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

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

    .brand-mark {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .brand-name {
        font-size: 17px;
    }

}


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

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

    .brand-mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .brand-name {
        font-size: 18px;
    }

}


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

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

    :root {
        --nav-height: 72px;
        --nav-padding-inline: 24px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .brand-name {
        font-size: 18px;
    }

    .nav-actions {
        gap: 8px;
    }

    .mobile-drawer {
        width: min(60vw, 420px);
    }

}


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

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

    :root {
        --nav-height: 74px;
        --nav-padding-inline: 24px;
    }

    .navbar-inner {
        column-gap: 18px;
    }

    .nav-links {
        gap: 16px;
    }

    .nav-link {
        font-size: 13px;
    }

}


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

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

    :root {
        --nav-height: 76px;
        --nav-padding-inline: 30px;
    }

    .nav-links {
        gap: 22px;
    }

}


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

@media (min-width: 1536px) {

    :root {
        --nav-height: 78px;
        --nav-padding-inline: 42px;
    }

    .nav-links {
        gap: 28px;
    }

}

/* =========================================================
   PILLARS SECTION  ("pl-")
   ========================================================= */

.pl {
    position: relative;
    padding-top: clamp(56px, 9vw, 120px);
    background: var(--pl-bg, var(--color-background));
    color: var(--pl-text, var(--color-text));
    font-family: var(--font-body);
}

.pl-wrap {
    width: 100%;
    max-width: var(--container-width, 1440px);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}

/* ---------- Header ---------- */
.pl-head {
    position: relative;
    overflow: hidden;
    padding-block: 8px;
}

.pl-sun {
    position: absolute;
    inset-inline-end: -70px;
    top: -70px;
    z-index: 0;
    width: clamp(180px, 30vw, 380px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pl-mark) 0%, transparent 68%);
    pointer-events: none;
    animation: plPulse 6s ease-in-out infinite;
}

.pl-head-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 24px;
    align-items: center;
}

.pl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-accent-text);
}

.pl-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    transform-origin: left center;
}

.pl-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 7.2vw, 64px);
    font-weight: 400;
    line-height: 1.12;
    color: var(--pl-text);
    text-wrap: balance;
}

.pl-mark {
    padding-inline: 0.1em;
    background: linear-gradient(var(--pl-mark), var(--pl-mark)) no-repeat;
    background-size: 100% 42%;
    background-position: 0 92%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s;
}

.pl-lead {
    max-width: 60ch;
    margin: 16px 0 0;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.65;
    color: var(--pl-text-soft);
}

.pl-badge {
    display: none;
}

/* ---------- Marquee base (ticker + reels) ---------- */
.pl-track {
    display: flex;
    width: max-content;
}

.pl-set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl--ready .pl-track {
    animation: plSlide var(--pl-speed, 40s) linear infinite;
}

.pl--ready .pl-track--rev {
    animation-direction: reverse;
}

/* ---------- Ticker ---------- */
.pl-ticker-wrap {
    margin-top: clamp(32px, 5vw, 64px);
    padding-block: clamp(14px, 2vw, 26px);
    overflow: hidden;
}

.pl-ticker {
    width: 104%;
    margin-inline-start: -2%;
    overflow: hidden;
    background: var(--pl-ticker-bg);
    color: var(--pl-ticker-text);
    transform: rotate(-1deg);
}

.pl-ticker-item {
    padding: 12px clamp(18px, 3.4vw, 56px);
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pl-star {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: var(--pl-ticker-star);
    transform: rotate(45deg);
}

/* ---------- Cards ---------- */
.pl-stack {
    display: grid;
    gap: clamp(16px, 3vw, 28px);
    margin: clamp(36px, 6vw, 80px) 0 0;
    padding: 0;
    list-style: none;
}

.pl-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    background: var(--pl-card);
    border: 1px solid var(--pl-card-border);
    border-radius: clamp(16px, 2.4vw, 28px);
    box-shadow: var(--pl-shadow);
    transform-origin: 50% 0;
    scale: calc(1 - var(--pl-depth, 0) * 0.05);
}

.pl-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
    opacity: calc(var(--pl-depth, 0) * 0.3);
    pointer-events: none;
}

.pl-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--pl-photo-bg);
}

.pl-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.6), transparent 58%);
    pointer-events: none;
}

.pl-photo-in {
    position: absolute;
    inset: 0;
    scale: 1.07;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.3s ease-out;
}

.pl-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 22%);
    scale: 1;
    transition: scale 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pl-num {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-start: 14px;
    z-index: 2;
    font-family: var(--font-display);
    font-size: clamp(52px, 13vw, 120px);
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 2px #FAFAF7;
}

.pl-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    padding: clamp(18px, 4vw, 44px);
}

.pl-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pl-pill-bg);
    color: var(--pl-pill-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pl-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E53935;
}

.pl-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 4.6vw, 46px);
    font-weight: 400;
    line-height: 1.05;
    color: var(--pl-text);
}

.pl-tag {
    margin: 0;
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 600;
    color: var(--pl-accent-text);
}

.pl-text {
    margin: 0;
    font-size: clamp(14.5px, 1.7vw, 17px);
    line-height: 1.65;
    color: var(--pl-text-soft);
}

.pl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.pl-chip {
    padding: 7px 12px;
    border: 1px solid var(--pl-chip-border);
    border-radius: 999px;
    background: var(--pl-chip-bg);
    color: var(--pl-chip-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.pl-meter {
    margin-top: 6px;
}

.pl-meter-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-text);
}

.pl-meter-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--pl-meter-track);
}

.pl-meter-fill {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, #E53935, #FF6B66);
}

/* ---------- Counters ---------- */
.pl-stats {
    margin-top: clamp(56px, 8vw, 112px);
    background: var(--pl-band-bg);
    color: var(--pl-band-text);
}

.pl-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2vw, 24px);
    margin: 0;
    padding: clamp(32px, 5vw, 64px) 0;
    list-style: none;
}

.pl-stat {
    padding: clamp(18px, 3vw, 32px) 10px;
    border: 1px solid var(--pl-band-line);
    border-radius: 16px;
    text-align: center;
}

.pl-stat-num {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 9vw, 68px);
    line-height: 1;
    color: var(--pl-band-accent);
}

.pl-stat-label {
    margin: 10px 0 0;
    font-size: clamp(13px, 1.8vw, 16px);
    font-weight: 500;
    color: var(--pl-band-soft);
}

/* ---------- Photo reels ---------- */
.pl-reels {
    display: grid;
    gap: clamp(8px, 1.2vw, 14px);
    padding-top: clamp(32px, 5vw, 64px);
    overflow: hidden;
}

.pl-reel {
    height: clamp(120px, 20vw, 220px);
    overflow: hidden;
}

.pl-reel .pl-track,
.pl-reel .pl-set,
.pl-reel li {
    height: 100%;
}

.pl-reel .pl-set {
    gap: clamp(8px, 1.2vw, 14px);
    padding-inline-end: clamp(8px, 1.2vw, 14px);
}

.pl-reel img {
    width: auto;
    height: 100%;
    border-radius: clamp(10px, 1.4vw, 16px);
    object-fit: cover;
}

/* ---------- CTA ---------- */
.pl-cta {
    overflow: hidden;
    padding-block: clamp(48px, 7vw, 96px);
    text-align: center;
}

.pl-cta-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 5vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--pl-text);
}

.pl-cta-text {
    max-width: 52ch;
    margin: 14px auto 26px;
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.65;
    color: var(--pl-text-soft);
}

.pl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 15px 26px;
    border-radius: 999px;
    background: var(--pl-btn-bg);
    color: var(--pl-btn-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pl-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--pl-btn-bg);
    border-radius: inherit;
    pointer-events: none;
    animation: plRing 2.4s ease-out infinite;
}

.pl-btn:hover {
    background: var(--pl-btn-hover);
    transform: translateY(-2px);
}

.pl-btn svg {
    flex: 0 0 auto;
    transition: translate 0.2s ease;
}

.pl-btn:hover svg {
    translate: 4px 0;
}

/* ---------- Entrance animations (only when JS is ready) ---------- */
.pl--ready .pl-reveal {
    opacity: 0;
    translate: 0 36px;
    transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--d, 0) * 90ms);
}

.pl--ready .pl-reveal.is-in {
    opacity: 1;
    translate: 0 0;
}

.pl--ready .pl-head .pl-mark {
    background-size: 0% 42%;
}

.pl--ready .pl-head.is-in .pl-mark {
    background-size: 100% 42%;
}

.pl--ready .pl-head.is-in .pl-eyebrow::before {
    animation: plLine 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.pl--ready .pl-photo {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s cubic-bezier(0.77, 0, 0.18, 1) 0.1s;
}

.pl--ready .pl-photo img {
    scale: 1.2;
}

.pl--ready .pl-card.is-in .pl-photo {
    clip-path: inset(0 0 0 0);
}

.pl--ready .pl-card.is-in .pl-photo img {
    scale: 1;
}

.pl--ready .pl-chip {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 0.5s ease, translate 0.5s ease;
    transition-delay: calc(0.5s + var(--d, 0) * 0.09s);
}

.pl--ready .pl-card.is-in .pl-chip {
    opacity: 1;
    translate: 0 0;
}

.pl--ready .pl-meter-fill {
    width: 0;
    transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
}

.pl--ready .pl-card.is-in .pl-meter-fill {
    width: var(--w, 0%);
}

/* ---------- Keyframes ---------- */
@keyframes plSlide { to { transform: translateX(-50%); } }
@keyframes plSpin  { to { transform: rotate(360deg); } }
@keyframes plLine  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes plPulse {
    0%, 100% { transform: scale(1);    opacity: 0.75; }
    50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes plRing {
    0%   { transform: scale(1);        opacity: 0.7; }
    100% { transform: scale(1.18, 1.4); opacity: 0; }
}

/* ---------- Pointer devices ---------- */
@media (hover: hover) {
    .pl-reel:hover .pl-track {
        animation-play-state: paused;
    }
}

/* =========================================================
   Mobile M  (375px and up)
   ========================================================= */
@media (min-width: 375px) {
    .pl-chip { font-size: 13.5px; }
    .pl-body { gap: 15px; }
}

/* =========================================================
   Mobile L  (425px and up)
   ========================================================= */
@media (min-width: 425px) {
    .pl-photo { aspect-ratio: 16 / 10; }
    .pl-btn   { padding: 16px 32px; }
}

/* =========================================================
   Tablet  (768px and up)
   ========================================================= */
@media (min-width: 768px) {

    .pl-head-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 40px;
    }

    .pl-badge {
        display: block;
        width: clamp(104px, 14vw, 148px);
        aspect-ratio: 1;
        color: var(--pl-text);
    }

    .pl-badge svg {
        width: 100%;
        height: 100%;
        animation: plSpin 18s linear infinite;
    }

    .pl-badge text {
        fill: currentColor;
        font-family: var(--font-display);
        font-size: 11px;
    }

    .pl-badge-sun {
        fill: #E53935;
    }

    .pl-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: clamp(330px, 42vw, 440px);
    }

    .pl-photo {
        aspect-ratio: auto;
        height: 100%;
        min-height: 100%;
    }

    .pl-card:nth-child(even) .pl-photo {
        order: 2;
    }

    .pl-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Sticky stacking only when there is enough screen height */
@media (min-width: 768px) and (min-height: 640px) {

    .pl-stack {
        display: block;
    }

    .pl-card {
        position: sticky;
        top: calc(var(--nav-height, 76px) + 14px + var(--pl-i, 0) * 18px);
        margin-bottom: clamp(20px, 3vw, 36px);
    }
}

/* =========================================================
   Laptop  (1024px and up)
   ========================================================= */
@media (min-width: 1024px) {

    .pl-card {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        min-height: 420px;
    }

    .pl-body {
        gap: 16px;
        padding: 44px 52px;
    }
}

/* =========================================================
   Laptop L  (1440px and up)
   ========================================================= */
@media (min-width: 1440px) {

    .pl-card {
        min-height: 460px;
    }

    .pl-body {
        padding: 52px 64px;
    }

    .pl-chip {
        padding: 8px 14px;
        font-size: 14px;
    }

    .pl-lead {
        font-size: 19px;
    }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {

    .pl *,
    .pl *::before,
    .pl *::after {
        animation: none !important;
        transition: none !important;
    }

    .pl--ready .pl-reveal,
    .pl--ready .pl-chip {
        opacity: 1;
        translate: none;
    }

    .pl--ready .pl-photo { clip-path: none; }
    .pl--ready .pl-photo img { scale: 1; }
    .pl--ready .pl-meter-fill { width: var(--w, 0%); }
    .pl--ready .pl-head .pl-mark { background-size: 100% 42%; }
    .pl-card { scale: 1; }
    .pl-card::after { opacity: 0; }
}

/* Requested alignment and image decoration fixes for these sections only. */
.zj-transform .zj-transform__slash {
    display: none;
}

.zd-arena .zd-arena__head {
    align-items: center;
    text-align: center;
}

.zd-arena .zd-arena__lead {
    margin-inline: auto;
}

.zd-arena .zd-arena__nav {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
}

/* =========================================================
   ZENDOJO — BELT JOURNEY
   Shared base styles
========================================================= */

.belt-journey {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(70px, 8vw, 120px) 0;
    background: #FAFAF7;
    color: #111111;
}

.belt-journey__container {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
}

/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.belt-journey__intro {
    max-width: 720px;
    margin: 0 auto clamp(60px, 7vw, 100px);
    text-align: center;
}

.belt-journey__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #E53935;
}

.belt-journey__title {
    margin: 0;
    font-family: "Archivo Black", "Inter", sans-serif;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.1;
    font-weight: 500;
    color: #111111;
}

.belt-journey__description {
    max-width: 650px;
    margin: 18px auto 0;
    font-family: "Inter", sans-serif;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.7;
    font-weight: 400;
    color: #333333;
}

/* ---------------------------------------------------------
   JOURNEY TRACK
--------------------------------------------------------- */

.belt-journey__track {
    position: relative;
    width: 100%;
    padding: 10px 0 30px;
}

/* Center vertical line */

.belt-journey__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: rgba(17, 17, 17, 0.12);
    overflow: hidden;
}

.belt-journey__line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #E53935;
    transition: height 0.2s linear;
}

/* ---------------------------------------------------------
   STEP
--------------------------------------------------------- */

.belt-step {
    position: relative;
    width: 50%;
    min-height: 230px;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.belt-step.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.belt-step--left {
    padding-right: clamp(35px, 6vw, 90px);
}

.belt-step--right {
    margin-left: 50%;
    padding-left: clamp(35px, 6vw, 90px);
}

/* ---------------------------------------------------------
   STEP CONTENT
--------------------------------------------------------- */

.belt-step__content {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 24px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid rgba(17, 17, 17, 0.1);
    box-shadow: 0 12px 35px rgba(17, 17, 17, 0.06);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.belt-step__content:hover {
    transform: translateY(-5px);
    border-color: #E53935;
    box-shadow: 0 18px 42px rgba(17, 17, 17, 0.1);
}

/* ---------------------------------------------------------
   STEP NUMBER
--------------------------------------------------------- */

.belt-step__number {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #777777;
}

/* ---------------------------------------------------------
   BELT VISUAL
--------------------------------------------------------- */

.belt-step__belt {
    position: relative;
    width: 72px;
    height: 46px;
    margin-top: 7px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.12);
}

.belt-step__belt span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 13px;
    transform: translateY(-50%);
    background: #111111;
}

/* Belt colors */

.belt-step__belt--white {
    background: #F7F7F3;
}

.belt-step__belt--yellow {
    background: #E6C600;
}

.belt-step__belt--orange {
    background: #E87522;
}

.belt-step__belt--green {
    background: #3C8C58;
}

.belt-step__belt--blue {
    background: #4778B8;
}

.belt-step__belt--purple {
    background: #76549C;
}

.belt-step__belt--brown {
    background: #765038;
}

.belt-step__belt--black {
    background: #111111;
}

/* ---------------------------------------------------------
   STEP INFORMATION
--------------------------------------------------------- */

.belt-step__info {
    min-width: 0;
    padding-right: 22px;
}

.belt-step__label {
    display: block;
    margin-bottom: 7px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #E53935;
}

.belt-step__info h3 {
    margin: 0 0 9px;
    font-family: "Archivo Black", "Inter", sans-serif;
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.2;
    font-weight: 500;
    color: #111111;
}

.belt-step__info p {
    margin: 0;
    max-width: 540px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    color: #333333;
}

/* ---------------------------------------------------------
   SKILLS
--------------------------------------------------------- */

.belt-step__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 17px;
}

.belt-step__skills span {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 10px;
    border: 1px solid rgba(17, 17, 17, 0.13);
    background: #FAFAF7;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #333333;
}

/* ---------------------------------------------------------
   CENTER CONNECTION
--------------------------------------------------------- */

.belt-step::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(25px, 5vw, 70px);
    height: 2px;
    background: #E53935;
    transform: translateY(-50%);
}

.belt-step--left::after {
    right: 0;
}

.belt-step--right::after {
    left: 0;
}

/* Small center marker */

.belt-step::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    background: #FAFAF7;
    border: 3px solid #E53935;
    transform: translateY(-50%);
    z-index: 4;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.belt-step--left::before {
    right: -4px;
}

.belt-step--right::before {
    left: -4px;
}

.belt-step.is-visible::before {
    background: #E53935;
    transform: translateY(-50%) scale(1.15);
}

/* ---------------------------------------------------------
   FINAL STEP
--------------------------------------------------------- */

.belt-step--final {
    margin-bottom: 0;
}

.belt-step--final .belt-step__content {
    border-color: #E53935;
}

/* ---------------------------------------------------------
   CLOSING
--------------------------------------------------------- */

.belt-journey__closing {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 50px;
    text-align: center;
}

.belt-journey__closing-line {
    flex: 1;
    height: 1px;
    background: rgba(17, 17, 17, 0.15);
}

.belt-journey__closing-label {
    display: block;
    margin-bottom: 7px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #E53935;
}

.belt-journey__closing p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    color: #333333;
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 991px) {

    .belt-journey__container {
        width: min(100% - 32px, 760px);
    }

    .belt-journey__line {
        left: 26px;
        transform: none;
    }

    .belt-step,
    .belt-step--right {
        width: 100%;
        margin-left: 0;
        padding-left: 70px;
        padding-right: 0;
        min-height: auto;
    }

    .belt-step::after {
        left: 26px;
        right: auto;
        width: 44px;
    }

    .belt-step::before,
    .belt-step--left::before,
    .belt-step--right::before {
        left: 21px;
        right: auto;
    }

    .belt-step__content {
        grid-template-columns: 72px minmax(0, 1fr);
    }
}

/* =========================================================
   INSTRUCTORS PAGE — COACHING FEATURE BANNER
   Scoped to .zd-instructor-feature
   ========================================================= */
.zd-instructor-feature {
    padding: clamp(14px, 2vw, 28px) var(--nav-padding-inline, clamp(14px, 3vw, 42px));
    background: var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}

.zd-instructor-feature *,
.zd-instructor-feature *::before,
.zd-instructor-feature *::after {
    box-sizing: border-box;
}

.zd-instructor-feature__banner {
    position: relative;
    isolation: isolate;
    width: min(100%, 1560px);
    min-height: clamp(760px, 76vh, 920px);
    margin-inline: auto;
    overflow: hidden;
    border-radius: clamp(20px, 3vw, 40px);
    background: #111111;
    color: #FAFAF7;
}

.zd-instructor-feature__background,
.zd-instructor-feature__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zd-instructor-feature__background {
    z-index: -2;
    display: block;
    object-fit: cover;
    object-position: center 42%;
}

.zd-instructor-feature__shade {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(8, 10, 12, .48), transparent 30%),
        linear-gradient(90deg, rgba(8, 10, 12, .88) 0%, rgba(8, 10, 12, .72) 42%, rgba(8, 10, 12, .30) 100%),
        linear-gradient(0deg, rgba(8, 10, 12, .82), transparent 56%);
}

.zd-instructor-feature__top {
    position: absolute;
    z-index: 2;
    top: clamp(22px, 3.5vw, 48px);
    right: clamp(22px, 4vw, 56px);
    left: clamp(22px, 4vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.zd-instructor-feature__brand,
.zd-instructor-feature__top-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FAFAF7;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-decoration: none;
}

.zd-instructor-feature__brand i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent, #E53935);
    box-shadow: 0 0 18px rgba(229, 57, 53, .7);
}

.zd-instructor-feature__top-link span {
    color: var(--zd-hero-accent-text, #F2605C);
    font-size: 17px;
}

.zd-instructor-feature__main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr);
    align-items: center;
    gap: clamp(42px, 8vw, 120px);
    min-height: 650px;
    padding: 110px clamp(24px, 5vw, 72px) 190px;
}

.zd-instructor-feature__copy {
    min-width: 0;
    max-width: 760px;
}

.zd-instructor-feature__eyebrow {
    margin: 0 0 16px;
    color: #FAFAF7;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.5;
}

.zd-instructor-feature__copy h2 {
    margin: 0;
    color: #FAFAF7;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(52px, 7.2vw, 96px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.zd-instructor-feature__copy h2 span {
    color: var(--zd-hero-accent-text, #F2605C);
}

.zd-instructor-feature__description {
    max-width: 58ch;
    margin: clamp(18px, 2.2vw, 28px) 0 0;
    color: rgba(250, 250, 247, .92);
    font-size: clamp(19px, 1.55vw, 22px);
    line-height: 1.7;
}

.zd-instructor-feature__button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 26px;
    padding: 0 21px;
    border: 1px solid var(--zd-hero-btn-bg, #C92F2C);
    border-radius: 999px;
    background: var(--zd-hero-btn-bg, #C92F2C);
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}

.zd-instructor-feature__button:hover {
    background: var(--zd-hero-btn-bg-hover, #A9231F);
    transform: translateY(-2px);
}

.zd-instructor-feature__button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.zd-instructor-feature__button:hover svg { transform: translateX(3px); }

.zd-instructor-feature__standard {
    padding: clamp(22px, 2.5vw, 34px);
    border: 1px solid rgba(250, 250, 247, .3);
    border-radius: 22px;
    background: rgba(17, 17, 17, .5);
    color: #FAFAF7;
    backdrop-filter: blur(12px);
}

.zd-instructor-feature__standard-kicker {
    margin: 0 0 14px;
    color: var(--zd-hero-accent-text, #F2605C);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.5;
}

.zd-instructor-feature__standard h3 {
    margin: 0;
    color: #FAFAF7;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 400;
    line-height: 1.14;
}

.zd-instructor-feature__standard ul {
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(250, 250, 247, .22);
    list-style: none;
}

.zd-instructor-feature__standard li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    color: rgba(250, 250, 247, .92);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.5;
}

.zd-instructor-feature__standard li span {
    color: var(--zd-hero-accent-text, #F2605C);
    font-size: 11px;
    font-weight: 600;
}

.zd-instructor-feature__bottom {
    position: absolute;
    z-index: 2;
    right: clamp(24px, 5vw, 72px);
    bottom: clamp(22px, 3vw, 42px);
    left: clamp(24px, 5vw, 72px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.zd-instructor-feature__stats {
    display: flex;
    align-items: stretch;
    gap: clamp(20px, 3vw, 42px);
}

.zd-instructor-feature__stats div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zd-instructor-feature__stats strong {
    color: #FAFAF7;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 400;
    line-height: 1;
}

.zd-instructor-feature__stats span {
    color: rgba(250, 250, 247, .84);
    font-size: 13px;
    line-height: 1.4;
}

.zd-instructor-feature__coach-cards {
    display: grid;
    width: min(46%, 490px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.zd-instructor-feature__coach-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(250, 250, 247, .28);
    border-radius: 14px;
    background: rgba(17, 17, 17, .55);
    color: #FAFAF7;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: background-color .2s ease, transform .2s ease;
}

.zd-instructor-feature__coach-card:hover {
    background: rgba(17, 17, 17, .78);
    transform: translateY(-3px);
}

.zd-instructor-feature__coach-card img {
    display: block;
    width: 48px;
    height: 52px;
    border-radius: 9px;
    object-fit: cover;
    object-position: center 30%;
}

.zd-instructor-feature__coach-card span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.zd-instructor-feature__coach-card b {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zd-instructor-feature__coach-card small {
    color: rgba(250, 250, 247, .8);
    font-size: 10px;
    line-height: 1.35;
}

.zd-instructor-feature__coach-card i {
    color: var(--zd-hero-accent-text, #F2605C);
    font-size: 15px;
    font-style: normal;
}

.zd-instructor-feature__top-link:focus-visible,
.zd-instructor-feature__button:focus-visible,
.zd-instructor-feature__coach-card:focus-visible {
    outline: 3px solid #FAFAF7;
    outline-offset: 4px;
}

@media (max-width: 1023px) {
    .zd-instructor-feature__banner { min-height: 780px; }

    .zd-instructor-feature__main {
        grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr);
        gap: 30px;
        min-height: 610px;
        padding: 106px 36px 190px;
    }

    .zd-instructor-feature__copy h2 { font-size: clamp(50px, 7vw, 76px); }
    .zd-instructor-feature__standard { padding: 22px; }

    .zd-instructor-feature__bottom {
        right: 36px;
        left: 36px;
    }

    .zd-instructor-feature__coach-cards { width: 50%; }
    .zd-instructor-feature__coach-card { grid-template-columns: 40px minmax(0, 1fr); }
    .zd-instructor-feature__coach-card img { width: 40px; height: 44px; }
    .zd-instructor-feature__coach-card i { display: none; }
}

@media (max-width: 767px) {
    .zd-instructor-feature { padding: 12px 12px 20px; }

    .zd-instructor-feature__banner {
        min-height: 0;
        border-radius: 22px;
    }

    .zd-instructor-feature__background { object-position: 56% center; }

    .zd-instructor-feature__shade {
        background:
            linear-gradient(180deg, rgba(8, 10, 12, .58), rgba(8, 10, 12, .18) 28%),
            linear-gradient(90deg, rgba(8, 10, 12, .75), rgba(8, 10, 12, .30)),
            linear-gradient(0deg, rgba(8, 10, 12, .9), rgba(8, 10, 12, .12) 78%);
    }

    .zd-instructor-feature__top {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        padding: 22px 20px 0;
    }

    .zd-instructor-feature__brand,
    .zd-instructor-feature__top-link { font-size: 9px; }

    .zd-instructor-feature__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        min-height: 0;
        padding: 46px 20px 30px;
    }

    .zd-instructor-feature__copy h2 { font-size: clamp(42px, 10vw, 66px); }
    .zd-instructor-feature__eyebrow { font-size: 11px; }
    .zd-instructor-feature__description { font-size: 18px; line-height: 1.65; }
    .zd-instructor-feature__button { min-height: 48px; margin-top: 20px; }

    .zd-instructor-feature__standard {
        border-radius: 17px;
        background: rgba(17, 17, 17, .66);
    }

    .zd-instructor-feature__standard h3 { font-size: 24px; }
    .zd-instructor-feature__standard li { font-size: 15px; }

    .zd-instructor-feature__bottom {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
        padding: 0 20px 22px;
    }

    .zd-instructor-feature__stats {
        justify-content: space-between;
        gap: 12px;
        padding-top: 20px;
        border-top: 1px solid rgba(250, 250, 247, .3);
    }

    .zd-instructor-feature__stats strong { font-size: 26px; }
    .zd-instructor-feature__stats span { font-size: 11px; }

    .zd-instructor-feature__coach-cards {
        width: 100%;
        gap: 8px;
    }

    .zd-instructor-feature__coach-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .zd-instructor-feature__coach-card img { width: 42px; height: 46px; }
}

@media (max-width: 424px) {
    .zd-instructor-feature { padding-inline: 10px; }
    .zd-instructor-feature__banner { border-radius: 18px; }
    .zd-instructor-feature__top { padding-inline: 16px; gap: 10px; }
    .zd-instructor-feature__brand,
    .zd-instructor-feature__top-link { font-size: 8px; letter-spacing: .1em; }
    .zd-instructor-feature__main { padding: 42px 16px 26px; }
    .zd-instructor-feature__copy h2 { font-size: clamp(38px, 10vw, 46px); }
    .zd-instructor-feature__description { font-size: 17px; }
    .zd-instructor-feature__standard { padding: 19px; }
    .zd-instructor-feature__standard h3 { font-size: 22px; }
    .zd-instructor-feature__bottom { padding-inline: 16px; }
    .zd-instructor-feature__coach-card b { font-size: 11px; }
    .zd-instructor-feature__coach-card small { font-size: 9px; }
}

@media (max-width: 374px) {
    .zd-instructor-feature__top-link { gap: 5px; }
    .zd-instructor-feature__copy h2 { font-size: 36px; }
    .zd-instructor-feature__description { font-size: 16px; }
    .zd-instructor-feature__coach-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .zd-instructor-feature *,
    .zd-instructor-feature *::before,
    .zd-instructor-feature *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

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

@media (max-width: 767px) {

    .belt-journey {
        padding: 60px 0 70px;
    }

    .belt-journey__container {
        width: min(100% - 28px, 620px);
    }

    .belt-journey__intro {
        margin-bottom: 50px;
    }

    .belt-journey__title {
        font-size: 32px;
    }

    .belt-journey__description {
        font-size: 15px;
    }

    .belt-journey__line {
        left: 17px;
    }

    .belt-step,
    .belt-step--left,
    .belt-step--right {
        padding-left: 48px;
    }

    .belt-step::after {
        left: 17px;
        width: 31px;
    }

    .belt-step::before,
    .belt-step--left::before,
    .belt-step--right::before {
        left: 12px;
    }

    .belt-step__content {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px;
    }

    .belt-step__belt {
        width: 100%;
        height: 32px;
        margin-top: 0;
    }

    .belt-step__belt span {
        height: 10px;
    }

    .belt-step__info {
        padding-right: 0;
    }

    .belt-step__info h3 {
        font-size: 23px;
    }

    .belt-step__info p {
        font-size: 14px;
    }

    .belt-journey__closing {
        gap: 14px;
    }

    .belt-journey__closing-line {
        display: none;
    }
}

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

@media (max-width: 480px) {

    .belt-journey__container {
        width: calc(100% - 22px);
    }

    .belt-journey__eyebrow {
        font-size: 11px;
    }

    .belt-journey__title {
        font-size: 29px;
    }

    .belt-journey__description {
        font-size: 14px;
        line-height: 1.65;
    }

    .belt-step,
    .belt-step--left,
    .belt-step--right {
        padding-left: 40px;
    }

    .belt-journey__line {
        left: 14px;
    }

    .belt-step::after {
        left: 14px;
        width: 26px;
    }

    .belt-step::before,
    .belt-step--left::before,
    .belt-step--right::before {
        left: 9px;
        width: 10px;
        height: 10px;
    }

    .belt-step__content {
        padding: 18px;
    }

    .belt-step__number {
        top: 12px;
        right: 14px;
    }

    .belt-step__info h3 {
        font-size: 21px;
    }

    .belt-step__skills {
        gap: 5px;
    }

    .belt-step__skills span {
        font-size: 10px;
    }
}

/* ---------------------------------------------------------
   MOBILE-S
--------------------------------------------------------- */

@media (max-width: 360px) {

    .belt-journey__container {
        width: calc(100% - 18px);
    }

    .belt-step,
    .belt-step--left,
    .belt-step--right {
        padding-left: 35px;
    }

    .belt-journey__line {
        left: 11px;
    }

    .belt-step::after {
        left: 11px;
        width: 24px;
    }

    .belt-step::before,
    .belt-step--left::before,
    .belt-step--right::before {
        left: 6px;
    }

    .belt-step__content {
        padding: 16px;
    }

    .belt-step__info p {
        font-size: 13px;
    }
}

/* =========================================================
   PARENT PORTAL SECTION  ("pp-")
   ========================================================= */

.pp {
    position: relative;
    padding-block: clamp(56px, 9vw, 112px);
    background: var(--pp-bg, var(--color-background));
    color: var(--pp-text, var(--color-text));
    font-family: var(--font-body);
}

.pp-wrap {
    width: 100%;
    max-width: var(--container-width, 1440px);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}

.pp button:focus-visible,
.pp a:focus-visible {
    outline: 3px solid var(--pp-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Layout ---------- */
.pp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.pp-copy        { display: contents; }
.pp-head        { order: 1; }
.pp-tabs-wrap   { order: 2; }
.pp-stage       { order: 3; }
.pp-cta         { order: 4; }

/* ---------- Headline ---------- */
.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pp-accent-text);
}

.pp-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    transform-origin: left center;
}

.pp-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 6.6vw, 58px);
    font-weight: 400;
    line-height: 1.12;
    color: var(--pp-text);
    text-wrap: balance;
}

.pp-mark {
    padding-inline: 0.1em;
    background: linear-gradient(var(--pp-mark), var(--pp-mark)) no-repeat;
    background-size: 100% 42%;
    background-position: 0 92%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s;
}

.pp-lead {
    max-width: 58ch;
    margin: 16px 0 0;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.65;
    color: var(--pp-text-soft);
}

/* ---------- Steps (tabs) ---------- */
.pp-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pp-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 14px 6px 17px;
    overflow: hidden;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-tab-bg);
    color: var(--pp-text);
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pp-tab:hover {
    border-color: var(--pp-line-strong);
}

.pp-tab[aria-selected="true"] {
    background: var(--pp-tab-active-bg);
    border-color: transparent;
    color: var(--pp-tab-active-text);
}

.pp-tab-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.pp-tab-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pp-tab-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.pp-tab-desc {
    display: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pp-text-soft);
}

.pp-tab[aria-selected="true"] .pp-tab-desc {
    color: var(--pp-tab-active-soft);
}

.pp-tab-line {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: var(--pp-line-fill);
    transform: scaleX(0);
    transform-origin: left center;
}

.pp--ready .pp-tab[aria-selected="true"] .pp-tab-line {
    animation: ppFill 6s linear forwards;
}

.pp:not(.is-live) .pp-tab-line,
.pp.is-paused .pp-tab-line {
    animation-play-state: paused;
}

/* One-line hint under the tabs (mobile only), stacked so the height never jumps */
.pp-hint {
    display: grid;
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--pp-text-soft);
}

.pp-hint-item {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.pp-hint-item.is-active {
    opacity: 1;
    visibility: visible;
}

/* ---------- Buttons ---------- */
.pp-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pp-cta .pp-btn {
    flex: 1 1 200px;
}

.pp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 15px 24px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--pp-btn-bg);
    color: var(--pp-btn-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pp-btn:hover {
    background: var(--pp-btn-hover);
    transform: translateY(-2px);
}

.pp-btn svg {
    flex: 0 0 auto;
    transition: translate 0.2s ease;
}

.pp-btn:hover svg {
    translate: 4px 0;
}

.pp-btn--ghost {
    background: transparent;
    border-color: var(--pp-ghost-border);
    color: var(--pp-text);
}

.pp-btn--ghost:hover {
    background: var(--pp-tile);
}

.pp-btn--block {
    width: 100%;
}

/* ---------- Stage (device) ---------- */
.pp-stage {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
    padding: 32px 4px;
}

.pp-stage-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 32px;
    pointer-events: none;
}

.pp-glow,
.pp-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}

.pp-glow {
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pp-mark), transparent 70%);
    animation: ppPulse 5s ease-in-out infinite;
}

.pp-orbit {
    width: 112%;
    aspect-ratio: 1;
    border: 1.5px dashed var(--pp-line-strong);
    border-radius: 50%;
    animation: ppSpin 46s linear infinite;
}

.pp-orbit--2 {
    width: 84%;
    border-style: dotted;
    animation-duration: 32s;
    animation-direction: reverse;
}

.pp-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    animation: ppFloat 3.4s ease-in-out infinite;
}

.pp-chip--a {
    inset-block-start: 0;
    inset-inline-end: 14px;
    background: var(--pp-chip-bg);
    color: var(--pp-chip-text);
}

.pp-chip--a svg {
    color: #FF6B66;
}

.pp-chip--b {
    inset-block-end: 0;
    inset-inline-start: 14px;
    background: var(--pp-chip2-bg);
    color: var(--pp-chip2-text);
    animation-delay: -1.5s;
}

.pp-device {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(12px, 2.4vw, 20px);
    border: 1.5px solid var(--pp-device-border);
    border-radius: clamp(20px, 3vw, 30px);
    background: var(--pp-card);
    box-shadow: var(--pp-shadow);
}

.pp-dev-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pp-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pp-text-soft);
}

.pp-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E53935;
    animation: ppBlink 1.6s ease-in-out infinite;
}

.pp-demo {
    padding: 3px 10px;
    border: 1px solid var(--pp-line-strong);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-text-soft);
}

.pp-who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.pp-kids {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.pp-kid {
    width: 46px;
    height: 46px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--pp-tile);
    opacity: 0.65;
    transition: opacity 0.25s ease, scale 0.25s ease, border-color 0.25s ease;
}

.pp-kid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.pp-kid[aria-pressed="true"] {
    border-color: #E53935;
    opacity: 1;
    scale: 1.08;
}

.pp-who-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-who-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 4.6vw, 24px);
    line-height: 1.1;
    color: var(--pp-text);
}

.pp-who-level {
    font-size: 13px;
    font-weight: 500;
    color: var(--pp-text-soft);
}

/* ---------- Screens (all panels share one grid cell: no height jump) ---------- */
.pp-screens {
    display: grid;
    margin-top: 16px;
}

.pp-panel {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    translate: 24px 0;
    transition: opacity 0.45s ease, translate 0.45s ease, visibility 0s linear 0.45s;
}

.pp-panel.is-active {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
}

.pp-panel-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pp-text);
}

.pp-panel.is-active .pp-rise {
    animation: ppRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.pp--ready .pp-stage:not(.is-in) .pp-panel .pp-rise {
    animation: none;
    opacity: 0;
}

/* Enrol */
.pp-levels {
    display: grid;
    gap: 8px;
}

.pp-level {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1.5px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-tile);
    color: var(--pp-text);
    text-align: start;
    transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.pp-level:hover {
    transform: translateY(-2px);
    border-color: var(--pp-line-strong);
}

.pp-level[aria-pressed="true"] {
    border-color: var(--pp-sel-border);
    background: var(--pp-sel-bg);
}

.pp-belts {
    display: flex;
    gap: 3px;
}

.pp-belts i {
    display: block;
    width: 10px;
    height: 28px;
    border: 1px solid var(--pp-line-strong);
    border-radius: 3px;
    background: var(--c);
}

.pp-level-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pp-level-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pp-text);
}

.pp-now {
    display: none;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--pp-pill-bg);
    color: var(--pp-pill-text);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.pp-level.is-current .pp-now {
    display: inline-block;
}

.pp-level small {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--pp-text-soft);
}

.pp-check {
    color: var(--pp-sel-border);
    scale: 0;
    transition: scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.pp-level[aria-pressed="true"] .pp-check {
    scale: 1;
}

/* Actions + status */
.pp-action {
    margin-top: 12px;
}

.pp-btn-wrap {
    position: relative;
}

.pp-status {
    min-height: 1.5em;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--pp-ok);
}

.pp-status.is-pop {
    animation: ppPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.pp-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--c, #E53935);
    pointer-events: none;
    animation: ppSpark 0.85s ease-out forwards;
}

/* Track */
.pp-prog {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pp-ring {
    position: relative;
    flex: 0 0 auto;
    width: clamp(96px, 28vw, 120px);
    aspect-ratio: 1;
}

.pp-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pp-ring-bg,
.pp-ring-fill {
    fill: none;
    stroke-width: 10;
}

.pp-ring-bg {
    stroke: var(--pp-meter-track);
}

.pp-ring-fill {
    stroke: #E53935;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}

.pp-panel.is-active .pp-ring-fill {
    stroke-dashoffset: calc(326.73 * (1 - var(--p, 0)));
}

.pp-ring-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 34%;
    font-family: var(--font-display);
    line-height: 1;
    color: var(--pp-text);
}

.pp-ring-val b {
    font-size: clamp(26px, 7vw, 32px);
    font-weight: 400;
}

.pp-ring-val small {
    margin-inline-start: 2px;
    font-size: 14px;
}

.pp-prog-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pp-text-soft);
}

.pp-prog-copy b {
    font-size: 16px;
    font-weight: 600;
    color: var(--pp-text);
}

.pp-skills {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.pp-skill-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
}

.pp-skill-top b {
    font-weight: 600;
}

.pp-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--pp-meter-track);
}

.pp-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #E53935, #FF6B66);
    transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.pp-panel.is-active .pp-bar span {
    width: calc(var(--v, 0) * 1%);
}

.pp-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.pp-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    background: var(--pp-tile);
}

.pp-tile-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pp-text-soft);
}

.pp-tile-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.2;
    color: var(--pp-text);
}

.pp-tile-val b {
    font-weight: 400;
}

/* Book */
.pp-cal-box {
    padding: 12px;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-tile);
}

.pp-cal-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--pp-text);
}

.pp-legend {
    font-size: 12.5px;
    color: var(--pp-text-soft);
}

.pp-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.pp-dow {
    padding-block: 2px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-text-soft);
}

.pp-day {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: 32px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--pp-day-off);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.pp-day.is-avail {
    background: var(--pp-day-avail-bg);
    color: var(--pp-day-avail-text);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.pp-day.is-avail:hover {
    transform: scale(1.08);
}

.pp-day.is-booked {
    border-color: var(--pp-sel-border);
}

.pp-day.is-sel {
    background: var(--pp-day-on-bg);
    color: var(--pp-day-on-text);
    animation: ppPop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.pp-slot {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--pp-text);
}

/* ---------- Count-up strip ---------- */
.pp-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: clamp(36px, 6vw, 72px) 0 0;
    padding: 0;
    list-style: none;
}

.pp-strip-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    background: var(--pp-card);
}

.pp-strip-num {
    flex: 0 0 auto;
    min-width: 1.1em;
    font-family: var(--font-display);
    font-size: clamp(34px, 6vw, 48px);
    line-height: 1;
    color: var(--pp-accent-text);
}

.pp-strip-label {
    font-size: clamp(14px, 1.8vw, 16px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--pp-text);
}

/* ---------- Entrance animations (only when JS is ready) ---------- */
.pp--ready .pp-reveal {
    opacity: 0;
    translate: 0 32px;
    transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--d, 0) * 100ms);
}

.pp--ready .pp-reveal.is-in {
    opacity: 1;
    translate: 0 0;
}

.pp--ready .pp-head .pp-mark {
    background-size: 0% 42%;
}

.pp--ready .pp-head.is-in .pp-mark {
    background-size: 100% 42%;
}

.pp--ready .pp-head.is-in .pp-eyebrow::before {
    animation: ppLine 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---------- Keyframes ---------- */
@keyframes ppFill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ppLine  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ppSpin  { to { rotate: 360deg; } }
@keyframes ppRise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ppFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ppBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ppPulse {
    0%, 100% { transform: scale(1);    opacity: 0.75; }
    50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes ppPop {
    0%   { transform: scale(0.9); opacity: 0.4; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes ppSpark {
    from { translate: -50% -50%; scale: 1; opacity: 1; rotate: 0deg; }
    to   { translate: calc(-50% + var(--dx)) calc(-50% + var(--dy)); scale: 0.2; opacity: 0; rotate: 180deg; }
}

/* =========================================================
   Mobile M  (375px and up)
   ========================================================= */
@media (min-width: 375px) {
    .pp-tab-title { font-size: 15px; }
    .pp-panel-title { font-size: 16px; }
}

/* =========================================================
   Mobile L  (425px and up)
   ========================================================= */
@media (min-width: 425px) {
    .pp-btn { padding: 16px 30px; }
    .pp-level small { font-size: 13px; }
    .pp-kid { width: 50px; height: 50px; }
}

/* =========================================================
   Tablet  (768px and up)
   ========================================================= */
@media (min-width: 768px) {

    .pp-tab {
        align-items: flex-start;
        gap: 12px;
        padding: 16px 16px 20px;
        text-align: start;
    }

    .pp-tab-desc { display: block; }
    .pp-hint     { display: none; }

    .pp-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .pp-day { font-size: 14px; min-height: 38px; }
}

/* =========================================================
   Laptop  (1024px and up)
   ========================================================= */
@media (min-width: 1024px) {

    .pp-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(40px, 5vw, 72px);
    }

    .pp-copy {
        display: flex;
        flex-direction: column;
        gap: clamp(22px, 2.4vw, 32px);
        min-width: 0;
    }

    .pp-tabs {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .pp-tab {
        flex-direction: row;
        align-items: center;
        padding: 14px 18px 18px;
    }

    .pp-cta .pp-btn { flex: 0 0 auto; }

    .pp-stage { max-width: none; }
}

/* =========================================================
   Laptop L  (1440px and up)
   ========================================================= */
@media (min-width: 1440px) {

    .pp-lead { font-size: 19px; }
    .pp-tab-title { font-size: 16px; }
    .pp-device { padding: 24px; }
    .pp-panel-title { font-size: 17px; }
    .pp-level { padding: 14px 16px; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {

    .pp *,
    .pp *::before,
    .pp *::after {
        animation: none !important;
        transition: none !important;
    }

    .pp--ready .pp-reveal {
        opacity: 1;
        translate: none;
    }

    .pp--ready .pp-head .pp-mark { background-size: 100% 42%; }
    .pp--ready .pp-stage:not(.is-in) .pp-panel .pp-rise { opacity: 1; }
    .pp-tab-line { transform: none; opacity: 0; }
}

/* =========================================================
   ZENDOJO TRANSFORMATION SECTION
   BASE / LIGHT MODE
   ========================================================= */

.zj-transform {
    --zj-black: #111111;
    --zj-graphite: #333333;
    --zj-red: #E53935;
    --zj-white: #FAFAF7;

    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--zj-white);
    color: var(--zj-black);
    isolation: isolate;
}

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


/* =========================================================
   INTRO
   ========================================================= */

.zj-transform__intro {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 520px)
        150px;
    align-items: center;
    min-height: 570px;
    padding: 90px max(5vw, 40px) 70px;
    background: var(--zj-black);
    color: var(--zj-white);
    overflow: hidden;
}

.zj-transform__intro::before {
    content: "";
    position: absolute;
    top: -100px;
    left: -100px;
    width: 520px;
    height: 250px;
    background: var(--zj-red);
    opacity: .12;
    transform: rotate(-25deg);
    clip-path: polygon(
        0 35%,
        20% 12%,
        42% 30%,
        63% 8%,
        82% 25%,
        100% 0,
        92% 78%,
        67% 60%,
        48% 87%,
        25% 66%,
        5% 92%
    );
}

.zj-transform__intro-copy {
    position: relative;
    z-index: 3;
    max-width: 560px;
}

.zj-transform__eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--zj-red);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.zj-transform__eyebrow b {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: var(--zj-red);
}

.zj-transform__title {
    margin: 0;
    color: var(--zj-white);
    font-family: "Archivo Black", "Inter", sans-serif;
    font-size: clamp(42px, 5.3vw, 72px);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.045em;
}

.zj-transform__title span {
    display: block;
    color: var(--zj-red);
}

.zj-transform__lead {
    max-width: 525px;
    margin: 25px 0 27px;
    color: var(--zj-white);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    opacity: .78;
}

.zj-transform__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--zj-red);
    color: var(--zj-white);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}

.zj-transform__cta svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.zj-transform__cta:hover {
    background: var(--zj-red);
    color: var(--zj-white);
    transform: translateY(-3px);
}

.zj-transform__cta:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.zj-transform__hero {
    position: relative;
    align-self: stretch;
    min-height: 470px;
    overflow: hidden;
}

.zj-transform__hero-red {
    position: absolute;
    z-index: 0;
    top: 5%;
    left: 15%;
    width: 76%;
    height: 90%;
    background: var(--zj-red);
    opacity: .9;
    transform: rotate(-7deg) skewX(-8deg);
    clip-path: polygon(
        15% 0,
        100% 0,
        86% 100%,
        0 100%
    );
}

.zj-transform__hero-brush {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            transparent 10%,
            rgba(250, 250, 247, .12) 11%,
            transparent 13%
        ),
        linear-gradient(
            155deg,
            transparent 35%,
            rgba(229, 57, 53, .4) 36%,
            transparent 39%
        );
    transform: skewX(-8deg);
}

.zj-transform__hero-image {
    position: absolute;
    z-index: 2;
    right: 7%;
    bottom: 0;
    width: 90%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%) contrast(1.1);
    mix-blend-mode: screen;
    transform: translateX(35px);
    opacity: .9;
    transition:
        transform 1.1s cubic-bezier(.2,.8,.2,1),
        filter .6s ease;
}

.zj-transform__intro:hover .zj-transform__hero-image {
    transform: translateX(0) scale(1.025);
    filter: grayscale(100%) contrast(1.15);
}

.zj-transform__hero-kanji {
    position: absolute;
    z-index: 1;
    left: 5%;
    top: 25%;
    color: var(--zj-white);
    font-family: serif;
    font-size: clamp(80px, 9vw, 150px);
    line-height: 1;
    opacity: .12;
}


/* =========================================================
   PHILOSOPHY SIDE NAV
   ========================================================= */

.zj-transform__philosophy {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-left: 28px;
}

.zj-transform__philosophy-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(250, 250, 247, .25);
}

.zj-transform__philosophy-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 3px;
    height: 25%;
    background: var(--zj-red);
    transition: top .6s ease;
}

.zj-transform__philosophy-item {
    color: var(--zj-white);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    opacity: .55;
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.zj-transform__philosophy-item.is-active {
    opacity: 1;
    transform: translateX(5px);
}


/* =========================================================
   PANELS
   ========================================================= */

.zj-transform__panels {
    width: 100%;
}

.zj-transform__panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 245px;
    overflow: hidden;
}

.zj-transform__panel--light {
    background: var(--zj-white);
    color: var(--zj-black);
}

.zj-transform__panel--dark {
    background: var(--zj-black);
    color: var(--zj-white);
}


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

.zj-transform__content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 25px;
    width: 100%;
    padding: 42px clamp(30px, 5vw, 80px);
}

.zj-transform__icon {
    display: grid;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    place-items: center;
    border: 1px solid rgba(229, 57, 53, .4);
    color: var(--zj-red);
}

.zj-transform__icon svg {
    width: 33px;
    height: 33px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zj-transform__copy {
    min-width: 0;
}

.zj-transform__number {
    display: block;
    margin-bottom: 4px;
    color: var(--zj-red);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
}

.zj-transform__copy h3 {
    margin: 0 0 9px;
    font-family: "Archivo Black", "Inter", sans-serif;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.zj-transform__panel--light .zj-transform__copy h3 {
    color: var(--zj-black);
}

.zj-transform__panel--dark .zj-transform__copy h3 {
    color: var(--zj-white);
}

.zj-transform__copy p {
    max-width: 390px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
}

.zj-transform__panel--light .zj-transform__copy p {
    color: var(--zj-graphite);
}

.zj-transform__panel--dark .zj-transform__copy p {
    color: var(--zj-white);
    opacity: .72;
}


/* =========================================================
   LEARN MORE
   ========================================================= */

.zj-transform__learn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    color: var(--zj-black);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
}

.zj-transform__panel--dark .zj-transform__learn {
    color: var(--zj-white);
}

.zj-transform__learn svg {
    width: 24px;
    height: 14px;
    fill: none;
    stroke: var(--zj-red);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.zj-transform__learn:hover svg {
    transform: translateX(5px);
}


/* =========================================================
   IMAGE AREA
   ========================================================= */

.zj-transform__media {
    position: relative;
    min-height: 245px;
    overflow: hidden;
}

.zj-transform__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(30%) contrast(1.05);
    transition:
        transform 1s cubic-bezier(.2,.8,.2,1),
        filter .7s ease;
}

.zj-transform__panel:hover .zj-transform__media img {
    transform: scale(1.075);
    filter: grayscale(0%) contrast(1.08);
}

.zj-transform__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(17, 17, 17, .15),
            transparent 45%,
            rgba(17, 17, 17, .28)
        );
    pointer-events: none;
}

.zj-transform__slash {
    position: absolute;
    z-index: 4;
    top: 0;
    left: -5px;
    width: 45px;
    height: 100%;
    background: var(--zj-red);
    clip-path: polygon(
        70% 0,
        100% 0,
        30% 100%,
        0 100%
    );
}

.zj-transform__media-number {
    position: absolute;
    z-index: 5;
    right: 28px;
    bottom: 20px;
    color: var(--zj-white);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .15em;
}


/* =========================================================
   PANEL SLIDE ANIMATION
   ========================================================= */

.zj-transform__panel .zj-transform__content,
.zj-transform__panel .zj-transform__media {
    opacity: 0;
    transition:
        opacity .8s ease,
        transform 1s cubic-bezier(.2,.8,.2,1);
}

.zj-transform__panel:nth-child(odd) .zj-transform__content {
    transform: translateX(-100px);
}

.zj-transform__panel:nth-child(odd) .zj-transform__media {
    transform: translateX(100px);
}

.zj-transform__panel:nth-child(even) .zj-transform__content {
    transform: translateX(100px);
}

.zj-transform__panel:nth-child(even) .zj-transform__media {
    transform: translateX(-100px);
}

.zj-transform__panel.is-visible .zj-transform__content,
.zj-transform__panel.is-visible .zj-transform__media {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   CLOSING
   ========================================================= */

.zj-transform__closing {
    position: relative;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(300px, 1.4fr) 180px 100px;
    align-items: center;
    min-height: 260px;
    padding: 45px max(5vw, 40px);
    overflow: hidden;
    background: var(--zj-black);
    color: var(--zj-white);
}

.zj-transform__closing-art {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.zj-transform__sun {
    position: absolute;
    right: 30%;
    bottom: 20px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: var(--zj-red);
    opacity: .9;
}

.zj-transform__mountain {
    position: absolute;
    right: 0;
    bottom: -30px;
    width: 100%;
    height: 110px;
    background: var(--zj-graphite);
    clip-path: polygon(
        0 100%,
        20% 55%,
        34% 73%,
        52% 28%,
        65% 65%,
        82% 42%,
        100% 75%,
        100% 100%
    );
}

.zj-transform__person {
    position: absolute;
    z-index: 3;
    right: calc(30% + 43px);
    bottom: 28px;
    width: 6px;
    height: 58px;
    background: var(--zj-black);
}

.zj-transform__person::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--zj-black);
}

.zj-transform__closing-copy > span {
    display: block;
    margin-bottom: 13px;
    color: var(--zj-red);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
}

.zj-transform__closing-copy h3 {
    margin: 0;
    color: var(--zj-white);
    font-family: "Archivo Black", "Inter", sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.zj-transform__closing-copy strong {
    color: var(--zj-red);
    font-weight: 500;
}

.zj-transform__closing-note {
    margin: 0;
    color: var(--zj-white);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    opacity: .72;
}

.zj-transform__closing-count {
    padding-left: 20px;
    border-left: 1px solid rgba(250, 250, 247, .25);
}

.zj-transform__closing-count strong {
    color: var(--zj-red);
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight: 500;
}

.zj-transform__closing-count span {
    color: var(--zj-white);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    opacity: .5;
}


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

@media (min-width: 1280px) {

    .zj-transform__intro {
        min-height: 590px;
        padding-left: max(6vw, 70px);
        padding-right: max(6vw, 70px);
    }

    .zj-transform__panel {
        min-height: 270px;
    }

    .zj-transform__media {
        min-height: 270px;
    }
}


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

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

    .zj-transform__intro {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 410px)
            115px;
        min-height: 530px;
        padding: 75px 45px 55px;
    }

    .zj-transform__hero {
        min-height: 430px;
    }

    .zj-transform__philosophy {
        gap: 25px;
    }

    .zj-transform__panel {
        min-height: 230px;
    }

    .zj-transform__media {
        min-height: 230px;
    }

    .zj-transform__content {
        padding: 35px 40px;
        gap: 18px;
    }

    .zj-transform__icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .zj-transform__copy h3 {
        font-size: 21px;
    }
}


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

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

    .zj-transform__intro {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 360px);
        min-height: 500px;
        padding: 70px 35px 55px;
    }

    .zj-transform__hero {
        min-height: 400px;
    }

    .zj-transform__philosophy {
        display: none;
    }

    .zj-transform__title {
        font-size: 48px;
    }

    .zj-transform__lead {
        font-size: 14px;
    }

    .zj-transform__panel {
        min-height: 215px;
    }

    .zj-transform__media {
        min-height: 215px;
    }

    .zj-transform__content {
        gap: 15px;
        padding: 28px 30px;
    }

    .zj-transform__icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .zj-transform__icon svg {
        width: 28px;
        height: 28px;
    }

    .zj-transform__copy h3 {
        font-size: 19px;
    }

    .zj-transform__copy p {
        font-size: 12px;
    }

    .zj-transform__closing {
        grid-template-columns: 1fr 1.3fr 130px 70px;
        padding: 35px;
    }

    .zj-transform__closing-art {
        height: 140px;
    }
}


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

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

    .zj-transform__intro {
        display: block;
        min-height: auto;
        padding: 85px 24px 55px;
    }

    .zj-transform__intro-copy {
        max-width: 100%;
    }

    .zj-transform__title {
        font-size: 43px;
    }

    .zj-transform__lead {
        font-size: 14px;
        line-height: 1.7;
    }

    .zj-transform__hero {
        width: 100%;
        min-height: 280px;
        margin-top: 45px;
    }

    .zj-transform__hero-image {
        width: 75%;
        right: 12%;
    }

    .zj-transform__philosophy {
        display: none;
    }

    .zj-transform__panel {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .zj-transform__panel .zj-transform__content,
    .zj-transform__panel .zj-transform__media {
        width: 100%;
        min-height: auto;
    }

    .zj-transform__media {
        order: -1;
        height: 230px;
    }

    .zj-transform__content {
        min-height: 210px;
        padding: 28px 25px 32px;
        gap: 18px;
    }

    .zj-transform__icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .zj-transform__copy h3 {
        font-size: 20px;
    }

    .zj-transform__copy p {
        font-size: 13px;
    }

    .zj-transform__panel:nth-child(odd) .zj-transform__content,
    .zj-transform__panel:nth-child(even) .zj-transform__content {
        transform: translateY(55px);
    }

    .zj-transform__panel:nth-child(odd) .zj-transform__media,
    .zj-transform__panel:nth-child(even) .zj-transform__media {
        transform: translateY(55px);
    }

    .zj-transform__panel.is-visible .zj-transform__content,
    .zj-transform__panel.is-visible .zj-transform__media {
        transform: translateY(0);
    }

    .zj-transform__closing {
        display: grid;
        grid-template-columns: 1fr 70px;
        gap: 25px;
        min-height: auto;
        padding: 45px 24px;
    }

    .zj-transform__closing-art {
        display: none;
    }

    .zj-transform__closing-copy {
        grid-column: 1 / -1;
    }

    .zj-transform__closing-copy h3 {
        font-size: 34px;
    }

    .zj-transform__closing-note {
        grid-column: 1;
    }

    .zj-transform__closing-count {
        grid-column: 2;
        padding-left: 14px;
    }
}


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

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

    .zj-transform__intro {
        display: block;
        min-height: auto;
        padding: 78px 20px 50px;
    }

    .zj-transform__eyebrow {
        font-size: 9px;
        letter-spacing: .18em;
    }

    .zj-transform__title {
        font-size: 39px;
    }

    .zj-transform__lead {
        font-size: 13px;
    }

    .zj-transform__hero {
        min-height: 250px;
        margin-top: 40px;
    }

    .zj-transform__philosophy {
        display: none;
    }

    .zj-transform__panel {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .zj-transform__media {
        order: -1;
        height: 210px;
        min-height: 210px;
    }

    .zj-transform__content {
        min-height: 220px;
        padding: 25px 20px 30px;
        gap: 14px;
        align-items: flex-start;
    }

    .zj-transform__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .zj-transform__icon svg {
        width: 25px;
        height: 25px;
    }

    .zj-transform__copy h3 {
        font-size: 18px;
    }

    .zj-transform__copy p {
        font-size: 12px;
        line-height: 1.6;
    }

    .zj-transform__closing {
        display: block;
        padding: 40px 20px;
    }

    .zj-transform__closing-art {
        display: none;
    }

    .zj-transform__closing-copy h3 {
        font-size: 31px;
    }

    .zj-transform__closing-note {
        margin-top: 22px;
    }

    .zj-transform__closing-count {
        display: inline-block;
        margin-top: 22px;
        padding-left: 0;
        border-left: 0;
    }
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    .zj-transform__intro {
        display: block;
        min-height: auto;
        padding: 70px 16px 45px;
    }

    .zj-transform__eyebrow {
        gap: 6px;
        font-size: 8px;
        letter-spacing: .13em;
    }

    .zj-transform__title {
        font-size: 34px;
    }

    .zj-transform__lead {
        font-size: 12px;
        line-height: 1.65;
    }

    .zj-transform__hero {
        min-height: 215px;
        margin-top: 35px;
    }

    .zj-transform__philosophy {
        display: none;
    }

    .zj-transform__panel {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .zj-transform__panel .zj-transform__content,
    .zj-transform__panel .zj-transform__media {
        width: 100%;
        min-height: auto;
    }

    .zj-transform__media {
        order: -1;
        height: 190px;
        min-height: 190px;
    }

    .zj-transform__content {
        min-height: 215px;
        width: 100%;
        padding: 23px 16px 27px;
        gap: 12px;
        align-items: flex-start;
    }

    .zj-transform__icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .zj-transform__icon svg {
        width: 22px;
        height: 22px;
    }

    .zj-transform__copy h3 {
        font-size: 17px;
    }

    .zj-transform__copy p {
        font-size: 11px;
        line-height: 1.55;
    }

    .zj-transform__learn {
        font-size: 10px;
    }

    .zj-transform__closing {
        display: block;
        padding: 35px 16px;
    }

    .zj-transform__closing-copy h3 {
        font-size: 28px;
    }

    .zj-transform__closing-note {
        margin-top: 20px;
        font-size: 12px;
    }

    .zj-transform__closing-count {
        margin-top: 18px;
        padding-left: 0;
        border-left: 0;
    }
}


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

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

    .zj-transform *,
    .zj-transform *::before,
    .zj-transform *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   ZENDOJO
   CONFIDENCE IN ACTION
   Scroll-expand masked image section
========================================================== */

.zd-confidence {
    --zd-confidence-progress: 0;
    --zd-confidence-image-size: clamp(
        210px,
        calc(
            210px +
            (100vw - 210px) * var(--zd-confidence-progress)
        ),
        100vw
    );

    position: relative;
    width: 100%;
    background: var(--zd-confidence-bg);
    color: var(--zd-confidence-text);
    overflow: clip;
}


/* =========================================================
   SCROLL LENGTH
========================================================== */

.zd-confidence__scroll {
    position: relative;
    height: 270vh;
}


.zd-confidence__sticky {
    position: sticky;
    top: 0;

    width: 100%;
    height: 100svh;
    min-height: 680px;

    overflow: hidden;
    isolation: isolate;

    background: var(--zd-confidence-bg);
}


/* =========================================================
   BACKDROP
========================================================== */

.zd-confidence__backdrop {
    position: absolute;
    inset: 0;
    z-index: -5;

    background:
        radial-gradient(
            circle at 50% 50%,
            var(--zd-confidence-backdrop-center),
            transparent 58%
        ),
        var(--zd-confidence-bg);

    opacity: calc(
        1 - (var(--zd-confidence-progress) * .28)
    );

    transition:
        background-color 300ms ease,
        opacity 300ms ease;
}


/* =========================================================
   EXPANDING VISUAL
========================================================== */

.zd-confidence__visual {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;
}


/*
   Main image starts small in the center.
   JS updates --zd-confidence-progress.
*/

.zd-confidence__visual-frame {
    position: absolute;

    left: 50%;
    top: 50%;

    width: calc(
        220px +
        (100vw - 220px) * var(--zd-confidence-progress)
    );

    height: calc(
        300px +
        (100svh - 300px) * var(--zd-confidence-progress)
    );

    transform:
        translate(-50%, -50%)
        scale(
            calc(
                .92 +
                (.08 * var(--zd-confidence-progress))
            )
        );

    overflow: hidden;

    background: var(--zd-confidence-image-base);

    /*
       MAIN IMAGE MASK
    */

    -webkit-mask-image:
        radial-gradient(
            ellipse 82% 88% at 50% 50%,
            #000 62%,
            rgba(0, 0, 0, .94) 72%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse 82% 88% at 50% 50%,
            #000 62%,
            rgba(0, 0, 0, .94) 72%,
            transparent 100%
        );

    will-change:
        width,
        height,
        transform;

    transition:
        width 80ms linear,
        height 80ms linear,
        transform 80ms linear;
}


.zd-confidence__main-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 28%;

    filter:
        saturate(.78)
        contrast(1.08);

    transform:
        scale(
            calc(
                1.18 -
                (.18 * var(--zd-confidence-progress))
            )
        );

    will-change: transform;

    transition:
        filter 500ms ease,
        transform 100ms linear;
}


/* =========================================================
   IMAGE DARKENING
========================================================== */

.zd-confidence__image-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.14) 0%,
            rgba(17,17,17,.18) 35%,
            rgba(17,17,17,.76) 100%
        );

    opacity: calc(
        .18 +
        (.72 * var(--zd-confidence-progress))
    );

    pointer-events: none;
}


/* =========================================================
   SUPPORTING MASKED IMAGES
========================================================== */

.zd-confidence__support {
    position: absolute;

    width: clamp(130px, 13vw, 220px);
    aspect-ratio: .76;

    overflow: hidden;

    opacity: calc(
        var(--zd-confidence-progress) *
        var(--zd-support-opacity, 1)
    );

    transform:
        translateY(
            calc(
                40px -
                (40px * var(--zd-confidence-progress))
            )
        )
        scale(
            calc(
                .88 +
                (.12 * var(--zd-confidence-progress))
            )
        );

    transition:
        opacity 350ms ease,
        transform 500ms cubic-bezier(.2,.75,.2,1);

    -webkit-mask-image:
        linear-gradient(
            145deg,
            #000 0%,
            #000 65%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            145deg,
            #000 0%,
            #000 65%,
            transparent 100%
        );

    z-index: 2;
}


.zd-confidence__support img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(.15)
        contrast(1.08);
}


.zd-confidence__support--one {
    --zd-support-opacity: .72;

    left: clamp(22px, 7vw, 110px);
    bottom: clamp(90px, 12vh, 150px);

    transform-origin: left bottom;
}


.zd-confidence__support--two {
    --zd-support-opacity: .62;

    right: clamp(22px, 7vw, 110px);
    top: clamp(100px, 15vh, 180px);

    transform-origin: right top;
}


/* =========================================================
   TOPLINE
========================================================== */

.zd-confidence__topline {
    position: absolute;

    top: clamp(28px, 5vh, 60px);
    left: clamp(20px, 5vw, 80px);
    right: clamp(20px, 5vw, 80px);

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

    z-index: 10;

    pointer-events: none;
}


.zd-confidence__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--zd-confidence-muted);

    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}


.zd-confidence__eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    background: var(--zd-confidence-accent);
}


.zd-confidence__counter {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--zd-confidence-muted);

    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
}


.zd-confidence__counter-current {
    color: var(--zd-confidence-accent);
}


.zd-confidence__counter-line {
    width: 30px;
    height: 1px;

    background: var(--zd-confidence-muted);
    opacity: .5;
}


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

.zd-confidence__content {
    position: absolute;

    inset: 0;

    z-index: 6;

    display: flex;
    align-items: center;

    padding:
        clamp(100px, 14vh, 150px)
        clamp(20px, 7vw, 110px)
        clamp(70px, 10vh, 110px);

    pointer-events: none;
}


.zd-confidence__copy {
    width: min(720px, 100%);

    opacity: calc(
        max(
            0,
            (var(--zd-confidence-progress) - .30) * 1.65
        )
    );

    transform:
        translateY(
            calc(
                55px -
                (
                    max(
                        0,
                        (var(--zd-confidence-progress) - .30)
                    ) * 55px
                )
            )
        );

    transition:
        opacity 150ms linear,
        transform 120ms linear;
}


.zd-confidence__kicker {
    display: block;

    margin-bottom: 14px;

    color: var(--zd-confidence-accent);

    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}


.zd-confidence__title {
    max-width: 650px;

    margin: 0;

    color: var(--zd-confidence-title);

    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 64px);

    /*
       User requested heading weight below 600.
    */
    font-weight: 500;

    line-height: 1.06;
    letter-spacing: -.035em;
}


.zd-confidence__title span {
    display: block;
    color: var(--zd-confidence-accent);
}


.zd-confidence__description {
    max-width: 590px;

    margin:
        22px
        0
        28px;

    color: var(--zd-confidence-body);

    font-size: clamp(14px, 1.3vw, 17px);
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================================
   OUTCOME GRID
========================================================== */

.zd-confidence__outcomes {
    display: grid;

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

    width: min(680px, 100%);

    border-top:
        1px solid
        var(--zd-confidence-border);
}


.zd-confidence__outcome {
    display: grid;

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

    gap: 12px;

    min-width: 0;

    padding:
        17px
        20px
        17px
        0;

    border-bottom:
        1px solid
        var(--zd-confidence-border);
}


.zd-confidence__outcome:nth-child(odd) {
    border-right:
        1px solid
        var(--zd-confidence-border);

    padding-right: 20px;
}


.zd-confidence__outcome:nth-child(even) {
    padding-left: 20px;
}


.zd-confidence__outcome-number {
    color: var(--zd-confidence-accent);

    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
}


.zd-confidence__outcome-copy h3 {
    margin: 0 0 4px;

    color: var(--zd-confidence-title);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}


.zd-confidence__outcome-copy p {
    margin: 0;

    color: var(--zd-confidence-body);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
}


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

.zd-confidence__closing {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: min(590px, 100%);

    margin-top: 20px;
}


.zd-confidence__closing-mark {
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    background: var(--zd-confidence-accent);
    color: var(--zd-confidence-on-accent);

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


.zd-confidence__closing p {
    margin: 0;

    color: var(--zd-confidence-body);

    font-size: 12px;
    line-height: 1.6;
}


.zd-confidence__closing strong {
    color: var(--zd-confidence-title);
    font-weight: 500;
}


/* =========================================================
   SCROLL NOTE
========================================================== */

.zd-confidence__scroll-note {
    position: absolute;

    left: clamp(20px, 5vw, 80px);
    bottom: clamp(26px, 5vh, 50px);

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--zd-confidence-muted);

    font-size: 9px;
    font-weight: 500;
    letter-spacing: .15em;

    z-index: 10;

    opacity: calc(
        1 -
        (
            var(--zd-confidence-progress) * 2.8
        )
    );

    transition: opacity 250ms ease;
}


.zd-confidence__scroll-line {
    width: 34px;
    height: 1px;

    background: var(--zd-confidence-accent);
}


/* =========================================================
   CORNER LABEL
========================================================== */

.zd-confidence__corner-label {
    position: absolute;

    right: clamp(20px, 5vw, 80px);
    bottom: clamp(26px, 5vh, 50px);

    z-index: 10;

    color: var(--zd-confidence-muted);

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

    letter-spacing: .13em;

    opacity: .78;
}


.zd-confidence__corner-label span {
    color: var(--zd-confidence-accent);
    padding-inline: 5px;
}


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

@media (max-width: 1023px) {

    .zd-confidence__scroll {
        height: 250vh;
    }


    .zd-confidence__sticky {
        min-height: 640px;
    }


    .zd-confidence__content {
        align-items: flex-end;

        padding:
            110px
            32px
            72px;
    }


    .zd-confidence__copy {
        width: min(650px, 100%);
    }


    .zd-confidence__title {
        font-size: clamp(34px, 6vw, 50px);
    }


    .zd-confidence__support--one {
        left: 18px;
        bottom: 90px;

        width: 120px;
    }


    .zd-confidence__support--two {
        right: 18px;
        top: 110px;

        width: 120px;
    }


    .zd-confidence__corner-label {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .zd-confidence__scroll {
        height: 235vh;
    }


    .zd-confidence__sticky {
        min-height: 640px;
    }


    .zd-confidence__topline {
        top: 22px;
        left: 18px;
        right: 18px;
    }


    .zd-confidence__eyebrow {
        font-size: 9px;
        letter-spacing: .12em;
    }


    .zd-confidence__eyebrow::before {
        width: 20px;
    }


    .zd-confidence__counter {
        font-size: 9px;
    }


    .zd-confidence__content {
        align-items: flex-end;

        padding:
            92px
            18px
            48px;
    }


    .zd-confidence__title {
        max-width: 500px;

        font-size:
            clamp(
                30px,
                8.5vw,
                42px
            );

        line-height: 1.08;
    }


    .zd-confidence__description {
        max-width: 500px;

        margin:
            16px
            0
            20px;

        font-size: 13px;
        line-height: 1.6;
    }


    .zd-confidence__outcomes {
        grid-template-columns: 1fr;
        width: 100%;
    }


    .zd-confidence__outcome {
        grid-template-columns: 28px minmax(0, 1fr);

        padding:
            11px
            0;
    }


    .zd-confidence__outcome:nth-child(odd) {
        border-right: 0;
        padding-right: 0;
    }


    .zd-confidence__outcome:nth-child(even) {
        padding-left: 0;
    }


    .zd-confidence__outcome-copy h3 {
        font-size: 13px;
    }


    .zd-confidence__outcome-copy p {
        font-size: 11px;
    }


    .zd-confidence__closing {
        margin-top: 14px;
    }


    .zd-confidence__closing p {
        font-size: 11px;
    }


    .zd-confidence__support {
        width: 82px;
    }


    .zd-confidence__support--one {
        left: 8px;
        bottom: 100px;
    }


    .zd-confidence__support--two {
        right: 8px;
        top: 100px;
    }


    .zd-confidence__scroll-note {
        left: 18px;
        bottom: 20px;

        font-size: 8px;
    }

}


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

@media (max-width: 480px) {

    .zd-confidence__scroll {
        height: 225vh;
    }


    .zd-confidence__sticky {
        min-height: 620px;
    }


    .zd-confidence__content {
        padding:
            86px
            16px
            42px;
    }


    .zd-confidence__kicker {
        margin-bottom: 10px;

        font-size: 9px;
    }


    .zd-confidence__title {
        font-size: 29px;
    }


    .zd-confidence__description {
        font-size: 12px;
        margin-top: 14px;
    }


    .zd-confidence__outcome {
        grid-template-columns: 24px minmax(0, 1fr);
        padding: 9px 0;
    }


    .zd-confidence__outcome-copy h3 {
        font-size: 12px;
    }


    .zd-confidence__outcome-copy p {
        font-size: 10.5px;
    }


    .zd-confidence__closing p {
        font-size: 10.5px;
    }


    .zd-confidence__support {
        display: none;
    }

}


/* =========================================================
   MOBILE-S
========================================================== */

@media (max-width: 380px) {

    .zd-confidence__scroll {
        height: 220vh;
    }


    .zd-confidence__sticky {
        min-height: 600px;
    }


    .zd-confidence__topline {
        top: 18px;
    }


    .zd-confidence__counter {
        display: none;
    }


    .zd-confidence__content {
        padding:
            74px
            14px
            34px;
    }


    .zd-confidence__title {
        font-size: 27px;
    }


    .zd-confidence__description {
        font-size: 11.5px;
        line-height: 1.55;
    }


    .zd-confidence__outcome-copy h3 {
        font-size: 11.5px;
    }


    .zd-confidence__outcome-copy p {
        font-size: 10px;
    }


    .zd-confidence__closing {
        gap: 8px;
    }


    .zd-confidence__closing-mark {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }


    .zd-confidence__closing p {
        font-size: 10px;
    }


    .zd-confidence__scroll-note {
        font-size: 7px;
    }

}


/* =========================================================
   LAPTOP-L / LARGE DESKTOP
========================================================== */

@media (min-width: 1440px) {

    .zd-confidence__content {
        padding-left: max(
            7vw,
            calc((100vw - 1440px) / 2 + 80px)
        );

        padding-right: max(
            7vw,
            calc((100vw - 1440px) / 2 + 80px)
        );
    }


    .zd-confidence__title {
        font-size: 64px;
    }

}


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

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

    .zd-confidence__visual-frame,
    .zd-confidence__main-image,
    .zd-confidence__support,
    .zd-confidence__copy {
        transition: none !important;
    }


    .zd-confidence__scroll {
        height: 100svh;
    }

}


/* =========================================================
   ZENDOJO — THE GRAND DOJO ARENA SECTION
   Responsive, fully animated martial training experience
   ========================================================= */

.zd-arena {
    position: relative;
    overflow: hidden;
    padding-block: clamp(64px, 8vw, 120px);
    background: var(--arena-bg, var(--color-background));
    color: var(--arena-text, var(--color-text));
    font-family: var(--font-body);
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

/* Background Atmosphere */
.zd-arena__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.zd-arena__ambient-grid {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.5;
}

html[data-theme="dark"] .zd-arena__ambient-grid {
    background-image: 
        radial-gradient(rgba(250, 250, 247, 0.08) 1px, transparent 1px);
    opacity: 0.35;
}

.zd-arena__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.zd-arena__orb--left {
    top: 10%;
    inset-inline-start: -8%;
    width: clamp(260px, 35vw, 500px);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--arena-glow) 0%, transparent 70%);
    animation: zdArenaFloat 12s ease-in-out infinite alternate;
}

.zd-arena__orb--right {
    bottom: 5%;
    inset-inline-end: -8%;
    width: clamp(280px, 40vw, 560px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(229, 57, 53, 0.12) 0%, transparent 70%);
    animation: zdArenaFloat 14s ease-in-out infinite alternate-reverse;
}

.zd-arena__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(80px, 18vw, 240px);
    line-height: 1;
    letter-spacing: 0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(17, 17, 17, 0.035);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

html[data-theme="dark"] .zd-arena__watermark {
    -webkit-text-stroke: 1.5px rgba(250, 250, 247, 0.04);
}

/* Container */
.zd-arena__wrap {
    width: 100%;
    max-width: var(--container-width, 1440px);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
    position: relative;
    z-index: 2;
}

/* Header (Strict Parity with .pl) */
.zd-arena__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.zd-arena__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--arena-accent-text);
}

.zd-arena__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    transform-origin: left center;
}

.zd-arena__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 7.2vw, 64px);
    font-weight: 400;
    line-height: 1.12;
    color: var(--arena-text);
    text-wrap: balance;
}

.zd-arena__mark {
    padding-inline: 0.1em;
    background: linear-gradient(var(--arena-mark), var(--arena-mark)) no-repeat;
    background-size: 100% 42%;
    background-position: 0 92%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.zd-arena__lead {
    max-width: 62ch;
    margin: 16px 0 0;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.65;
    color: var(--arena-text-soft);
}

/* Discipline Navigation Ribbon */
.zd-arena__nav-wrap {
    width: 100%;
    margin-top: clamp(24px, 3.5vw, 40px);
}

.zd-arena__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.zd-arena__nav::-webkit-scrollbar {
    display: none;
}

.zd-arena__tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--arena-chip-bg);
    border: 1px solid var(--arena-chip-border);
    color: var(--arena-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.zd-arena__tab:hover {
    border-color: var(--arena-accent-text);
    transform: translateY(-2px);
}

.zd-arena__tab.is-active {
    background: var(--arena-pill-bg);
    color: var(--arena-pill-text);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.zd-arena__tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--arena-accent-text);
    transition: transform 0.24s ease, background 0.24s ease;
}

.zd-arena__tab.is-active .zd-arena__tab-dot {
    transform: scale(1.35);
    background: #E53935;
}

/* Arena Dual Layout Grid */
.zd-arena__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
    align-items: stretch;
    margin-top: clamp(28px, 4vw, 44px);
}

@media (min-width: 992px) {
    .zd-arena__grid {
        grid-template-columns: 1.18fr 0.92fr;
    }
}

@media (min-width: 1280px) {
    .zd-arena__grid {
        grid-template-columns: 1.25fr 1fr;
        gap: 48px;
    }
}

/* Left: 3D Spotlight Stage */
.zd-arena__stage {
    position: relative;
    perspective: 1200px;
}

.zd-arena__spotlight-card {
    position: relative;
    height: 100%;
    min-height: 520px;
    border-radius: var(--radius-large, 14px);
    overflow: hidden;
    background: var(--arena-card);
    border: 1px solid var(--arena-card-border);
    box-shadow: var(--arena-shadow);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform-style: preserve-3d;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.zd-arena__spotlight-card:hover {
    border-color: var(--arena-card-hover-border);
    box-shadow: var(--arena-shadow-hover);
}

.zd-arena__spotlight-img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.zd-arena__spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.zd-arena__spotlight-card:hover .zd-arena__spotlight-img {
    transform: scale(1.05);
}

.zd-arena__spotlight-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(17, 17, 17, 0.35) 0%,
        rgba(17, 17, 17, 0.12) 35%,
        rgba(17, 17, 17, 0.84) 75%,
        rgba(17, 17, 17, 0.98) 100%
    );
    pointer-events: none;
}

/* Radar Pulse Beacon */
.zd-arena__radar-pulse {
    position: absolute;
    top: 22px;
    inset-inline-end: 22px;
    z-index: 4;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.zd-arena__radar-pulse::before,
.zd-arena__radar-pulse::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(229, 57, 53, 0.85);
    animation: zdArenaRadar 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.zd-arena__radar-pulse::after {
    animation-delay: 1.2s;
}

.zd-arena__radar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E53935;
    box-shadow: 0 0 14px #E53935;
}

/* Spotlight Top Header */
.zd-arena__spotlight-top {
    position: absolute;
    top: 22px;
    inset-inline-start: 22px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zd-arena__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 250, 247, 0.22);
    color: #FAFAF7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.zd-arena__beacon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--arena-beacon-bg);
    box-shadow: 0 0 8px var(--arena-beacon-bg);
    animation: zdArenaBeacon 1.8s ease-in-out infinite alternate;
}

.zd-arena__age-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(229, 57, 53, 0.92);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Spotlight Bottom Details */
.zd-arena__spotlight-content {
    position: relative;
    z-index: 4;
    padding: clamp(22px, 3.8vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transform: translateZ(24px);
}

.zd-arena__spotlight-subtitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF8580;
    margin: 0;
}

.zd-arena__spotlight-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.15;
    color: #FAFAF7;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.zd-arena__spotlight-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(250, 250, 247, 0.9);
    margin: 0;
    max-width: 52ch;
}

/* Dynamic Metrics & Audio Visualizer */
.zd-arena__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.zd-arena__metric-card {
    padding: 12px 14px;
    border-radius: var(--radius-small, 8px);
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 250, 247, 0.16);
}

.zd-arena__metric-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(250, 250, 247, 0.7);
}

.zd-arena__metric-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    font-size: 22px;
    color: #FAFAF7;
    margin-top: 2px;
}

.zd-arena__metric-bar {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.22);
    margin-top: 8px;
    overflow: hidden;
}

.zd-arena__metric-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #E53935, #FF6B66);
    width: var(--val, 90%);
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.zd-arena__spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Audio Wave Visualizer */
.zd-arena__wave-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zd-arena__wave-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(250, 250, 247, 0.7);
}

.zd-arena__wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
}

.zd-arena__wave-bar {
    width: 3px;
    border-radius: 2px;
    background: #E53935;
    animation: zdArenaWave 1.2s ease-in-out infinite alternate;
}

.zd-arena__wave-bar:nth-child(1) { animation-delay: 0.1s; height: 35%; }
.zd-arena__wave-bar:nth-child(2) { animation-delay: 0.35s; height: 80%; }
.zd-arena__wave-bar:nth-child(3) { animation-delay: 0.5s; height: 100%; }
.zd-arena__wave-bar:nth-child(4) { animation-delay: 0.2s; height: 60%; }
.zd-arena__wave-bar:nth-child(5) { animation-delay: 0.45s; height: 90%; }
.zd-arena__wave-bar:nth-child(6) { animation-delay: 0.6s; height: 40%; }

/* Buttons */
.zd-arena__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--arena-btn-bg);
    color: var(--arena-btn-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(229, 57, 53, 0.35);
}

.zd-arena__btn:hover {
    background: var(--arena-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(229, 57, 53, 0.45);
}

.zd-arena__btn svg {
    transition: transform 0.2s ease;
}

.zd-arena__btn:hover svg {
    transform: translateX(4px);
}

/* Right: Dynamic Technique Matrix */
.zd-arena__matrix {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
}

.zd-arena__matrix-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: var(--radius-large, 14px);
    background: var(--arena-card);
    border: 1px solid var(--arena-card-border);
    box-shadow: var(--arena-shadow);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.zd-arena__matrix-card:hover {
    border-color: var(--arena-card-hover-border);
    transform: translateX(6px);
    box-shadow: var(--arena-shadow-hover);
}

.zd-arena__matrix-thumb {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-medium, 10px);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.08);
}

.zd-arena__matrix-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.zd-arena__matrix-card:hover .zd-arena__matrix-thumb img {
    transform: scale(1.1);
}

.zd-arena__matrix-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zd-arena__matrix-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--arena-accent-text);
}

.zd-arena__matrix-title {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.25;
    color: var(--arena-text);
    margin: 0;
}

.zd-arena__matrix-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--arena-text-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zd-arena__matrix-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.zd-arena__matrix-stat {
    font-size: 12px;
    font-weight: 600;
    color: var(--arena-accent-text);
    white-space: nowrap;
}

.zd-arena__matrix-track {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--arena-meter-track);
    overflow: hidden;
    max-width: 120px;
}

.zd-arena__matrix-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--arena-meter-fill);
    width: var(--w, 90%);
    transition: width 0.8s ease;
}

/* Rotating Dojo Seal */
.zd-arena__seal-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 22px;
    border-radius: var(--radius-large, 14px);
    background: var(--arena-chip-bg);
    border: 1px dashed var(--arena-chip-border);
    margin-top: 4px;
}

.zd-arena__seal-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--arena-text-soft);
    margin: 0;
}

.zd-arena__seal-text strong {
    color: var(--arena-text);
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.zd-arena__seal {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zd-arena__seal-svg {
    width: 100%;
    height: 100%;
    animation: zdArenaSpin 24s linear infinite;
}

.zd-arena__seal-svg text {
    font-family: var(--font-display);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    fill: var(--arena-text);
}

.zd-arena__seal-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E53935;
}

/* Keyframe Animations */
@keyframes zdArenaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes zdArenaRadar {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes zdArenaWave {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}

@keyframes zdArenaBeacon {
    from { opacity: 0.6; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.15); }
}

@keyframes zdArenaFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(30px, -24px); }
}

@keyframes zdArenaFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.zd-arena__fade-enter {
    animation: zdArenaFadeIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================================
   RESPONSIVENESS BREAKPOINTS
   mobile-s, m, l, tab, laptop, laptop-l
   ========================================================= */

/* Mobile-S (320px) */
@media (max-width: 360px) {
    .zd-arena {
        padding-block: 48px;
    }
    .zd-arena__wrap {
        padding-inline: 14px;
    }
    .zd-arena__title {
        font-size: 26px;
    }
    .zd-arena__lead {
        font-size: 14px;
    }
    .zd-arena__tab {
        padding: 9px 16px;
        font-size: 12px;
    }
    .zd-arena__spotlight-card {
        min-height: 440px;
    }
    .zd-arena__spotlight-content {
        padding: 16px 14px;
    }
    .zd-arena__spotlight-title {
        font-size: 22px;
    }
    .zd-arena__metrics {
        grid-template-columns: 1fr 1fr;
    }
    .zd-arena__matrix-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .zd-arena__matrix-thumb {
        width: 100%;
        height: 140px;
    }
    .zd-arena__seal-box {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
}

/* Mobile-M (375px) */
@media (min-width: 361px) and (max-width: 400px) {
    .zd-arena__title {
        font-size: 28px;
    }
    .zd-arena__spotlight-card {
        min-height: 470px;
    }
    .zd-arena__matrix-card {
        grid-template-columns: 80px 1fr;
        gap: 14px;
        padding: 12px;
    }
    .zd-arena__matrix-thumb {
        width: 80px;
        height: 80px;
    }
}

/* Mobile-L (425px) */
@media (min-width: 401px) and (max-width: 480px) {
    .zd-arena__spotlight-card {
        min-height: 490px;
    }
    .zd-arena__matrix-card {
        grid-template-columns: 88px 1fr;
        gap: 16px;
        padding: 14px;
    }
    .zd-arena__matrix-thumb {
        width: 88px;
        height: 88px;
    }
}

/* Tab (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .zd-arena__spotlight-card {
        min-height: 520px;
    }
    .zd-arena__matrix {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .zd-arena__seal-box {
        grid-column: 1 / -1;
    }
}

/* Laptop (1024px) */
@media (min-width: 992px) and (max-width: 1279px) {
    .zd-arena__spotlight-card {
        min-height: 560px;
    }
}

/* Laptop-L (1440px+) */
@media (min-width: 1440px) {
    .zd-arena__spotlight-card {
        min-height: 600px;
    }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .zd-arena__radar-pulse::before,
    .zd-arena__radar-pulse::after,
    .zd-arena__seal-svg,
    .zd-arena__wave-bar,
    .zd-arena__beacon,
    .zd-arena__orb {
        animation: none !important;
    }
    .zd-arena__spotlight-card {
        transition: none !important;
    }
    .zd-arena__spotlight-card:hover {
        transform: none !important;
    }
}
/* =========================================================
   ZENDOJO — NEXT LEVEL CTA
   Base / Light Mode
   ========================================================= */

.zd-next-level {
    --zdn-bg: #fafaf7;
    --zdn-surface: #111111;
    --zdn-surface-soft: #333333;
    --zdn-text: #111111;
    --zdn-text-light: #fafaf7;
    --zdn-text-muted: rgba(250, 250, 247, 0.72);
    --zdn-accent: #e53935;
    --zdn-accent-dark: #c92f2c;
    --zdn-border: rgba(250, 250, 247, 0.16);

    width: 100%;
    padding: clamp(56px, 8vw, 120px)
             clamp(16px, 4vw, 48px);

    background: var(--zdn-bg);
    overflow: hidden;
}


/* ---------------------------------------------------------
   Main rectangular container
   --------------------------------------------------------- */

.zd-next-level__container {
    position: relative;

    width: min(1400px, 100%);
    min-height: 760px;

    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px);

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #111111 58%,
            #222222 100%
        );

    border: 1px solid rgba(17, 17, 17, 0.08);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    isolation: isolate;

    opacity: 0;
    transform: translateY(45px) scale(0.96);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.zd-next-level.is-visible .zd-next-level__container {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* ---------------------------------------------------------
   Background visual
   --------------------------------------------------------- */

.zd-next-level__visual {
    position: absolute;
    z-index: -2;

    top: 0;
    right: 0;

    width: min(58%, 820px);
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    opacity: 0.24;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.35) 25%,
            #000 65%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.35) 25%,
            #000 65%
        );
}

.zd-next-level__image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        grayscale(1)
        contrast(1.1);

    transform: scale(1.08);

    transition:
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.zd-next-level.is-visible .zd-next-level__image {
    transform: scale(1);
}


/* Scarlet visual wash */

.zd-next-level__visual-mask {
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            #111111 0%,
            rgba(17, 17, 17, 0.92) 24%,
            rgba(17, 17, 17, 0.45) 68%,
            rgba(229, 57, 53, 0.22) 100%
        );

    mix-blend-mode: multiply;
}


/* Large subtle scarlet energy shape */

.zd-next-level__container::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 520px;
    height: 520px;

    top: -280px;
    right: -180px;

    border: 1px solid rgba(229, 57, 53, 0.35);

    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(229, 57, 53, 0.035),
        0 0 0 160px rgba(229, 57, 53, 0.025);

    transform: rotate(-15deg);
}


/* Bottom visual accent */

.zd-next-level__container::after {
    content: "";

    position: absolute;
    z-index: -1;

    left: -100px;
    bottom: -150px;

    width: 420px;
    height: 260px;

    border: 1px solid rgba(229, 57, 53, 0.25);

    transform: rotate(-12deg);
}


/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */

.zd-next-level__topbar {
    width: 100%;

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

    gap: 20px;

    position: relative;
    z-index: 3;
}

.zd-next-level__label,
.zd-next-level__count {
    font-family: "Inter", sans-serif;

    font-size: 12px;
    line-height: 1.4;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    font-weight: 500;
}

.zd-next-level__label {
    color: var(--zdn-text-light);
}

.zd-next-level__count {
    color: var(--zdn-accent);
}

.zd-next-level__count span {
    color: rgba(250, 250, 247, 0.45);
}


/* ---------------------------------------------------------
   Rule
   --------------------------------------------------------- */

.zd-next-level__rule {
    position: relative;
    z-index: 3;

    width: 100%;
    height: 1px;

    margin-top: 16px;

    background:
        linear-gradient(
            90deg,
            var(--zdn-accent) 0%,
            rgba(229, 57, 53, 0.3) 42%,
            transparent 100%
        );

    transform-origin: left center;
    transform: scaleX(0);

    transition:
        transform 1s ease 0.25s;
}

.zd-next-level.is-visible .zd-next-level__rule {
    transform: scaleX(1);
}


/* ---------------------------------------------------------
   Main content
   --------------------------------------------------------- */

.zd-next-level__content {
    position: relative;
    z-index: 3;

    width: min(760px, 100%);

    margin: auto;

    text-align: center;

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

.zd-next-level__eyebrow {
    display: inline-block;

    margin-bottom: 20px;

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

    font-size: clamp(11px, 1vw, 13px);
    line-height: 1.4;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    font-weight: 500;

    color: var(--zdn-accent);

    opacity: 0;
    transform: translateY(15px);

    transition:
        opacity 0.7s ease 0.35s,
        transform 0.7s ease 0.35s;
}

.zd-next-level.is-visible .zd-next-level__eyebrow {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   Main heading
   --------------------------------------------------------- */

.zd-next-level__title {
    margin: 0;

    display: flex;
    flex-direction: column;

    font-family: "Archivo Black", sans-serif;

    font-size: clamp(
        34px,
        5.3vw,
        72px
    );

    line-height: 0.98;

    letter-spacing: -0.035em;

    font-weight: 500;

    color: var(--zdn-text-light);

    text-transform: uppercase;
}

.zd-next-level__title span {
    display: block;

    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.zd-next-level.is-visible
.zd-next-level__title span:nth-child(1) {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.45s;
}

.zd-next-level.is-visible
.zd-next-level__title span:nth-child(2) {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.55s;
}

.zd-next-level.is-visible
.zd-next-level__title span:nth-child(3) {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.65s;
}

.zd-next-level__title-accent {
    color: var(--zdn-accent);
}


/* ---------------------------------------------------------
   Supporting copy
   --------------------------------------------------------- */

.zd-next-level__lead {
    margin: 28px 0 8px;

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

    font-size: clamp(17px, 1.8vw, 23px);
    line-height: 1.5;

    font-weight: 400;

    color: var(--zdn-text-light);

    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.7s ease 0.75s,
        transform 0.7s ease 0.75s;
}

.zd-next-level.is-visible .zd-next-level__lead {
    opacity: 1;
    transform: translateY(0);
}


.zd-next-level__description {
    max-width: 620px;

    margin: 0;

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

    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.75;

    font-weight: 400;

    color: var(--zdn-text-muted);

    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.7s ease 0.85s,
        transform 0.7s ease 0.85s;
}

.zd-next-level.is-visible .zd-next-level__description {
    opacity: 1;
    transform: translateY(0);
}


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

.zd-next-level__action {
    margin-top: 30px;

    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.7s ease 1s,
        transform 0.7s ease 1s;
}

.zd-next-level.is-visible .zd-next-level__action {
    opacity: 1;
    transform: translateY(0);
}


.zd-next-level__button {
    min-height: 50px;

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

    gap: 18px;

    padding: 14px 22px 14px 26px;

    background: var(--zdn-accent);
    color: var(--zdn-text-light);

    border: 1px solid var(--zdn-accent);

    text-decoration: none;

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

    font-size: 13px;
    line-height: 1.3;

    letter-spacing: 0.04em;

    font-weight: 500;

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

.zd-next-level__button:hover {
    background: var(--zdn-accent-dark);
    border-color: var(--zdn-accent-dark);

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(229, 57, 53, 0.24);
}

.zd-next-level__button:focus-visible {
    outline: 3px solid rgba(250, 250, 247, 0.9);
    outline-offset: 4px;
}

.zd-next-level__button-arrow {
    font-size: 20px;
    line-height: 1;

    transition:
        transform 0.3s ease;
}

.zd-next-level__button:hover
.zd-next-level__button-arrow {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   Confidence pillars
   --------------------------------------------------------- */

.zd-next-level__pillars {
    position: relative;
    z-index: 3;

    width: 100%;

    margin-top: auto;
    padding-top: 48px;

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

    border-top: 1px solid var(--zdn-border);

    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.8s ease 1.1s,
        transform 0.8s ease 1.1s;
}

.zd-next-level.is-visible .zd-next-level__pillars {
    opacity: 1;
    transform: translateY(0);
}


.zd-next-level__pillar {
    min-width: 0;

    padding: 0 24px;

    display: flex;
    align-items: flex-start;

    gap: 14px;

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

.zd-next-level__pillar:first-child {
    padding-left: 0;
}

.zd-next-level__pillar:last-child {
    padding-right: 0;
    border-right: 0;
}


.zd-next-level__pillar-number {
    flex: 0 0 auto;

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

    font-size: 11px;
    line-height: 1.4;

    letter-spacing: 0.08em;

    font-weight: 500;

    color: var(--zdn-accent);
}


.zd-next-level__pillar-content {
    min-width: 0;
}

.zd-next-level__pillar-content h3 {
    margin: 0 0 5px;

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

    font-size: 13px;
    line-height: 1.4;

    letter-spacing: 0.06em;

    font-weight: 500;

    color: var(--zdn-text-light);
}


.zd-next-level__pillar-content p {
    margin: 0;

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

    font-size: 12px;
    line-height: 1.55;

    font-weight: 400;

    color: var(--zdn-text-muted);
}


/* ---------------------------------------------------------
   Bottom statement
   --------------------------------------------------------- */

.zd-next-level__bottom {
    position: relative;
    z-index: 3;

    width: 100%;

    padding-top: 28px;

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

    gap: 18px;

    opacity: 0;
    transform: translateY(12px);

    transition:
        opacity 0.7s ease 1.3s,
        transform 0.7s ease 1.3s;
}

.zd-next-level.is-visible .zd-next-level__bottom {
    opacity: 1;
    transform: translateY(0);
}


.zd-next-level__bottom p {
    margin: 0;

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

    font-size: 12px;
    line-height: 1.5;

    font-weight: 400;

    color: rgba(250, 250, 247, 0.62);
}


.zd-next-level__plus {
    color: var(--zdn-accent);

    font-size: 16px;
    line-height: 1;

    font-weight: 500;
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    .zd-next-level {
        padding: 42px 12px;
    }

    .zd-next-level__container {
        min-height: auto;

        padding: 22px 17px 24px;
    }

    .zd-next-level__topbar {
        gap: 10px;
    }

    .zd-next-level__label,
    .zd-next-level__count {
        font-size: 9px;
        letter-spacing: 0.11em;
    }

    .zd-next-level__rule {
        margin-top: 12px;
    }

    .zd-next-level__visual {
        width: 100%;
        opacity: 0.13;

        mask-image:
            linear-gradient(
                180deg,
                transparent 0%,
                #000 42%,
                #000 100%
            );

        -webkit-mask-image:
            linear-gradient(
                180deg,
                transparent 0%,
                #000 42%,
                #000 100%
            );
    }

    .zd-next-level__visual-mask {
        background:
            linear-gradient(
                180deg,
                #111111 0%,
                rgba(17, 17, 17, 0.82) 38%,
                rgba(17, 17, 17, 0.45) 100%
            );
    }

    .zd-next-level__content {
        padding: 74px 0 68px;
    }

    .zd-next-level__eyebrow {
        max-width: 230px;

        margin-bottom: 17px;

        font-size: 9px;
        line-height: 1.5;

        letter-spacing: 0.13em;
    }

    .zd-next-level__title {
        font-size: 32px;
        line-height: 1;
        letter-spacing: -0.025em;
    }

    .zd-next-level__lead {
        margin-top: 22px;

        font-size: 16px;
    }

    .zd-next-level__description {
        font-size: 13px;
        line-height: 1.65;
    }

    .zd-next-level__button {
        width: 100%;

        min-height: 48px;

        padding: 13px 15px;

        font-size: 11px;

        gap: 12px;
    }

    .zd-next-level__pillars {
        grid-template-columns: 1fr 1fr;

        gap: 0;

        padding-top: 26px;
    }

    .zd-next-level__pillar {
        padding: 15px 10px;

        border-right: 1px solid var(--zdn-border);
        border-bottom: 1px solid var(--zdn-border);
    }

    .zd-next-level__pillar:nth-child(2) {
        padding-right: 0;
        border-right: 0;
    }

    .zd-next-level__pillar:nth-child(3) {
        padding-left: 0;
        border-bottom: 0;
    }

    .zd-next-level__pillar:nth-child(4) {
        border-right: 0;
        border-bottom: 0;
    }

    .zd-next-level__pillar-number {
        font-size: 9px;
    }

    .zd-next-level__pillar-content h3 {
        font-size: 11px;
    }

    .zd-next-level__pillar-content p {
        font-size: 10px;
    }

    .zd-next-level__bottom {
        padding-top: 24px;

        flex-wrap: wrap;

        gap: 8px 12px;

        text-align: center;
    }

    .zd-next-level__bottom p {
        font-size: 10px;
    }

    .zd-next-level__plus {
        font-size: 14px;
    }
}


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

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

    .zd-next-level {
        padding: 48px 14px;
    }

    .zd-next-level__container {
        min-height: auto;

        padding: 25px 20px 27px;
    }

    .zd-next-level__content {
        padding: 82px 0 72px;
    }

    .zd-next-level__title {
        font-size: 36px;
    }

    .zd-next-level__lead {
        font-size: 17px;
    }

    .zd-next-level__description {
        font-size: 13.5px;
    }

    .zd-next-level__pillars {
        grid-template-columns: 1fr 1fr;
    }

    .zd-next-level__pillar {
        padding: 17px 12px;
    }
}


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

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

    .zd-next-level {
        padding: 56px 18px;
    }

    .zd-next-level__container {
        min-height: auto;

        padding: 28px 24px 30px;
    }

    .zd-next-level__visual {
        width: 100%;
        opacity: 0.16;
    }

    .zd-next-level__content {
        padding: 92px 0 80px;
    }

    .zd-next-level__title {
        font-size: 43px;
    }

    .zd-next-level__lead {
        font-size: 18px;
    }

    .zd-next-level__description {
        max-width: 520px;

        font-size: 14px;
    }

    .zd-next-level__button {
        min-height: 51px;

        padding: 14px 20px 14px 23px;

        font-size: 12px;
    }

    .zd-next-level__pillars {
        grid-template-columns: 1fr 1fr;
    }

    .zd-next-level__pillar {
        padding: 18px 14px;
    }

    .zd-next-level__pillar-content h3 {
        font-size: 12px;
    }

    .zd-next-level__pillar-content p {
        font-size: 11px;
    }
}


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

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

    .zd-next-level {
        padding: 72px 28px;
    }

    .zd-next-level__container {
        min-height: 700px;

        padding: 34px 36px;
    }

    .zd-next-level__visual {
        width: 62%;
        opacity: 0.2;
    }

    .zd-next-level__content {
        width: min(700px, 100%);

        padding: 55px 0 65px;
    }

    .zd-next-level__title {
        font-size: 56px;
    }

    .zd-next-level__lead {
        font-size: 19px;
    }

    .zd-next-level__description {
        max-width: 590px;

        font-size: 14px;
    }

    .zd-next-level__pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        padding-top: 32px;
    }

    .zd-next-level__pillar {
        padding: 18px 20px;
    }

    .zd-next-level__pillar:nth-child(2) {
        border-right: 0;
    }

    .zd-next-level__pillar:nth-child(3),
    .zd-next-level__pillar:nth-child(4) {
        margin-top: 8px;
    }

    .zd-next-level__pillar:nth-child(3) {
        padding-left: 0;
    }

    .zd-next-level__pillar:nth-child(4) {
        padding-right: 0;
    }
}


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

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

    .zd-next-level {
        padding: 82px 34px;
    }

    .zd-next-level__container {
        min-height: 720px;

        padding: 38px 42px;
    }

    .zd-next-level__content {
        width: min(720px, 100%);

        padding: 50px 0 55px;
    }

    .zd-next-level__title {
        font-size: 61px;
    }

    .zd-next-level__pillars {
        padding-top: 40px;
    }

    .zd-next-level__pillar {
        padding: 0 17px;
    }
}


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

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

    .zd-next-level__container {
        min-height: 750px;
    }

    .zd-next-level__title {
        font-size: 67px;
    }
}


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

@media (min-width: 1440px) {

    .zd-next-level__container {
        min-height: 780px;
    }

    .zd-next-level__title {
        font-size: 72px;
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

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

    .zd-next-level *,
    .zd-next-level__container,
    .zd-next-level__image,
    .zd-next-level__rule {
        transition: none !important;
        animation: none !important;
    }

    .zd-next-level__container,
    .zd-next-level__eyebrow,
    .zd-next-level__title span,
    .zd-next-level__lead,
    .zd-next-level__description,
    .zd-next-level__action,
    .zd-next-level__pillars,
    .zd-next-level__bottom {
        opacity: 1 !important;
        transform: none !important;
    }

    .zd-next-level__rule {
        transform: scaleX(1) !important;
    }
}


/* =========================================================
   ZENDOJO — THE GRAND DOJO ARENA SECTION
   Responsive, fully animated martial training experience
   ========================================================= */

.zd-arena {
    position: relative;
    overflow: hidden;
    padding-block: clamp(64px, 8vw, 120px);
    background: var(--arena-bg, var(--color-background));
    color: var(--arena-text, var(--color-text));
    font-family: var(--font-body);
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

/* Background Atmosphere */
.zd-arena__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.zd-arena__ambient-grid {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.5;
}

html[data-theme="dark"] .zd-arena__ambient-grid {
    background-image: 
        radial-gradient(rgba(250, 250, 247, 0.08) 1px, transparent 1px);
    opacity: 0.35;
}

.zd-arena__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.zd-arena__orb--left {
    top: 10%;
    inset-inline-start: -8%;
    width: clamp(260px, 35vw, 500px);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--arena-glow) 0%, transparent 70%);
    animation: zdArenaFloat 12s ease-in-out infinite alternate;
}

.zd-arena__orb--right {
    bottom: 5%;
    inset-inline-end: -8%;
    width: clamp(280px, 40vw, 560px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(229, 57, 53, 0.12) 0%, transparent 70%);
    animation: zdArenaFloat 14s ease-in-out infinite alternate-reverse;
}

.zd-arena__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(80px, 18vw, 240px);
    line-height: 1;
    letter-spacing: 0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(17, 17, 17, 0.035);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

html[data-theme="dark"] .zd-arena__watermark {
    -webkit-text-stroke: 1.5px rgba(250, 250, 247, 0.04);
}

/* Container */
.zd-arena__wrap {
    width: 100%;
    max-width: var(--container-width, 1440px);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
    position: relative;
    z-index: 2;
}

/* Header (Strict Parity with .pl) */
.zd-arena__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.zd-arena__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--arena-accent-text);
}

.zd-arena__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    transform-origin: left center;
}

.zd-arena__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 7.2vw, 64px);
    font-weight: 400;
    line-height: 1.12;
    color: var(--arena-text);
    text-wrap: balance;
}

.zd-arena__mark {
    padding-inline: 0.1em;
    background: linear-gradient(var(--arena-mark), var(--arena-mark)) no-repeat;
    background-size: 100% 42%;
    background-position: 0 92%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.zd-arena__lead {
    max-width: 62ch;
    margin: 16px 0 0;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.65;
    color: var(--arena-text-soft);
}

/* Discipline Navigation Ribbon */
.zd-arena__nav-wrap {
    width: 100%;
    margin-top: clamp(24px, 3.5vw, 40px);
}

.zd-arena__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.zd-arena__nav::-webkit-scrollbar {
    display: none;
}

.zd-arena__tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--arena-chip-bg);
    border: 1px solid var(--arena-chip-border);
    color: var(--arena-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.zd-arena__tab:hover {
    border-color: var(--arena-accent-text);
    transform: translateY(-2px);
}

.zd-arena__tab.is-active {
    background: var(--arena-pill-bg);
    color: var(--arena-pill-text);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.zd-arena__tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--arena-accent-text);
    transition: transform 0.24s ease, background 0.24s ease;
}

.zd-arena__tab.is-active .zd-arena__tab-dot {
    transform: scale(1.35);
    background: #E53935;
}

/* Arena Dual Layout Grid */
.zd-arena__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
    align-items: stretch;
    margin-top: clamp(28px, 4vw, 44px);
}

@media (min-width: 992px) {
    .zd-arena__grid {
        grid-template-columns: 1.18fr 0.92fr;
    }
}

@media (min-width: 1280px) {
    .zd-arena__grid {
        grid-template-columns: 1.25fr 1fr;
        gap: 48px;
    }
}

/* Left: 3D Spotlight Stage */
.zd-arena__stage {
    position: relative;
    perspective: 1200px;
}

.zd-arena__spotlight-card {
    position: relative;
    height: 100%;
    min-height: 520px;
    border-radius: var(--radius-large, 14px);
    overflow: hidden;
    background: var(--arena-card);
    border: 1px solid var(--arena-card-border);
    box-shadow: var(--arena-shadow);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform-style: preserve-3d;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.zd-arena__spotlight-card:hover {
    border-color: var(--arena-card-hover-border);
    box-shadow: var(--arena-shadow-hover);
}

.zd-arena__spotlight-img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.zd-arena__spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.zd-arena__spotlight-card:hover .zd-arena__spotlight-img {
    transform: scale(1.05);
}

.zd-arena__spotlight-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(17, 17, 17, 0.35) 0%,
        rgba(17, 17, 17, 0.12) 35%,
        rgba(17, 17, 17, 0.84) 75%,
        rgba(17, 17, 17, 0.98) 100%
    );
    pointer-events: none;
}

/* Radar Pulse Beacon */
.zd-arena__radar-pulse {
    position: absolute;
    top: 22px;
    inset-inline-end: 22px;
    z-index: 4;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.zd-arena__radar-pulse::before,
.zd-arena__radar-pulse::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(229, 57, 53, 0.85);
    animation: zdArenaRadar 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.zd-arena__radar-pulse::after {
    animation-delay: 1.2s;
}

.zd-arena__radar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E53935;
    box-shadow: 0 0 14px #E53935;
}

/* Spotlight Top Header */
.zd-arena__spotlight-top {
    position: absolute;
    top: 22px;
    inset-inline-start: 22px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zd-arena__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 250, 247, 0.22);
    color: #FAFAF7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.zd-arena__beacon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--arena-beacon-bg);
    box-shadow: 0 0 8px var(--arena-beacon-bg);
    animation: zdArenaBeacon 1.8s ease-in-out infinite alternate;
}

.zd-arena__age-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(229, 57, 53, 0.92);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Spotlight Bottom Details */
.zd-arena__spotlight-content {
    position: relative;
    z-index: 4;
    padding: clamp(22px, 3.8vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transform: translateZ(24px);
}

.zd-arena__spotlight-subtitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF8580;
    margin: 0;
}

.zd-arena__spotlight-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.15;
    color: #FAFAF7;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.zd-arena__spotlight-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(250, 250, 247, 0.9);
    margin: 0;
    max-width: 52ch;
}

/* Dynamic Metrics & Audio Visualizer */
.zd-arena__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.zd-arena__metric-card {
    padding: 12px 14px;
    border-radius: var(--radius-small, 8px);
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 250, 247, 0.16);
}

.zd-arena__metric-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(250, 250, 247, 0.7);
}

.zd-arena__metric-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    font-size: 22px;
    color: #FAFAF7;
    margin-top: 2px;
}

.zd-arena__metric-bar {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.22);
    margin-top: 8px;
    overflow: hidden;
}

.zd-arena__metric-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #E53935, #FF6B66);
    width: var(--val, 90%);
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.zd-arena__spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Audio Wave Visualizer */
.zd-arena__wave-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zd-arena__wave-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(250, 250, 247, 0.7);
}

.zd-arena__wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
}

.zd-arena__wave-bar {
    width: 3px;
    border-radius: 2px;
    background: #E53935;
    animation: zdArenaWave 1.2s ease-in-out infinite alternate;
}

.zd-arena__wave-bar:nth-child(1) { animation-delay: 0.1s; height: 35%; }
.zd-arena__wave-bar:nth-child(2) { animation-delay: 0.35s; height: 80%; }
.zd-arena__wave-bar:nth-child(3) { animation-delay: 0.5s; height: 100%; }
.zd-arena__wave-bar:nth-child(4) { animation-delay: 0.2s; height: 60%; }
.zd-arena__wave-bar:nth-child(5) { animation-delay: 0.45s; height: 90%; }
.zd-arena__wave-bar:nth-child(6) { animation-delay: 0.6s; height: 40%; }

/* Buttons */
.zd-arena__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--arena-btn-bg);
    color: var(--arena-btn-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(229, 57, 53, 0.35);
}

.zd-arena__btn:hover {
    background: var(--arena-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(229, 57, 53, 0.45);
}

.zd-arena__btn svg {
    transition: transform 0.2s ease;
}

.zd-arena__btn:hover svg {
    transform: translateX(4px);
}

/* Right: Dynamic Technique Matrix */
.zd-arena__matrix {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
}

.zd-arena__matrix-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: var(--radius-large, 14px);
    background: var(--arena-card);
    border: 1px solid var(--arena-card-border);
    box-shadow: var(--arena-shadow);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.zd-arena__matrix-card:hover {
    border-color: var(--arena-card-hover-border);
    transform: translateX(6px);
    box-shadow: var(--arena-shadow-hover);
}

.zd-arena__matrix-thumb {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-medium, 10px);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.08);
}

.zd-arena__matrix-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.zd-arena__matrix-card:hover .zd-arena__matrix-thumb img {
    transform: scale(1.1);
}

.zd-arena__matrix-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zd-arena__matrix-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--arena-accent-text);
}

.zd-arena__matrix-title {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.25;
    color: var(--arena-text);
    margin: 0;
}

.zd-arena__matrix-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--arena-text-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zd-arena__matrix-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.zd-arena__matrix-stat {
    font-size: 12px;
    font-weight: 600;
    color: var(--arena-accent-text);
    white-space: nowrap;
}

.zd-arena__matrix-track {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--arena-meter-track);
    overflow: hidden;
    max-width: 120px;
}

.zd-arena__matrix-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--arena-meter-fill);
    width: var(--w, 90%);
    transition: width 0.8s ease;
}

/* Rotating Dojo Seal */
.zd-arena__seal-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 22px;
    border-radius: var(--radius-large, 14px);
    background: var(--arena-chip-bg);
    border: 1px dashed var(--arena-chip-border);
    margin-top: 4px;
}

.zd-arena__seal-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--arena-text-soft);
    margin: 0;
}

.zd-arena__seal-text strong {
    color: var(--arena-text);
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.zd-arena__seal {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zd-arena__seal-svg {
    width: 100%;
    height: 100%;
    animation: zdArenaSpin 24s linear infinite;
}

.zd-arena__seal-svg text {
    font-family: var(--font-display);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    fill: var(--arena-text);
}

.zd-arena__seal-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E53935;
}

/* Keyframe Animations */
@keyframes zdArenaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes zdArenaRadar {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes zdArenaWave {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}

@keyframes zdArenaBeacon {
    from { opacity: 0.6; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.15); }
}

@keyframes zdArenaFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(30px, -24px); }
}

@keyframes zdArenaFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.zd-arena__fade-enter {
    animation: zdArenaFadeIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================================
   RESPONSIVENESS BREAKPOINTS
   mobile-s, m, l, tab, laptop, laptop-l
   ========================================================= */

/* Mobile-S (320px) */
@media (max-width: 360px) {
    .zd-arena {
        padding-block: 48px;
    }
    .zd-arena__wrap {
        padding-inline: 14px;
    }
    .zd-arena__title {
        font-size: 26px;
    }
    .zd-arena__lead {
        font-size: 14px;
    }
    .zd-arena__tab {
        padding: 9px 16px;
        font-size: 12px;
    }
    .zd-arena__spotlight-card {
        min-height: 440px;
    }
    .zd-arena__spotlight-content {
        padding: 16px 14px;
    }
    .zd-arena__spotlight-title {
        font-size: 22px;
    }
    .zd-arena__metrics {
        grid-template-columns: 1fr 1fr;
    }
    .zd-arena__matrix-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .zd-arena__matrix-thumb {
        width: 100%;
        height: 140px;
    }
    .zd-arena__seal-box {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
}

/* Mobile-M (375px) */
@media (min-width: 361px) and (max-width: 400px) {
    .zd-arena__title {
        font-size: 28px;
    }
    .zd-arena__spotlight-card {
        min-height: 470px;
    }
    .zd-arena__matrix-card {
        grid-template-columns: 80px 1fr;
        gap: 14px;
        padding: 12px;
    }
    .zd-arena__matrix-thumb {
        width: 80px;
        height: 80px;
    }
}

/* Mobile-L (425px) */
@media (min-width: 401px) and (max-width: 480px) {
    .zd-arena__spotlight-card {
        min-height: 490px;
    }
    .zd-arena__matrix-card {
        grid-template-columns: 88px 1fr;
        gap: 16px;
        padding: 14px;
    }
    .zd-arena__matrix-thumb {
        width: 88px;
        height: 88px;
    }
}

/* Tab (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .zd-arena__spotlight-card {
        min-height: 520px;
    }
    .zd-arena__matrix {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .zd-arena__seal-box {
        grid-column: 1 / -1;
    }
}

/* Laptop (1024px) */
@media (min-width: 992px) and (max-width: 1279px) {
    .zd-arena__spotlight-card {
        min-height: 560px;
    }
}

/* Laptop-L (1440px+) */
@media (min-width: 1440px) {
    .zd-arena__spotlight-card {
        min-height: 600px;
    }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .zd-arena__radar-pulse::before,
    .zd-arena__radar-pulse::after,
    .zd-arena__seal-svg,
    .zd-arena__wave-bar,
    .zd-arena__beacon,
    .zd-arena__orb {
        animation: none !important;
    }
    .zd-arena__spotlight-card {
        transition: none !important;
    }
    .zd-arena__spotlight-card:hover {
        transform: none !important;
    }
}
/* =========================================================
   HOME 2 HERO (Enso stage)
   ========================================================= */
.zh{--zh-ink:var(--color-text,#111);--zh-red:var(--color-accent,#E53935);--zh-mute:rgba(17,17,17,.68);--zh-card:rgba(255,255,255,.78);--zh-line:rgba(17,17,17,.1);--zh-tint:rgba(229,57,53,.1);--zh-red-text:#C62828;position:relative;overflow:hidden;isolation:isolate;color:var(--zh-ink);background:var(--color-background,#FAFAF7);padding:clamp(28px,5vw,64px) var(--nav-padding-inline,24px) 0}
.zh-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.zh-glow{position:absolute;inset:0;background:radial-gradient(560px circle at var(--mx,72%) var(--my,35%),var(--zh-tint),transparent 62%)}
.zh-floor{position:absolute;inset:auto -10% 0;height:58%;background:linear-gradient(var(--zh-line) 1px,transparent 1px) 0 0/100% 56px,linear-gradient(90deg,var(--zh-line) 1px,transparent 1px) 0 0/72px 100%;transform:perspective(620px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000,transparent 80%);mask-image:linear-gradient(to top,#000,transparent 80%);animation:zhFloor 5s linear infinite}
.zh-dust{position:absolute;bottom:-20px;inset-inline-start:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--zh-red);opacity:0;animation:zhDust var(--d) linear var(--dl) infinite}
.zh-wrap{max-width:var(--container-width,1440px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(24px,4vw,72px)}
.zh-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(16px,2vw,24px);padding:8px 16px;border:1px solid var(--zh-line);border-radius:999px;background:var(--zh-card);backdrop-filter:blur(8px);font:500 13px/1 var(--font-body);letter-spacing:.02em}
.zh-pulse{position:relative;width:9px;height:9px;border-radius:50%;background:var(--zh-red)}
.zh-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--zh-red);animation:zhPing 1.8s ease-out infinite}
.zh-title{margin:0;font:400 clamp(36px,4.7vw,68px)/1.02 var(--font-display);letter-spacing:-.025em;text-transform:none}
.zh-line{display:block}
.zh-w{display:inline-block;position:relative;opacity:0}
.zh-hl{color:var(--zh-red)}
.zh-hl svg{position:absolute;inset-inline:0;bottom:-.14em;width:100%;height:.28em;overflow:visible}
.zh-hl path{fill:none;stroke:var(--zh-red);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.zh-sub{max-width:520px;margin:clamp(18px,2.2vw,28px) 0 0;color:var(--zh-mute);font:400 clamp(16px,1.35vw,19px)/1.65 var(--font-body)}
.zh-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,2.6vw,36px)}
.zh-btn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:var(--radius-medium,10px);font:500 16px/1 var(--font-body);text-decoration:none;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.zh-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.zh-btn--p{background-color:#D43330;background-image:linear-gradient(135deg,#E53935,#C92F2C);color:#fff;box-shadow:0 12px 28px -10px rgba(229,57,53,.7)}
.zh-btn--p:hover{background-color:#C62828;background-image:none;box-shadow:0 16px 34px -10px rgba(229,57,53,.85)}
.zh-btn--p:hover svg{transform:translateX(4px)}
.zh-btn--p::after{content:"";position:absolute;inset:0 auto 0 -60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:zhShine 4.5s ease-in-out 1.6s infinite}
.zh-btn--g{padding-inline-start:10px;border:1px solid var(--zh-line);background:var(--zh-card);backdrop-filter:blur(8px);color:var(--zh-ink)}
.zh-btn--g:hover{border-color:var(--zh-red)}
.zh-play{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--zh-ink);color:var(--color-background,#fff)}
.zh-play svg{width:14px;height:14px;fill:currentColor;stroke:none}
.zh-proof{display:flex;align-items:center;gap:16px;margin-top:clamp(24px,2.8vw,40px);font:400 14px/1.5 var(--font-body);color:var(--zh-mute)}
.zh-proof p{margin:0}.zh-proof strong{color:var(--zh-ink)}
.zh-stars{color:#f6a31c;letter-spacing:2px;font-size:15px}
.zh-avatars{display:flex}
.zh-avatars img,.zh-avatars span{width:44px;height:44px;border-radius:50%;object-fit:cover;border:3px solid var(--color-background,#fff);margin-inline-start:-12px}
.zh-avatars>:first-child{margin-inline-start:0}
.zh-avatars span{display:grid;place-items:center;background:#C62828;color:#fff;font:500 12px var(--font-body)}
/* stage */
.zh-stage{--size:clamp(270px,36vw,520px);position:relative;width:var(--size);aspect-ratio:1;justify-self:center;margin-block:clamp(8px,2vw,24px)}
.zh-ring{position:absolute;inset:-4%;width:108%;height:108%;overflow:visible}
.zh-ring circle{fill:none}
.zh-ring__thin{stroke:var(--zh-ink);stroke-opacity:.28;stroke-width:1.5;stroke-dasharray:2 10;transform-origin:center;animation:zhSpin 60s linear infinite}
.zh-ring__enso{stroke:var(--zh-red);stroke-width:13;stroke-linecap:round;stroke-dasharray:93 100;stroke-dashoffset:93;transform:rotate(-110deg);transform-origin:center;animation:zhDraw 2.2s cubic-bezier(.6,.05,.2,1) .5s forwards}
.zh-orbit{position:absolute;inset:-4%;animation:zhSpin 38s linear infinite}
.zh-belt{position:absolute;top:50%;left:50%;width:clamp(14px,1.5vw,20px);height:clamp(14px,1.5vw,20px);margin:calc(clamp(14px,1.5vw,20px)/-2);border-radius:50%;background:var(--c);border:3px solid var(--color-background,#fff);box-shadow:0 0 0 1px var(--zh-line),0 6px 14px -4px rgba(0,0,0,.4);transform:rotate(var(--a)) translateY(calc(var(--size)*-.527));opacity:0;animation:zhPop .6s cubic-bezier(.3,1.6,.5,1) 1.4s forwards}
.zh-belt:nth-child(2){animation-delay:1.55s}.zh-belt:nth-child(3){animation-delay:1.7s}.zh-belt:nth-child(4){animation-delay:1.85s}.zh-belt:nth-child(5){animation-delay:2s}.zh-belt:nth-child(6){animation-delay:2.15s}.zh-belt:nth-child(7){animation-delay:2.3s}
.zh-photo{position:absolute;inset:6%;border-radius:50%;overflow:hidden;border:6px solid var(--color-background,#fff);box-shadow:0 30px 70px -24px rgba(0,0,0,.55);transform:scale(.6);opacity:0;animation:zhIn .9s cubic-bezier(.2,.8,.2,1) .25s forwards}
.zh-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:zhKen 16s ease-in-out infinite alternate}
.zh-card{--depth:var(--k);position:absolute;display:grid;gap:3px;padding:14px 18px;border:1px solid var(--zh-line);border-radius:16px;background:var(--zh-card);backdrop-filter:blur(14px);box-shadow:0 18px 40px -18px rgba(0,0,0,.45);font-family:var(--font-body);opacity:0;translate:calc(var(--px,0)*var(--k)*1px) calc(var(--py,0)*var(--k)*1px);animation:zhCard .8s cubic-bezier(.2,.8,.2,1) forwards,zhFloat 6s ease-in-out infinite alternate}
.zh-card strong{font:400 19px/1.2 var(--font-display)}
.zh-card small{font-size:12px;color:var(--zh-mute)}
.zh-card em{font:500 12px/1 var(--font-body);font-style:normal;color:var(--zh-red-text)}
.zh-card__live{display:flex;align-items:center;gap:8px;font:500 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--zh-red-text)}
.zh-card--class{top:4%;inset-inline-start:-8%;animation-delay:1.7s,1.7s}
.zh-card--meter{bottom:6%;inset-inline-end:-6%;min-width:150px;animation-delay:2s,2s}
.zh-card--belt{bottom:-2%;inset-inline-start:-2%;grid-auto-flow:column;align-items:center;gap:12px;animation-delay:2.3s,2.3s}
.zh-card--belt img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.zh-card--belt div{display:grid;gap:3px}
.zh-card--belt strong{font-size:15px}
.zh-card--belt>svg{width:26px;height:26px;padding:5px;border-radius:50%;background:#3fa45b;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.zh-card--meter strong{font-size:30px;color:var(--zh-red-text)}
.zh-bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:6px}
.zh-bars i{flex:1;height:var(--h);border-radius:4px;background:var(--zh-red);transform-origin:bottom;transform:scaleY(0);animation:zhBar .7s cubic-bezier(.3,1.4,.5,1) forwards}
.zh-bars i:nth-child(1){animation-delay:2.4s;opacity:.35}.zh-bars i:nth-child(2){animation-delay:2.5s;opacity:.5}.zh-bars i:nth-child(3){animation-delay:2.6s;opacity:.65}.zh-bars i:nth-child(4){animation-delay:2.7s;opacity:.8}.zh-bars i:nth-child(5){animation-delay:2.8s}
/* stats + marquee */
.zh-stats{max-width:var(--container-width,1440px);margin:clamp(28px,4vw,56px) auto 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--zh-line);border-radius:18px;background:var(--zh-card);backdrop-filter:blur(10px)}
.zh-stats li{display:grid;gap:4px;padding:clamp(16px,2vw,26px) clamp(16px,2.4vw,32px);border-inline-start:1px solid var(--zh-line)}
.zh-stats li:first-child{border-inline-start:0}
.zh-stats strong{font:400 clamp(26px,3vw,42px)/1 var(--font-display);color:var(--zh-ink)}
.zh-stats li>span{font:400 14px var(--font-body);color:var(--zh-mute)}
.zh-marquee{margin:clamp(24px,3vw,40px) calc(var(--nav-padding-inline,24px)*-1) 0;padding:18px 0;background:var(--zh-ink);color:var(--color-background,#fff);overflow:hidden;transform:rotate(-1deg) scale(1.02)}
.zh-track{display:flex;align-items:center;gap:28px;width:max-content;animation:zhMarq 34s linear infinite}
.zh-track span{font:400 clamp(18px,2vw,26px)/1 var(--font-display);letter-spacing:.02em;white-space:nowrap}
.zh-track b{width:12px;height:12px;background:var(--zh-red);transform:rotate(45deg);flex:none}
/* entrance animations */
.zh .zh-eyebrow{animation:zhUp .7s ease both}
.zh .zh-w{animation:zhUp .8s cubic-bezier(.2,.8,.2,1) calc(var(--i)*90ms + 150ms) forwards}
.zh .zh-hl path{animation:zhLine 1s ease 1.1s forwards}
.zh .zh-sub,.zh .zh-cta,.zh .zh-proof,.zh .zh-stats{animation:zhUp .8s ease .9s both}
.zh .zh-cta{animation-delay:1.05s}.zh .zh-proof{animation-delay:1.2s}.zh .zh-stats{animation-delay:1.5s}
@keyframes zhUp{from{opacity:0;transform:translateY(.55em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes zhLine{to{stroke-dashoffset:0}}
@keyframes zhDraw{to{stroke-dashoffset:0}}
@keyframes zhSpin{to{transform:rotate(360deg)}}
@keyframes zhPop{to{opacity:1}}
@keyframes zhIn{to{transform:none;opacity:1}}
@keyframes zhKen{from{transform:scale(1.04)}to{transform:scale(1.16) translateY(-2%)}}
@keyframes zhCard{from{opacity:0;margin-top:24px}to{opacity:1;margin-top:0}}
@keyframes zhFloat{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
@keyframes zhBar{to{transform:scaleY(1)}}
@keyframes zhPing{to{transform:scale(3);opacity:0}}
@keyframes zhShine{0%,60%{inset-inline-start:-60%}100%{inset-inline-start:130%}}
@keyframes zhFloor{to{background-position:0 56px,0 0}}
@keyframes zhDust{0%{transform:translateY(0);opacity:0}15%{opacity:.5}100%{transform:translateY(-92vh) translateX(24px);opacity:0}}
@keyframes zhMarq{to{transform:translateX(-50%)}}
@keyframes zhMarqR{to{transform:translateX(50%)}}

/* =========================================================
   HOME 2 HERO: RESPONSIVE
   ========================================================= */
/* Mobile-S (up to 374px) */
@media (max-width:374px){
 .zh{padding-top:22px}
 .zh-title{font-size:33px}
 .zh-sub{font-size:15px}
 .zh-eyebrow{font-size:12px;padding:7px 12px}
 .zh-cta .zh-btn{flex:1 1 100%;justify-content:center;min-height:50px}
 .zh-proof{flex-wrap:wrap;gap:12px}
 .zh-wrap{grid-template-columns:1fr}
 .zh-stage{--size:min(66vw,214px);margin-block:50px 28px}
 .zh-card{padding:9px 11px;border-radius:12px}
 .zh-card strong{font-size:14px}.zh-card small{font-size:11px}
 .zh-card--class{top:-22%;inset-inline-start:-14%}
 .zh-card--meter{bottom:-8%;inset-inline-end:-18%;min-width:112px}
 .zh-card--meter strong{font-size:22px}
 .zh-card--belt{display:none}
 .zh-bars{height:24px}
 .zh-stats{grid-template-columns:repeat(2,1fr)}
 .zh-stats li{padding:14px}
 .zh-stats strong{font-size:24px}
 .zh-stats li:nth-child(3){border-inline-start:0}
 .zh-stats li:nth-child(n+3){border-top:1px solid var(--zh-line)}
}
/* Mobile-M (375px to 424px) */
@media (min-width:375px) and (max-width:424px){
 .zh-title{font-size:37px}
 .zh-cta .zh-btn{flex:1 1 100%;justify-content:center}
 .zh-proof{flex-wrap:wrap}
 .zh-wrap{grid-template-columns:1fr}
 .zh-stage{--size:min(66vw,248px);margin-block:52px 30px}
 .zh-card{padding:10px 13px}
 .zh-card strong{font-size:15px}
 .zh-card--class{top:-20%;inset-inline-start:-10%}
 .zh-card--meter{bottom:-8%;inset-inline-end:-14%;min-width:120px}
 .zh-card--meter strong{font-size:24px}
 .zh-card--belt{display:none}
 .zh-stats{grid-template-columns:repeat(2,1fr)}
 .zh-stats li:nth-child(3){border-inline-start:0}
 .zh-stats li:nth-child(n+3){border-top:1px solid var(--zh-line)}
}
/* Mobile-L (425px to 767px) */
@media (min-width:425px) and (max-width:767px){
 .zh-title{font-size:clamp(38px,9vw,52px)}
 .zh-wrap{grid-template-columns:1fr}
 .zh-cta .zh-btn{flex:1 1 auto;justify-content:center}
 .zh-stage{--size:min(60vw,300px);margin-block:56px 32px}
 .zh-card--class{top:-16%;inset-inline-start:-14%}
 .zh-card--meter{bottom:-6%;inset-inline-end:-16%}
 .zh-card--belt{display:none}
 .zh-stats{grid-template-columns:repeat(2,1fr)}
 .zh-stats li:nth-child(3){border-inline-start:0}
 .zh-stats li:nth-child(n+3){border-top:1px solid var(--zh-line)}
}
/* Tablet (768px to 1023px) */
@media (min-width:768px) and (max-width:1023px){
 .zh-title{font-size:clamp(46px,7vw,64px)}
 .zh-wrap{grid-template-columns:1fr}
 .zh-sub{max-width:620px}
 .zh-stage{--size:clamp(340px,52vw,440px);margin-block:48px 36px}
 .zh-card--class{inset-inline-start:-14%}
 .zh-card--meter{inset-inline-end:-12%}
 .zh-card--belt{inset-inline-start:-8%}
 .zh-stats{grid-template-columns:repeat(4,1fr)}
}
/* Laptop (1024px to 1439px) */
@media (min-width:1024px) and (max-width:1439px){
 .zh-wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
 .zh-title{font-size:clamp(44px,4.6vw,62px)}
 .zh-stage{--size:clamp(330px,35vw,480px)}
 .zh-card--class{inset-inline-start:-12%}
 .zh-card--meter{bottom:17%;inset-inline-end:-3%}
 .zh-card--belt{bottom:-9%;inset-inline-start:-4%}
}
/* Laptop-L and up (1440px+) */
@media (min-width:1440px){
 .zh-title{font-size:68px}
 .zh-stage{--size:520px}
}

@media (prefers-reduced-motion:reduce){
 .zh *,.zh *::before,.zh *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
 .zh-w,.zh-photo,.zh-belt,.zh-card{opacity:1!important}.zh-photo{transform:none}.zh-ring__enso{stroke-dashoffset:0}.zh-hl path{stroke-dashoffset:0}.zh-bars i{transform:none}
}

/* =========================================================
   ZENDOJO — FOOTER
   Base / Light Theme
   ========================================================= */

/* Full viewport layout for the contact CTA section. */
.zd-contact-cta {
    min-height: 100vh;
    min-height: 100svh;
    padding: 0;
}

.zd-contact-cta__container {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    box-shadow: none;
}

.zd-footer {
    --zdf-bg: #111111;
    --zdf-surface: #333333;
    --zdf-surface-soft: rgba(51, 51, 51, 0.55);

    --zdf-white: #fafaf7;
    --zdf-white-soft: rgba(250, 250, 247, 0.72);
    --zdf-white-faint: rgba(250, 250, 247, 0.46);

    --zdf-red: #e53935;
    --zdf-red-dark: #c92f2c;

    --zdf-line: rgba(250, 250, 247, 0.13);
    --zdf-line-strong: rgba(250, 250, 247, 0.2);

    position: relative;

    width: 100%;

    background: #fafaf7;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   OUTER SHELL
   ========================================================= */

.zd-footer__shell {
    position: relative;

    width: 100%;

    padding:
        clamp(62px, 7vw, 105px)
        clamp(20px, 5vw, 72px)
        0;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #111111 60%,
            #1a1a1a 100%
        );

    color: var(--zdf-white);

    overflow: hidden;
}


/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.zd-footer__background {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;
}


.zd-footer__watermark {
    position: absolute;

    right: -4%;
    bottom: 8%;

    font-family: "Archivo Black", sans-serif;

    font-size: clamp(110px, 18vw, 290px);
    line-height: 0.8;

    font-weight: 500;

    letter-spacing: -0.07em;

    color: rgba(250, 250, 247, 0.025);

    white-space: nowrap;

    user-select: none;

    transform: translateX(100px);

    transition:
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}


.zd-footer.is-visible .zd-footer__watermark {
    transform: translateX(0);
}


.zd-footer__brush {
    position: absolute;

    top: -230px;
    right: -150px;

    width: 520px;
    height: 520px;

    border:
        1px solid
        rgba(229, 57, 53, 0.2);

    border-radius: 50%;

    box-shadow:
        0 0 0 55px rgba(229, 57, 53, 0.025),
        0 0 0 110px rgba(229, 57, 53, 0.018);

    transform: rotate(-18deg) scale(0.8);

    opacity: 0;

    transition:
        opacity 1s ease 0.2s,
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.zd-footer.is-visible .zd-footer__brush {
    opacity: 1;

    transform:
        rotate(-18deg)
        scale(1);
}


.zd-footer__orbit {
    position: absolute;

    left: -220px;
    bottom: -260px;

    width: 560px;
    height: 390px;

    border:
        1px solid
        rgba(229, 57, 53, 0.13);

    transform: rotate(14deg);

    opacity: 0.7;
}


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

.zd-footer__main {
    position: relative;

    width: min(1440px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(220px, 1.35fr)
        minmax(170px, 1fr)
        minmax(190px, 1fr)
        minmax(180px, 0.95fr)
        minmax(190px, 1fr);

    gap:
        clamp(24px, 3vw, 52px);

    padding-bottom: clamp(58px, 6vw, 90px);

    border-bottom:
        1px solid
        var(--zdf-line);
}


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

.zd-footer__brand-col {
    min-width: 0;

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s ease 0.1s,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}


.zd-footer.is-visible .zd-footer__brand-col {
    opacity: 1;

    transform: translateY(0);
}


.zd-footer__brand {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    text-decoration: none;

    color: var(--zdf-white);
}


.zd-footer__brand-mark {
    display: inline-flex;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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


.zd-footer__brand-mark svg {
    display: block;

    width: 100%;
    height: 100%;
}


.zd-footer__logo-dark {
    fill: var(--zdf-white);
}


.zd-footer__logo-red {
    fill: var(--zdf-red);
}


.zd-footer__brand-name {
    font-family: "Inter", sans-serif;

    font-size: 23px;

    line-height: 1;

    letter-spacing: 0.05em;

    font-weight: 500;
}


.zd-footer__brand:hover .zd-footer__brand-mark {
    animation:
        zdFooterLogoPulse 0.7s ease both;
}


@keyframes zdFooterLogoPulse {

    0% {
        transform: scale(1) rotate(0);
    }

    45% {
        transform: scale(1.08) rotate(-3deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}


.zd-footer__brand-tagline {
    margin: 25px 0 0;

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

    font-size: clamp(17px, 1.45vw, 21px);

    line-height: 1.42;

    font-weight: 400;

    color: var(--zdf-white);

    letter-spacing: -0.01em;
}


.zd-footer__brand-description {
    max-width: 330px;

    margin: 19px 0 0;

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

    font-size: 13px;

    line-height: 1.75;

    font-weight: 400;

    color: var(--zdf-white-soft);
}


.zd-footer__brand-line {
    width: 100%;
    max-width: 250px;

    height: 1px;

    margin-top: 27px;

    overflow: hidden;

    background: var(--zdf-line);
}


.zd-footer__brand-line span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--zdf-red);

    transition:
        width 1s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}


.zd-footer.is-visible .zd-footer__brand-line span {
    width: 100%;
}


.zd-footer__brand-note {
    margin: 13px 0 0;

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

    font-size: 10px;

    line-height: 1.5;

    letter-spacing: 0.15em;

    font-weight: 500;

    color: var(--zdf-red);
}


/* =========================================================
   COLUMNS
   ========================================================= */

.zd-footer__column {
    min-width: 0;

    opacity: 0;

    transform: translateY(35px);
}


.zd-footer.is-visible .zd-footer__column:nth-child(2) {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.7s ease 0.22s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}


.zd-footer.is-visible .zd-footer__column:nth-child(3) {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.7s ease 0.34s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.34s;
}


.zd-footer.is-visible .zd-footer__column:nth-child(4) {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.7s ease 0.46s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.46s;
}


.zd-footer.is-visible .zd-footer__column:nth-child(5) {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.7s ease 0.58s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.58s;
}


.zd-footer__eyebrow {
    display: block;

    margin-bottom: 10px;

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

    font-size: 10px;

    line-height: 1.4;

    letter-spacing: 0.17em;

    font-weight: 500;

    color: var(--zdf-red);
}


.zd-footer__column-title {
    margin: 0;

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

    font-size: clamp(19px, 1.5vw, 23px);

    line-height: 1.25;

    font-weight: 500;

    color: var(--zdf-white);

    text-transform: capitalize;
}


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

.zd-footer__links {
    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-top: 25px;
}


.zd-footer__link-group {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.zd-footer__group-label {
    margin-bottom: 3px;

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

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 0.15em;

    font-weight: 500;

    color: var(--zdf-white-faint);
}


.zd-footer__link-group a {
    position: relative;

    display: flex;

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

    gap: 10px;

    width: 100%;

    padding: 3px 0;

    color: var(--zdf-white-soft);

    text-decoration: none;

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

    font-size: 12px;

    line-height: 1.55;

    font-weight: 400;

    transition:
        color 0.28s ease,
        transform 0.28s ease;
}


.zd-footer__link-arrow {
    color: var(--zdf-red);

    opacity: 0;

    transform: translateX(-5px);

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


.zd-footer__link-group a:hover {
    color: var(--zdf-white);

    transform: translateX(3px);
}


.zd-footer__link-group a:hover
.zd-footer__link-arrow {
    opacity: 1;

    transform: translateX(0);
}


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

.zd-footer__contact-list {
    display: flex;

    flex-direction: column;

    gap: 17px;

    margin-top: 25px;
}


.zd-footer__contact-item {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}


.zd-footer__contact-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;

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

    border:
        1px solid
        var(--zdf-line);

    background: rgba(51, 51, 51, 0.35);

    color: var(--zdf-white-soft);

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


.zd-footer__contact-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.zd-footer__contact-item:hover
.zd-footer__contact-icon {
    color: var(--zdf-white);

    background: var(--zdf-red);

    border-color: var(--zdf-red);

    transform: translateY(-2px);
}


.zd-footer__contact-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.zd-footer__contact-copy small {
    font-family: "Inter", sans-serif;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 0.1em;

    font-weight: 500;

    color: var(--zdf-white-faint);
}


.zd-footer__contact-copy strong {
    overflow-wrap: anywhere;

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

    font-size: 12px;

    line-height: 1.5;

    font-weight: 400;

    color: var(--zdf-white-soft);
}


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

.zd-footer__support-list {
    display: flex;

    flex-direction: column;

    gap: 0;

    margin-top: 20px;
}


.zd-footer__support-list a {
    display: flex;

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

    gap: 10px;

    padding: 8px 0;

    border-bottom:
        1px solid
        rgba(250, 250, 247, 0.08);

    color: var(--zdf-white-soft);

    text-decoration: none;

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

    font-size: 11px;

    line-height: 1.5;

    font-weight: 400;

    transition:
        color 0.25s ease,
        padding 0.25s ease;
}


.zd-footer__support-list a > span:last-child {
    color: var(--zdf-red);

    transition:
        transform 0.25s ease;
}


.zd-footer__support-list a:hover {
    color: var(--zdf-white);

    padding-left: 4px;
}


.zd-footer__support-list a:hover > span:last-child {
    transform: translateX(4px);
}


.zd-footer__support-card {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 19px;

    padding: 14px;

    border:
        1px solid
        rgba(229, 57, 53, 0.24);

    background:
        linear-gradient(
            135deg,
            rgba(229, 57, 53, 0.1),
            rgba(51, 51, 51, 0.3)
        );
}


.zd-footer__support-card-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;

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

    color: var(--zdf-red);
}


.zd-footer__support-card-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.zd-footer__support-card strong {
    display: block;

    margin-bottom: 3px;

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

    font-size: 11px;

    line-height: 1.4;

    font-weight: 500;

    color: var(--zdf-white);
}


.zd-footer__support-card p {
    margin: 0;

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

    font-size: 10px;

    line-height: 1.55;

    font-weight: 400;

    color: var(--zdf-white-faint);
}


/* =========================================================
   TIMINGS
   ========================================================= */

.zd-footer__status {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 22px;

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

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 0.12em;

    font-weight: 500;

    color: var(--zdf-white-soft);
}


.zd-footer__status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--zdf-red);

    box-shadow:
        0 0 0 4px rgba(229, 57, 53, 0.1);

    animation:
        zdFooterStatusPulse 2s ease-in-out infinite;
}


@keyframes zdFooterStatusPulse {

    0%,
    100% {
        opacity: 1;

        box-shadow:
            0 0 0 4px rgba(229, 57, 53, 0.1);
    }

    50% {
        opacity: 0.55;

        box-shadow:
            0 0 0 7px rgba(229, 57, 53, 0.025);
    }
}


.zd-footer__hours {
    margin-top: 15px;

    border-top:
        1px solid
        var(--zdf-line);
}


.zd-footer__hours-row {
    display: flex;

    flex-direction: column;

    gap: 3px;

    padding: 11px 0;

    border-bottom:
        1px solid
        var(--zdf-line);
}


.zd-footer__hours-row span {
    font-family: "Inter", sans-serif;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 0.08em;

    font-weight: 500;

    color: var(--zdf-white-faint);
}


.zd-footer__hours-row strong {
    font-family: "Inter", sans-serif;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 400;

    color: var(--zdf-white);
}


.zd-footer__timing-note {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 15px;
}


.zd-footer__timing-note-mark {
    flex: 0 0 auto;

    color: var(--zdf-red);

    font-size: 16px;

    line-height: 1;
}


.zd-footer__timing-note p {
    margin: 0;

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

    font-size: 10px;

    line-height: 1.6;

    font-weight: 400;

    color: var(--zdf-white-faint);
}


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

.zd-footer__newsletter {
    position: relative;

    width: min(1440px, 100%);

    margin:
        clamp(42px, 5vw, 70px)
        auto
        0;

    padding:
        clamp(28px, 3.5vw, 48px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.9fr);

    align-items: center;

    gap: clamp(30px, 6vw, 90px);

    border:
        1px solid
        var(--zdf-line-strong);

    background:
        linear-gradient(
            135deg,
            rgba(51, 51, 51, 0.7),
            rgba(17, 17, 17, 0.55)
        );

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(35px)
        scale(0.985);

    transition:
        opacity 0.9s ease 0.7s,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s;
}


.zd-footer.is-visible .zd-footer__newsletter {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.zd-footer__newsletter-accent {
    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--zdf-red);

    transition:
        width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s;
}


.zd-footer.is-visible
.zd-footer__newsletter-accent {
    width: 100%;
}


.zd-footer__newsletter-content {
    min-width: 0;
}


.zd-footer__newsletter-title {
    margin: 0;

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

    font-size: clamp(26px, 3vw, 42px);

    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -0.025em;

    color: var(--zdf-white);
}


.zd-footer__newsletter-description {
    max-width: 610px;

    margin: 13px 0 0;

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

    font-size: 13px;

    line-height: 1.7;

    font-weight: 400;

    color: var(--zdf-white-soft);
}


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

.zd-footer__newsletter-form {
    min-width: 0;
}


.zd-footer__newsletter-field {
    display: grid;

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

    min-height: 54px;

    border:
        1px solid
        rgba(250, 250, 247, 0.2);

    background: #111111;

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


.zd-footer__newsletter-field:focus-within {
    border-color: var(--zdf-red);

    box-shadow:
        0 0 0 3px rgba(229, 57, 53, 0.1);
}


.zd-footer__newsletter-field input {
    width: 100%;

    min-width: 0;

    border: 0;

    outline: 0;

    padding: 14px 17px;

    background: transparent;

    color: var(--zdf-white);

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

    font-size: 12px;

    line-height: 1.5;

    font-weight: 400;
}


.zd-footer__newsletter-field input::placeholder {
    color: var(--zdf-white-faint);

    opacity: 1;
}


.zd-footer__newsletter-button {
    min-width: 92px;

    display: inline-flex;

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

    gap: 10px;

    padding: 12px 17px;

    border: 0;

    background: var(--zdf-red);

    color: var(--zdf-white);

    cursor: pointer;

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

    font-size: 11px;

    line-height: 1.4;

    letter-spacing: 0.06em;

    font-weight: 500;

    transition:
        background 0.3s ease,
        gap 0.3s ease;
}


.zd-footer__newsletter-button:hover {
    background: var(--zdf-red-dark);

    gap: 15px;
}


.zd-footer__newsletter-button:focus-visible {
    outline:
        3px solid
        rgba(250, 250, 247, 0.9);

    outline-offset: 3px;
}


.zd-footer__newsletter-message {
    min-height: 18px;

    margin: 9px 0 0;

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

    font-size: 10px;

    line-height: 1.5;

    font-weight: 400;

    color: var(--zdf-red);
}


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

.zd-footer__bottom {
    width: min(1440px, 100%);

    margin: 0 auto;

    min-height: 82px;

    padding:
        23px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.zd-footer__copyright {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

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

    font-size: 10px;

    line-height: 1.5;

    font-weight: 400;

    color: var(--zdf-white-faint);
}


.zd-footer__copyright-main {
    color: var(--zdf-white-soft);

    font-weight: 500;
}


.zd-footer__copyright-divider {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--zdf-red);
}


.zd-footer__legal {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 19px;
}


.zd-footer__legal a {
    color: var(--zdf-white-faint);

    text-decoration: none;

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

    font-size: 10px;

    line-height: 1.5;

    font-weight: 400;

    transition: color 0.25s ease;
}


.zd-footer__legal a:hover {
    color: var(--zdf-white);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.zd-footer a:focus-visible,
.zd-footer button:focus-visible,
.zd-footer input:focus-visible {
    outline:
        2px solid
        var(--zdf-red);

    outline-offset: 3px;
}


.zd-footer .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;
}


/* =========================================================
   MOBILE-S
   <= 374px
   ========================================================= */

@media (max-width: 374px) {

    .zd-footer__shell {
        padding:
            52px 16px 0;
    }


    .zd-footer__main {
        grid-template-columns: 1fr;

        gap: 0;

        padding-bottom: 38px;
    }


    .zd-footer__brand-col {
        padding-bottom: 38px;

        border-bottom:
            1px solid
            var(--zdf-line);
    }


    .zd-footer__brand-mark {
        width: 39px;
        height: 39px;

        flex-basis: 39px;
    }


    .zd-footer__brand-name {
        font-size: 21px;
    }


    .zd-footer__brand-tagline {
        margin-top: 21px;

        font-size: 17px;
    }


    .zd-footer__brand-description {
        font-size: 12px;

        line-height: 1.7;
    }


    .zd-footer__column {
        padding:
            32px 0;

        border-bottom:
            1px solid
            var(--zdf-line);
    }


    .zd-footer__links {
        margin-top: 21px;

        gap: 20px;
    }


    .zd-footer__link-group a {
        font-size: 12px;

        padding: 5px 0;
    }


    .zd-footer__contact-list {
        gap: 16px;
    }


    .zd-footer__newsletter {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-top: 34px;

        padding: 23px 17px;
    }


    .zd-footer__newsletter-title {
        font-size: 27px;
    }


    .zd-footer__newsletter-description {
        font-size: 12px;
    }


    .zd-footer__newsletter-field {
        grid-template-columns: 1fr;

        border: 0;

        background: transparent;

        gap: 9px;
    }


    .zd-footer__newsletter-field input {
        min-height: 50px;

        border:
            1px solid
            rgba(250, 250, 247, 0.2);

        background: #111111;
    }


    .zd-footer__newsletter-button {
        min-height: 48px;

        width: 100%;
    }


    .zd-footer__bottom {
        min-height: auto;

        padding: 24px 0;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .zd-footer__copyright {
        justify-content: center;

        text-align: center;

        font-size: 9px;
    }


    .zd-footer__legal {
        justify-content: center;

        gap: 13px;
    }


    .zd-footer__legal a {
        font-size: 9px;
    }


    .zd-footer__watermark {
        right: -30%;

        bottom: 11%;

        font-size: 105px;
    }
}


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

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

    .zd-footer__shell {
        padding:
            58px 19px 0;
    }


    .zd-footer__main {
        grid-template-columns: 1fr;

        gap: 0;

        padding-bottom: 42px;
    }


    .zd-footer__brand-col {
        padding-bottom: 40px;

        border-bottom:
            1px solid
            var(--zdf-line);
    }


    .zd-footer__column {
        padding: 35px 0;

        border-bottom:
            1px solid
            var(--zdf-line);
    }


    .zd-footer__links {
        gap: 22px;
    }


    .zd-footer__newsletter {
        grid-template-columns: 1fr;

        gap: 26px;

        margin-top: 38px;

        padding: 27px 21px;
    }


    .zd-footer__newsletter-field {
        grid-template-columns: 1fr;

        gap: 9px;

        border: 0;

        background: transparent;
    }


    .zd-footer__newsletter-field input {
        min-height: 51px;

        border:
            1px solid
            rgba(250, 250, 247, 0.2);

        background: #111111;
    }


    .zd-footer__newsletter-button {
        min-height: 49px;

        width: 100%;
    }


    .zd-footer__bottom {
        flex-direction: column;

        align-items: center;

        text-align: center;

        padding: 26px 0;
    }


    .zd-footer__copyright {
        justify-content: center;

        text-align: center;
    }


    .zd-footer__legal {
        justify-content: center;
    }
}


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

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

    .zd-footer__shell {
        padding:
            64px 24px 0;
    }


    .zd-footer__main {
        grid-template-columns: 1fr;

        gap: 0;

        padding-bottom: 45px;
    }


    .zd-footer__brand-col {
        padding-bottom: 45px;

        border-bottom:
            1px solid
            var(--zdf-line);
    }


    .zd-footer__brand-description {
        max-width: 520px;

        font-size: 13px;
    }


    .zd-footer__column {
        padding: 38px 0;

        border-bottom:
            1px solid
            var(--zdf-line);
    }


    .zd-footer__links {
        display: grid;

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

        column-gap: 28px;

        row-gap: 25px;
    }


    .zd-footer__link-group:last-child {
        grid-column: 1 / -1;
    }


    .zd-footer__newsletter {
        grid-template-columns: 1fr;

        gap: 28px;

        margin-top: 44px;

        padding: 30px 25px;
    }


    .zd-footer__newsletter-field {
        grid-template-columns: minmax(0, 1fr) auto;
    }


    .zd-footer__newsletter-button {
        min-width: 90px;
    }


    .zd-footer__bottom {
        flex-direction: column;

        align-items: center;

        text-align: center;

        padding: 28px 0;
    }


    .zd-footer__copyright {
        justify-content: center;
    }


    .zd-footer__legal {
        justify-content: center;
    }


    .zd-footer__watermark {
        right: -16%;
    }
}


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

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

    .zd-footer__shell {
        padding:
            74px 32px 0;
    }


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

        column-gap: 42px;

        row-gap: 0;

        padding-bottom: 55px;
    }


    .zd-footer__brand-col {
        grid-column: 1 / -1;

        padding-bottom: 45px;

        margin-bottom: 0;

        border-bottom:
            1px solid
            var(--zdf-line);
    }


    .zd-footer__brand-description {
        max-width: 650px;
    }


    .zd-footer__column {
        padding-top: 42px;
    }


    .zd-footer__quick-links,
    .zd-footer__contact {
        padding-bottom: 38px;

        border-bottom:
            1px solid
            var(--zdf-line);
    }


    .zd-footer__support,
    .zd-footer__timings {
        padding-top: 42px;
    }


    .zd-footer__newsletter {
        grid-template-columns:
            1fr;

        gap: 25px;

        margin-top: 48px;

        padding: 32px;
    }


    .zd-footer__newsletter-description {
        max-width: 650px;
    }


    .zd-footer__bottom {
        padding: 26px 0;
    }
}


/* =========================================================
   LAPTOP
   1024px — 1279px
   ========================================================= */

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

    .zd-footer__shell {
        padding:
            82px 38px 0;
    }


    .zd-footer__main {
        grid-template-columns:
            minmax(190px, 1.25fr)
            minmax(145px, 1fr)
            minmax(170px, 1fr)
            minmax(155px, 0.9fr)
            minmax(165px, 0.95fr);

        gap: 25px;
    }


    .zd-footer__brand-description {
        font-size: 12px;
    }


    .zd-footer__column-title {
        font-size: 20px;
    }


    .zd-footer__newsletter {
        gap: 45px;
    }
}


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

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

    .zd-footer__shell {
        padding:
            92px 52px 0;
    }


    .zd-footer__main {
        gap: 34px;
    }
}


/* =========================================================
   DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .zd-footer__shell {
        padding:
            105px 64px 0;
    }


    .zd-footer__main {
        gap: 48px;
    }


    .zd-footer__brand-description {
        max-width: 350px;
    }
}


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

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

    .zd-footer *,
    .zd-footer__watermark,
    .zd-footer__brush,
    .zd-footer__brand-line span {
        animation: none !important;

        transition: none !important;
    }


    .zd-footer__brand-col,
    .zd-footer__column,
    .zd-footer__newsletter {
        opacity: 1 !important;

        transform: none !important;
    }


    .zd-footer__brand-line span,
    .zd-footer__newsletter-accent {
        width: 100% !important;
    }
}


/* =========================================================
   ZENDOJO HOME2 — CINEMATIC MULTI-FRAME OPENER
   3-Phase Scroll-Driven Expansion and Side-Bento Split
   ========================================================= */

.zh2-cinema {
    position: relative;
    width: 100%;
    overflow: clip;
    background: var(--zh2-cinema-bg);
    color: var(--zh2-cinema-text);
    font-family: var(--font-body);
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

.zh2-cinema__scroll {
    position: relative;
    height: 320vh;
}

.zh2-cinema__sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* Background Atmosphere */
.zh2-cinema__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.zh2-cinema__grid-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.6;
}

html[data-theme="dark"] .zh2-cinema__grid-pattern {
    background-image: radial-gradient(rgba(250, 250, 247, 0.08) 1px, transparent 1px);
    opacity: 0.35;
}

.zh2-cinema__glow-orb {
    position: absolute;
    top: 30%;
    left: 20%;
    width: clamp(300px, 45vw, 650px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 57, 53, 0.14) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

/* Phase 1 Introductory Header */
.zh2-cinema__intro {
    position: absolute;
    top: clamp(24px, 5vh, 60px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    width: calc(100% - 32px);
    max-width: 640px;
    pointer-events: none;
    transition: opacity 0.15s linear, transform 0.15s linear;
}

.zh2-cinema__intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zh2-cinema-accent);
    margin-bottom: 8px;
}

.zh2-cinema__neon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zh2-cinema-accent-neon, #D4FF00);
    box-shadow: 0 0 10px var(--zh2-cinema-accent-neon, #D4FF00);
    animation: zh2Pulse 2s ease-in-out infinite alternate;
}

.zh2-cinema__intro-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 4.2vw, 42px);
    line-height: 1.15;
    color: var(--zh2-cinema-text);
}

.zh2-cinema__hl {
    color: var(--zh2-cinema-accent);
}

.zh2-cinema__scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--zh2-cinema-text-muted);
    margin-top: 10px;
    animation: zh2Bounce 1.8s ease-in-out infinite;
}

/* Master Stage */
.zh2-cinema__stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Expanding Video Box */
.zh2-cinema__video-box {
    position: absolute;
    overflow: hidden;
    background: #000000;
    box-shadow: var(--zh2-cinema-shadow);
    border: 1px solid rgba(250, 250, 247, 0.12);
    will-change: width, height, transform, border-radius;
    transition: box-shadow 0.3s ease;
}

.zh2-cinema__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.zh2-cinema__video-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(17, 17, 17, 0.45) 0%,
        rgba(17, 17, 17, 0.08) 25%,
        rgba(17, 17, 17, 0.15) 60%,
        rgba(17, 17, 17, 0.88) 100%
    );
}

/* Video Top HUD */
.zh2-cinema__video-top {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

.zh2-cinema__tag-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zh2-cinema__tag {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(250, 250, 247, 0.2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #FAFAF7;
    text-transform: uppercase;
}

.zh2-cinema__neon-badge {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--zh2-cinema-accent-neon, #D4FF00);
    color: #111111;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.zh2-cinema__live-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #FAFAF7;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(17, 17, 17, 0.65);
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.zh2-cinema__pulse-ring {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E53935;
    box-shadow: 0 0 8px #E53935;
}

/* Video Middle Graphic Elements */
.zh2-cinema__video-middle {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.zh2-cinema__neon-circle {
    position: absolute;
    top: 24%;
    left: 10%;
    width: clamp(38px, 6vw, 56px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--zh2-cinema-accent-neon, #D4FF00);
    box-shadow: 0 0 30px var(--zh2-cinema-accent-neon, #D4FF00);
    opacity: 0.88;
    animation: zh2Float 8s ease-in-out infinite alternate;
}

.zh2-cinema__watermark-text {
    position: absolute;
    bottom: 80px;
    left: 24px;
    font-family: var(--font-display);
    font-size: clamp(24px, 5vw, 50px);
    line-height: 0.95;
    color: rgba(250, 250, 247, 0.95);
    text-transform: uppercase;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
}

/* Video Bottom Scrub & Controls */
.zh2-cinema__video-bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.zh2-cinema__scrub-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 480px;
    background: rgba(17, 17, 17, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(250, 250, 247, 0.16);
}

.zh2-cinema__timecode,
.zh2-cinema__duration {
    font-size: 11px;
    font-weight: 700;
    color: #FAFAF7;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.zh2-cinema__track {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--zh2-cinema-timeline-track);
    overflow: visible;
}

.zh2-cinema__track-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--zh2-cinema-timeline-fill);
    transition: width 0.1s linear;
}

.zh2-cinema__track-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--zh2-cinema-accent-neon, #D4FF00);
    box-shadow: 0 0 8px var(--zh2-cinema-accent-neon);
    transition: left 0.1s linear;
}

.zh2-cinema__controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zh2-cinema__ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(250, 250, 247, 0.2);
    color: #FAFAF7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.zh2-cinema__ctrl-btn:hover {
    background: var(--zh2-cinema-accent);
    transform: scale(1.1);
}

/* Side Bento Column */
.zh2-cinema__side {
    position: absolute;
    z-index: 5;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Bento Cards */
.zh2-cinema__bento {
    border-radius: var(--radius-large, 16px);
    background: var(--zh2-cinema-card);
    border: 1px solid var(--zh2-cinema-card-border);
    box-shadow: var(--zh2-cinema-shadow);
    overflow: hidden;
    transition: border-color 0.26s ease, transform 0.26s ease;
}

.zh2-cinema__bento:hover {
    border-color: var(--zh2-cinema-card-hover-border);
    transform: translateY(-2px);
}

/* Bento Frame A: Media */
.zh2-cinema__bento--media {
    position: relative;
    min-height: 180px;
}

.zh2-cinema__bento-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zh2-cinema__side-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.zh2-cinema__bento--media:hover .zh2-cinema__side-img {
    transform: scale(1.08);
}

.zh2-cinema__bento-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(8px);
    color: #FAFAF7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.zh2-cinema__bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(17, 17, 17, 0.92) 100%);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
}

.zh2-cinema__bento-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--zh2-cinema-accent-neon, #D4FF00);
}

.zh2-cinema__bento-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.2;
    color: #FAFAF7;
}

/* Bento Frame B: Data / MMG */
.zh2-cinema__bento--data {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zh2-cinema__bento-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zh2-cinema__bento-pill {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zh2-cinema-accent);
}

.zh2-cinema__data-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.25;
    color: var(--zh2-cinema-text);
}

.zh2-cinema__data-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--zh2-cinema-text-soft);
}

.zh2-cinema__stats-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--zh2-cinema-card-border);
}

.zh2-cinema__stat-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--zh2-cinema-text);
    line-height: 1;
}

.zh2-cinema__stat-item span {
    font-size: 11px;
    font-weight: 600;
    color: var(--zh2-cinema-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Bento Frame C: Action CTA */
.zh2-cinema__bento--action {
    padding: 18px 20px;
    position: relative;
    background: linear-gradient(135deg, rgba(229, 57, 53, 0.95) 0%, rgba(168, 37, 34, 0.95) 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.zh2-cinema__action-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zh2-cinema__action-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zh2-cinema-accent-neon, #D4FF00);
}

.zh2-cinema__action-heading {
    margin: 0 0 6px 0;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.2;
    color: #FFFFFF;
}

.zh2-cinema__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #111111;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: fit-content;
}

.zh2-cinema__action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.zh2-cinema__action-bg-art {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Keyframes */
@keyframes zh2Pulse {
    from { opacity: 0.65; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.15); }
}

@keyframes zh2Bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

@keyframes zh2Float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(18px, -18px); }
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Desktop & Laptop (1024px+) */
@media (min-width: 1024px) {
    .zh2-cinema__side {
        right: max(24px, calc((100vw - 1440px) / 2 + 24px));
        width: clamp(340px, 34vw, 460px);
        height: calc(100vh - 120px);
        max-height: 660px;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .zh2-cinema__side {
        right: 20px;
        width: 380px;
        height: calc(100vh - 100px);
        max-height: 600px;
    }
}

/* Mobile Screens (<= 767px: Mobile-S, M, L) */
@media (max-width: 767px) {
    .zh2-cinema__scroll {
        height: 280vh;
    }

    .zh2-cinema__intro {
        top: 20px;
    }

    .zh2-cinema__video-top {
        top: 14px;
        left: 14px;
        right: 14px;
    }

    .zh2-cinema__video-bottom {
        bottom: 14px;
        left: 14px;
        right: 14px;
    }

    .zh2-cinema__scrub-wrap {
        padding: 6px 10px;
    }

    .zh2-cinema__watermark-text {
        bottom: 60px;
        left: 16px;
        font-size: 20px;
    }

    .zh2-cinema__neon-circle {
        top: 20%;
        left: 8%;
        width: 32px;
        height: 32px;
    }

    .zh2-cinema__side {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        height: auto;
        max-height: calc(48vh - 20px);
        overflow-y: auto;
        gap: 12px;
    }

    .zh2-cinema__bento--media {
        display: none; /* Hide heavy photo on small screens to prioritize data & CTA */
    }

    .zh2-cinema__bento--data {
        padding: 14px;
    }

    .zh2-cinema__bento--action {
        padding: 14px;
    }
}

/* Mobile-S (320px) */
@media (max-width: 360px) {
    .zh2-cinema__intro-title {
        font-size: 22px;
    }

    .zh2-cinema__scrub-wrap {
        max-width: 100%;
    }

    .zh2-cinema__video-bottom {
        gap: 8px;
    }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .zh2-cinema__neon-dot,
    .zh2-cinema__scroll-cue,
    .zh2-cinema__neon-circle {
        animation: none !important;
    }
}


/* =========================================================
   ZENDOJO — THE MINDSET SHIFT
   BASE / LIGHT MODE
   ========================================================= */

.zd-mindset-shift {
    --zd-ms-black: #111111;
    --zd-ms-graphite: #333333;
    --zd-ms-red: #E53935;
    --zd-ms-white: #FAFAF7;

    position: relative;
    width: 100%;
    overflow: hidden;

    background: var(--zd-ms-white);
    color: var(--zd-ms-black);

    padding: clamp(80px, 8vw, 132px) 0;

    isolation: isolate;
}


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

.zd-mindset-shift__inner {
    width: min(1400px, calc(100% - 48px));
    margin-inline: auto;
}


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

.zd-mindset-shift__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 26px;
}


.zd-mindset-shift__eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
}


.zd-mindset-shift__eyebrow {
    display: inline-flex;
    align-items: center;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;

    color: var(--zd-ms-red);

    white-space: nowrap;
}


.zd-mindset-shift__header-line {
    width: clamp(48px, 8vw, 120px);
    height: 1px;

    background: var(--zd-ms-red);

    opacity: 0.65;
}


.zd-mindset-shift__counter {
    display: flex;
    align-items: center;
    gap: 7px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;

    color: var(--zd-ms-graphite);

    flex-shrink: 0;
}


.zd-mindset-shift__counter-current {
    color: var(--zd-ms-red);
}


.zd-mindset-shift__counter-divider {
    opacity: 0.5;
}


/* =========================================================
   TITLE
   ========================================================= */

.zd-mindset-shift__title-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.65fr);
    align-items: end;
    gap: clamp(32px, 7vw, 120px);

    margin-bottom: clamp(42px, 5vw, 72px);
}


.zd-mindset-shift__title {
    margin: 0;

    font-family: "Archivo Black", sans-serif;
    font-size: clamp(38px, 5.3vw, 78px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;

    color: var(--zd-ms-black);
}


.zd-mindset-shift__title span,
.zd-mindset-shift__title strong {
    display: block;
}


.zd-mindset-shift__title strong {
    color: var(--zd-ms-red);
    font-weight: 500;
}


.zd-mindset-shift__intro {
    max-width: 470px;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 400;
    line-height: 1.75;

    color: var(--zd-ms-graphite);
}


/* =========================================================
   MAIN STAGE
   ========================================================= */

.zd-mindset-shift__stage {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);

    min-height: 570px;

    background: var(--zd-ms-graphite);

    overflow: hidden;
}


/* =========================================================
   IMAGE
   ========================================================= */

.zd-mindset-shift__visual {
    position: relative;

    min-height: 570px;

    overflow: hidden;

    background: var(--zd-ms-black);
}


.zd-mindset-shift__image-mask {
    position: absolute;
    inset: 0;

    overflow: hidden;

    clip-path: polygon(
        0 0,
        94% 0,
        100% 50%,
        94% 100%,
        0 100%
    );

    transform: translateX(-18%);
    opacity: 0;

    transition:
        transform 900ms cubic-bezier(.16, 1, .3, 1),
        opacity 700ms ease;
}


.zd-mindset-shift.is-visible
.zd-mindset-shift__image-mask {
    transform: translateX(0);
    opacity: 1;
}


.zd-mindset-shift__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.08);

    filter:
        saturate(0.82)
        contrast(1.03);

    transition:
        transform 1200ms cubic-bezier(.16, 1, .3, 1),
        filter 700ms ease;
}


.zd-mindset-shift.is-visible
.zd-mindset-shift__image {
    transform: scale(1);
}


.zd-mindset-shift__visual::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(17, 17, 17, 0.05) 0%,
            rgba(17, 17, 17, 0.10) 55%,
            rgba(17, 17, 17, 0.68) 100%
        );

    pointer-events: none;
}


.zd-mindset-shift__visual-label {
    position: absolute;

    left: 30px;
    bottom: 30px;

    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.zd-mindset-shift__visual-label span {
    padding: 7px 10px;

    border: 1px solid rgba(250, 250, 247, 0.32);

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;

    color: var(--zd-ms-white);

    background: rgba(17, 17, 17, 0.3);

    backdrop-filter: blur(8px);
}


.zd-mindset-shift__visual-number {
    position: absolute;

    top: 22px;
    right: 28px;

    z-index: 2;

    font-family: "Archivo Black", sans-serif;
    font-size: clamp(72px, 10vw, 150px);
    font-weight: 500;
    line-height: 0.8;

    color: rgba(250, 250, 247, 0.15);

    pointer-events: none;
}


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

.zd-mindset-shift__content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(42px, 5vw, 78px)
        clamp(34px, 5vw, 76px);

    background: var(--zd-ms-graphite);

    color: var(--zd-ms-white);

    overflow: hidden;
}


.zd-mindset-shift__content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background: var(--zd-ms-red);

    transform: scaleY(0);
    transform-origin: top;

    transition:
        transform 800ms cubic-bezier(.16, 1, .3, 1);
}


.zd-mindset-shift.is-visible
.zd-mindset-shift__content::before {
    transform: scaleY(1);
}


/* =========================================================
   META
   ========================================================= */

.zd-mindset-shift__stage-meta {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 26px;
}


.zd-mindset-shift__stage-label {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;

    color: var(--zd-ms-red);
}


.zd-mindset-shift__stage-line {
    width: 34px;
    height: 1px;

    background: rgba(250, 250, 247, 0.35);
}


.zd-mindset-shift__stage-name {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;

    color: rgba(250, 250, 247, 0.78);
}


.zd-mindset-shift__content-number {
    margin-bottom: 15px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;

    color: rgba(250, 250, 247, 0.48);
}


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

.zd-mindset-shift__heading {
    max-width: 620px;

    margin: 0 0 22px;

    font-family: "Archivo Black", sans-serif;
    font-size: clamp(32px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -0.035em;

    color: var(--zd-ms-white);

    transition:
        opacity 350ms ease,
        transform 500ms cubic-bezier(.16, 1, .3, 1);
}


.zd-mindset-shift__heading span {
    display: block;
    color: var(--zd-ms-red);
}


.zd-mindset-shift__description {
    max-width: 520px;

    margin: 0 0 27px;

    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 400;
    line-height: 1.75;

    color: rgba(250, 250, 247, 0.82);

    transition:
        opacity 350ms ease,
        transform 500ms cubic-bezier(.16, 1, .3, 1);
}


/* =========================================================
   POINTS
   ========================================================= */

.zd-mindset-shift__points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 34px;
}


.zd-mindset-shift__point {
    position: relative;

    padding: 8px 11px 8px 22px;

    border: 1px solid rgba(250, 250, 247, 0.16);

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;

    color: rgba(250, 250, 247, 0.78);
}


.zd-mindset-shift__point::before {
    content: "";

    position: absolute;

    left: 9px;
    top: 50%;

    width: 5px;
    height: 5px;

    background: var(--zd-ms-red);

    transform: translateY(-50%);
}


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

.zd-mindset-shift__cta {
    align-self: flex-start;

    display: inline-flex;
    align-items: center;
    gap: 18px;

    min-height: 48px;

    padding: 12px 17px;

    border: 1px solid var(--zd-ms-red);

    text-decoration: none;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;

    color: var(--zd-ms-white);
    background: var(--zd-ms-red);

    transition:
        background 250ms ease,
        color 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}


.zd-mindset-shift__cta:hover {
    color: var(--zd-ms-red);
    background: transparent;

    transform: translateY(-2px);
}


.zd-mindset-shift__cta-arrow {
    font-size: 18px;
    line-height: 1;

    transition: transform 250ms ease;
}


.zd-mindset-shift__cta:hover
.zd-mindset-shift__cta-arrow {
    transform: translateX(4px);
}


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

.zd-mindset-shift__navigation {
    padding-top: 30px;
}


.zd-mindset-shift__progress {
    width: 100%;
    height: 2px;

    margin-bottom: 20px;

    overflow: hidden;

    background: rgba(51, 51, 51, 0.18);
}


.zd-mindset-shift__progress-fill {
    display: block;

    width: 25%;
    height: 100%;

    background: var(--zd-ms-red);

    transition:
        width 600ms cubic-bezier(.16, 1, .3, 1);
}


.zd-mindset-shift__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 0;
}


.zd-mindset-shift__step {
    position: relative;

    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;

    min-width: 0;

    padding: 0 18px 0 0;

    border: 0;
    background: transparent;

    text-align: left;

    cursor: pointer;

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

    color: var(--zd-ms-graphite);

    opacity: 0.5;

    transition:
        opacity 250ms ease,
        color 250ms ease;
}


.zd-mindset-shift__step:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 18px;
    top: 50%;

    width: 1px;
    height: 24px;

    background: rgba(51, 51, 51, 0.18);

    transform: translateY(-50%);
}


.zd-mindset-shift__step:hover,
.zd-mindset-shift__step.is-active {
    opacity: 1;
}


.zd-mindset-shift__step.is-active {
    color: var(--zd-ms-red);
}


.zd-mindset-shift__step-number {
    font-size: 11px;
    font-weight: 500;
}


.zd-mindset-shift__step-name {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;

    white-space: nowrap;
}


/* =========================================================
   SECTION REVEAL
   ========================================================= */

.zd-mindset-shift__header,
.zd-mindset-shift__title,
.zd-mindset-shift__intro,
.zd-mindset-shift__navigation {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 700ms ease,
        transform 800ms cubic-bezier(.16, 1, .3, 1);
}


.zd-mindset-shift.is-visible .zd-mindset-shift__header,
.zd-mindset-shift.is-visible .zd-mindset-shift__title,
.zd-mindset-shift.is-visible .zd-mindset-shift__intro,
.zd-mindset-shift.is-visible .zd-mindset-shift__navigation {
    opacity: 1;
    transform: translateY(0);
}


.zd-mindset-shift.is-visible .zd-mindset-shift__title {
    transition-delay: 120ms;
}


.zd-mindset-shift.is-visible .zd-mindset-shift__intro {
    transition-delay: 220ms;
}


.zd-mindset-shift.is-visible .zd-mindset-shift__navigation {
    transition-delay: 450ms;
}


/* =========================================================
   SLIDE TRANSITION STATE
   ========================================================= */

.zd-mindset-shift.is-changing
.zd-mindset-shift__heading,
.zd-mindset-shift.is-changing
.zd-mindset-shift__description,
.zd-mindset-shift.is-changing
.zd-mindset-shift__points,
.zd-mindset-shift.is-changing
.zd-mindset-shift__cta {
    opacity: 0;
    transform: translateY(18px);
}


.zd-mindset-shift.is-changing
.zd-mindset-shift__image {
    transform: scale(1.06);
}


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

@media (max-width: 1439px) {

    .zd-mindset-shift__inner {
        width: min(1320px, calc(100% - 44px));
    }

    .zd-mindset-shift__stage {
        min-height: 540px;
    }

    .zd-mindset-shift__visual {
        min-height: 540px;
    }

}


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

@media (max-width: 1279px) {

    .zd-mindset-shift {
        padding-block: 92px;
    }

    .zd-mindset-shift__title-row {
        gap: 50px;
    }

    .zd-mindset-shift__stage {
        grid-template-columns: minmax(0, 1fr) minmax(350px, 0.9fr);
        min-height: 510px;
    }

    .zd-mindset-shift__visual {
        min-height: 510px;
    }

    .zd-mindset-shift__content {
        padding: 48px;
    }

    .zd-mindset-shift__heading {
        font-size: clamp(32px, 4vw, 52px);
    }

}


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

@media (max-width: 1023px) {

    .zd-mindset-shift {
        padding-block: 78px;
    }

    .zd-mindset-shift__inner {
        width: min(900px, calc(100% - 40px));
    }

    .zd-mindset-shift__title-row {
        grid-template-columns: 1fr;
        gap: 20px;

        margin-bottom: 42px;
    }

    .zd-mindset-shift__intro {
        max-width: 650px;
    }

    .zd-mindset-shift__stage {
        grid-template-columns: 1fr 1fr;
        min-height: 500px;
    }

    .zd-mindset-shift__visual {
        min-height: 500px;
    }

    .zd-mindset-shift__content {
        padding: 40px;
    }

    .zd-mindset-shift__heading {
        font-size: clamp(30px, 4.5vw, 46px);
    }

    .zd-mindset-shift__description {
        font-size: 14px;
    }

    .zd-mindset-shift__points {
        gap: 7px;
    }

    .zd-mindset-shift__point {
        font-size: 10.5px;
    }

}


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

@media (max-width: 767px) {

    .zd-mindset-shift {
        padding-block: 68px;
    }

    .zd-mindset-shift__inner {
        width: calc(100% - 32px);
    }

    .zd-mindset-shift__header {
        margin-bottom: 22px;
    }

    .zd-mindset-shift__eyebrow {
        font-size: 10px;
    }

    .zd-mindset-shift__header-line {
        width: 38px;
    }

    .zd-mindset-shift__title {
        font-size: clamp(36px, 11vw, 50px);
        line-height: 1;
    }

    .zd-mindset-shift__title-row {
        margin-bottom: 34px;
    }

    .zd-mindset-shift__intro {
        font-size: 14px;
        line-height: 1.7;
    }

    .zd-mindset-shift__stage {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .zd-mindset-shift__visual {
        min-height: clamp(300px, 70vw, 430px);
    }

    .zd-mindset-shift__image-mask {
        clip-path: none;
    }

    .zd-mindset-shift__visual-number {
        top: 20px;
        right: 20px;
        font-size: clamp(76px, 23vw, 115px);
    }

    .zd-mindset-shift__visual-label {
        left: 18px;
        bottom: 18px;
    }

    .zd-mindset-shift__content {
        padding: 38px 25px 40px;
    }

    .zd-mindset-shift__content::before {
        width: 100%;
        height: 3px;

        top: 0;
        left: 0;

        transform: scaleX(0);
        transform-origin: left;
    }

    .zd-mindset-shift.is-visible
    .zd-mindset-shift__content::before {
        transform: scaleX(1);
    }

    .zd-mindset-shift__heading {
        font-size: clamp(31px, 8.8vw, 44px);
        line-height: 1.05;
    }

    .zd-mindset-shift__description {
        font-size: 14px;
        line-height: 1.72;
    }

    .zd-mindset-shift__points {
        display: grid;
        grid-template-columns: 1fr;

        margin-bottom: 28px;
    }

    .zd-mindset-shift__point {
        width: 100%;
        box-sizing: border-box;
    }

    .zd-mindset-shift__cta {
        width: 100%;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .zd-mindset-shift__navigation {
        padding-top: 25px;
    }

    .zd-mindset-shift__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 17px 0;
    }

    .zd-mindset-shift__step {
        padding-right: 10px;
    }

    .zd-mindset-shift__step:not(:last-child)::after {
        display: none;
    }

}


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

@media (max-width: 424px) {

    .zd-mindset-shift {
        padding-block: 60px;
    }

    .zd-mindset-shift__inner {
        width: calc(100% - 28px);
    }

    .zd-mindset-shift__title {
        font-size: 36px;
    }

    .zd-mindset-shift__visual {
        min-height: 290px;
    }

    .zd-mindset-shift__content {
        padding: 34px 21px 36px;
    }

    .zd-mindset-shift__heading {
        font-size: 31px;
    }

    .zd-mindset-shift__description {
        font-size: 13.5px;
    }

    .zd-mindset-shift__step-name {
        font-size: 10.5px;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    .zd-mindset-shift {
        padding-block: 52px;
    }

    .zd-mindset-shift__inner {
        width: calc(100% - 24px);
    }

    .zd-mindset-shift__eyebrow-wrap {
        gap: 8px;
    }

    .zd-mindset-shift__eyebrow {
        font-size: 9px;
        letter-spacing: 0.12em;
    }

    .zd-mindset-shift__header-line {
        width: 28px;
    }

    .zd-mindset-shift__counter {
        font-size: 11px;
    }

    .zd-mindset-shift__title {
        font-size: 32px;
    }

    .zd-mindset-shift__intro {
        font-size: 13px;
    }

    .zd-mindset-shift__visual {
        min-height: 260px;
    }

    .zd-mindset-shift__content {
        padding: 31px 18px 33px;
    }

    .zd-mindset-shift__heading {
        font-size: 29px;
    }

    .zd-mindset-shift__description {
        font-size: 13px;
    }

    .zd-mindset-shift__cta {
        font-size: 10.5px;
    }

    .zd-mindset-shift__step-name {
        font-size: 9.5px;
    }

}


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

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

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

}


/* =========================================================
   ZENDOJO HOME2 — CINEMATIC MULTI-FRAME OPENER
   3-Phase Scroll-Driven Expansion and Side-Bento Split
   ========================================================= */

.zh2-cinema {
    position: relative;
    width: 100%;
    overflow: clip;
    background: var(--zh2-cinema-bg);
    color: var(--zh2-cinema-text);
    font-family: var(--font-body);
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

.zh2-cinema__scroll {
    position: relative;
    height: 320vh;
}

.zh2-cinema__sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* Background Atmosphere */
.zh2-cinema__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.zh2-cinema__grid-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.6;
}

html[data-theme="dark"] .zh2-cinema__grid-pattern {
    background-image: radial-gradient(rgba(250, 250, 247, 0.08) 1px, transparent 1px);
    opacity: 0.35;
}

.zh2-cinema__glow-orb {
    position: absolute;
    top: 30%;
    left: 20%;
    width: clamp(300px, 45vw, 650px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 57, 53, 0.14) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

/* Phase 1 Introductory Header */
.zh2-cinema__intro {
    position: absolute;
    top: clamp(24px, 5vh, 60px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    width: calc(100% - 32px);
    max-width: 640px;
    pointer-events: none;
    transition: opacity 0.15s linear, transform 0.15s linear;
}

.zh2-cinema__intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zh2-cinema-accent);
    margin-bottom: 8px;
}

.zh2-cinema__neon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zh2-cinema-accent-neon, #D4FF00);
    box-shadow: 0 0 10px var(--zh2-cinema-accent-neon, #D4FF00);
    animation: zh2Pulse 2s ease-in-out infinite alternate;
}

.zh2-cinema__intro-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 4.2vw, 42px);
    line-height: 1.15;
    color: var(--zh2-cinema-text);
}

.zh2-cinema__hl {
    color: var(--zh2-cinema-accent);
}

.zh2-cinema__scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--zh2-cinema-text-muted);
    margin-top: 10px;
    animation: zh2Bounce 1.8s ease-in-out infinite;
}

/* Master Stage */
.zh2-cinema__stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Expanding Video Box */
.zh2-cinema__video-box {
    position: absolute;
    overflow: hidden;
    background: #000000;
    box-shadow: var(--zh2-cinema-shadow);
    border: 1px solid rgba(250, 250, 247, 0.12);
    will-change: width, height, transform, border-radius;
    transition: box-shadow 0.3s ease;
}

.zh2-cinema__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.zh2-cinema__video-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(17, 17, 17, 0.45) 0%,
        rgba(17, 17, 17, 0.08) 25%,
        rgba(17, 17, 17, 0.15) 60%,
        rgba(17, 17, 17, 0.88) 100%
    );
}

/* Video Top HUD */
.zh2-cinema__video-top {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

.zh2-cinema__tag-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zh2-cinema__tag {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(250, 250, 247, 0.2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #FAFAF7;
    text-transform: uppercase;
}

.zh2-cinema__neon-badge {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--zh2-cinema-accent-neon, #D4FF00);
    color: #111111;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.zh2-cinema__live-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #FAFAF7;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(17, 17, 17, 0.65);
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.zh2-cinema__pulse-ring {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E53935;
    box-shadow: 0 0 8px #E53935;
}

/* Video Middle Graphic Elements */
.zh2-cinema__video-middle {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.zh2-cinema__neon-circle {
    position: absolute;
    top: 24%;
    left: 10%;
    width: clamp(38px, 6vw, 56px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--zh2-cinema-accent-neon, #D4FF00);
    box-shadow: 0 0 30px var(--zh2-cinema-accent-neon, #D4FF00);
    opacity: 0.88;
    animation: zh2Float 8s ease-in-out infinite alternate;
}

.zh2-cinema__watermark-text {
    position: absolute;
    bottom: 80px;
    left: 24px;
    font-family: var(--font-display);
    font-size: clamp(24px, 5vw, 50px);
    line-height: 0.95;
    color: rgba(250, 250, 247, 0.95);
    text-transform: uppercase;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
}

/* Video Bottom Scrub & Controls */
.zh2-cinema__video-bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.zh2-cinema__scrub-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 480px;
    background: rgba(17, 17, 17, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(250, 250, 247, 0.16);
}

.zh2-cinema__timecode,
.zh2-cinema__duration {
    font-size: 11px;
    font-weight: 700;
    color: #FAFAF7;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.zh2-cinema__track {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--zh2-cinema-timeline-track);
    overflow: visible;
}

.zh2-cinema__track-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--zh2-cinema-timeline-fill);
    transition: width 0.1s linear;
}

.zh2-cinema__track-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--zh2-cinema-accent-neon, #D4FF00);
    box-shadow: 0 0 8px var(--zh2-cinema-accent-neon);
    transition: left 0.1s linear;
}

.zh2-cinema__controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zh2-cinema__ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(250, 250, 247, 0.2);
    color: #FAFAF7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.zh2-cinema__ctrl-btn:hover {
    background: var(--zh2-cinema-accent);
    transform: scale(1.1);
}

/* Side Bento Column */
.zh2-cinema__side {
    position: absolute;
    z-index: 5;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Bento Cards */
.zh2-cinema__bento {
    border-radius: var(--radius-large, 16px);
    background: var(--zh2-cinema-card);
    border: 1px solid var(--zh2-cinema-card-border);
    box-shadow: var(--zh2-cinema-shadow);
    overflow: hidden;
    transition: border-color 0.26s ease, transform 0.26s ease;
}

.zh2-cinema__bento:hover {
    border-color: var(--zh2-cinema-card-hover-border);
    transform: translateY(-2px);
}

/* Bento Frame A: Media */
.zh2-cinema__bento--media {
    position: relative;
    min-height: 180px;
}

.zh2-cinema__bento-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zh2-cinema__side-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.zh2-cinema__bento--media:hover .zh2-cinema__side-img {
    transform: scale(1.08);
}

.zh2-cinema__bento-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(8px);
    color: #FAFAF7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.zh2-cinema__bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(17, 17, 17, 0.92) 100%);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
}

.zh2-cinema__bento-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--zh2-cinema-accent-neon, #D4FF00);
}

.zh2-cinema__bento-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.2;
    color: #FAFAF7;
}

/* Bento Frame B: Data / MMG */
.zh2-cinema__bento--data {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zh2-cinema__bento-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zh2-cinema__bento-pill {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zh2-cinema-accent);
}

.zh2-cinema__data-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.25;
    color: var(--zh2-cinema-text);
}

.zh2-cinema__data-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--zh2-cinema-text-soft);
}

.zh2-cinema__stats-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--zh2-cinema-card-border);
}

.zh2-cinema__stat-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--zh2-cinema-text);
    line-height: 1;
}

.zh2-cinema__stat-item span {
    font-size: 11px;
    font-weight: 600;
    color: var(--zh2-cinema-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Bento Frame C: Action CTA */
.zh2-cinema__bento--action {
    padding: 18px 20px;
    position: relative;
    background: linear-gradient(135deg, rgba(229, 57, 53, 0.95) 0%, rgba(168, 37, 34, 0.95) 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.zh2-cinema__action-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zh2-cinema__action-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zh2-cinema-accent-neon, #D4FF00);
}

.zh2-cinema__action-heading {
    margin: 0 0 6px 0;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.2;
    color: #FFFFFF;
}

.zh2-cinema__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #111111;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: fit-content;
}

.zh2-cinema__action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.zh2-cinema__action-bg-art {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Keyframes */
@keyframes zh2Pulse {
    from { opacity: 0.65; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.15); }
}

@keyframes zh2Bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

@keyframes zh2Float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(18px, -18px); }
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Desktop & Laptop (1024px+) */
@media (min-width: 1024px) {
    .zh2-cinema__side {
        right: max(24px, calc((100vw - 1440px) / 2 + 24px));
        width: clamp(340px, 34vw, 460px);
        height: calc(100vh - 120px);
        max-height: 660px;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .zh2-cinema__side {
        right: 20px;
        width: 380px;
        height: calc(100vh - 100px);
        max-height: 600px;
    }
}

/* Mobile Screens (<= 767px: Mobile-S, M, L) */
@media (max-width: 767px) {
    .zh2-cinema__scroll {
        height: 280vh;
    }

    .zh2-cinema__intro {
        top: 20px;
    }

    .zh2-cinema__video-top {
        top: 14px;
        left: 14px;
        right: 14px;
    }

    .zh2-cinema__video-bottom {
        bottom: 14px;
        left: 14px;
        right: 14px;
    }

    .zh2-cinema__scrub-wrap {
        padding: 6px 10px;
    }

    .zh2-cinema__watermark-text {
        bottom: 60px;
        left: 16px;
        font-size: 20px;
    }

    .zh2-cinema__neon-circle {
        top: 20%;
        left: 8%;
        width: 32px;
        height: 32px;
    }

    .zh2-cinema__side {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        height: auto;
        max-height: calc(48vh - 20px);
        overflow-y: auto;
        gap: 12px;
    }

    .zh2-cinema__bento--media {
        display: none; /* Hide heavy photo on small screens to prioritize data & CTA */
    }

    .zh2-cinema__bento--data {
        padding: 14px;
    }

    .zh2-cinema__bento--action {
        padding: 14px;
    }
}

/* Mobile-S (320px) */
@media (max-width: 360px) {
    .zh2-cinema__intro-title {
        font-size: 22px;
    }

    .zh2-cinema__scrub-wrap {
        max-width: 100%;
    }

    .zh2-cinema__video-bottom {
        gap: 8px;
    }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .zh2-cinema__neon-dot,
    .zh2-cinema__scroll-cue,
    .zh2-cinema__neon-circle {
        animation: none !important;
    }
}
/* =========================================================
   ZENDOJO — TESTIMONIALS
   Base / Light Mode
   ========================================================= */

.zd-testimonials {
    --zd-t-bg: #FAFAF7;
    --zd-t-text: #111111;
    --zd-t-surface: #333333;
    --zd-t-surface-soft: #f0f0ec;
    --zd-t-red: #E53935;
    --zd-t-border: rgba(17, 17, 17, 0.16);
    --zd-t-muted: #666666;

    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--zd-t-bg);
    color: var(--zd-t-text);
    padding: clamp(72px, 8vw, 128px) 0;
}


/* ---------------------------------------------------------
   MAIN SHELL
   --------------------------------------------------------- */

.zd-testimonials__shell {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(340px, 0.78fr)
        minmax(0, 1.42fr);

    gap: clamp(42px, 5vw, 88px);
    align-items: stretch;
}


/* ---------------------------------------------------------
   LEFT FEATURE PANEL
   --------------------------------------------------------- */

.zd-testimonials__feature {
    position: relative;

    align-self: start;

    min-height: 680px;

    display: flex;
    flex-direction: column;

    padding: clamp(26px, 3vw, 42px);

    background: var(--zd-t-surface);
    color: #FAFAF7;

    border-left: 5px solid var(--zd-t-red);

    overflow: hidden;

    isolation: isolate;
}


/* subtle red light */
.zd-testimonials__feature::after {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    right: -140px;
    bottom: -130px;

    background: var(--zd-t-red);

    opacity: 0.13;
    border-radius: 50%;

    pointer-events: none;
    z-index: -1;
}


/* ---------------------------------------------------------
   FEATURE TOP
   --------------------------------------------------------- */

.zd-testimonials__feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: clamp(34px, 4vw, 52px);
}

.zd-testimonials__eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;

    color: #FAFAF7;
}

.zd-testimonials__counter {
    display: flex;
    align-items: center;
    gap: 9px;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;

    color: rgba(250, 250, 247, 0.68);
}

.zd-testimonials__counter #zdTestimonialCurrent {
    color: #FAFAF7;
}

.zd-testimonials__counter-line {
    width: 24px;
    height: 1px;
    background: var(--zd-t-red);
}


/* ---------------------------------------------------------
   FEATURE HEADING
   --------------------------------------------------------- */

.zd-testimonials__feature-heading {
    margin-bottom: 30px;
}

.zd-testimonials__kicker {
    margin: 0 0 12px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.13em;

    color: var(--zd-t-red);
}

.zd-testimonials__feature-heading h2 {
    margin: 0;

    font-family: "Archivo Black", "Inter", sans-serif;
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.035em;

    color: #FAFAF7;
}

.zd-testimonials__feature-heading h2 span {
    color: var(--zd-t-red);
}


/* ---------------------------------------------------------
   FEATURE DESTINATION
   --------------------------------------------------------- */

.zd-testimonials__destination {
    position: relative;

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

    gap: 20px;

    margin-top: auto;
}

.zd-testimonials__destination-line {
    position: absolute;
    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            var(--zd-t-red) 0%,
            rgba(229, 57, 53, 0.22) 100%
        );
}


/* ---------------------------------------------------------
   FEATURE IMAGE
   --------------------------------------------------------- */

.zd-testimonials__feature-media {
    position: relative;

    width: 110px;
    height: 150px;

    overflow: hidden;

    background: #111111;
}

.zd-testimonials__feature-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: saturate(0.88);
    transform: scale(1.03);

    transition:
        opacity 0.45s ease,
        transform 0.7s ease;
}

.zd-testimonials__feature-media.is-changing img {
    opacity: 0.35;
    transform: scale(1.08);
}

.zd-testimonials__feature-media-tag {
    position: absolute;

    left: 7px;
    bottom: 7px;

    padding: 5px 7px;

    background: var(--zd-t-red);
    color: #FAFAF7;

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.08em;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   FEATURE CONTENT
   --------------------------------------------------------- */

.zd-testimonials__feature-content {
    min-width: 0;
}

.zd-testimonials__stars {
    margin-bottom: 11px;

    color: var(--zd-t-red);

    font-size: 13px;
    letter-spacing: 0.15em;
}

.zd-testimonials__feature-content blockquote {
    margin: 0 0 22px;

    font-family: "Inter", sans-serif;
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.6;

    color: #FAFAF7;
}

.zd-testimonials__feature-person {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;
}

.zd-testimonials__feature-person strong {
    display: block;

    margin-bottom: 4px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;

    color: #FAFAF7;
}

.zd-testimonials__feature-person span {
    display: block;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;

    color: rgba(250, 250, 247, 0.64);
}

.zd-testimonials__feature-mark {
    width: 35px !important;
    height: 35px;

    display: grid !important;
    place-items: center;

    flex: 0 0 auto;

    border: 1px solid rgba(250, 250, 247, 0.3);

    font-family: "Archivo Black", "Inter", sans-serif !important;
    font-size: 10px !important;

    color: #FAFAF7 !important;
}


/* ---------------------------------------------------------
   FEATURE BOTTOM
   --------------------------------------------------------- */

.zd-testimonials__feature-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 34px;
    padding-top: 16px;

    border-top: 1px solid rgba(250, 250, 247, 0.18);

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.13em;

    color: rgba(250, 250, 247, 0.58);
}

.zd-testimonials__feature-arrow {
    color: var(--zd-t-red);
    font-size: 15px;
}


/* ---------------------------------------------------------
   RIGHT MARQUEE AREA
   --------------------------------------------------------- */

.zd-testimonials__marquee-area {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* ---------------------------------------------------------
   MARQUEE INTRO
   --------------------------------------------------------- */

.zd-testimonials__marquee-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    padding-bottom: 25px;

    border-bottom: 1px solid var(--zd-t-border);
}

.zd-testimonials__mini-label {
    display: block;

    margin-bottom: 8px;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;

    color: var(--zd-t-red);
}

.zd-testimonials__marquee-intro p {
    max-width: 570px;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.25vw, 17px);
    font-weight: 400;
    line-height: 1.55;

    color: var(--zd-t-text);
}

.zd-testimonials__marquee-direction {
    display: flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;

    color: var(--zd-t-muted);
}

.zd-testimonials__direction-arrow {
    color: var(--zd-t-red);
    font-size: 18px;
}


/* ---------------------------------------------------------
   MARQUEE VIEWPORT
   --------------------------------------------------------- */

.zd-testimonials__viewport {
    position: relative;

    width: 100%;

    margin-top: 30px;

    overflow: hidden;

    padding: 22px 0 35px;
}


/* fading edges */
.zd-testimonials__viewport::before,
.zd-testimonials__viewport::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 75px;

    pointer-events: none;

    z-index: 4;
}

.zd-testimonials__viewport::before {
    left: 0;

    background:
        linear-gradient(
            to right,
            var(--zd-t-bg),
            transparent
        );
}

.zd-testimonials__viewport::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            var(--zd-t-bg),
            transparent
        );
}


/* ---------------------------------------------------------
   TRACK
   --------------------------------------------------------- */

.zd-testimonials__track {
    display: flex;
    align-items: stretch;

    width: max-content;

    gap: 22px;

    will-change: transform;

    animation:
        zdTestimonialsMarquee
        34s
        linear
        infinite;
}

.zd-testimonials__track.is-paused {
    animation-play-state: paused;
}

@keyframes zdTestimonialsMarquee {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(
            calc(-50% - 11px),
            0,
            0
        );
    }

}


/* ---------------------------------------------------------
   MERGE ZONE
   --------------------------------------------------------- */

.zd-testimonials__merge-zone {
    position: absolute;

    left: 0;
    top: 20px;
    bottom: 32px;

    width: 78px;

    display: flex;
    align-items: flex-end;

    padding: 0 0 10px 5px;

    border-right: 2px solid var(--zd-t-red);

    pointer-events: none;

    z-index: 5;

    background:
        linear-gradient(
            to right,
            var(--zd-t-bg) 0%,
            rgba(250, 250, 247, 0.82) 55%,
            transparent 100%
        );
}

.zd-testimonials__merge-zone span {
    writing-mode: vertical-rl;

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.16em;

    color: var(--zd-t-red);
}


/* ---------------------------------------------------------
   TESTIMONIAL CARD
   --------------------------------------------------------- */

.zd-testimonial-card {
    position: relative;

    width: clamp(300px, 29vw, 385px);

    flex: 0 0 auto;

    min-height: 495px;

    display: flex;
    flex-direction: column;

    background: var(--zd-t-surface-soft);

    border: 1px solid var(--zd-t-border);

    transition:
        border-color 0.35s ease,
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.zd-testimonial-card:hover,
.zd-testimonial-card.is-active {
    border-color: var(--zd-t-red);

    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(17, 17, 17, 0.12);
}


/* ---------------------------------------------------------
   CARD TOP
   --------------------------------------------------------- */

.zd-testimonial-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 17px 18px 13px;

    border-bottom: 1px solid var(--zd-t-border);
}

.zd-testimonial-card__number {
    font-family: "Archivo Black", "Inter", sans-serif;
    font-size: 17px;
    font-weight: 500;

    color: var(--zd-t-text);
}

.zd-testimonial-card__type {
    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.12em;

    color: var(--zd-t-muted);
}


/* ---------------------------------------------------------
   CARD IMAGE
   --------------------------------------------------------- */

.zd-testimonial-card__image {
    position: relative;

    height: 205px;

    overflow: hidden;

    background: #111111;
}

.zd-testimonial-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: saturate(0.9);

    transition:
        transform 0.8s ease,
        filter 0.5s ease;
}

.zd-testimonial-card:hover
.zd-testimonial-card__image img {
    transform: scale(1.06);
    filter: saturate(1);
}

.zd-testimonial-card__image span {
    position: absolute;

    left: 13px;
    bottom: 13px;

    padding: 6px 9px;

    background: var(--zd-t-red);
    color: #FAFAF7;

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.1em;
}


/* ---------------------------------------------------------
   CARD BODY
   --------------------------------------------------------- */

.zd-testimonial-card__body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 21px 20px 19px;
}

.zd-testimonial-card__stars {
    margin-bottom: 10px;

    color: var(--zd-t-red);

    font-size: 12px;
    letter-spacing: 0.12em;
}

.zd-testimonial-card__body p {
    margin: 0;

    max-width: 320px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.62;

    color: var(--zd-t-text);
}


/* ---------------------------------------------------------
   CARD PERSON
   --------------------------------------------------------- */

.zd-testimonial-card__person {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: auto;
    padding-top: 20px;
}

.zd-testimonial-card__avatar {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    background: var(--zd-t-text);
    color: var(--zd-t-bg);

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;
}

.zd-testimonial-card__person strong {
    display: block;

    margin-bottom: 3px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;

    color: var(--zd-t-text);
}

.zd-testimonial-card__person span {
    display: block;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 400;

    color: var(--zd-t-muted);
}


/* ---------------------------------------------------------
   MARQUEE FOOTER
   --------------------------------------------------------- */

.zd-testimonials__marquee-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding-top: 19px;

    border-top: 1px solid var(--zd-t-border);
}

.zd-testimonials__progress {
    min-width: 0;
    flex: 1;

    display: flex;
    align-items: center;

    gap: 16px;
}

.zd-testimonials__progress-label {
    flex: 0 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.12em;

    color: var(--zd-t-muted);
}

.zd-testimonials__progress-track {
    position: relative;

    height: 2px;

    flex: 1;

    max-width: 330px;

    background: var(--zd-t-border);
}

.zd-testimonials__progress-track span {
    position: absolute;

    top: 0;
    left: 0;

    height: 100%;
    width: 20%;

    background: var(--zd-t-red);

    transition: width 0.35s ease;
}


/* ---------------------------------------------------------
   CONTROLS
   --------------------------------------------------------- */

.zd-testimonials__controls {
    display: flex;
    align-items: center;

    gap: 7px;
}

.zd-testimonials__control {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--zd-t-border);

    background: transparent;
    color: var(--zd-t-text);

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;

    cursor: pointer;

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

.zd-testimonials__control:hover,
.zd-testimonials__control:focus-visible {
    background: var(--zd-t-red);
    border-color: var(--zd-t-red);
    color: #FAFAF7;

    transform: translateY(-2px);
}

.zd-testimonials__control:focus-visible {
    outline: 2px solid var(--zd-t-red);
    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE — MOBILE-S
   ≤ 374px
   ========================================================= */

@media (max-width: 374px) {

    .zd-testimonials {
        padding: 58px 0 70px;
    }

    .zd-testimonials__shell {
        width: min(100% - 28px, 1440px);

        display: block;
    }

    .zd-testimonials__feature {
        position: relative;
        top: auto;

        min-height: auto;

        padding: 22px 19px 20px;

        border-left-width: 4px;
    }

    .zd-testimonials__feature-top {
        margin-bottom: 27px;
    }

    .zd-testimonials__feature-heading {
        margin-bottom: 24px;
    }

    .zd-testimonials__feature-heading h2 {
        font-size: 28px;
    }

    .zd-testimonials__destination {
        grid-template-columns: 82px minmax(0, 1fr);

        gap: 14px;
    }

    .zd-testimonials__feature-media {
        width: 82px;
        height: 112px;
    }

    .zd-testimonials__feature-content blockquote {
        font-size: 13px;
        line-height: 1.52;
    }

    .zd-testimonials__feature-bottom {
        margin-top: 23px;
    }

    .zd-testimonials__marquee-area {
        margin-top: 32px;
    }

    .zd-testimonials__marquee-intro {
        display: block;
    }

    .zd-testimonials__marquee-direction {
        margin-top: 12px;
    }

    .zd-testimonials__viewport {
        margin-top: 20px;
        padding-bottom: 27px;
    }

    .zd-testimonial-card {
        width: 274px;
        min-height: 445px;
    }

    .zd-testimonial-card__image {
        height: 170px;
    }

    .zd-testimonial-card__body {
        padding: 18px 17px;
    }

    .zd-testimonial-card__body p {
        font-size: 13px;
    }

    .zd-testimonials__marquee-footer {
        display: block;
    }

    .zd-testimonials__progress {
        margin-bottom: 15px;
    }

    .zd-testimonials__controls {
        justify-content: flex-end;
    }

}


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

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

    .zd-testimonials {
        padding: 64px 0 76px;
    }

    .zd-testimonials__shell {
        width: calc(100% - 32px);
        display: block;
    }

    .zd-testimonials__feature {
        position: relative;
        top: auto;

        min-height: auto;

        padding: 24px 21px;

        border-left-width: 4px;
    }

    .zd-testimonials__feature-heading h2 {
        font-size: 31px;
    }

    .zd-testimonials__destination {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 16px;
    }

    .zd-testimonials__feature-media {
        width: 92px;
        height: 124px;
    }

    .zd-testimonials__feature-content blockquote {
        font-size: 13.5px;
    }

    .zd-testimonials__marquee-area {
        margin-top: 36px;
    }

    .zd-testimonials__marquee-intro {
        display: block;
    }

    .zd-testimonials__marquee-direction {
        margin-top: 13px;
    }

    .zd-testimonial-card {
        width: 292px;
        min-height: 460px;
    }

    .zd-testimonial-card__image {
        height: 180px;
    }

    .zd-testimonial-card__body p {
        font-size: 13.5px;
    }

    .zd-testimonials__marquee-footer {
        display: block;
    }

    .zd-testimonials__progress {
        margin-bottom: 15px;
    }

    .zd-testimonials__controls {
        justify-content: flex-end;
    }

}


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

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

    .zd-testimonials {
        padding: 70px 0 82px;
    }

    .zd-testimonials__shell {
        width: min(100% - 40px, 650px);
        display: block;
    }

    .zd-testimonials__feature {
        position: relative;
        top: auto;

        min-height: auto;

        padding: 28px 25px;

        border-left-width: 5px;
    }

    .zd-testimonials__feature-heading h2 {
        font-size: 36px;
    }

    .zd-testimonials__destination {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 20px;
    }

    .zd-testimonials__feature-media {
        width: 105px;
        height: 142px;
    }

    .zd-testimonials__feature-content blockquote {
        font-size: 14px;
    }

    .zd-testimonials__marquee-area {
        margin-top: 42px;
    }

    .zd-testimonials__marquee-intro {
        display: flex;
    }

    .zd-testimonial-card {
        width: 315px;
        min-height: 480px;
    }

    .zd-testimonial-card__image {
        height: 195px;
    }

}


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

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

    .zd-testimonials {
        padding: 82px 0 95px;
    }

    .zd-testimonials__shell {
        width: calc(100% - 52px);

        grid-template-columns:
            minmax(270px, 0.72fr)
            minmax(0, 1.28fr);

        gap: 32px;
    }

    .zd-testimonials__feature {
        top: 90px;

        min-height: 620px;

        padding: 26px 22px;
    }

    .zd-testimonials__feature-heading h2 {
        font-size: 32px;
    }

    .zd-testimonials__destination {
        grid-template-columns: 85px minmax(0, 1fr);
        gap: 15px;
    }

    .zd-testimonials__feature-media {
        width: 85px;
        height: 120px;
    }

    .zd-testimonials__feature-content blockquote {
        font-size: 13px;
    }

    .zd-testimonials__marquee-intro p {
        font-size: 14px;
    }

    .zd-testimonial-card {
        width: 285px;
        min-height: 470px;
    }

    .zd-testimonial-card__image {
        height: 180px;
    }

}


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

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

    .zd-testimonials__shell {
        width: calc(100% - 56px);

        grid-template-columns:
            minmax(315px, 0.8fr)
            minmax(0, 1.2fr);

        gap: 42px;
    }

    .zd-testimonials__feature {
        min-height: 650px;
    }

    .zd-testimonials__feature-heading h2 {
        font-size: 38px;
    }

    .zd-testimonial-card {
        width: 315px;
    }

}


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

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

    .zd-testimonials__shell {
        width: calc(100% - 72px);

        grid-template-columns:
            minmax(350px, 0.8fr)
            minmax(0, 1.2fr);

        gap: 56px;
    }

    .zd-testimonial-card {
        width: 340px;
    }

}


/* =========================================================
   DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .zd-testimonials__shell {
        width: min(1440px, calc(100% - 80px));
    }

    .zd-testimonials__feature {
        min-height: 700px;
    }

}


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

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

    .zd-testimonials__track {
        animation: none;
    }

    .zd-testimonial-card,
    .zd-testimonial-card__image img,
    .zd-testimonials__feature-media img,
    .zd-testimonials__control {
        transition: none;
    }

}

/* =========================================================
   ZENDOJO — EXPANDING VALUE PANELS
   styles.css
   ========================================================= */

.zd-expand-panels {
    --zep-bg: #FAFAF7;
    --zep-text: #111111;
    --zep-surface: #333333;
    --zep-red: #E53935;
    --zep-muted: #626262;
    --zep-border: rgba(17, 17, 17, 0.16);

    position: relative;
    width: 100%;

    overflow: hidden;

    padding:
        clamp(78px, 9vw, 132px)
        0
        clamp(78px, 9vw, 132px);

    background: var(--zep-bg);
    color: var(--zep-text);
}


/* =========================================================
   SHELL
   ========================================================= */

.zd-expand-panels__shell {
    width: min(1440px, calc(100% - 72px));
    margin: 0 auto;
}


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

.zd-expand-panels__header {
    display: grid;

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

    gap: clamp(40px, 7vw, 110px);

    align-items: end;

    margin-bottom: clamp(34px, 4vw, 58px);
}


.zd-expand-panels__eyebrow {
    display: block;

    margin-bottom: 13px;

    color: var(--zep-red);

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.16em;
    line-height: 1.4;
}


.zd-expand-panels__header-left h2 {
    margin: 0;

    max-width: 700px;

    color: var(--zep-text);

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size: clamp(36px, 5vw, 72px);
    font-weight: 500;

    letter-spacing: -0.045em;
    line-height: 0.98;
}


.zd-expand-panels__header-left h2 span {
    color: var(--zep-red);
}


.zd-expand-panels__header-right {
    padding-bottom: 4px;
}


.zd-expand-panels__header-right p {
    max-width: 530px;

    margin: 0 0 19px;

    color: var(--zep-muted);

    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.25vw, 17px);
    font-weight: 400;

    line-height: 1.65;
}


.zd-expand-panels__interaction {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: var(--zep-text);

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;

    letter-spacing: 0.13em;
}


.zd-expand-panels__interaction i {
    display: inline-block;

    color: var(--zep-red);

    font-style: normal;
    font-size: 17px;

    transition:
        transform 0.35s ease;
}


.zd-expand-panels__header-right:hover
.zd-expand-panels__interaction i {
    transform: translateX(5px);
}


/* =========================================================
   PANEL ROW
   ========================================================= */

.zd-expand-panels__row {
    display: flex;

    width: 100%;
    height: clamp(510px, 52vw, 690px);

    overflow: hidden;

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

    background: var(--zep-surface);

    isolation: isolate;
}


/* =========================================================
   INDIVIDUAL PANEL
   ========================================================= */

.zd-expand-panel {
    position: relative;

    min-width: 0;

    flex:
        1
        1
        0;

    overflow: hidden;

    cursor: pointer;

    border-right: 1px solid
        rgba(250, 250, 247, 0.22);

    background: #222;

    outline: none;

    transition:
        flex-grow 0.85s cubic-bezier(.22, .61, .36, 1),
        flex-basis 0.85s cubic-bezier(.22, .61, .36, 1),
        border-color 0.45s ease;
}


.zd-expand-panel:last-child {
    border-right: 0;
}


/* active panel becomes dominant */
.zd-expand-panel.is-active {
    flex:
        3.15
        1
        0;
}


/* =========================================================
   PANEL BACKGROUND
   ========================================================= */

.zd-expand-panel__background {
    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: 0;
}


.zd-expand-panel__background img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.72;

    filter:
        grayscale(0.18)
        saturate(0.88);

    transform: scale(1.04);

    transition:
        transform 1.1s cubic-bezier(.22, .61, .36, 1),
        opacity 0.7s ease,
        filter 0.7s ease;
}


.zd-expand-panel:hover
.zd-expand-panel__background img,

.zd-expand-panel.is-active
.zd-expand-panel__background img {
    opacity: 0.88;

    filter:
        grayscale(0)
        saturate(1);

    transform: scale(1.08);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.zd-expand-panel__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(17, 17, 17, 0.62) 0%,
            rgba(17, 17, 17, 0.16) 35%,
            rgba(17, 17, 17, 0.76) 100%
        );

    transition:
        background 0.75s ease;
}


.zd-expand-panel.is-active
.zd-expand-panel__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(17, 17, 17, 0.52) 0%,
            rgba(17, 17, 17, 0.04) 34%,
            rgba(17, 17, 17, 0.88) 100%
        );
}


/* =========================================================
   PANEL TOP
   ========================================================= */

.zd-expand-panel__top {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 3;

    display: flex;

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

    gap: 12px;

    padding:
        clamp(17px, 2vw, 27px);

    color: #FAFAF7;
}


.zd-expand-panel__number {
    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

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

    color: #FAFAF7;
}


.zd-expand-panel__label {
    padding: 5px 8px;

    border: 1px solid
        rgba(250, 250, 247, 0.35);

    color: rgba(250, 250, 247, 0.78);

    font-family: "Inter", sans-serif;
    font-size: 7px;
    font-weight: 500;

    letter-spacing: 0.13em;

    white-space: nowrap;

    opacity: 0.72;

    transition:
        opacity 0.45s ease,
        border-color 0.45s ease;
}


.zd-expand-panel.is-active
.zd-expand-panel__label {
    opacity: 1;

    border-color:
        rgba(229, 57, 53, 0.8);
}


/* =========================================================
   VERTICAL TITLE
   ========================================================= */

.zd-expand-panel__vertical-title {
    position: absolute;

    z-index: 3;

    left: 50%;
    top: 50%;

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

    transform-origin: center;

    color: #FAFAF7;

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size: clamp(20px, 2vw, 30px);
    font-weight: 500;

    letter-spacing: 0.035em;

    white-space: nowrap;

    opacity: 0.92;

    transition:
        opacity 0.35s ease,
        transform 0.7s cubic-bezier(.22, .61, .36, 1);
}


.zd-expand-panel.is-active
.zd-expand-panel__vertical-title {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        rotate(-90deg)
        scale(0.85);
}


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

.zd-expand-panel__content {
    position: absolute;

    z-index: 4;

    left: clamp(22px, 3vw, 45px);
    right: clamp(22px, 3vw, 45px);
    bottom: clamp(65px, 6vw, 85px);

    max-width: 520px;

    opacity: 0;

    transform:
        translateY(30px);

    visibility: hidden;

    transition:
        opacity 0.38s ease,
        transform 0.75s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear 0.75s;
}


.zd-expand-panel.is-active
.zd-expand-panel__content {
    opacity: 1;

    transform:
        translateY(0);

    visibility: visible;

    transition:
        opacity 0.55s ease 0.18s,
        transform 0.8s cubic-bezier(.22, .61, .36, 1) 0.12s,
        visibility 0s linear 0s;
}


.zd-expand-panel__content-label {
    display: block;

    margin-bottom: 10px;

    color: var(--zep-red);

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;

    letter-spacing: 0.15em;
}


.zd-expand-panel__content h3 {
    margin: 0 0 12px;

    color: #FAFAF7;

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size: clamp(31px, 4vw, 58px);
    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.035em;
}


.zd-expand-panel__content p {
    max-width: 470px;

    margin: 0;

    color: rgba(250, 250, 247, 0.82);

    font-family: "Inter", sans-serif;
    font-size: clamp(13px, 1.15vw, 16px);
    font-weight: 400;

    line-height: 1.65;
}


.zd-expand-panel__link {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    margin-top: 22px;

    padding: 10px 0;

    color: #FAFAF7;

    text-decoration: none;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.13em;

    border-bottom: 1px solid
        rgba(250, 250, 247, 0.32);
}


.zd-expand-panel__link i {
    color: var(--zep-red);

    font-size: 17px;
    font-style: normal;

    transition:
        transform 0.35s ease;
}


.zd-expand-panel__link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   PANEL BOTTOM
   ========================================================= */

.zd-expand-panel__bottom {
    position: absolute;

    z-index: 4;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;

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

    gap: 15px;

    padding:
        17px
        clamp(17px, 2vw, 27px);

    border-top:
        1px solid
        rgba(250, 250, 247, 0.18);

    color: rgba(250, 250, 247, 0.65);

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 500;

    letter-spacing: 0.12em;

    opacity: 0.85;

    transition:
        opacity 0.45s ease;
}


.zd-expand-panel.is-active
.zd-expand-panel__bottom {
    color: #FAFAF7;
}


/* =========================================================
   RED ACTIVE EDGE
   ========================================================= */

.zd-expand-panel.is-active::after {
    content: "";

    position: absolute;

    z-index: 6;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: var(--zep-red);

    transform-origin: left;

    animation:
        zdExpandActiveLine
        0.8s
        cubic-bezier(.22, .61, .36, 1)
        both;
}


@keyframes zdExpandActiveLine {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.zd-expand-panel:focus-visible {
    outline:
        3px solid
        var(--zep-red);

    outline-offset: -3px;
}


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

.zd-expand-panels__footer {
    display: grid;

    grid-template-columns:
        auto
        minmax(180px, 0.45fr)
        minmax(300px, 1fr)
        auto;

    align-items: center;

    gap: clamp(18px, 3vw, 42px);

    padding-top: 23px;
}


.zd-expand-panels__footer-line {
    width: 42px;
    height: 2px;

    background: var(--zep-red);
}


.zd-expand-panels__footer > span {
    color: var(--zep-muted);

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 500;

    letter-spacing: 0.13em;
}


.zd-expand-panels__footer p {
    margin: 0;

    color: var(--zep-muted);

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;

    line-height: 1.55;
}


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

@media (max-width: 374px) {

    .zd-expand-panels {
        padding:
            58px
            0
            65px;
    }

    .zd-expand-panels__shell {
        width: calc(100% - 28px);
    }

    .zd-expand-panels__header {
        display: block;

        margin-bottom: 27px;
    }

    .zd-expand-panels__header-left h2 {
        font-size: 36px;
    }

    .zd-expand-panels__header-right {
        margin-top: 22px;
    }

    .zd-expand-panels__header-right p {
        font-size: 13px;
    }

    .zd-expand-panels__interaction {
        font-size: 8px;
    }

    .zd-expand-panels__row {
        display: flex;

        height: auto;

        flex-direction: column;

        overflow: visible;
    }

    .zd-expand-panel {
        flex: none;

        width: 100%;
        height: 82px;

        border-right: 0;
        border-bottom: 1px solid
            rgba(250, 250, 247, 0.22);

        transition:
            height 0.75s cubic-bezier(.22, .61, .36, 1);
    }

    .zd-expand-panel:last-child {
        border-bottom: 0;
    }

    .zd-expand-panel.is-active {
        flex: none;

        height: 365px;
    }

    .zd-expand-panel__vertical-title {
        left: 22px;
        top: 50%;

        transform:
            translateY(-50%);

        font-size: 17px;

        letter-spacing: 0.02em;
    }

    .zd-expand-panel.is-active
    .zd-expand-panel__vertical-title {
        opacity: 0;

        transform:
            translateY(-50%)
            translateX(-15px);
    }

    .zd-expand-panel__content {
        left: 20px;
        right: 20px;
        bottom: 53px;
    }

    .zd-expand-panel__content h3 {
        font-size: 31px;
    }

    .zd-expand-panel__content p {
        font-size: 13px;
    }

    .zd-expand-panel__bottom {
        padding: 13px 17px;
    }

    .zd-expand-panels__footer {
        display: block;

        padding-top: 19px;
    }

    .zd-expand-panels__footer-line {
        margin-bottom: 13px;
    }

    .zd-expand-panels__footer p {
        margin: 10px 0 12px;

        font-size: 11px;
    }

}


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

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

    .zd-expand-panels {
        padding:
            65px
            0
            72px;
    }

    .zd-expand-panels__shell {
        width: calc(100% - 32px);
    }

    .zd-expand-panels__header {
        display: block;

        margin-bottom: 30px;
    }

    .zd-expand-panels__header-left h2 {
        font-size: 40px;
    }

    .zd-expand-panels__header-right {
        margin-top: 22px;
    }

    .zd-expand-panels__header-right p {
        font-size: 13.5px;
    }

    .zd-expand-panels__row {
        height: auto;

        display: flex;
        flex-direction: column;

        overflow: visible;
    }

    .zd-expand-panel {
        flex: none;

        width: 100%;
        height: 88px;

        border-right: 0;
        border-bottom: 1px solid
            rgba(250, 250, 247, 0.22);

        transition:
            height 0.78s cubic-bezier(.22, .61, .36, 1);
    }

    .zd-expand-panel.is-active {
        flex: none;

        height: 390px;
    }

    .zd-expand-panel__vertical-title {
        left: 23px;

        transform:
            translateY(-50%);

        font-size: 18px;
    }

    .zd-expand-panel.is-active
    .zd-expand-panel__vertical-title {
        transform:
            translateY(-50%)
            translateX(-18px);
    }

    .zd-expand-panel__content {
        left: 22px;
        right: 22px;
        bottom: 57px;
    }

    .zd-expand-panel__content h3 {
        font-size: 34px;
    }

    .zd-expand-panel__content p {
        font-size: 13.5px;
    }

    .zd-expand-panels__footer {
        display: block;
    }

    .zd-expand-panels__footer p {
        margin: 10px 0 13px;
        font-size: 11.5px;
    }

}


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

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

    .zd-expand-panels {
        padding:
            72px
            0
            80px;
    }

    .zd-expand-panels__shell {
        width: calc(100% - 40px);
    }

    .zd-expand-panels__header {
        display: block;

        margin-bottom: 34px;
    }

    .zd-expand-panels__header-left h2 {
        font-size: 46px;
    }

    .zd-expand-panels__header-right {
        margin-top: 25px;
    }

    .zd-expand-panels__row {
        height: auto;

        flex-direction: column;

        overflow: visible;
    }

    .zd-expand-panel {
        flex: none;

        width: 100%;
        height: 94px;

        border-right: 0;
        border-bottom: 1px solid
            rgba(250, 250, 247, 0.22);

        transition:
            height 0.8s cubic-bezier(.22, .61, .36, 1);
    }

    .zd-expand-panel.is-active {
        flex: none;

        height: 425px;
    }

    .zd-expand-panel__vertical-title {
        left: 25px;

        transform:
            translateY(-50%);

        font-size: 20px;
    }

    .zd-expand-panel.is-active
    .zd-expand-panel__vertical-title {
        transform:
            translateY(-50%)
            translateX(-20px);
    }

    .zd-expand-panel__content {
        left: 26px;
        right: 26px;
        bottom: 60px;
    }

    .zd-expand-panel__content h3 {
        font-size: 38px;
    }

    .zd-expand-panel__content p {
        font-size: 14px;
    }

    .zd-expand-panels__footer {
        display: grid;

        grid-template-columns:
            auto
            1fr;

        gap: 10px 16px;
    }

    .zd-expand-panels__footer-line {
        grid-row: span 2;
    }

    .zd-expand-panels__footer p {
        font-size: 12px;
    }

}


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

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

    .zd-expand-panels {
        padding:
            82px
            0
            92px;
    }

    .zd-expand-panels__shell {
        width: calc(100% - 52px);
    }

    .zd-expand-panels__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(240px, 0.65fr);

        gap: 35px;

        margin-bottom: 34px;
    }

    .zd-expand-panels__header-left h2 {
        font-size: 50px;
    }

    .zd-expand-panels__header-right p {
        font-size: 13px;
    }

    .zd-expand-panels__row {
        height: 520px;
    }

    .zd-expand-panel {
        flex: 1 1 0;
    }

    .zd-expand-panel.is-active {
        flex: 2.45 1 0;
    }

    .zd-expand-panel__vertical-title {
        font-size: 17px;
    }

    .zd-expand-panel__content {
        left: 25px;
        right: 25px;
        bottom: 67px;
    }

    .zd-expand-panel__content h3 {
        font-size: 37px;
    }

    .zd-expand-panel__content p {
        font-size: 13px;
    }

    .zd-expand-panels__footer {
        grid-template-columns:
            auto
            minmax(120px, 0.4fr)
            1fr
            auto;

        gap: 16px;
    }

}


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

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

    .zd-expand-panels__shell {
        width: calc(100% - 56px);
    }

    .zd-expand-panels__header {
        gap: 50px;
    }

    .zd-expand-panels__row {
        height: 555px;
    }

    .zd-expand-panel.is-active {
        flex: 2.8 1 0;
    }

    .zd-expand-panel__content h3 {
        font-size: 43px;
    }

}


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

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

    .zd-expand-panels__shell {
        width: calc(100% - 72px);
    }

    .zd-expand-panels__row {
        height: 620px;
    }

    .zd-expand-panel.is-active {
        flex: 3 1 0;
    }

}


/* =========================================================
   DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .zd-expand-panels__shell {
        width: min(1440px, calc(100% - 80px));
    }

    .zd-expand-panels__row {
        height: 680px;
    }

}


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

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

    .zd-expand-panel,
    .zd-expand-panel__background img,
    .zd-expand-panel__overlay,
    .zd-expand-panel__content,
    .zd-expand-panel__vertical-title,
    .zd-expand-panel__link i {
        transition: none !important;
    }

    .zd-expand-panel.is-active::after {
        animation: none;
    }

}

/* =========================================================
   ZENDOJO — FINAL CTA
   styles.css
   ========================================================= */

.zd-final-cta {
    --zfc-bg: #FAFAF7;
    --zfc-text: #111111;
    --zfc-muted: #D7D7D2;
    --zfc-soft: rgba(250, 250, 247, 0.68);
    --zfc-red: #E53935;
    --zfc-red-dark: #C92D2A;
    --zfc-panel: #333333;
    --zfc-border: rgba(250, 250, 247, 0.18);

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        clamp(72px, 8vw, 125px)
        0;

    background: var(--zfc-bg);

    color: var(--zfc-text);

    isolation: isolate;
}


/* =========================================================
   OUTER SHELL
   ========================================================= */

.zd-final-cta__shell {
    width: min(
        1440px,
        calc(100% - 72px)
    );

    margin: 0 auto;
}


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

.zd-final-cta__box {
    position: relative;

    min-height: 760px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        clamp(25px, 3vw, 44px)
        clamp(28px, 4.5vw, 72px)
        clamp(24px, 3vw, 40px);

    background: #333333;

    color: #FAFAF7;

    border:
        1px solid
        rgba(250, 250, 247, 0.16);

    isolation: isolate;

    transform:
        scaleX(0.94);

    opacity: 0;

    transition:
        transform 1.05s cubic-bezier(.22, .61, .36, 1),
        opacity 0.8s ease;
}


.zd-final-cta.is-visible
.zd-final-cta__box {
    transform: scaleX(1);

    opacity: 1;
}


/* =========================================================
   AMBIENT SCARLET ENERGY
   ========================================================= */

.zd-final-cta__energy {
    position: absolute;

    z-index: -1;

    width: 62%;
    height: 70%;

    left: 50%;
    top: 42%;

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

    background:
        radial-gradient(
            ellipse,
            rgba(229, 57, 53, 0.17) 0%,
            rgba(229, 57, 53, 0.07) 28%,
            rgba(229, 57, 53, 0) 70%
        );

    filter: blur(25px);

    opacity: 0;

    transition:
        opacity 1.5s ease 0.35s,
        transform 1.8s cubic-bezier(.22, .61, .36, 1);
}


.zd-final-cta.is-visible
.zd-final-cta__energy {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        rotate(-7deg)
        scale(1.08);
}


/* =========================================================
   SUBTLE TEXTURE
   ========================================================= */

.zd-final-cta__texture {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.13;

    background-image:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(250, 250, 247, 0.05) 48%,
            transparent 49%,
            transparent 100%
        );

    background-size:
        260px 260px;

    animation:
        zfcTextureMove
        14s
        linear
        infinite;
}


@keyframes zfcTextureMove {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 260px 0;
    }

}


/* =========================================================
   TOP META
   ========================================================= */

.zd-final-cta__top {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(250, 250, 247, 0.15);

    opacity: 0;

    transform:
        translateY(-18px);

    transition:
        opacity 0.65s ease 0.35s,
        transform 0.75s cubic-bezier(.22, .61, .36, 1) 0.35s;
}


.zd-final-cta.is-visible
.zd-final-cta__top {
    opacity: 1;

    transform:
        translateY(0);
}


.zd-final-cta__chapter,
.zd-final-cta__counter {
    display: flex;

    align-items: center;

    gap: 11px;

    color: rgba(250, 250, 247, 0.7);

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.14em;

    line-height: 1.4;
}


.zd-final-cta__chapter-line {
    width: 35px;
    height: 2px;

    background: var(--zfc-red);
}


.zd-final-cta__counter-line {
    width: 35px;
    height: 2px;

    background:
        rgba(250, 250, 247, 0.4);
}


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

.zd-final-cta__main {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    width: min(
        900px,
        100%
    );

    margin:
        55px auto
        55px;
}


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

.zd-final-cta__kicker {
    display: block;

    margin-bottom: 17px;

    color: var(--zfc-red);

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.18em;

    line-height: 1.4;

    opacity: 0;

    transform:
        translateY(15px);

    transition:
        opacity 0.6s ease 0.48s,
        transform 0.7s cubic-bezier(.22, .61, .36, 1) 0.48s;
}


.zd-final-cta.is-visible
.zd-final-cta__kicker {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.zd-final-cta__title {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin: 0;

    color: #FAFAF7;

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            42px,
            6.2vw,
            88px
        );

    font-weight: 300;

    letter-spacing: -0.045em;

    line-height: 0.96;
}


.zd-final-cta__title-line {
    display: block;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(42px);

    transition:
        opacity 0.72s ease,
        transform 0.85s cubic-bezier(.22, .61, .36, 1);
}


.zd-final-cta.is-visible
.zd-final-cta__title-line:nth-child(1) {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 0.56s;
}


.zd-final-cta.is-visible
.zd-final-cta__title-line:nth-child(2) {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 0.68s;
}


.zd-final-cta.is-visible
.zd-final-cta__title-line:nth-child(3) {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 0.8s;
}


.zd-final-cta__title-accent {
    color: var(--zfc-red);
}


/* =========================================================
   LEAD
   ========================================================= */

.zd-final-cta__lead {
    margin:
        25px
        0
        9px;

    color: #FAFAF7;

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

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

    font-weight: 400;

    line-height: 1.5;

    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity 0.65s ease 0.94s,
        transform 0.75s cubic-bezier(.22, .61, .36, 1) 0.94s;
}


.zd-final-cta.is-visible
.zd-final-cta__lead {
    opacity: 1;

    transform:
        translateY(0);
}


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

.zd-final-cta__description {
    width: min(
        620px,
        100%
    );

    margin: 0;

    color:
        rgba(250, 250, 247, 0.68);

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

    font-size:
        clamp(
            12.5px,
            1.1vw,
            15px
        );

    font-weight: 400;

    line-height: 1.7;

    opacity: 0;

    transform:
        translateY(16px);

    transition:
        opacity 0.65s ease 1.02s,
        transform 0.75s cubic-bezier(.22, .61, .36, 1) 1.02s;
}


.zd-final-cta.is-visible
.zd-final-cta__description {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   CTA BUTTON
   Matches the clean rectangular navbar Login language
   ========================================================= */

.zd-final-cta__button {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    min-height: 48px;

    margin-top: 29px;

    padding:
        13px
        23px;

    overflow: hidden;

    background: var(--zfc-red);

    color: #FAFAF7;

    border:
        1px solid
        var(--zfc-red);

    text-decoration: none;

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

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.06em;

    line-height: 1;

    opacity: 0;

    transform:
        translateY(18px)
        scale(0.94);

    transition:
        opacity 0.6s ease 1.12s,
        transform 0.75s cubic-bezier(.22, .61, .36, 1) 1.12s,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.zd-final-cta.is-visible
.zd-final-cta__button {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.zd-final-cta__button::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            105deg,
            transparent 30%,
            rgba(250, 250, 247, 0.2) 50%,
            transparent 70%
        );

    transform:
        translateX(-130%);

    transition:
        transform 0.65s ease;
}


.zd-final-cta__button:hover {
    background: var(--zfc-red-dark);

    border-color: var(--zfc-red-dark);

    box-shadow:
        0 12px 30px
        rgba(229, 57, 53, 0.23);

    transform:
        translateY(-3px)
        scale(1);
}


.zd-final-cta__button:hover::before {
    transform:
        translateX(130%);
}


.zd-final-cta__button-arrow {
    display: inline-block;

    color: #FAFAF7;

    font-size: 18px;

    line-height: 0;

    transition:
        transform 0.35s ease;
}


.zd-final-cta__button:hover
.zd-final-cta__button-arrow {
    transform:
        translateX(5px);
}


/* =========================================================
   PILLARS
   ========================================================= */

.zd-final-cta__pillars {
    position: relative;

    z-index: 3;

    display: grid;

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

    border-top:
        1px solid
        rgba(250, 250, 247, 0.16);

    border-bottom:
        1px solid
        rgba(250, 250, 247, 0.16);
}


.zd-final-cta__pillar {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 15px;

    min-width: 0;

    padding:
        25px
        clamp(15px, 2vw, 30px);

    border-right:
        1px solid
        rgba(250, 250, 247, 0.12);

    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity 0.65s ease,
        transform 0.75s cubic-bezier(.22, .61, .36, 1);
}


.zd-final-cta__pillar:first-child {
    padding-left: 0;
}


.zd-final-cta__pillar:last-child {
    padding-right: 0;

    border-right: 0;
}


.zd-final-cta.is-visible
.zd-final-cta__pillar:nth-child(1) {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 1.28s;
}


.zd-final-cta.is-visible
.zd-final-cta__pillar:nth-child(2) {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 1.39s;
}


.zd-final-cta.is-visible
.zd-final-cta__pillar:nth-child(3) {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 1.50s;
}


.zd-final-cta.is-visible
.zd-final-cta__pillar:nth-child(4) {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 1.61s;
}


.zd-final-cta__pillar-number {
    color:
        rgba(250, 250, 247, 0.48);

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.3;
}


.zd-final-cta__pillar-content {
    min-width: 0;
}


.zd-final-cta__pillar-line {
    display: block;

    width: 25px;
    height: 2px;

    margin-bottom: 12px;

    background: var(--zfc-red);

    transform-origin: left;

    transform:
        scaleX(0);

    transition:
        transform 0.55s cubic-bezier(.22, .61, .36, 1);
}


.zd-final-cta.is-visible
.zd-final-cta__pillar:nth-child(1)
.zd-final-cta__pillar-line {
    transform: scaleX(1);
    transition-delay: 1.46s;
}


.zd-final-cta.is-visible
.zd-final-cta__pillar:nth-child(2)
.zd-final-cta__pillar-line {
    transform: scaleX(1);
    transition-delay: 1.57s;
}


.zd-final-cta.is-visible
.zd-final-cta__pillar:nth-child(3)
.zd-final-cta__pillar-line {
    transform: scaleX(1);
    transition-delay: 1.68s;
}


.zd-final-cta.is-visible
.zd-final-cta__pillar:nth-child(4)
.zd-final-cta__pillar-line {
    transform: scaleX(1);
    transition-delay: 1.79s;
}


.zd-final-cta__pillar h3 {
    margin: 0 0 7px;

    color: #FAFAF7;

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            12px,
            1.1vw,
            15px
        );

    font-weight: 500;

    letter-spacing: 0.035em;

    line-height: 1.3;
}


.zd-final-cta__pillar p {
    margin: 0;

    color:
        rgba(250, 250, 247, 0.58);

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

    font-size:
        clamp(
            10px,
            0.9vw,
            12px
        );

    font-weight: 400;

    line-height: 1.5;
}


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

.zd-final-cta__bottom {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        auto
        minmax(30px, 1fr)
        auto
        auto;

    align-items: center;

    gap:
        clamp(12px, 2vw, 28px);

    padding-top: 22px;

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        opacity 0.65s ease 1.7s,
        transform 0.7s cubic-bezier(.22, .61, .36, 1) 1.7s;
}


.zd-final-cta.is-visible
.zd-final-cta__bottom {
    opacity: 1;

    transform:
        translateY(0);
}


.zd-final-cta__bottom-label,
.zd-final-cta__bottom p {
    margin: 0;

    color:
        rgba(250, 250, 247, 0.5);

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 0.12em;

    line-height: 1.4;

    white-space: nowrap;
}


.zd-final-cta__bottom p {
    color:
        rgba(250, 250, 247, 0.72);
}


.zd-final-cta__bottom-rule {
    width: 100%;
    height: 1px;

    background:
        rgba(250, 250, 247, 0.15);
}


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

@media (max-width: 374px) {

    .zd-final-cta {
        padding:
            58px
            0
            65px;
    }


    .zd-final-cta__shell {
        width:
            calc(100% - 28px);
    }


    .zd-final-cta__box {
        min-height: auto;

        padding:
            20px
            18px
            20px;
    }


    .zd-final-cta__top {
        padding-bottom: 14px;
    }


    .zd-final-cta__chapter,
    .zd-final-cta__counter {
        font-size: 7px;

        letter-spacing: 0.1em;
    }


    .zd-final-cta__chapter-line,
    .zd-final-cta__counter-line {
        width: 20px;
    }


    .zd-final-cta__main {
        margin:
            65px auto
            62px;
    }


    .zd-final-cta__kicker {
        font-size: 7px;

        letter-spacing: 0.12em;
    }


    .zd-final-cta__title {
        font-size: 39px;

        line-height: 0.98;
    }


    .zd-final-cta__lead {
        margin-top: 22px;

        font-size: 14px;
    }


    .zd-final-cta__description {
        font-size: 12px;

        line-height: 1.65;
    }


    .zd-final-cta__button {
        min-height: 46px;

        width: 100%;

        margin-top: 24px;

        padding:
            12px
            15px;

        font-size: 10px;
    }


    .zd-final-cta__pillars {
        grid-template-columns: 1fr;

        border-bottom: 0;
    }


    .zd-final-cta__pillar,
    .zd-final-cta__pillar:first-child,
    .zd-final-cta__pillar:last-child {
        padding:
            17px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(250, 250, 247, 0.12);
    }


    .zd-final-cta__pillar:last-child {
        border-bottom: 0;
    }


    .zd-final-cta__bottom {
        display: grid;

        grid-template-columns: 1fr;

        gap: 9px;

        padding-top: 20px;
    }


    .zd-final-cta__bottom-rule {
        width: 100%;
    }


    .zd-final-cta__bottom-label,
    .zd-final-cta__bottom p {
        white-space: normal;

        font-size: 7px;
    }

}


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

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

    .zd-final-cta {
        padding:
            64px
            0
            72px;
    }


    .zd-final-cta__shell {
        width:
            calc(100% - 32px);
    }


    .zd-final-cta__box {
        min-height: auto;

        padding:
            22px
            21px
            22px;
    }


    .zd-final-cta__main {
        margin:
            70px auto
            66px;
    }


    .zd-final-cta__title {
        font-size: 43px;
    }


    .zd-final-cta__lead {
        font-size: 14.5px;
    }


    .zd-final-cta__description {
        font-size: 12.5px;
    }


    .zd-final-cta__button {
        width: 100%;
    }


    .zd-final-cta__pillars {
        grid-template-columns: 1fr;
    }


    .zd-final-cta__pillar,
    .zd-final-cta__pillar:first-child,
    .zd-final-cta__pillar:last-child {
        padding:
            18px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(250, 250, 247, 0.12);
    }


    .zd-final-cta__pillar:last-child {
        border-bottom: 0;
    }


    .zd-final-cta__bottom {
        grid-template-columns: 1fr;

        gap: 10px;
    }

}


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

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

    .zd-final-cta {
        padding:
            72px
            0
            80px;
    }


    .zd-final-cta__shell {
        width:
            calc(100% - 40px);
    }


    .zd-final-cta__box {
        min-height: auto;

        padding:
            25px
            25px
            25px;
    }


    .zd-final-cta__main {
        margin:
            78px auto
            70px;
    }


    .zd-final-cta__title {
        font-size: 50px;
    }


    .zd-final-cta__lead {
        font-size: 15px;
    }


    .zd-final-cta__description {
        font-size: 13px;

        max-width: 560px;
    }


    .zd-final-cta__button {
        min-height: 48px;

        padding:
            13px
            24px;
    }


    .zd-final-cta__pillars {
        grid-template-columns:
            1fr 1fr;
    }


    .zd-final-cta__pillar,
    .zd-final-cta__pillar:first-child,
    .zd-final-cta__pillar:last-child {
        padding:
            21px
            16px;

        border-right:
            1px solid
            rgba(250, 250, 247, 0.12);

        border-bottom:
            1px solid
            rgba(250, 250, 247, 0.12);
    }


    .zd-final-cta__pillar:nth-child(2n) {
        border-right: 0;
    }


    .zd-final-cta__pillar:nth-child(n + 3) {
        border-bottom: 0;
    }


    .zd-final-cta__bottom {
        grid-template-columns:
            1fr 1fr;

        gap: 12px;
    }


    .zd-final-cta__bottom-rule {
        display: none;
    }

}


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

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

    .zd-final-cta {
        padding:
            82px
            0
            92px;
    }


    .zd-final-cta__shell {
        width:
            calc(100% - 52px);
    }


    .zd-final-cta__box {
        min-height: 700px;

        padding:
            30px
            35px
            28px;
    }


    .zd-final-cta__main {
        margin:
            45px auto
            48px;
    }


    .zd-final-cta__title {
        font-size: 62px;
    }


    .zd-final-cta__description {
        max-width: 590px;
    }


    .zd-final-cta__pillars {
        grid-template-columns:
            1fr 1fr;
    }


    .zd-final-cta__pillar,
    .zd-final-cta__pillar:first-child,
    .zd-final-cta__pillar:last-child {
        padding:
            21px
            18px;

        border-right:
            1px solid
            rgba(250, 250, 247, 0.12);

        border-bottom:
            1px solid
            rgba(250, 250, 247, 0.12);
    }


    .zd-final-cta__pillar:nth-child(2n) {
        border-right: 0;
    }


    .zd-final-cta__pillar:nth-child(n + 3) {
        border-bottom: 0;
    }


    .zd-final-cta__bottom {
        grid-template-columns:
            auto
            1fr
            auto;

        gap: 18px;
    }


    .zd-final-cta__bottom p:last-child {
        text-align: right;
    }

}


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

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

    .zd-final-cta__shell {
        width:
            calc(100% - 56px);
    }


    .zd-final-cta__box {
        min-height: 700px;

        padding:
            30px
            45px
            28px;
    }


    .zd-final-cta__main {
        margin:
            48px auto
            50px;
    }


    .zd-final-cta__title {
        font-size: 65px;
    }

}


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

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

    .zd-final-cta__shell {
        width:
            calc(100% - 72px);
    }


    .zd-final-cta__box {
        min-height: 735px;
    }


    .zd-final-cta__title {
        font-size: 76px;
    }

}


/* =========================================================
   DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .zd-final-cta__shell {
        width:
            min(
                1440px,
                calc(100% - 80px)
            );
    }


    .zd-final-cta__box {
        min-height: 760px;
    }

}


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

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

    .zd-final-cta__box,
    .zd-final-cta__energy,
    .zd-final-cta__top,
    .zd-final-cta__kicker,
    .zd-final-cta__title-line,
    .zd-final-cta__lead,
    .zd-final-cta__description,
    .zd-final-cta__button,
    .zd-final-cta__pillar,
    .zd-final-cta__bottom {
        transition: none !important;
    }


    .zd-final-cta__texture {
        animation: none !important;
    }

}

 /* Home 2 cinema section refinements */
        #zh2CinemaSection {
            --zh2-cinema-accent-neon: var(--zh2-cinema-accent);
        }

        #zdTestimonials .zd-testimonials__merge-zone {
            border-right: 0;
        }

        @media (min-width: 768px) {
            #zh2CinemaSection .zh2-cinema__bento--action {
                flex: 1 1 auto;
                min-height: 0;
            }
        }

/* =========================================================
   ZENDOJO — INSTRUCTORS HERO
   styles.css
   SECTION ONLY
   ========================================================= */

.zd-instructors-hero {

    --zih-bg: #FAFAF7;
    --zih-text: #111111;
    --zih-dark: #333333;
    --zih-red: #E53935;
    --zih-white: #FAFAF7;
    --zih-muted: rgba(250, 250, 247, 0.68);
    --zih-line: rgba(250, 250, 247, 0.16);

    position: relative;

    width: 100%;

    height: 75vh;

    min-height: 0;

    overflow: hidden;

    background: var(--zih-bg);

    color: var(--zih-text);

    isolation: isolate;
}


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

.zd-instructors-hero__glow {

    position: absolute;

    width: 75vw;

    height: 75vw;

    left: 50%;
    top: 45%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229, 57, 53, 0.07) 0%,
            rgba(229, 57, 53, 0.025) 32%,
            transparent 68%
        );

    pointer-events: none;

    z-index: -2;

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


@keyframes zdInstructorGlow {

    from {
        transform:
            translate(-50%, -50%)
            scale(0.96);
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.06);
    }

}


/* =========================================================
   GRAIN / TEXTURE
   ========================================================= */

.zd-instructors-hero__grain {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    opacity: 0.035;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(17, 17, 17, 0.8) 0,
            rgba(17, 17, 17, 0.8) 1px,
            transparent 1px,
            transparent 4px
        );

    mix-blend-mode: multiply;
}


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

.zd-instructors-hero__inner {

    position: relative;

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

    height: 100%;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    padding:
        clamp(18px, 2.2vh, 28px)
        0
        clamp(18px, 2.2vh, 28px);
}


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

.zd-instructors-hero__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-shrink: 0;

    min-height: 28px;

    padding-bottom:
        clamp(10px, 1.5vh, 17px);

    border-bottom:
        1px solid
        rgba(17, 17, 17, 0.12);

    opacity: 0;

    transform:
        translateY(-16px);

    transition:
        opacity 0.65s ease,
        transform 0.75s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.zd-instructors-hero.is-visible
.zd-instructors-hero__top {

    opacity: 1;

    transform:
        translateY(0);
}


.zd-instructors-hero__eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #111111;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.15em;

    line-height: 1.4;
}


.zd-instructors-hero__eyebrow-line {

    width: 30px;

    height: 2px;

    background: var(--zih-red);
}


.zd-instructors-hero__counter {

    color:
        rgba(17, 17, 17, 0.52);

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.12em;
}


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

.zd-instructors-hero__content {

    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.2fr);

    align-items: center;

    gap:
        clamp(
            35px,
            5vw,
            90px
        );

    padding:
        clamp(12px, 2vh, 24px)
        0
        clamp(10px, 1.7vh, 20px);
}


/* =========================================================
   INTRO
   ========================================================= */

.zd-instructors-hero__intro {

    min-width: 0;

    max-width: none;

    opacity: 0;

    transform:
        translateX(-35px);

    transition:
        opacity 0.8s ease 0.15s,
        transform 0.9s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.zd-instructors-hero.is-visible
.zd-instructors-hero__intro {

    opacity: 1;

    transform:
        translateX(0);
}


.zd-instructors-hero__label {

    display: block;

    margin-bottom:
        clamp(9px, 1.2vh, 15px);

    color: var(--zih-red);

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.16em;

    line-height: 1.4;
}


.zd-instructors-hero__title {

    margin: 0;

    color: #111111;

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            34px,
            4.15vw,
            66px
        );

    font-weight: 500;

    letter-spacing: -0.045em;

    line-height: 0.98;
}


.zd-instructors-hero__title span {

    display: block;

    color: var(--zih-red);
}


.zd-instructors-hero__description {

    width: min(
        390px,
        100%
    );

    margin:
        clamp(13px, 2vh, 21px)
        0
        0;

    color:
        rgba(17, 17, 17, 0.68);

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

    font-size:
        clamp(
            11px,
            0.95vw,
            14px
        );

    font-weight: 400;

    line-height: 1.65;
}


.zd-instructors-hero__link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top:
        clamp(15px, 2vh, 24px);

    color: #111111;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.07em;

    text-decoration: none;

    transition:
        color 0.3s ease;
}


.zd-instructors-hero__link span {

    color: var(--zih-red);

    font-size: 17px;

    line-height: 0;

    transition:
        transform 0.3s ease;
}


.zd-instructors-hero__link:hover {

    color: var(--zih-red);
}


.zd-instructors-hero__link:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   VISUAL AREA
   ========================================================= */

.zd-instructors-hero__visual {

    position: relative;

    min-width: 0;

    height: min(
        43vh,
        500px
    );

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform:
        translateY(28px)
        scale(0.97);

    transition:
        opacity 0.9s ease 0.28s,
        transform 1s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.zd-instructors-hero.is-visible
.zd-instructors-hero__visual {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   IMAGE WRAP
   ========================================================= */

.zd-instructors-hero__image-wrap {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius:
        clamp(
            16px,
            2vw,
            26px
        );

    background: #111111;

    box-shadow:
        0 25px 60px
        rgba(17, 17, 17, 0.18);
}


.zd-instructors-hero__image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.04);

    transition:
        transform 1.2s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.zd-instructors-hero__visual:hover
.zd-instructors-hero__image {

    transform:
        scale(1.08);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.zd-instructors-hero__image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(17, 17, 17, 0.5),
            transparent 45%,
            rgba(17, 17, 17, 0.18)
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE LABEL
   ========================================================= */

.zd-instructors-hero__image-label {

    position: absolute;

    left: 18px;

    right: 18px;

    bottom: 17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    color:
        rgba(250, 250, 247, 0.85);

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 0.13em;
}


.zd-instructors-hero__image-label::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: -10px;

    height: 1px;

    background:
        rgba(250, 250, 247, 0.22);
}


/* =========================================================
   IMAGE MARKER
   ========================================================= */

.zd-instructors-hero__marker {

    position: absolute;

    right: -12px;

    top: 20%;

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(229, 57, 53, 0.65);

    background:
        rgba(250, 250, 247, 0.88);

    transform:
        rotate(45deg);

    z-index: 5;
}


.zd-instructors-hero__marker span:first-child {

    width: 10px;

    height: 10px;

    background: var(--zih-red);
}


.zd-instructors-hero__marker span:last-child {

    position: absolute;

    width: 22px;

    height: 1px;

    background: var(--zih-red);

    transform:
        rotate(90deg);
}


/* =========================================================
   THREE CARDS
   ========================================================= */

.zd-instructors-hero__cards {

    position: relative;

    z-index: 10;

    display: grid;

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

    margin-top:
        clamp(
            -32px,
            -2.5vh,
            -18px
        );

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease 0.5s,
        transform 0.9s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.zd-instructors-hero.is-visible
.zd-instructors-hero__cards {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   INDIVIDUAL CARD
   ========================================================= */

.zd-instructors-hero__card {

    position: relative;

    min-width: 0;

    min-height:
        clamp(
            105px,
            14vh,
            145px
        );

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: start;

    gap:
        clamp(
            10px,
            1.3vw,
            20px
        );

    padding:
        clamp(16px, 2vw, 25px);

    background: #333333;

    color: #FAFAF7;

    border-right:
        1px solid
        rgba(250, 250, 247, 0.13);

    cursor: default;

    transition:
        transform 0.45s cubic-bezier(
            .22,
            .61,
            .36,
            1
        ),
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.zd-instructors-hero__card:first-child {

    border-radius:
        16px 0 0 16px;
}


.zd-instructors-hero__card:last-child {

    border-right: 0;

    border-radius:
        0 16px 16px 0;
}


.zd-instructors-hero__card:hover {

    transform:
        translateY(-8px);

    background:
        #292929;

    box-shadow:
        0 20px 45px
        rgba(17, 17, 17, 0.18);

    z-index: 3;
}


.zd-instructors-hero__card-number {

    color:
        rgba(250, 250, 247, 0.42);

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size: 10px;

    font-weight: 500;

    line-height: 1.3;
}


.zd-instructors-hero__card-content {

    min-width: 0;
}


.zd-instructors-hero__card-top {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color:
        rgba(250, 250, 247, 0.55);

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

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 0.13em;

    line-height: 1.3;
}


.zd-instructors-hero__card-icon {

    width: 17px;

    height: 17px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(229, 57, 53, 0.75);

    color: var(--zih-red);

    font-size: 13px;

    line-height: 1;
}


.zd-instructors-hero__card h2 {

    margin: 0;

    color: #FAFAF7;

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            12px,
            1.2vw,
            17px
        );

    font-weight: 500;

    letter-spacing: -0.01em;

    line-height: 1.15;
}


.zd-instructors-hero__card p {

    max-width: 270px;

    margin:
        7px 0 0;

    color:
        rgba(250, 250, 247, 0.58);

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

    font-size:
        clamp(
            9px,
            0.75vw,
            11px
        );

    font-weight: 400;

    line-height: 1.45;
}


.zd-instructors-hero__card-arrow {

    color: var(--zih-red);

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

    font-size: 17px;

    line-height: 1;

    transition:
        transform 0.35s ease;
}


.zd-instructors-hero__card:hover
.zd-instructors-hero__card-arrow {

    transform:
        translate(3px, -3px);
}


/* =========================================================
   STATUS LINE
   ========================================================= */

.zd-instructors-hero__status {

    position: absolute;

    right: 0;

    bottom: 2px;

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        rgba(17, 17, 17, 0.38);

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

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 0.13em;

    white-space: nowrap;
}


.zd-instructors-hero__status-line {

    width: 20px;

    height: 1px;

    background:
        rgba(17, 17, 17, 0.22);
}


/* =========================================================
   MOBILE-S
   ≤ 374px
   ========================================================= */

@media (max-width: 374px) {

    .zd-instructors-hero {

        height: 75vh;
    }


    .zd-instructors-hero__inner {

        width:
            calc(100% - 24px);

        padding:
            13px
            0;
    }


    .zd-instructors-hero__top {

        padding-bottom: 8px;
    }


    .zd-instructors-hero__eyebrow {

        font-size: 7px;

        gap: 6px;
    }


    .zd-instructors-hero__eyebrow-line {

        width: 18px;
    }


    .zd-instructors-hero__counter {

        font-size: 7px;
    }


    .zd-instructors-hero__content {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: stretch;

        gap: 10px;

        padding: 7px 0 0;
    }


    .zd-instructors-hero__intro {

        max-width: none;

        text-align: center;
    }


    .zd-instructors-hero__label {

        margin-bottom: 5px;

        font-size: 7px;
    }


    .zd-instructors-hero__title {

        font-size:
            clamp(
                25px,
                9vw,
                32px
            );

        line-height: 0.98;
    }


    .zd-instructors-hero__description {

        max-width: 290px;

        margin:
            7px auto 0;

        font-size: 9px;

        line-height: 1.4;
    }


    .zd-instructors-hero__link {

        margin-top: 7px;

        font-size: 7px;

        gap: 7px;
    }


    .zd-instructors-hero__link span {

        font-size: 13px;
    }


    .zd-instructors-hero__visual {

        height:
            clamp(
                115px,
                20vh,
                170px
            );

        min-height: 0;

        order: 2;
    }


    .zd-instructors-hero__image-wrap {

        border-radius: 12px;
    }


    .zd-instructors-hero__image-label {

        left: 9px;
        right: 9px;
        bottom: 8px;

        font-size: 5px;
    }


    .zd-instructors-hero__image-label::before {

        top: -6px;
    }


    .zd-instructors-hero__marker {

        width: 23px;
        height: 23px;

        right: -5px;
    }


    .zd-instructors-hero__marker span:first-child {

        width: 6px;
        height: 6px;
    }


    .zd-instructors-hero__marker span:last-child {

        width: 13px;
    }


    .zd-instructors-hero__cards {

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

        margin-top: 5px;
    }


    .zd-instructors-hero__card {

        min-height: 82px;

        display: flex;

        flex-direction: column;

        gap: 5px;

        padding:
            9px 7px;

        border-right:
            1px solid
            rgba(250, 250, 247, 0.12);
    }


    .zd-instructors-hero__card:first-child {

        border-radius:
            8px 0 0 8px;
    }


    .zd-instructors-hero__card:last-child {

        border-radius:
            0 8px 8px 0;
    }


    .zd-instructors-hero__card-number {

        font-size: 6px;
    }


    .zd-instructors-hero__card-top {

        font-size: 5px;

        gap: 4px;

        margin-bottom: 4px;
    }


    .zd-instructors-hero__card-icon {

        width: 12px;
        height: 12px;

        font-size: 8px;
    }


    .zd-instructors-hero__card h2 {

        font-size: 8px;

        line-height: 1.1;
    }


    .zd-instructors-hero__card p {

        margin-top: 3px;

        font-size: 6.5px;

        line-height: 1.25;
    }


    .zd-instructors-hero__card-arrow {

        display: none;
    }


    .zd-instructors-hero__status {

        display: none;
    }

}


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

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

    .zd-instructors-hero {

        height: 75vh;
    }


    .zd-instructors-hero__inner {

        width:
            calc(100% - 28px);

        padding:
            15px
            0;
    }


    .zd-instructors-hero__content {

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 11px;

        padding-top: 8px;
    }


    .zd-instructors-hero__intro {

        max-width: none;

        text-align: center;
    }


    .zd-instructors-hero__title {

        font-size: 31px;
    }


    .zd-instructors-hero__description {

        max-width: 315px;

        margin:
            8px auto 0;

        font-size: 9.5px;
    }


    .zd-instructors-hero__link {

        margin-top: 8px;

        font-size: 7.5px;
    }


    .zd-instructors-hero__visual {

        height: 19vh;

        min-height: 125px;
    }


    .zd-instructors-hero__cards {

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

        margin-top: 5px;
    }


    .zd-instructors-hero__card {

        min-height: 88px;

        padding:
            10px 8px;

        gap: 5px;

        display: flex;

        flex-direction: column;
    }


    .zd-instructors-hero__card-number {

        font-size: 7px;
    }


    .zd-instructors-hero__card-top {

        font-size: 5.5px;
    }


    .zd-instructors-hero__card h2 {

        font-size: 8.5px;
    }


    .zd-instructors-hero__card p {

        font-size: 6.8px;

        line-height: 1.28;
    }


    .zd-instructors-hero__card-arrow {

        display: none;
    }


    .zd-instructors-hero__status {

        display: none;
    }

}


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

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

    .zd-instructors-hero {

        height: 75vh;
    }


    .zd-instructors-hero__inner {

        width:
            calc(100% - 34px);

        padding:
            17px
            0;
    }


    .zd-instructors-hero__content {

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 14px;
    }


    .zd-instructors-hero__intro {

        max-width: none;

        text-align: center;
    }


    .zd-instructors-hero__title {

        font-size:
            clamp(
                34px,
                8vw,
                45px
            );
    }


    .zd-instructors-hero__description {

        max-width: 430px;

        margin:
            10px auto 0;

        font-size: 10.5px;
    }


    .zd-instructors-hero__link {

        margin-top: 10px;

        font-size: 8px;
    }


    .zd-instructors-hero__visual {

        height:
            clamp(
                155px,
                22vh,
                205px
            );
    }


    .zd-instructors-hero__cards {

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

        margin-top: 6px;
    }


    .zd-instructors-hero__card {

        min-height: 100px;

        padding:
            12px 10px;

        gap: 7px;

        display: flex;

        flex-direction: column;
    }


    .zd-instructors-hero__card-number {

        font-size: 8px;
    }


    .zd-instructors-hero__card-top {

        font-size: 6px;
    }


    .zd-instructors-hero__card h2 {

        font-size: 10px;
    }


    .zd-instructors-hero__card p {

        font-size: 7.5px;
    }


    .zd-instructors-hero__card-arrow {

        display: none;
    }


    .zd-instructors-hero__status {

        display: none;
    }

}


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

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

    .zd-instructors-hero {

        height: 75vh;
    }


    .zd-instructors-hero__inner {

        width:
            calc(100% - 48px);

        padding:
            18px
            0;
    }


    .zd-instructors-hero__content {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 1.2fr);

        gap: 30px;
    }


    .zd-instructors-hero__title {

        font-size: 43px;
    }


    .zd-instructors-hero__description {

        font-size: 10px;

        line-height: 1.55;
    }


    .zd-instructors-hero__visual {

        height:
            min(
                38vh,
                350px
            );
    }


    .zd-instructors-hero__cards {

        margin-top: -22px;
    }


    .zd-instructors-hero__card {

        min-height: 108px;

        padding:
            15px 12px;

        gap: 8px;
    }


    .zd-instructors-hero__card h2 {

        font-size: 11px;
    }


    .zd-instructors-hero__card p {

        font-size: 7.5px;
    }

}


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

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

    .zd-instructors-hero__inner {

        width:
            calc(100% - 56px);
    }


    .zd-instructors-hero__content {

        gap: 45px;
    }


    .zd-instructors-hero__title {

        font-size: 53px;
    }


    .zd-instructors-hero__visual {

        height:
            min(
                43vh,
                420px
            );
    }


    .zd-instructors-hero__cards {

        margin-top: -25px;
    }

}


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

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

    .zd-instructors-hero__inner {

        width:
            calc(100% - 72px);
    }


    .zd-instructors-hero__content {

        gap: 60px;
    }


    .zd-instructors-hero__title {

        font-size: 59px;
    }


    .zd-instructors-hero__visual {

        height: 43vh;
    }

}


/* =========================================================
   DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .zd-instructors-hero__inner {

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


    .zd-instructors-hero__title {

        font-size: 64px;
    }


    .zd-instructors-hero__visual {

        height:
            min(
                44vh,
                510px
            );
    }

}


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

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

    .zd-instructors-hero__glow {

        animation: none;
    }


    .zd-instructors-hero__top,
    .zd-instructors-hero__intro,
    .zd-instructors-hero__visual,
    .zd-instructors-hero__cards {

        transition: none;
    }


    .zd-instructors-hero__image {

        transition: none;
    }

}
/* =========================================================
   ZENDOJO — INSTRUCTORS CTA
   styles.css
   SECTION ONLY
   ========================================================= */

.zd-instructor-cta {

    --zic-bg: #FAFAF7;
    --zic-text: #111111;
    --zic-surface: #333333;
    --zic-red: #E53935;
    --zic-white: #FAFAF7;
    --zic-muted: rgba(17, 17, 17, .62);
    --zic-line: rgba(17, 17, 17, .15);

    position: relative;

    width: 100%;

    padding:
        clamp(55px, 8vw, 120px)
        clamp(16px, 4vw, 64px);

    overflow: hidden;

    background: var(--zic-bg);

    color: var(--zic-text);

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

    isolation: isolate;
}


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

.zd-instructor-cta__container {

    position: relative;

    width: min(
        1400px,
        100%
    );

    min-height:
        clamp(
            560px,
            68vw,
            720px
        );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        44% 56%;

    overflow: hidden;

    background: var(--zic-surface);

    box-shadow:
        0 35px 90px
        rgba(17, 17, 17, .17);

    transform:
        translateY(50px);

    opacity: 0;

    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.zd-instructor-cta__container.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   IMAGE SIDE
   ========================================================= */

.zd-instructor-cta__image-wrap {

    position: relative;

    min-width: 0;

    min-height: 100%;

    overflow: hidden;

    background: #111;
}


.zd-instructor-cta__image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.78)
        contrast(1.06);

    transform:
        scale(1.14);

    transition:
        transform 1.8s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__image {

    transform:
        scale(1.02);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.zd-instructor-cta__image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(17,17,17,.08),
            rgba(17,17,17,.46)
        );

    z-index: 2;
}


/* =========================================================
   IMAGE TAG
   ========================================================= */

.zd-instructor-cta__image-tag {

    position: absolute;

    top: 28px;

    left: 28px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(250,250,247,.9);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .15em;

    opacity: 0;

    transform:
        translateY(-15px);

    transition:
        opacity .7s ease .3s,
        transform .7s ease .3s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__image-tag {

    opacity: 1;

    transform:
        translateY(0);
}


.zd-instructor-cta__image-tag span {

    width: 24px;

    height: 2px;

    background: var(--zic-red);
}


/* =========================================================
   IMAGE NUMBER
   ========================================================= */

.zd-instructor-cta__image-number {

    position: absolute;

    right: 26px;

    bottom: 17px;

    z-index: 5;

    color:
        rgba(250,250,247,.85);

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            70px,
            9vw,
            125px
        );

    font-weight: 500;

    line-height: .75;

    letter-spacing: -.07em;

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease .5s,
        transform .9s cubic-bezier(
            .22,
            .61,
            .36,
            1
        ) .5s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__image-number {

    opacity: .2;

    transform:
        translateY(0);
}


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

.zd-instructor-cta__content {

    position: relative;

    z-index: 10;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        clamp(30px, 5vw, 68px);

    background:
        linear-gradient(
            145deg,
            #333333 0%,
            #292929 100%
        );

    color: var(--zic-white);
}


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

.zd-instructor-cta__top {

    display: flex;

    align-items: center;

    gap: 14px;

    overflow: hidden;
}


.zd-instructor-cta__eyebrow {

    color:
        rgba(250,250,247,.65);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .17em;

    white-space: nowrap;

    opacity: 0;

    transform:
        translateX(-20px);

    transition:
        opacity .7s ease .15s,
        transform .7s ease .15s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__eyebrow {

    opacity: 1;

    transform:
        translateX(0);
}


.zd-instructor-cta__line {

    width: 45px;

    height: 1px;

    background:
        rgba(250,250,247,.25);

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform .8s cubic-bezier(
            .22,
            .61,
            .36,
            1
        ) .3s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__line {

    transform:
        scaleX(1);
}


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

.zd-instructor-cta__main {

    max-width: 620px;
}


.zd-instructor-cta__mini {

    margin:
        0 0 13px;

    color: var(--zic-red);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .15em;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity .7s ease .3s,
        transform .7s ease .3s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__mini {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   TITLE
   ========================================================= */

.zd-instructor-cta__title {

    margin: 0;

    color: var(--zic-white);

    font-family:
        "Archivo Black",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            35px,
            4.5vw,
            68px
        );

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.052em;

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .85s ease .38s,
        transform .95s cubic-bezier(
            .22,
            .61,
            .36,
            1
        ) .38s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__title {

    opacity: 1;

    transform:
        translateY(0);
}


.zd-instructor-cta__title span {

    display: block;

    color: var(--zic-white);
}


.zd-instructor-cta__title strong {

    display: block;

    color: var(--zic-red);

    font-weight: 500;
}


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

.zd-instructor-cta__description {

    max-width: 475px;

    margin:
        21px 0 0;

    color:
        rgba(250,250,247,.66);

    font-size:
        clamp(
            11px,
            .9vw,
            14px
        );

    line-height: 1.65;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity .7s ease .55s,
        transform .7s ease .55s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__description {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.zd-instructor-cta__actions {

    margin-top: 29px;

    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity .7s ease .68s,
        transform .7s ease .68s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__actions {

    opacity: 1;

    transform:
        translateY(0);
}


.zd-instructor-cta__button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    min-width: 205px;

    min-height: 48px;

    padding:
        0 9px 0 19px;

    border:
        1px solid
        rgba(250,250,247,.25);

    background: var(--zic-red);

    color: #FAFAF7;

    text-decoration: none;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: .08em;

    overflow: hidden;

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


.zd-instructor-cta__button::before {

    content: "";

    position: absolute;

    inset: 0;

    background: #FAFAF7;

    transform:
        translateX(-101%);

    transition:
        transform .45s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

    z-index: 0;
}


.zd-instructor-cta__button:hover::before {

    transform:
        translateX(0);
}


.zd-instructor-cta__button:hover {

    color: #111111;

    border-color:
        #FAFAF7;

    transform:
        translateY(-3px);
}


.zd-instructor-cta__button span {

    position: relative;

    z-index: 2;
}


.zd-instructor-cta__button-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 31px;

    height: 31px;

    margin-left: 18px;

    background:
        rgba(17,17,17,.22);

    font-size: 14px;

    transition:
        transform .35s ease,
        background .35s ease;
}


.zd-instructor-cta__button:hover
.zd-instructor-cta__button-arrow {

    transform:
        translateX(4px);

    background:
        rgba(17,17,17,.1);
}


/* =========================================================
   BOTTOM VALUES
   ========================================================= */

.zd-instructor-cta__bottom {

    display: grid;

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

    gap: 15px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(250,250,247,.12);

    opacity: 0;

    transform:
        translateY(20px);

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


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__bottom {

    opacity: 1;

    transform:
        translateY(0);
}


.zd-instructor-cta__value {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.zd-instructor-cta__value span {

    color: var(--zic-red);

    font-size: 7px;

    font-weight: 500;
}


.zd-instructor-cta__value strong {

    color:
        rgba(250,250,247,.8);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .08em;
}


/* =========================================================
   ANIMATED EDGE
   ========================================================= */

.zd-instructor-cta__edge {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 4px;

    background: var(--zic-red);

    transform:
        scaleY(0);

    transform-origin: bottom;

    z-index: 20;

    transition:
        transform 1.2s cubic-bezier(
            .22,
            .61,
            .36,
            1
        ) .2s;
}


.zd-instructor-cta__container.is-visible
.zd-instructor-cta__edge {

    transform:
        scaleY(1);
}


/* =========================================================
   HOVER IMAGE EFFECT
   ========================================================= */

.zd-instructor-cta__container:hover
.zd-instructor-cta__image {

    transform:
        scale(1.06);
}


.zd-instructor-cta__container:hover
.zd-instructor-cta__image-overlay {

    background:
        linear-gradient(
            135deg,
            rgba(17,17,17,.03),
            rgba(17,17,17,.38)
        );
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    .zd-instructor-cta {

        padding:
            42px 14px;
    }


    .zd-instructor-cta__container {

        display: flex;

        flex-direction: column;

        min-height: 0;

        height: auto;
    }


    .zd-instructor-cta__image-wrap {

        height: 235px;

        min-height: 235px;
    }


    .zd-instructor-cta__image-tag {

        top: 17px;

        left: 17px;

        font-size: 6px;
    }


    .zd-instructor-cta__image-number {

        right: 15px;

        bottom: 12px;

        font-size: 65px;
    }


    .zd-instructor-cta__content {

        padding: 27px 21px 23px;
    }


    .zd-instructor-cta__eyebrow {

        font-size: 6px;

        white-space: normal;

        line-height: 1.4;
    }


    .zd-instructor-cta__line {

        width: 25px;
    }


    .zd-instructor-cta__mini {

        font-size: 6px;

        margin-top: 29px;
    }


    .zd-instructor-cta__title {

        font-size: 30px;

        line-height: .95;
    }


    .zd-instructor-cta__description {

        margin-top: 16px;

        font-size: 9px;

        line-height: 1.6;
    }


    .zd-instructor-cta__actions {

        margin-top: 21px;
    }


    .zd-instructor-cta__button {

        width: 100%;

        min-height: 46px;

        font-size: 7px;
    }


    .zd-instructor-cta__bottom {

        gap: 8px;

        margin-top: 26px;

        padding-top: 17px;
    }


    .zd-instructor-cta__value strong {

        font-size: 6px;
    }

}


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

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

    .zd-instructor-cta {

        padding:
            48px 16px;
    }


    .zd-instructor-cta__container {

        display: flex;

        flex-direction: column;

        min-height: 0;
    }


    .zd-instructor-cta__image-wrap {

        height: 260px;

        min-height: 260px;
    }


    .zd-instructor-cta__content {

        padding:
            30px 24px 25px;
    }


    .zd-instructor-cta__mini {

        margin-top: 30px;
    }


    .zd-instructor-cta__title {

        font-size: 34px;
    }


    .zd-instructor-cta__description {

        font-size: 9.5px;
    }


    .zd-instructor-cta__button {

        width: 100%;

        min-height: 48px;
    }


    .zd-instructor-cta__bottom {

        margin-top: 29px;
    }

}


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

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

    .zd-instructor-cta {

        padding:
            55px 20px;
    }


    .zd-instructor-cta__container {

        display: flex;

        flex-direction: column;

        min-height: 0;
    }


    .zd-instructor-cta__image-wrap {

        height:
            clamp(
                280px,
                65vw,
                360px
            );

        min-height: 280px;
    }


    .zd-instructor-cta__content {

        padding:
            34px 29px 29px;
    }


    .zd-instructor-cta__mini {

        margin-top: 34px;
    }


    .zd-instructor-cta__title {

        font-size:
            clamp(
                37px,
                9vw,
                49px
            );
    }


    .zd-instructor-cta__description {

        font-size: 10px;
    }


    .zd-instructor-cta__bottom {

        margin-top: 30px;
    }

}


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

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

    .zd-instructor-cta {

        padding:
            65px 30px;
    }


    .zd-instructor-cta__container {

        grid-template-columns:
            43% 57%;

        min-height: 560px;
    }


    .zd-instructor-cta__content {

        padding:
            38px;
    }


    .zd-instructor-cta__title {

        font-size: 42px;
    }


    .zd-instructor-cta__description {

        max-width: 380px;

        font-size: 10px;
    }


    .zd-instructor-cta__bottom {

        gap: 10px;
    }


    .zd-instructor-cta__value strong {

        font-size: 7px;
    }

}


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

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

    .zd-instructor-cta {

        padding:
            75px 40px;
    }


    .zd-instructor-cta__container {

        min-height: 610px;
    }


    .zd-instructor-cta__content {

        padding:
            45px;
    }


    .zd-instructor-cta__title {

        font-size: 48px;
    }

}


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

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

    .zd-instructor-cta__container {

        min-height: 660px;
    }


    .zd-instructor-cta__content {

        padding:
            54px;
    }


    .zd-instructor-cta__title {

        font-size: 58px;
    }

}


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

@media (min-width: 1440px) {

    .zd-instructor-cta__container {

        min-height: 700px;
    }


    .zd-instructor-cta__content {

        padding:
            65px;
    }


    .zd-instructor-cta__title {

        font-size: 67px;
    }

}


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

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

    .zd-instructor-cta__container,
    .zd-instructor-cta__image,
    .zd-instructor-cta__title,
    .zd-instructor-cta__description,
    .zd-instructor-cta__actions,
    .zd-instructor-cta__bottom,
    .zd-instructor-cta__edge {

        transition: none !important;

        transform: none !important;
    }

}

/* Full-section layout for the instructors CTA only. */
.zd-instructor-cta {
    min-height: 100vh;
    min-height: 100svh;
    padding: 0;
}

.zd-instructor-cta__container {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    box-shadow: none;
}

/* =========================================================
   ZENDOJO CONTACT PAGE
   CONTACT SECTIONS ONLY
   LIGHT MODE / BASE
   ========================================================= */

.zd-contact-info,
.zd-message,
.zd-location {
    --zd-bg: #FAFAF7;
    --zd-text: #111111;
    --zd-surface: #333333;
    --zd-red: #E53935;
    --zd-white: #FAFAF7;
    --zd-muted: rgba(17, 17, 17, 0.64);
    --zd-line: rgba(17, 17, 17, 0.15);
    --zd-soft: rgba(17, 17, 17, 0.055);

    color: var(--zd-text);
    background: var(--zd-bg);
    font-family: "Inter", sans-serif;
}


/* =========================================================
   SECTION 01 — CONTACT INFORMATION
   ========================================================= */

.zd-contact-info {
    position: relative;
    padding: clamp(64px, 8vw, 120px)
             clamp(16px, 4vw, 64px);
    overflow: hidden;
}

.zd-contact-info__container {
    width: min(1400px, 100%);
    min-height: 650px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 45% 55%;
    background: var(--zd-surface);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.zd-contact-info__container.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* IMAGE */

.zd-contact-info__visual {
    position: relative;
    min-height: 650px;
    padding: clamp(20px, 2vw, 32px);
    z-index: 1;
}

.zd-contact-info__image-frame {
    height: 100%;
    min-height: 590px;
    position: relative;
    overflow: hidden;
    background: #222;
}

.zd-contact-info__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}

.zd-contact-info__container.is-visible .zd-contact-info__image {
    transform: scale(1);
}

.zd-contact-info__image-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.05) 35%,
            rgba(17,17,17,.78) 100%
        );
    pointer-events: none;
}

.zd-contact-info__image-label {
    position: absolute;
    left: 24px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #FAFAF7;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
}

.zd-contact-info__label-dot {
    width: 7px;
    height: 7px;
    background: var(--zd-red);
    display: block;
}

.zd-contact-info__image-number {
    position: absolute;
    right: 22px;
    top: 20px;
    color: #FAFAF7;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
}


/* CONTENT */

.zd-contact-info__content {
    position: relative;
    padding: clamp(42px, 5vw, 72px);
    color: #FAFAF7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            #333333 0%,
            #292929 100%
        );
}

.zd-contact-info__heading-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.zd-contact-info__eyebrow {
    color: #FAFAF7;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    white-space: nowrap;
}

.zd-contact-info__heading-line {
    height: 1px;
    flex: 1;
    max-width: 120px;
    background: rgba(250,250,247,.28);
}

.zd-contact-info__mini {
    margin: 0 0 14px;
    color: #E53935;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
}

.zd-contact-info__title {
    margin: 0;
    max-width: 620px;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(36px, 4vw, 62px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.045em;
    color: #FAFAF7;
}

.zd-contact-info__title span {
    display: block;
    color: #E53935;
}

.zd-contact-info__description {
    max-width: 570px;
    margin: 25px 0 31px;
    color: rgba(250,250,247,.72);
    font-size: 15px;
    line-height: 1.75;
}


/* CONTACT DETAILS */

.zd-contact-info__details {
    border-top: 1px solid rgba(250,250,247,.18);
    border-bottom: 1px solid rgba(250,250,247,.18);
}

.zd-contact-info__detail {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(250,250,247,.11);
}

.zd-contact-info__detail:last-child {
    border-bottom: 0;
}

.zd-contact-info__detail-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(250,250,247,.24);
}

.zd-contact-info__detail-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #FAFAF7;
    stroke-width: 1.5;
}

.zd-contact-info__detail span {
    display: block;
    margin-bottom: 5px;
    color: rgba(250,250,247,.46);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
}

.zd-contact-info__detail strong {
    display: block;
    color: #FAFAF7;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
}


/* HOURS */

.zd-contact-info__hours {
    margin-top: 26px;
}

.zd-contact-info__hours-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: rgba(250,250,247,.55);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
}

.zd-contact-info__hours-mark {
    width: 6px;
    height: 6px;
    background: var(--zd-red);
}

.zd-contact-info__hours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.zd-contact-info__hours-grid span {
    display: block;
    color: rgba(250,250,247,.42);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    margin-bottom: 6px;
}

.zd-contact-info__hours-grid strong {
    color: #FAFAF7;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}


/* =========================================================
   SECTION 02 — MESSAGE US
   ========================================================= */

.zd-message {
    padding: clamp(70px, 9vw, 130px)
             clamp(16px, 4vw, 64px);
}

.zd-message__container {
    width: min(1400px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 40% 60%;
    background: var(--zd-soft);
    border: 1px solid var(--zd-line);
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.zd-message__container.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.zd-message__intro {
    padding: clamp(40px, 5vw, 72px);
    background: var(--zd-surface);
    color: #FAFAF7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zd-message__topline {
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(250,250,247,.62);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
}

.zd-message__topline-line {
    height: 1px;
    flex: 1;
    background: rgba(250,250,247,.22);
}

.zd-message__mini {
    margin: 48px 0 14px;
    color: var(--zd-red);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
}

.zd-message__title {
    margin: 0;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(39px, 4.2vw, 63px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.045em;
}

.zd-message__title span {
    display: block;
    color: var(--zd-red);
}

.zd-message__description {
    max-width: 430px;
    margin: 25px 0 34px;
    color: rgba(250,250,247,.69);
    font-size: 14px;
    line-height: 1.75;
}

.zd-message__response {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-top: 20px;
    border-top: 1px solid rgba(250,250,247,.16);
}

.zd-message__response-dot {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    flex: 0 0 7px;
    background: var(--zd-red);
}

.zd-message__response strong,
.zd-message__response span {
    display: block;
}

.zd-message__response strong {
    margin-bottom: 5px;
    color: #FAFAF7;
    font-size: 10px;
    letter-spacing: .1em;
    font-weight: 600;
}

.zd-message__response span {
    color: rgba(250,250,247,.48);
    font-size: 11px;
    line-height: 1.5;
}


/* FORM */

.zd-message__form-wrap {
    padding: clamp(36px, 5vw, 70px);
    background: var(--zd-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zd-message__form {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 22px;
}

.zd-message__field {
    min-width: 0;
}

.zd-message__field--full {
    grid-column: 1 / -1;
}

.zd-message__field label {
    display: block;
    margin-bottom: 9px;
    color: var(--zd-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}

.zd-message__field input,
.zd-message__field textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
    border: 1px solid var(--zd-line);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: var(--zd-text);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.zd-message__field input {
    min-height: 50px;
    padding: 0 15px;
}

.zd-message__field textarea {
    min-height: 135px;
    padding: 14px 15px;
    resize: vertical;
}

.zd-message__field input::placeholder,
.zd-message__field textarea::placeholder {
    color: var(--zd-muted);
}

.zd-message__field input:focus,
.zd-message__field textarea:focus {
    border-color: var(--zd-red);
    box-shadow: 0 0 0 2px rgba(229,57,53,.10);
}

.zd-message__field.has-error input,
.zd-message__field.has-error textarea {
    border-color: var(--zd-red);
    box-shadow: 0 0 0 2px rgba(229,57,53,.08);
}

.zd-message__error {
    display: block;
    min-height: 0;
    margin-top: 6px;
    color: var(--zd-red);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-3px);
    transition:
        opacity .2s ease,
        transform .2s ease;
}

.zd-message__field.has-error .zd-message__error {
    opacity: 1;
    transform: translateY(0);
}

.zd-message__form-bottom {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 6px;
}

.zd-message__required {
    margin: 0;
    color: var(--zd-muted);
    font-size: 10px;
}

.zd-message__required span {
    color: var(--zd-red);
}

.zd-message__submit {
    min-height: 50px;
    padding: 0 20px 0 23px;
    border: 0;
    border-radius: 0;
    background: var(--zd-red);
    color: #FAFAF7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    position: relative;
    overflow: hidden;
}

.zd-message__submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #111111;
    transform: translateX(-101%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.zd-message__submit:hover::before {
    transform: translateX(0);
}

.zd-message__submit span {
    position: relative;
    z-index: 1;
}

.zd-message__submit-arrow {
    font-size: 17px;
    line-height: 1;
    transition: transform .3s ease;
}

.zd-message__submit:hover .zd-message__submit-arrow {
    transform: translateX(4px);
}

.zd-message__success {
    grid-column: 1 / -1;
    display: none;
    align-items: flex-start;
    gap: 13px;
    padding: 15px;
    border: 1px solid rgba(229,57,53,.38);
    background: rgba(229,57,53,.06);
    color: var(--zd-text);
}

.zd-message__success.is-visible {
    display: flex;
}

.zd-message__success-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: grid;
    place-items: center;
    background: var(--zd-red);
    color: #FAFAF7;
    font-size: 12px;
    font-weight: 600;
}

.zd-message__success strong,
.zd-message__success span {
    display: block;
}

.zd-message__success strong {
    margin-bottom: 4px;
    color: var(--zd-text);
    font-size: 10px;
    letter-spacing: .08em;
}

.zd-message__success span {
    color: var(--zd-muted);
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   SECTION 03 — LOCATION / GOOGLE MAP
   ========================================================= */

.zd-location {
    padding: clamp(70px, 9vw, 125px)
             clamp(16px, 4vw, 64px);
    overflow: hidden;
}

.zd-location__container {
    width: min(1400px, 100%);
    margin: 0 auto;
}

.zd-location__heading {
    margin-bottom: 42px;
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.zd-location__heading.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.zd-location__heading-top {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    color: var(--zd-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
}

.zd-location__heading-line {
    width: 110px;
    height: 1px;
    background: var(--zd-line);
}

.zd-location__heading-content {
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: end;
    gap: 30px;
}

.zd-location__mini {
    margin: 0 0 13px;
    color: var(--zd-red);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .17em;
}

.zd-location__title {
    margin: 0;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(40px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.05em;
    font-weight: 500;
}

.zd-location__title span {
    color: var(--zd-red);
}

.zd-location__intro {
    max-width: 490px;
    justify-self: end;
    margin: 0;
    color: var(--zd-muted);
    font-size: 14px;
    line-height: 1.8;
}


/* MAP LAYOUT — IMAGE LEFT / MAP RIGHT */

.zd-location__map-layout {
    display: grid;
    grid-template-columns: 43% 57%;
    min-height: 570px;
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .8s ease .1s,
        transform .8s cubic-bezier(.2,.7,.2,1) .1s;
}

.zd-location__map-layout.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* LEFT IMAGE */

.zd-location__place {
    position: relative;
    background: var(--zd-surface);
    color: #FAFAF7;
    overflow: hidden;
}

.zd-location__image {
    height: 285px;
    position: relative;
    overflow: hidden;
}

.zd-location__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.zd-location__map-layout.is-visible .zd-location__image img {
    transform: scale(1);
}

.zd-location__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(17,17,17,.04),
        rgba(17,17,17,.72)
    );
}

.zd-location__image-label {
    position: absolute;
    left: 22px;
    bottom: 18px;
    color: #FAFAF7;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
}

.zd-location__place-info {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 22px;
    padding: 30px 34px;
}

.zd-location__place-number {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.zd-location__place-number span {
    color: var(--zd-red);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
}

.zd-location__place-number i {
    width: 1px;
    height: 70px;
    display: block;
    background: rgba(250,250,247,.18);
}

.zd-location__place-info p {
    margin: 0 0 8px;
    color: rgba(250,250,247,.48);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
}

.zd-location__place-info h3 {
    margin: 0 0 17px;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(25px, 2.5vw, 39px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.035em;
}

.zd-location__place-info h3 span {
    color: var(--zd-red);
}

.zd-location__place-info address {
    margin: 0;
    color: rgba(250,250,247,.68);
    font-style: normal;
    font-size: 12px;
    line-height: 1.7;
}

.zd-location__directions {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    margin-top: 21px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(250,250,247,.35);
    color: #FAFAF7;
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
}

.zd-location__directions span {
    color: var(--zd-red);
    font-size: 15px;
    transition: transform .25s ease;
}

.zd-location__directions:hover span {
    transform: translateX(4px);
}


/* RIGHT MAP */

.zd-location__map {
    min-width: 0;
    background: #ddd;
}

.zd-location__map-frame {
    width: 100%;
    height: 100%;
    min-height: 570px;
    position: relative;
    overflow: hidden;
}

.zd-location__map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 570px;
    display: block;
    border: 0;
    filter: grayscale(.9) contrast(1.05);
}

.zd-location__map-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    background: #111111;
    color: #FAFAF7;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
}

.zd-location__map-badge-dot {
    width: 6px;
    height: 6px;
    background: var(--zd-red);
}


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

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

    .zd-contact-info {
        padding: 60px 24px;
    }

    .zd-contact-info__container {
        grid-template-columns: 43% 57%;
        min-height: 610px;
    }

    .zd-contact-info__visual {
        min-height: 610px;
        padding: 20px;
    }

    .zd-contact-info__image-frame {
        min-height: 570px;
    }

    .zd-contact-info__content {
        padding: 38px 34px;
    }

    .zd-contact-info__title {
        font-size: clamp(34px, 5vw, 49px);
    }

    .zd-contact-info__description {
        font-size: 13px;
    }

    .zd-contact-info__hours-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .zd-message {
        padding: 65px 24px;
    }

    .zd-message__container {
        grid-template-columns: 42% 58%;
    }

    .zd-message__intro {
        padding: 38px 32px;
    }

    .zd-message__form-wrap {
        padding: 38px 30px;
    }

    .zd-message__title {
        font-size: 45px;
    }

    .zd-location {
        padding: 65px 24px;
    }

    .zd-location__heading-content {
        grid-template-columns: 1fr 1fr;
    }

    .zd-location__map-layout {
        grid-template-columns: 45% 55%;
        min-height: 510px;
    }

    .zd-location__image {
        height: 245px;
    }

    .zd-location__map-frame,
    .zd-location__map-frame iframe {
        min-height: 510px;
    }

    .zd-location__place-info {
        padding: 25px 25px;
        gap: 13px;
    }
}


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

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

    .zd-contact-info__content {
        padding: 42px;
    }

    .zd-contact-info__title {
        font-size: 50px;
    }

    .zd-message__intro {
        padding: 48px;
    }

    .zd-message__form-wrap {
        padding: 48px;
    }

    .zd-location__map-layout {
        min-height: 550px;
    }

    .zd-location__map-frame,
    .zd-location__map-frame iframe {
        min-height: 550px;
    }
}


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

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

    .zd-contact-info__container {
        min-height: 630px;
    }

    .zd-contact-info__visual,
    .zd-contact-info__image-frame {
        min-height: 630px;
    }

    .zd-location__map-layout,
    .zd-location__map-frame,
    .zd-location__map-frame iframe {
        min-height: 560px;
    }
}


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

@media (max-width: 767px) {

    .zd-contact-info {
        padding: 55px 16px;
    }

    .zd-contact-info__container {
        display: block;
        min-height: 0;
    }

    .zd-contact-info__visual {
        min-height: 330px;
        padding: 14px;
    }

    .zd-contact-info__image-frame {
        min-height: 300px;
    }

    .zd-contact-info__content {
        padding: 38px 24px 42px;
    }

    .zd-contact-info__title {
        font-size: clamp(36px, 11vw, 52px);
    }

    .zd-contact-info__description {
        font-size: 14px;
        margin: 22px 0 26px;
    }

    .zd-contact-info__hours-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .zd-message {
        padding: 60px 16px;
    }

    .zd-message__container {
        display: block;
    }

    .zd-message__intro {
        padding: 40px 24px;
    }

    .zd-message__mini {
        margin-top: 34px;
    }

    .zd-message__title {
        font-size: clamp(39px, 11vw, 56px);
    }

    .zd-message__description {
        font-size: 13px;
    }

    .zd-message__form-wrap {
        padding: 32px 22px 36px;
    }

    .zd-message__form {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .zd-message__field--full {
        grid-column: auto;
    }

    .zd-message__form-bottom {
        grid-column: auto;
        align-items: stretch;
        flex-direction: column;
    }

    .zd-message__submit {
        width: 100%;
    }

    .zd-message__success {
        grid-column: auto;
    }

    .zd-location {
        padding: 60px 16px;
    }

    .zd-location__heading-content {
        display: block;
    }

    .zd-location__title {
        font-size: clamp(41px, 12vw, 60px);
    }

    .zd-location__intro {
        max-width: none;
        margin-top: 23px;
        font-size: 13px;
    }

    .zd-location__map-layout {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .zd-location__place {
        width: 100%;
    }

    .zd-location__image {
        height: 250px;
    }

    .zd-location__place-info {
        padding: 28px 24px 34px;
    }

    .zd-location__map {
        width: 100%;
    }

    .zd-location__map-frame,
    .zd-location__map-frame iframe {
        min-height: 390px;
        height: 390px;
    }

    .zd-location__map-badge {
        top: 15px;
        right: 15px;
    }
}


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

@media (max-width: 424px) {

    .zd-contact-info {
        padding-left: 12px;
        padding-right: 12px;
    }

    .zd-contact-info__visual {
        min-height: 300px;
    }

    .zd-contact-info__image-frame {
        min-height: 270px;
    }

    .zd-contact-info__content {
        padding: 34px 19px 38px;
    }

    .zd-contact-info__title {
        font-size: 38px;
    }

    .zd-contact-info__detail {
        gap: 12px;
    }

    .zd-contact-info__detail strong {
        font-size: 12px;
    }

    .zd-message {
        padding-left: 12px;
        padding-right: 12px;
    }

    .zd-message__intro {
        padding: 34px 19px;
    }

    .zd-message__title {
        font-size: 41px;
    }

    .zd-message__form-wrap {
        padding: 28px 18px 32px;
    }

    .zd-location {
        padding-left: 12px;
        padding-right: 12px;
    }

    .zd-location__place-info {
        grid-template-columns: 43px 1fr;
        padding: 25px 18px 30px;
        gap: 13px;
    }

    .zd-location__place-info h3 {
        font-size: 29px;
    }

    .zd-location__map-frame,
    .zd-location__map-frame iframe {
        min-height: 350px;
        height: 350px;
    }
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    .zd-contact-info {
        padding: 45px 10px;
    }

    .zd-contact-info__visual {
        min-height: 270px;
        padding: 10px;
    }

    .zd-contact-info__image-frame {
        min-height: 245px;
    }

    .zd-contact-info__image-label {
        left: 15px;
        bottom: 15px;
        font-size: 8px;
    }

    .zd-contact-info__content {
        padding: 29px 16px 32px;
    }

    .zd-contact-info__heading-row {
        gap: 10px;
    }

    .zd-contact-info__eyebrow {
        font-size: 8px;
    }

    .zd-contact-info__title {
        font-size: 34px;
    }

    .zd-contact-info__description {
        font-size: 13px;
        line-height: 1.65;
    }

    .zd-contact-info__hours-grid strong {
        font-size: 10px;
    }

    .zd-message {
        padding: 48px 10px;
    }

    .zd-message__intro {
        padding: 30px 16px;
    }

    .zd-message__title {
        font-size: 36px;
    }

    .zd-message__description {
        font-size: 12px;
    }

    .zd-message__form-wrap {
        padding: 25px 15px 29px;
    }

    .zd-message__field input {
        min-height: 47px;
    }

    .zd-message__field textarea {
        min-height: 120px;
    }

    .zd-location {
        padding: 48px 10px;
    }

    .zd-location__heading-top {
        gap: 10px;
    }

    .zd-location__title {
        font-size: 37px;
    }

    .zd-location__intro {
        font-size: 12px;
    }

    .zd-location__image {
        height: 220px;
    }

    .zd-location__place-info {
        padding: 22px 15px 27px;
    }

    .zd-location__place-number {
        gap: 7px;
    }

    .zd-location__place-number i {
        height: 55px;
    }

    .zd-location__place-info h3 {
        font-size: 26px;
    }

    .zd-location__place-info address {
        font-size: 11px;
    }

    .zd-location__map-frame,
    .zd-location__map-frame iframe {
        min-height: 310px;
        height: 310px;
    }
}


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

.zd-contact-info a:focus-visible,
.zd-message button:focus-visible,
.zd-message input:focus-visible,
.zd-message textarea:focus-visible,
.zd-location a:focus-visible {
    outline: 2px solid var(--zd-red);
    outline-offset: 3px;
}

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

    .zd-contact-info__container,
    .zd-message__container,
    .zd-location__heading,
    .zd-location__map-layout {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .zd-contact-info__image,
    .zd-location__image img {
        transform: none !important;
        transition: none;
    }

    .zd-message__submit::before,
    .zd-message__submit-arrow,
    .zd-location__directions span {
        transition: none;
    }
}

/* =========================================================
   ZENDOJO CONTACT CTA
   BASE / LIGHT MODE
   SECTION ONLY
   ========================================================= */

.zd-contact-cta {

    --zcc-bg: #FAFAF7;
    --zcc-text: #111111;
    --zcc-surface: #333333;
    --zcc-red: #E53935;
    --zcc-white: #FAFAF7;

    --zcc-muted: rgba(17, 17, 17, .62);
    --zcc-line: rgba(17, 17, 17, .16);

    width: 100%;
    box-sizing: border-box;

    padding:
        clamp(60px, 8vw, 120px)
        0;

    background: var(--zcc-bg);

    overflow: hidden;
}


.zd-contact-cta *,
.zd-contact-cta *::before,
.zd-contact-cta *::after {
    box-sizing: border-box;
}


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

.zd-contact-cta__container {

    width: 100%;
    min-height: clamp(590px, 65vw, 720px);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 44% 56%;

    position: relative;
    overflow: hidden;

    background: var(--zcc-surface);

    box-shadow:
        0 25px 70px rgba(17,17,17,.13);

    opacity: 0;
    transform: translateY(55px);

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


.zd-contact-cta__container.is-visible {

    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   IMAGE
   ========================================================= */

.zd-contact-cta__visual {

    min-height: 590px;

    position: relative;
    overflow: hidden;

    background: #222;
}


.zd-contact-cta__image {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.12);

    transition:
        transform 1.5s cubic-bezier(.2,.7,.2,1);
}


.zd-contact-cta__container.is-visible
.zd-contact-cta__image {

    transform: scale(1);
}


.zd-contact-cta__image-overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.08) 20%,
            rgba(17,17,17,.76) 100%
        );

    pointer-events: none;
}


/* IMAGE LABEL */

.zd-contact-cta__image-label {

    position: absolute;

    left: clamp(20px, 2.5vw, 34px);
    bottom: clamp(20px, 2.5vw, 32px);

    display: flex;
    align-items: center;
    gap: 9px;

    color: #FAFAF7;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 600;

    letter-spacing: .16em;
}


.zd-contact-cta__image-dot {

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    background: var(--zcc-red);
}


.zd-contact-cta__image-number {

    position: absolute;

    top: 24px;
    right: 27px;

    color: #FAFAF7;

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

    letter-spacing: .14em;
}


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

.zd-contact-cta__content {

    min-width: 0;

    position: relative;

    padding:
        clamp(38px, 5vw, 72px)
        clamp(32px, 5vw, 72px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: #FAFAF7;

    background:
        linear-gradient(
            135deg,
            #333333 0%,
            #292929 100%
        );
}


/* =========================================================
   TOP LINE
   ========================================================= */

.zd-contact-cta__top {

    width: 100%;

    display: flex;
    align-items: center;

    gap: 16px;
}


.zd-contact-cta__eyebrow {

    flex-shrink: 0;

    color: #FAFAF7;

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

    letter-spacing: .17em;
}


.zd-contact-cta__top-line {

    width: 100px;
    height: 1px;

    flex: 0 1 100px;

    background:
        rgba(250,250,247,.24);
}


.zd-contact-cta__index {

    margin-left: auto;

    flex-shrink: 0;

    color:
        rgba(250,250,247,.43);

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

    letter-spacing: .13em;
}


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

.zd-contact-cta__main {

    padding:
        clamp(28px, 4vw, 50px)
        0;
}


.zd-contact-cta__mini {

    margin: 0 0 15px;

    color: var(--zcc-red);

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

    letter-spacing: .16em;

    line-height: 1.5;
}


.zd-contact-cta__title {

    max-width: 670px;

    margin: 0;

    color: #FAFAF7;

    font-family: "Archivo Black", sans-serif;

    font-size:
        clamp(39px, 4.5vw, 68px);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


.zd-contact-cta__title span {

    display: inline;

    color: var(--zcc-red);
}


.zd-contact-cta__title strong {

    display: block;

    color: #FAFAF7;

    font-weight: 500;
}


.zd-contact-cta__description {

    max-width: 560px;

    margin:
        clamp(22px, 2.3vw, 30px)
        0
        0;

    color:
        rgba(250,250,247,.70);

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

    font-size:
        clamp(13px, 1.1vw, 15px);

    line-height: 1.75;

    font-weight: 400;
}


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

.zd-contact-cta__actions {

    margin-top: 30px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 22px;
}


.zd-contact-cta__button {

    min-height: 50px;

    padding:
        0 19px
        0 24px;

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

    gap: 25px;

    position: relative;
    overflow: hidden;

    background: var(--zcc-red);
    color: #FAFAF7;

    text-decoration: none;

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

    letter-spacing: .12em;

    transition:
        color .3s ease;
}


.zd-contact-cta__button::before {

    content: "";

    position: absolute;
    inset: 0;

    background: #FAFAF7;

    transform: translateX(-101%);

    transition:
        transform .38s cubic-bezier(.2,.7,.2,1);
}


.zd-contact-cta__button:hover {

    color: #111111;
}


.zd-contact-cta__button:hover::before {

    transform: translateX(0);
}


.zd-contact-cta__button span {

    position: relative;
    z-index: 2;
}


.zd-contact-cta__button-arrow {

    font-size: 17px;

    transition:
        transform .3s ease;
}


.zd-contact-cta__button:hover
.zd-contact-cta__button-arrow {

    transform: translateX(5px);
}


/* SECONDARY */

.zd-contact-cta__secondary {

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(250,250,247,.35);

    color: #FAFAF7;

    text-decoration: none;

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

    letter-spacing: .13em;

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


.zd-contact-cta__secondary span {

    color: var(--zcc-red);

    font-size: 15px;

    transition:
        transform .25s ease;
}


.zd-contact-cta__secondary:hover {

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


.zd-contact-cta__secondary:hover span {

    transform: translate(3px, -3px);
}


/* =========================================================
   VALUES
   ========================================================= */

.zd-contact-cta__values {

    display: grid;

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

    border-top:
        1px solid rgba(250,250,247,.16);

    border-bottom:
        1px solid rgba(250,250,247,.16);
}


.zd-contact-cta__value {

    min-width: 0;

    padding:
        18px 14px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    border-right:
        1px solid rgba(250,250,247,.10);
}


.zd-contact-cta__value:last-child {

    border-right: 0;
}


.zd-contact-cta__value > span {

    color: var(--zcc-red);

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

    letter-spacing: .1em;
}


.zd-contact-cta__value strong {

    display: block;

    color: #FAFAF7;

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

    letter-spacing: .08em;

    line-height: 1.35;
}


.zd-contact-cta__value small {

    display: block;

    color:
        rgba(250,250,247,.46);

    font-size: 9px;

    line-height: 1.45;
}


/* =========================================================
   BOTTOM STATEMENT
   ========================================================= */

.zd-contact-cta__bottom {

    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 22px;
}


.zd-contact-cta__bottom span {

    color:
        rgba(250,250,247,.43);

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

    letter-spacing: .15em;

    white-space: nowrap;
}


.zd-contact-cta__bottom i {

    width: 35px;
    height: 1px;

    display: block;

    background: var(--zcc-red);
}


/* =========================================================
   SCARLET EDGE
   ========================================================= */

.zd-contact-cta__edge {

    position: absolute;

    top: 0;
    right: 0;

    width: 4px;
    height: 100%;

    background: var(--zcc-red);

    transform:
        scaleY(0);

    transform-origin: bottom;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1) .35s;
}


.zd-contact-cta__container.is-visible
.zd-contact-cta__edge {

    transform: scaleY(1);
}


/* =========================================================
   TABLET
   768 — 1023
   ========================================================= */

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

    .zd-contact-cta {

        padding:
            60px
            0;
    }


    .zd-contact-cta__container {

        grid-template-columns:
            42% 58%;

        min-height: 610px;
    }


    .zd-contact-cta__visual {

        min-height: 610px;
    }


    .zd-contact-cta__content {

        padding:
            35px
            32px;
    }


    .zd-contact-cta__title {

        font-size:
            clamp(39px, 5.4vw, 51px);
    }


    .zd-contact-cta__description {

        font-size: 13px;
    }


    .zd-contact-cta__actions {

        margin-top: 24px;
    }


    .zd-contact-cta__values {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .zd-contact-cta__value {

        padding:
            13px 11px;
    }


    .zd-contact-cta__value:nth-child(2) {

        border-right: 0;
    }


    .zd-contact-cta__value:nth-child(-n+2) {

        border-bottom:
            1px solid rgba(250,250,247,.10);
    }


    .zd-contact-cta__value:nth-child(3) {

        border-right:
            1px solid rgba(250,250,247,.10);
    }
}


/* =========================================================
   LAPTOP
   1024 — 1279
   ========================================================= */

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

    .zd-contact-cta {

        padding:
            65px
            0;
    }


    .zd-contact-cta__container {

        min-height: 630px;
    }


    .zd-contact-cta__content {

        padding:
            43px;
    }


    .zd-contact-cta__title {

        font-size: 53px;
    }


    .zd-contact-cta__values {

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


    .zd-contact-cta__value:nth-child(2) {
        border-right: 0;
    }


    .zd-contact-cta__value:nth-child(-n+2) {
        border-bottom: 1px solid rgba(250,250,247,.10);
    }


    .zd-contact-cta__value:nth-child(3) {
        border-right: 1px solid rgba(250,250,247,.10);
    }


    .zd-contact-cta__value {

        padding:
            15px 10px;
    }


    .zd-contact-cta__value small {

        font-size: 8px;
    }
}


/* =========================================================
   LAPTOP-L
   1280 — 1439
   ========================================================= */

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

    .zd-contact-cta__container {

        min-height: 660px;
    }


    .zd-contact-cta__visual {

        min-height: 660px;
    }


    .zd-contact-cta__title {

        font-size: 61px;
    }
}


/* =========================================================
   MOBILE-L
   425 — 767
   ========================================================= */

@media (max-width: 767px) {

    .zd-contact-cta {

        padding:
            55px
            0;
    }


    .zd-contact-cta__container {

        display: block;

        min-height: 0;
    }


    .zd-contact-cta__visual {

        min-height: 330px;

        height: 330px;
    }


    .zd-contact-cta__content {

        padding:
            36px
            24px
            40px;
    }


    .zd-contact-cta__top {

        gap: 10px;
    }


    .zd-contact-cta__top-line {

        min-width: 25px;

        flex: 1;
    }


    .zd-contact-cta__index {

        font-size: 8px;
    }


    .zd-contact-cta__main {

        padding:
            32px
            0
            34px;
    }


    .zd-contact-cta__title {

        font-size:
            clamp(38px, 11vw, 54px);
    }


    .zd-contact-cta__description {

        font-size: 13px;

        line-height: 1.7;
    }


    .zd-contact-cta__actions {

        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }


    .zd-contact-cta__button {

        width: 100%;
    }


    .zd-contact-cta__values {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .zd-contact-cta__value {

        padding:
            15px 12px;
    }


    .zd-contact-cta__value:nth-child(2) {

        border-right: 0;
    }


    .zd-contact-cta__value:nth-child(-n+2) {

        border-bottom:
            1px solid rgba(250,250,247,.10);
    }


    .zd-contact-cta__value:nth-child(3) {

        border-right:
            1px solid rgba(250,250,247,.10);
    }


    .zd-contact-cta__bottom {

        flex-wrap: wrap;

        gap: 9px;
    }


    .zd-contact-cta__bottom span {

        white-space: normal;
    }
}


/* =========================================================
   MOBILE-M
   375 — 424
   ========================================================= */

@media (max-width: 424px) {

    .zd-contact-cta {

        padding:
            48px
            0;
    }


    .zd-contact-cta__visual {

        height: 285px;
        min-height: 285px;
    }


    .zd-contact-cta__image-label {

        left: 17px;
        bottom: 17px;

        font-size: 8px;
    }


    .zd-contact-cta__image-number {

        top: 17px;
        right: 17px;
    }


    .zd-contact-cta__content {

        padding:
            31px
            19px
            34px;
    }


    .zd-contact-cta__eyebrow {

        font-size: 8px;
    }


    .zd-contact-cta__index {

        font-size: 7px;
    }


    .zd-contact-cta__main {

        padding:
            29px
            0
            30px;
    }


    .zd-contact-cta__mini {

        font-size: 9px;

        line-height: 1.5;
    }


    .zd-contact-cta__title {

        font-size: 39px;
    }


    .zd-contact-cta__description {

        font-size: 12px;

        line-height: 1.7;
    }


    .zd-contact-cta__values {

        grid-template-columns:
            1fr;
    }


    .zd-contact-cta__value {

        border-right: 0;

        border-bottom:
            1px solid rgba(250,250,247,.10);
    }


    .zd-contact-cta__value:last-child {

        border-bottom: 0;
    }
}


/* =========================================================
   MOBILE-S
   ≤ 374
   ========================================================= */

@media (max-width: 374px) {

    .zd-contact-cta {

        padding:
            44px
            0;
    }


    .zd-contact-cta__visual {

        height: 255px;
        min-height: 255px;
    }


    .zd-contact-cta__image-label {

        left: 14px;
        bottom: 14px;

        font-size: 7px;

        letter-spacing: .13em;
    }


    .zd-contact-cta__image-number {

        top: 14px;
        right: 14px;

        font-size: 10px;
    }


    .zd-contact-cta__content {

        padding:
            28px
            16px
            30px;
    }


    .zd-contact-cta__top {

        align-items: flex-start;
    }


    .zd-contact-cta__eyebrow {

        font-size: 7px;

        line-height: 1.4;
    }


    .zd-contact-cta__index {

        font-size: 7px;
    }


    .zd-contact-cta__main {

        padding:
            26px
            0
            27px;
    }


    .zd-contact-cta__mini {

        font-size: 8px;
    }


    .zd-contact-cta__title {

        font-size: 34px;

        line-height: .96;
    }


    .zd-contact-cta__description {

        font-size: 11.5px;

        line-height: 1.65;
    }


    .zd-contact-cta__button {

        min-height: 48px;

        font-size: 8px;

        gap: 16px;
    }


    .zd-contact-cta__secondary {

        font-size: 8px;
    }


    .zd-contact-cta__value {

        padding:
            13px 10px;
    }


    .zd-contact-cta__value strong {

        font-size: 9px;
    }


    .zd-contact-cta__value small {

        font-size: 8px;
    }


    .zd-contact-cta__bottom span {

        font-size: 7px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.zd-contact-cta a:focus-visible {

    outline:
        2px solid var(--zcc-red);

    outline-offset: 4px;
}


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

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

    .zd-contact-cta__container {

        opacity: 1;
        transform: none;

        transition: none;
    }


    .zd-contact-cta__image {

        transform: none !important;

        transition: none;
    }


    .zd-contact-cta__edge {

        transform: scaleY(1);

        transition: none;
    }


    .zd-contact-cta__button::before,
    .zd-contact-cta__button-arrow,
    .zd-contact-cta__secondary span {

        transition: none;
    }
}

/* =========================================================
   ZENDOJO — COMPACT FOOTER REDESIGN
   SECTION ONLY
   Responsive:
   Mobile-S / Mobile-M / Mobile-L / Tablet /
   Laptop / Laptop-L / Desktop
   ========================================================= */

.zd-footer {
    --zdf-bg: #111111;
    --zdf-bg-soft: #181818;
    --zdf-card: #202020;

    --zdf-white: #FAFAF7;
    --zdf-white-soft: rgba(250, 250, 247, 0.82);
    --zdf-white-faint: rgba(250, 250, 247, 0.62);

    --zdf-red: #E53935;
    --zdf-red-dark: #C92F2C;

    --zdf-line: rgba(250, 250, 247, 0.14);
    --zdf-line-strong: rgba(250, 250, 247, 0.22);

    position: relative;
    width: 100%;
    background: var(--zdf-bg);
    color: var(--zdf-white);
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   SHELL
   ========================================================= */

.zd-footer__shell {
    position: relative;

    width: min(1500px, 100%);
    margin: 0 auto;

    padding:
        clamp(42px, 4vw, 58px)
        clamp(18px, 4vw, 60px)
        0;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #111111 68%,
            #1B1B1B 100%
        );

    color: var(--zdf-white);

    overflow: hidden;
}


/* Remove old decorative graphics */
.zd-footer__background,
.zd-footer__watermark,
.zd-footer__brush,
.zd-footer__orbit {
    display: none !important;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.zd-footer__main {
    position: relative;

    width: 100%;
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(220px, 1.35fr)
        minmax(145px, 0.9fr)
        minmax(190px, 1fr)
        minmax(170px, 0.9fr)
        minmax(170px, 0.9fr);

    gap: clamp(22px, 2.8vw, 46px);

    padding-bottom: 34px;

    border-bottom:
        1px solid
        var(--zdf-line);
}


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

.zd-footer__brand-col {
    min-width: 0;

    opacity: 1;
    transform: none;
}


.zd-footer.is-visible .zd-footer__brand-col {
    opacity: 1;
    transform: none;
}


.zd-footer__brand {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--zdf-white);

    text-decoration: none;
}


.zd-footer__brand-mark {
    display: inline-flex;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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


.zd-footer__brand-mark svg {
    display: block;

    width: 100%;
    height: 100%;
}


.zd-footer__logo-dark {
    fill: var(--zdf-white);
}


.zd-footer__logo-red {
    fill: var(--zdf-red);
}


.zd-footer__brand-name {
    font-family: var(--font-body);

    font-size: 22px;
    line-height: 1;

    letter-spacing: 0.055em;

    font-weight: 700;
}


.zd-footer__brand-tagline {
    margin: 18px 0 0;

    font-family: var(--font-body);

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

    line-height: 1.48;

    font-weight: 500;

    color: var(--zdf-white);
}


.zd-footer__brand-description {
    max-width: 350px;

    margin: 13px 0 0;

    font-family: var(--font-body);

    font-size: 13px;

    line-height: 1.65;

    font-weight: 400;

    color: var(--zdf-white-soft);
}


.zd-footer__brand-line {
    width: min(230px, 100%);
    height: 1px;

    margin-top: 18px;

    background: var(--zdf-line);

    overflow: hidden;
}


.zd-footer__brand-line span {
    display: block;

    width: 100%;
    height: 100%;

    background: var(--zdf-red);
}


.zd-footer__brand-note {
    margin: 9px 0 0;

    font-family: var(--font-body);

    font-size: 10px;

    line-height: 1.4;

    letter-spacing: 0.14em;

    font-weight: 600;

    color: var(--zdf-red);
}


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

.zd-footer__column {
    min-width: 0;

    opacity: 1;
    transform: none;
}


.zd-footer.is-visible .zd-footer__column {
    opacity: 1;
    transform: none;
}


.zd-footer__eyebrow {
    display: block;

    margin-bottom: 7px;

    font-family: var(--font-body);

    font-size: 11px;

    line-height: 1.35;

    letter-spacing: 0.15em;

    font-weight: 600;

    color: var(--zdf-red);
}


.zd-footer__column-title {
    margin: 0;

    font-family: var(--font-body);

    font-size: clamp(19px, 1.45vw, 22px);

    line-height: 1.25;

    font-weight: 650;

    color: var(--zdf-white);
}


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

.zd-footer__links {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 17px;
}


.zd-footer__link-group {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.zd-footer__group-label {
    margin-bottom: 2px;

    font-family: var(--font-body);

    font-size: 10px;

    line-height: 1.3;

    letter-spacing: 0.12em;

    font-weight: 600;

    color: var(--zdf-white-faint);
}


.zd-footer__link-group a {
    display: flex;

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

    gap: 10px;

    width: 100%;

    padding: 3px 0;

    color: var(--zdf-white-soft);

    text-decoration: none;

    font-family: var(--font-body);

    font-size: 14px;

    line-height: 1.45;

    font-weight: 450;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


.zd-footer__link-arrow {
    color: var(--zdf-red);

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}


.zd-footer__link-group a:hover {
    color: var(--zdf-white);

    transform: translateX(3px);
}


.zd-footer__link-group a:hover .zd-footer__link-arrow {
    opacity: 1;

    transform: translateX(0);
}


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

.zd-footer__contact-list {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 17px;
}


.zd-footer__contact-item {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}


.zd-footer__contact-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;

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

    border:
        1px solid
        var(--zdf-line);

    background: rgba(250, 250, 247, 0.035);

    color: var(--zdf-white-soft);

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}


.zd-footer__contact-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.zd-footer__contact-item:hover .zd-footer__contact-icon {
    color: var(--zdf-red);

    border-color:
        rgba(229, 57, 53, 0.5);

    background:
        rgba(229, 57, 53, 0.08);
}


.zd-footer__contact-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.zd-footer__contact-copy small {
    font-family: var(--font-body);

    font-size: 9px;

    line-height: 1.3;

    letter-spacing: 0.1em;

    font-weight: 600;

    color: var(--zdf-white-faint);
}


.zd-footer__contact-copy strong {
    font-family: var(--font-body);

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

    color: var(--zdf-white-soft);

    overflow-wrap: anywhere;
}


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

.zd-footer__support-list {
    display: flex;

    flex-direction: column;

    margin-top: 17px;
}


.zd-footer__support-list a {
    display: flex;

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

    gap: 10px;

    padding: 7px 0;

    border-bottom:
        1px solid
        rgba(250, 250, 247, 0.08);

    color: var(--zdf-white-soft);

    text-decoration: none;

    font-family: var(--font-body);

    font-size: 14px;

    line-height: 1.4;

    font-weight: 450;

    transition:
        color 180ms ease,
        padding 180ms ease;
}


.zd-footer__support-list a:first-child {
    border-top:
        1px solid
        rgba(250, 250, 247, 0.08);
}


.zd-footer__support-list a > span:last-child {
    color: var(--zdf-red);

    flex: 0 0 auto;

    transition: transform 180ms ease;
}


.zd-footer__support-list a:hover {
    color: var(--zdf-white);

    padding-left: 4px;
}


.zd-footer__support-list a:hover > span:last-child {
    transform: translateX(4px);
}


/* Remove old bulky support card */
.zd-footer__support-card {
    display: none !important;
}


/* =========================================================
   TIMINGS
   ========================================================= */

.zd-footer__status {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 17px;

    font-family: var(--font-body);

    font-size: 10px;

    line-height: 1.3;

    letter-spacing: 0.11em;

    font-weight: 600;

    color: var(--zdf-white-soft);
}


.zd-footer__status-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--zdf-red);

    box-shadow:
        0 0 0 4px rgba(229, 57, 53, 0.1);

    animation:
        zdFooterStatusPulse 2s ease-in-out infinite;
}


.zd-footer__hours {
    margin-top: 12px;

    border-top:
        1px solid
        var(--zdf-line);
}


.zd-footer__hours-row {
    display: flex;

    flex-direction: column;

    gap: 2px;

    padding: 8px 0;

    border-bottom:
        1px solid
        var(--zdf-line);
}


.zd-footer__hours-row span {
    font-family: var(--font-body);

    font-size: 10px;

    line-height: 1.3;

    letter-spacing: 0.07em;

    font-weight: 600;

    color: var(--zdf-white-faint);
}


.zd-footer__hours-row strong {
    font-family: var(--font-body);

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

    color: var(--zdf-white);
}


/* Old timing note removed */
.zd-footer__timing-note {
    display: none !important;
}


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

.zd-footer__newsletter {
    position: relative;

    width: 100%;

    margin: 0;

    padding:
        22px 0;

    display: grid;

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

    align-items: center;

    gap: clamp(24px, 4vw, 70px);

    border: 0;

    border-bottom:
        1px solid
        var(--zdf-line);

    background: transparent;

    opacity: 1;

    transform: none;
}


.zd-footer.is-visible .zd-footer__newsletter {
    opacity: 1;

    transform: none;
}


.zd-footer__newsletter-accent {
    display: none;
}


.zd-footer__newsletter-content {
    min-width: 0;
}


.zd-footer__newsletter-title {
    margin: 0;

    font-family: var(--font-body);

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

    line-height: 1.12;

    font-weight: 600;

    letter-spacing: -0.02em;

    color: var(--zdf-white);
}


.zd-footer__newsletter-description {
    max-width: 600px;

    margin: 5px 0 0;

    font-family: var(--font-body);

    font-size: 13px;

    line-height: 1.5;

    font-weight: 400;

    color: var(--zdf-white-soft);
}


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

.zd-footer__newsletter-form {
    min-width: 0;
}


.zd-footer__newsletter-field {
    display: grid;

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

    min-height: 48px;

    border:
        1px solid
        var(--zdf-line-strong);

    background: #0D0D0D;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.zd-footer__newsletter-field:focus-within {
    border-color: var(--zdf-red);

    box-shadow:
        0 0 0 3px
        rgba(229, 57, 53, 0.1);
}


.zd-footer__newsletter-field input {
    width: 100%;

    min-width: 0;

    border: 0;
    outline: 0;

    padding:
        11px 14px;

    background: transparent;

    color: var(--zdf-white);

    font-family: var(--font-body);

    font-size: 13px;

    line-height: 1.4;

    font-weight: 400;
}


.zd-footer__newsletter-field input::placeholder {
    color: var(--zdf-white-faint);

    opacity: 1;
}


.zd-footer__newsletter-button {
    min-width: 88px;

    display: inline-flex;

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

    gap: 8px;

    padding:
        10px 14px;

    border: 0;

    background: var(--zdf-red);

    color: var(--zdf-white);

    cursor: pointer;

    font-family: var(--font-body);

    font-size: 12px;

    line-height: 1.3;

    letter-spacing: 0.06em;

    font-weight: 700;

    transition:
        background 180ms ease,
        gap 180ms ease;
}


.zd-footer__newsletter-button:hover {
    background: var(--zdf-red-dark);

    gap: 12px;
}


.zd-footer__newsletter-button:focus-visible {
    outline:
        3px solid
        rgba(250, 250, 247, 0.9);

    outline-offset: 3px;
}


.zd-footer__newsletter-message {
    min-height: 0;

    margin: 5px 0 0;

    font-family: var(--font-body);

    font-size: 11px;

    line-height: 1.4;

    font-weight: 500;

    color: var(--zdf-red);
}


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

.zd-footer__bottom {
    width: 100%;

    min-height: 58px;

    padding: 16px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


.zd-footer__copyright {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    font-family: var(--font-body);

    font-size: 12px;

    line-height: 1.45;

    font-weight: 400;

    color: var(--zdf-white-faint);
}


.zd-footer__copyright-main {
    color: var(--zdf-white-soft);

    font-weight: 600;
}


.zd-footer__copyright-divider {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--zdf-red);
}


.zd-footer__legal {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 18px;
}


.zd-footer__legal a {
    color: var(--zdf-white-faint);

    text-decoration: none;

    font-family: var(--font-body);

    font-size: 12px;

    line-height: 1.4;

    font-weight: 400;

    transition: color 180ms ease;
}


.zd-footer__legal a:hover {
    color: var(--zdf-white);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.zd-footer a:focus-visible,
.zd-footer button:focus-visible,
.zd-footer input:focus-visible {
    outline:
        2px solid
        var(--zdf-red);

    outline-offset: 3px;
}


.zd-footer .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;
}


/* =========================================================
   MOBILE-S
   0 — 374px
   ========================================================= */

@media (max-width: 374px) {

    .zd-footer__shell {
        padding:
            34px 16px 0;
    }

    .zd-footer__main {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 8px;
    }

    .zd-footer__brand-col,
    .zd-footer__column {
        padding-bottom: 22px;
        margin-bottom: 22px;

        border-bottom:
            1px solid
            var(--zdf-line);
    }

    .zd-footer__brand-name {
        font-size: 20px;
    }

    .zd-footer__brand-tagline {
        font-size: 15px;
    }

    .zd-footer__brand-description {
        font-size: 13px;
        line-height: 1.6;
    }

    .zd-footer__column-title {
        font-size: 20px;
    }

    .zd-footer__link-group a,
    .zd-footer__support-list a {
        font-size: 14px;
    }

    .zd-footer__contact-copy strong {
        font-size: 13px;
    }

    .zd-footer__newsletter {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 0;
    }

    .zd-footer__newsletter-title {
        font-size: 21px;
    }

    .zd-footer__newsletter-description {
        font-size: 12px;
    }

    .zd-footer__newsletter-field {
        grid-template-columns: 1fr;
        gap: 8px;
        border: 0;
        background: transparent;
    }

    .zd-footer__newsletter-field input {
        min-height: 46px;

        border:
            1px solid
            var(--zdf-line-strong);

        background: #0D0D0D;
    }

    .zd-footer__newsletter-button {
        width: 100%;
        min-height: 44px;
    }

    .zd-footer__bottom {
        min-height: auto;

        flex-direction: column;

        align-items: center;

        text-align: center;

        padding: 17px 0 20px;
    }

    .zd-footer__copyright {
        justify-content: center;
        text-align: center;
        font-size: 11px;
    }

    .zd-footer__legal {
        justify-content: center;
        gap: 12px;
    }

    .zd-footer__legal a {
        font-size: 11px;
    }
}


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

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

    .zd-footer__shell {
        padding:
            36px 19px 0;
    }

    .zd-footer__main {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 8px;
    }

    .zd-footer__brand-col,
    .zd-footer__column {
        padding-bottom: 24px;
        margin-bottom: 24px;

        border-bottom:
            1px solid
            var(--zdf-line);
    }

    .zd-footer__links {
        gap: 16px;
    }

    .zd-footer__newsletter {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 21px 0;
    }

    .zd-footer__newsletter-field {
        grid-template-columns: 1fr;
        gap: 8px;

        border: 0;
        background: transparent;
    }

    .zd-footer__newsletter-field input {
        min-height: 47px;

        border:
            1px solid
            var(--zdf-line-strong);

        background: #0D0D0D;
    }

    .zd-footer__newsletter-button {
        width: 100%;
        min-height: 45px;
    }

    .zd-footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 18px 0 21px;
    }

    .zd-footer__copyright {
        justify-content: center;
        text-align: center;
    }

    .zd-footer__legal {
        justify-content: center;
    }
}


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

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

    .zd-footer__shell {
        padding:
            40px 24px 0;
    }

    .zd-footer__main {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 10px;
    }

    .zd-footer__brand-col,
    .zd-footer__column {
        padding-bottom: 27px;
        margin-bottom: 27px;

        border-bottom:
            1px solid
            var(--zdf-line);
    }

    .zd-footer__links {
        display: grid;

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

        column-gap: 25px;
        row-gap: 18px;
    }

    .zd-footer__link-group:last-child {
        grid-column: 1 / -1;
    }

    .zd-footer__newsletter {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 24px 0;
    }

    .zd-footer__newsletter-field {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .zd-footer__newsletter-button {
        min-width: 88px;
    }

    .zd-footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 19px 0 23px;
    }

    .zd-footer__copyright {
        justify-content: center;
    }

    .zd-footer__legal {
        justify-content: center;
    }
}


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

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

    .zd-footer__shell {
        padding:
            46px 32px 0;
    }

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

        column-gap: 40px;
        row-gap: 0;

        padding-bottom: 16px;
    }

    .zd-footer__brand-col {
        grid-column: 1 / -1;

        padding-bottom: 28px;
        margin-bottom: 0;

        border-bottom:
            1px solid
            var(--zdf-line);
    }

    .zd-footer__brand-description {
        max-width: 650px;
    }

    .zd-footer__column {
        padding-top: 27px;
        padding-bottom: 25px;
    }

    .zd-footer__quick-links,
    .zd-footer__contact {
        border-bottom:
            1px solid
            var(--zdf-line);
    }

    .zd-footer__newsletter {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.9fr);

        gap: 28px;
        padding: 23px 0;
    }

    .zd-footer__bottom {
        padding: 17px 0 20px;
    }
}


/* =========================================================
   LAPTOP
   1024 — 1279px
   ========================================================= */

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

    .zd-footer__shell {
        padding:
            48px 38px 0;
    }

    .zd-footer__main {
        grid-template-columns:
            minmax(205px, 1.25fr)
            minmax(135px, 0.85fr)
            minmax(175px, 1fr)
            minmax(155px, 0.9fr)
            minmax(155px, 0.9fr);

        gap: 22px;
    }

    .zd-footer__brand-description {
        font-size: 12px;
    }

    .zd-footer__link-group a,
    .zd-footer__support-list a {
        font-size: 13px;
    }

    .zd-footer__contact-copy strong {
        font-size: 12px;
    }

    .zd-footer__newsletter {
        gap: 30px;
    }
}


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

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

    .zd-footer__shell {
        padding:
            52px 52px 0;
    }

    .zd-footer__main {
        gap: 30px;
    }
}


/* =========================================================
   DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .zd-footer__shell {
        padding:
            56px 64px 0;
    }

    .zd-footer__main {
        gap: 42px;
    }

    .zd-footer__brand-description {
        max-width: 360px;
    }
}


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

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

    .zd-footer *,
    .zd-footer__status-dot {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   HERO  -  SUNRISE DOORWAY
   ========================================================== */

.zd-hero {
    --zd-hero-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --zd-hero-flip: 1;

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

    display: flex;
    flex-direction: column;

    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100svh - var(--nav-height));

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


/* ---------- Background ---------- */

.zd-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.zd-hero__bg::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: linear-gradient(90deg, var(--zd-hero-line) 1px, transparent 1px);
    background-size: calc(100% / 8) 100%;

    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 0, transparent 72%);
}

.zd-hero__glow {
    position: absolute;
    left: 50%;
    bottom: -38%;

    width: min(1100px, 150vw);
    aspect-ratio: 1;
    border-radius: 50%;

    translate: -50% 0;
    background: radial-gradient(circle, var(--zd-hero-glow) 0, transparent 62%);

    animation: zd-hero-glow-in 2.2s ease-out 0.9s both;
}


/* ---------- Layout ---------- */

.zd-hero__inner {
    position: relative;
    flex: 1 1 auto;

    width: min(100%, var(--container-width));
    margin-inline: auto;
    padding: clamp(20px, 4vw, 56px) var(--nav-padding-inline);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(22px, 3vw, 44px);
}

.zd-hero__stage { order: 1; }
.zd-hero__copy { order: 2; }
.zd-hero__columns { order: 3; }


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

.zd-hero__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.zd-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    max-width: 100%;
    margin: 0 0 clamp(14px, 2vw, 22px);
    padding: 7px 14px;

    border: 1px solid var(--zd-hero-border);
    border-radius: 999px;
    background: var(--zd-hero-chip-bg);

    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;

    animation: zd-hero-fade-up 0.8s var(--zd-hero-ease) 1s both;
}

.zd-hero__eyebrow-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: zd-hero-pulse 2.4s ease-out infinite;
}

.zd-hero__title {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(1.7rem, 0.9rem + 4.4vw, 3.1rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.005em;

    color: var(--color-text);
    overflow-wrap: break-word;
}

.zd-hero__line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.zd-hero__word {
    display: inline-block;
    animation: zd-hero-rise 0.9s var(--zd-hero-ease) calc(1.05s + var(--i, 0) * 0.09s) both;
}

.zd-hero__word-accent {
    color: var(--zd-hero-accent-text);
}

.zd-hero__lead {
    max-width: 46ch;
    margin: clamp(16px, 2vw, 22px) 0 0;

    color: var(--zd-hero-muted);
    font-size: clamp(15px, 0.9rem + 0.3vw, 18px);
    line-height: 1.65;

    animation: zd-hero-fade-up 0.8s var(--zd-hero-ease) 1.45s both;
}

.zd-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(20px, 2.6vw, 30px);

    animation: zd-hero-fade-up 0.8s var(--zd-hero-ease) 1.6s both;
}

.zd-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 12px 22px;

    border-radius: var(--radius-medium);
    border: 1.5px solid transparent;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.zd-hero__btn:hover { transform: translateY(-2px); }

.zd-hero__btn-primary {
    background: var(--zd-hero-btn-bg);
    color: var(--zd-hero-btn-text);
}

.zd-hero__btn-primary:hover { background: var(--zd-hero-btn-bg-hover); }

.zd-hero__btn-ghost {
    border-color: var(--zd-hero-ghost-border);
    color: var(--color-text);
}

.zd-hero__btn-ghost:hover { border-color: var(--color-accent); }

.zd-hero__btn-arrow {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.zd-hero__btn-primary:hover .zd-hero__btn-arrow { transform: translateX(3px); }

.zd-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 30px;

    width: 100%;
    margin: clamp(22px, 3vw, 32px) 0 0;
    padding: 18px 0 0;
    list-style: none;

    border-top: 1px solid var(--zd-hero-border);
    animation: zd-hero-fade-up 0.8s var(--zd-hero-ease) 1.75s both;
}

.zd-hero__stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zd-hero__stats strong {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text);
}

.zd-hero__stats span {
    color: var(--zd-hero-muted);
    font-size: 13px;
    line-height: 1.3;
}


/* ---------- Stage : doorway + sun ---------- */

.zd-hero__stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 14px;
}

.zd-hero__door {
    position: relative;
    overflow: hidden;

    width: clamp(150px, 46vw, 230px);
    aspect-ratio: 5 / 8;

    border-radius: 999px 999px 0 0;
    background: var(--zd-hero-card-bg);

    box-shadow:
        0 0 0 5px var(--color-background),
        0 0 0 8px var(--color-text),
        var(--zd-hero-door-shadow);

    animation: zd-hero-door-in 1s var(--zd-hero-ease) 0.8s both;
}

.zd-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.zd-hero__sun {
    position: absolute;
    inset-inline: 12%;
    bottom: 0;

    aspect-ratio: 2 / 1;
    border-radius: 999px 999px 0 0;

    background: var(--color-accent);
    opacity: 0.93;
    box-shadow: 0 0 60px rgba(229, 57, 53, 0.55);

    animation: zd-hero-sun-rise 1.8s ease-out 1.1s both;
}

.zd-hero__video-toggle {
    position: absolute;
    z-index: 4;
    inset-block-end: 10px;
    inset-inline-end: 10px;

    width: 36px;
    height: 36px;
    padding: 0;

    display: grid;
    place-items: center;

    border: 1px solid rgba(250, 250, 247, 0.4);
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.66);
    color: #FAFAF7;

    transition: background-color var(--transition-fast);
}

.zd-hero__video-toggle:hover { background: var(--zd-hero-btn-bg); }
.zd-hero__video-toggle svg { width: 16px; height: 16px; }
.zd-hero__icon-play { display: none; }
.zd-hero__video-toggle.is-paused .zd-hero__icon-play { display: block; }
.zd-hero__video-toggle.is-paused .zd-hero__icon-pause { display: none; }

.zd-hero__chip {
    position: absolute;
    z-index: 3;

    padding: 8px 14px;
    border: 1px solid var(--zd-hero-border);
    border-radius: 999px;

    background: var(--zd-hero-chip-bg);
    color: var(--color-text);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.16);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;

    animation:
        zd-hero-fade-up 0.7s var(--zd-hero-ease) 2s both,
        zd-hero-float 6s ease-in-out 2.7s infinite alternate;
}

.zd-hero__chip-a { inset-block-start: 16%; inset-inline-start: 0; }
.zd-hero__chip-b { inset-block-start: 46%; inset-inline-end: 0; animation-delay: 2.15s, 3s; }
.zd-hero__chip-c { inset-block-end: 13%; inset-inline-start: 2%; animation-delay: 2.3s, 3.4s; }


/* ---------- Photo columns (rows on small screens) ---------- */

.zd-hero__columns {
    --zd-hero-row-h: clamp(72px, 20vw, 104px);

    position: relative;
    display: grid;
    grid-auto-rows: var(--zd-hero-row-h);
    gap: 8px;
    overflow: hidden;

    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);

    animation: zd-hero-fade-up 0.9s var(--zd-hero-ease) 1.3s both;
}

.zd-hero__col {
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.zd-hero__col-third { display: none; }

.zd-hero__track {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;

    display: flex;
    flex-direction: row;
    width: max-content;

    will-change: transform;
    animation: zd-hero-slide 46s linear infinite;
}

.zd-hero__col-down .zd-hero__track { animation-direction: reverse; }

.zd-hero__set {
    display: flex;
    flex-direction: row;
    gap: 8px;
    height: 100%;
    padding-inline-end: 8px;
}

.zd-hero__card {
    flex: none;
    height: 100%;
    aspect-ratio: 3 / 4;
    margin: 0;

    border-radius: 10px;
    overflow: hidden;
    background: var(--zd-hero-card-bg);
}

.zd-hero__card img,
.zd-hero__card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}

.zd-hero__columns:hover .zd-hero__track { animation-play-state: paused; }
.zd-hero.is-offscreen .zd-hero__track { animation-play-state: paused; }


/* ---------- Belt path ---------- */

.zd-hero__belts {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--zd-hero-border);
    background: var(--color-background);
}

.zd-hero__belts-inner {
    width: min(100%, var(--container-width));
    margin-inline: auto;
    padding: 14px var(--nav-padding-inline) 18px;
}

.zd-hero__belts-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;

    animation: zd-hero-fade-up 0.7s var(--zd-hero-ease) 1.7s both;
}

.zd-hero__belts-caption,
.zd-hero__belts-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.zd-hero__belts-caption { font-weight: 600; color: var(--color-text); }
.zd-hero__belts-note { display: none; color: var(--zd-hero-muted); }

.zd-hero__belt-list {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zd-hero__belt {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;

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

    border-radius: 4px;
    font-size: clamp(10.5px, 2.8vw, 13px);
    font-weight: 600;
    line-height: 1;

    transform-origin: left center;
    transition: flex-grow var(--transition-medium);
    animation: zd-hero-belt-in 0.7s var(--zd-hero-ease) calc(1.8s + var(--b, 0) * 0.1s) both;
}

.zd-hero__belt:hover { flex-grow: 1.5; }

.zd-hero__belt-white { background: #FAFAF7; color: #111111; box-shadow: inset 0 0 0 1px var(--zd-hero-belt-edge); }
.zd-hero__belt-yellow { background: #F2C230; color: #111111; }
.zd-hero__belt-orange { background: #F28C28; color: #111111; }
.zd-hero__belt-green { background: #3FA34D; color: #111111; }
.zd-hero__belt-blue { background: #2F6FDB; color: #FAFAF7; }
.zd-hero__belt-black { background: #111111; color: #FAFAF7; box-shadow: inset 0 0 0 1px var(--zd-hero-belt-edge); }


/* ---------- Intro : shoji doors ---------- */

.zd-hero__shoji {
    --zd-hero-seal: clamp(84px, 16vw, 170px);

    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
}

.zd-hero__shoji-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.3%;
    overflow: hidden;

    background-color: var(--color-text);
    background-image:
        linear-gradient(var(--zd-hero-shoji-line) 0 2px, transparent 2px),
        linear-gradient(90deg, var(--zd-hero-shoji-line) 0 2px, transparent 2px);
    background-size: 100% 25%, 25% 100%;
}

.zd-hero__shoji-panel::after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--zd-hero-seal);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-accent);
    translate: 0 -50%;
}

.zd-hero__shoji-left {
    left: 0;
    animation: zd-hero-shoji-left 1.15s cubic-bezier(0.7, 0, 0.2, 1) 0.35s forwards;
}

.zd-hero__shoji-left::after { right: calc(var(--zd-hero-seal) / -2); }

.zd-hero__shoji-right {
    right: 0;
    animation: zd-hero-shoji-right 1.15s cubic-bezier(0.7, 0, 0.2, 1) 0.35s forwards;
}

.zd-hero__shoji-right::after { left: calc(var(--zd-hero-seal) / -2); }


/* ---------- Keyframes ---------- */

@keyframes zd-hero-shoji-left {
    0%   { transform: translateX(0); visibility: visible; }
    99%  { visibility: visible; }
    100% { transform: translateX(-101%); visibility: hidden; }
}

@keyframes zd-hero-shoji-right {
    0%   { transform: translateX(0); visibility: visible; }
    99%  { visibility: visible; }
    100% { transform: translateX(101%); visibility: hidden; }
}

@keyframes zd-hero-rise {
    from { transform: translateY(112%); }
    to   { transform: translateY(0); }
}

@keyframes zd-hero-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes zd-hero-door-in {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes zd-hero-sun-rise {
    from { transform: translateY(105%); }
    to   { transform: translateY(0); }
}

@keyframes zd-hero-glow-in {
    from { opacity: 0; transform: scale(0.55); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes zd-hero-belt-in {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

@keyframes zd-hero-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}

@keyframes zd-hero-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(229, 57, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}

@keyframes zd-hero-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% * var(--zd-hero-flip))); }
}

@keyframes zd-hero-climb {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}


/* ---------- Small phones ---------- */

@media (max-width: 479px) {

    .zd-hero__chip { display: none; }

    .zd-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }

    .zd-hero__stats { gap: 12px 22px; }

}


/* ---------- 768px + : two columns, stage beside the copy ---------- */

@media (min-width: 768px) {

    .zd-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    }

    .zd-hero__copy { order: 1; grid-column: 1; grid-row: 1; }
    .zd-hero__stage { order: 2; grid-column: 2; grid-row: 1; }
    .zd-hero__columns { order: 3; grid-column: 1 / -1; grid-row: 2; }

    .zd-hero__door { width: min(100%, 300px); }

    .zd-hero__title { font-size: clamp(1.9rem, 0.9rem + 4.2vw, 3.1rem); }

    .zd-hero__belts-note { display: block; }

    .zd-hero__belt { height: 40px; }

}


/* ---------- 1024px + : three columns, vertical photo columns ---------- */

@media (min-width: 1024px) {

    .zd-hero__inner {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 0.75fr)
            minmax(0, 0.9fr);
        gap: clamp(24px, 3vw, 48px);
    }

    .zd-hero__copy { grid-column: 1; grid-row: 1; }
    .zd-hero__stage { grid-column: 2; grid-row: 1; }
    .zd-hero__columns { grid-column: 3; grid-row: 1; }

    .zd-hero__title { font-size: clamp(1.9rem, 0.4rem + 2.7vw, 3.1rem); }

    .zd-hero__door {
        width: max(200px, min(100%, 360px, calc((100svh - var(--nav-height) - 230px) * 0.625)));
    }

    .zd-hero__columns {
        grid-auto-rows: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-self: stretch;
        min-height: 340px;

        -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);

        translate: calc(var(--zd-hero-mx, 0) * 10px) calc(var(--zd-hero-my, 0) * 8px);
        transition: translate 0.35s ease-out;
    }

    .zd-hero__col-third { display: block; }

    .zd-hero__track {
        inset-inline: 0;
        bottom: auto;
        flex-direction: column;
        width: auto;
        animation-name: zd-hero-climb;
        animation-duration: 52s;
    }

    .zd-hero__col-down .zd-hero__track { animation-delay: -14s; }
    .zd-hero__col-third .zd-hero__track { animation-delay: -28s; }

    .zd-hero__set {
        flex-direction: column;
        height: auto;
        padding-inline-end: 0;
        padding-bottom: 10px;
        gap: 10px;
    }

    .zd-hero__card { width: 100%; height: auto; }

    .zd-hero__chip-a { translate: calc(var(--zd-hero-mx, 0) * -14px) calc(var(--zd-hero-my, 0) * -10px); }
    .zd-hero__chip-b { translate: calc(var(--zd-hero-mx, 0) * 12px) calc(var(--zd-hero-my, 0) * 10px); }
    .zd-hero__chip-c { translate: calc(var(--zd-hero-mx, 0) * -10px) calc(var(--zd-hero-my, 0) * 12px); }

}


/* ---------- Reduced motion ---------- */

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

    .zd-hero *,
    .zd-hero *::before,
    .zd-hero *::after {
        animation: none !important;
        transition: none !important;
    }

    .zd-hero__shoji { display: none; }

}


/* =========================================================
   ZENDOJO — ABOUT HERO  (.zd-about-hero)
   "Ink on the Mat" Kinetic Mosaic Hero Section
   ========================================================= */

/* ---- Section shell ---- */
.zd-about-hero {
    position: relative;
    overflow: hidden;
    min-height: 100svh;
    background: var(--zd-ab-bg, var(--color-background));
    color: var(--zd-ab-text, var(--color-text));
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
}

/* ---- Cursor orb ---- */
.zd-about-hero__cursor-orb {
    position: fixed;
    top: 0; left: 0;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--zd-ab-orb, rgba(229,57,53,.13)) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    will-change: transform;
    filter: blur(2px);
    transition: opacity .3s ease;
}

/* ---- Ambient layer ---- */
.zd-about-hero__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.zd-about-hero__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(17,17,17,.07) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: .6;
}

html[data-theme="dark"] .zd-about-hero__grid {
    background-image: radial-gradient(rgba(250,250,247,.07) 1px, transparent 1px);
    opacity: .35;
}

/* Floating kanji */
.zd-about-hero__kanji {
    position: absolute;
    font-family: var(--font-display);
    color: transparent;
    -webkit-text-stroke: 1px var(--zd-ab-kanji, rgba(17,17,17,.06));
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

.zd-about-hero__kanji--1 {
    font-size: clamp(120px, 18vw, 260px);
    top: -4%; right: -3%;
    animation: zdAbKanjiDrift 18s ease-in-out infinite alternate;
}
.zd-about-hero__kanji--2 {
    font-size: clamp(80px, 11vw, 160px);
    bottom: 10%; left: 2%;
    animation: zdAbKanjiDrift 22s ease-in-out infinite alternate-reverse;
}
.zd-about-hero__kanji--3 {
    font-size: clamp(60px, 8vw, 120px);
    top: 40%; left: 38%;
    opacity: .5;
    animation: zdAbKanjiDrift 26s ease-in-out infinite alternate;
}

@keyframes zdAbKanjiDrift {
    0%   { transform: translate(0, 0) rotate(-3deg); }
    100% { transform: translate(20px, -24px) rotate(2deg); }
}

/* ---- Inner layout ---- */
.zd-about-hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: clamp(48px, 7vh, 96px) clamp(16px, 4vw, 64px) clamp(24px, 4vh, 56px);
}

/* =============================================
   LEFT — KINETIC PHOTO MOSAIC
============================================= */
.zd-about-hero__mosaic {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 14px;
    height: clamp(480px, 70vh, 760px);
}

/* Primary tall card */
.zd-about-hero__mosaic-primary {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    animation: zdAbSlideUp .9s cubic-bezier(.16,1,.3,1) .1s both;
}

.zd-about-hero__mosaic-primary .zd-about-hero__mosaic-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .7s ease;
}

.zd-about-hero__mosaic-primary:hover .zd-about-hero__mosaic-img {
    transform: scale(1.04);
}

/* Vertical scarlet accent bar */
.zd-about-hero__mosaic-bar {
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 5px;
    border-radius: 999px;
    background: #E53935;
    animation: zdAbBarGrow 1s cubic-bezier(.16,1,.3,1) .6s both;
    transform-origin: top center;
}

@keyframes zdAbBarGrow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* EST. 2019 chip */
.zd-about-hero__year-chip {
    position: absolute;
    bottom: 20px; left: 20px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(17,17,17,.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FAFAF7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Stack column */
.zd-about-hero__mosaic-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Tile base */
.zd-about-hero__mosaic-tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    flex: 1;
}

.zd-about-hero__mosaic-tile--a {
    animation: zdAbSlideDown .85s cubic-bezier(.16,1,.3,1) .25s both;
}
.zd-about-hero__mosaic-tile--b {
    animation: zdAbSlideDown .85s cubic-bezier(.16,1,.3,1) .4s both;
}

.zd-about-hero__mosaic-tile .zd-about-hero__mosaic-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.zd-about-hero__mosaic-tile:hover .zd-about-hero__mosaic-img {
    transform: scale(1.06);
}

.zd-about-hero__tile-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 14px 12px;
    background: linear-gradient(transparent, rgba(17,17,17,.88));
    color: #FAFAF7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Stat micro card */
.zd-about-hero__mosaic-card {
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--zd-ab-card, #FFFFFF);
    border: 1px solid var(--zd-ab-card-border, rgba(17,17,17,.12));
    box-shadow: 0 12px 36px rgba(17,17,17,.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: zdAbSlideUp .85s cubic-bezier(.16,1,.3,1) .5s both;
}

.zd-about-hero__card-num {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1;
    color: var(--zd-ab-accent, #E53935);
}

.zd-about-hero__card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zd-ab-text-soft, #333333);
}

/* =============================================
   RIGHT — COPY COLUMN
============================================= */
.zd-about-hero__copy {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 30px);
    animation: zdAbFadeRight .9s cubic-bezier(.16,1,.3,1) .15s both;
}

/* Eyebrow */
.zd-about-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--zd-ab-accent, #E53935);
}

.zd-about-hero__eyebrow-line {
    width: 32px; height: 2px;
    background: currentColor;
    display: block;
}

/* Title — word-by-word ink reveal */
.zd-about-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 5.2vw, 68px);
    line-height: 1.1;
    color: var(--zd-ab-text, #111111);
    font-weight: 400;
}

.zd-about-hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px) skewY(2deg);
    animation: zdAbWordReveal .7s cubic-bezier(.16,1,.3,1) calc(.3s + var(--wi, 0) * .1s) forwards;
}

.zd-about-hero__word--accent {
    position: relative;
    color: var(--zd-ab-accent, #E53935);
}

.zd-about-hero__word--bold {
    color: var(--zd-ab-text, #111111);
}

@keyframes zdAbWordReveal {
    to { opacity: 1; transform: translateY(0) skewY(0deg); }
}

/* Animated brushstroke SVG under "kicks" */
.zd-about-hero__brush {
    position: absolute;
    bottom: -6px; left: 0;
    width: 100%;
    height: 18px;
    overflow: visible;
    pointer-events: none;
}

.zd-about-hero__brush-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: zdAbBrush 1.3s cubic-bezier(.4,0,.2,1) 1.1s forwards;
}

@keyframes zdAbBrush {
    to { stroke-dashoffset: 0; }
}

/* Lead text */
.zd-about-hero__lead {
    margin: 0;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.7;
    color: var(--zd-ab-text-soft, #333333);
    max-width: 56ch;
}

/* Stat triplet */
.zd-about-hero__stats {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px 0;
    border-top: 1px solid var(--zd-ab-card-border, rgba(17,17,17,.12));
    border-bottom: 1px solid var(--zd-ab-card-border, rgba(17,17,17,.12));
}

.zd-about-hero__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline: 20px;
    opacity: 0;
    transform: translateY(16px);
    animation: zdAbStatIn .6s cubic-bezier(.16,1,.3,1) calc(.9s + var(--si, 0) * .15s) forwards;
}

.zd-about-hero__stat:first-child { padding-inline-start: 0; }

@keyframes zdAbStatIn {
    to { opacity: 1; transform: translateY(0); }
}

.zd-about-hero__stat-num {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.5vw, 42px);
    line-height: 1;
    color: var(--zd-ab-text, #111111);
    font-weight: 400;
}

.zd-about-hero__stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zd-ab-text-soft, #333333);
}

.zd-about-hero__stat-divider {
    width: 1px;
    height: 44px;
    background: var(--zd-ab-card-border, rgba(17,17,17,.14));
    flex-shrink: 0;
}

/* CTA buttons */
.zd-about-hero__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.zd-about-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .22s cubic-bezier(.16,1,.3,1);
}

.zd-about-hero__btn--primary {
    background: var(--zd-ab-accent, #E53935);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(229,57,53,.32);
}

.zd-about-hero__btn--primary:hover {
    background: #C92F2C;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(229,57,53,.44);
}

.zd-about-hero__btn--primary svg {
    transition: transform .2s ease;
}

.zd-about-hero__btn--primary:hover svg {
    transform: translateX(4px);
}

.zd-about-hero__btn--ghost {
    background: transparent;
    color: var(--zd-ab-text, #111111);
    border: 1.5px solid var(--zd-ab-card-border, rgba(17,17,17,.22));
}

.zd-about-hero__btn--ghost:hover {
    border-color: var(--zd-ab-accent, #E53935);
    color: var(--zd-ab-accent, #E53935);
    transform: translateY(-2px);
}

/* Values ticker strip */
.zd-about-hero__ticker-wrap {
    overflow: hidden;
    padding-block: 2px;
}

.zd-about-hero__ticker-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    animation: zdAbTickerScroll 20s linear infinite;
}

.zd-about-hero__ticker-track span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--zd-ab-text-soft, #333333);
    white-space: nowrap;
}

.zd-about-hero__ticker-track b {
    font-size: 10px;
    color: var(--zd-ab-accent, #E53935);
    font-weight: 900;
}

@keyframes zdAbTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* =============================================
   BOTTOM PHOTO STRIP
============================================= */
.zd-about-hero__strip {
    position: relative;
    z-index: 2;
    overflow: hidden;
    height: clamp(100px, 14vh, 160px);
    border-top: 1px solid var(--zd-ab-card-border, rgba(17,17,17,.1));
    background: var(--zd-ab-bg, var(--color-background));
}

.zd-about-hero__strip-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: max-content;
    gap: 8px;
    animation: zdAbStripScroll 28s linear infinite;
}

.zd-about-hero__strip-track img {
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    transition: transform .5s ease;
}

.zd-about-hero__strip-track img:hover {
    transform: scale(1.06);
    z-index: 2;
}

@keyframes zdAbStripScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --- Entry keyframes shared --- */
@keyframes zdAbSlideUp {
    from { opacity: 0; transform: translateY(44px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes zdAbSlideDown {
    from { opacity: 0; transform: translateY(-32px) scale(.96) rotate(1.5deg); }
    to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes zdAbFadeRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* =============================================
   RESPONSIVE — LAPTOP-L (≥ 1440px)
============================================= */
@media (min-width: 1440px) {
    .zd-about-hero__inner {
        gap: 72px;
    }
    .zd-about-hero__mosaic {
        height: 780px;
    }
}

/* =============================================
   RESPONSIVE — TABLET (768px – 1023px)
============================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .zd-about-hero__inner {
        grid-template-columns: 1fr;
        padding-top: clamp(36px, 5vh, 64px);
    }
    .zd-about-hero__mosaic {
        height: clamp(340px, 45vw, 480px);
    }
    .zd-about-hero__title {
        font-size: clamp(32px, 5.5vw, 52px);
    }
    .zd-about-hero__copy {
        animation: zdAbFadeRight 0s both; /* cancel horizontal on mobile */
        animation-name: zdAbSlideUp;
    }
    .zd-about-hero__kanji--3 { display: none; }
}

/* =============================================
   RESPONSIVE — MOBILE-L (≤ 767px)
============================================= */
@media (max-width: 767px) {
    .zd-about-hero__inner {
        grid-template-columns: 1fr;
        padding: 32px 16px 20px;
        gap: 28px;
    }
    .zd-about-hero__mosaic {
        height: clamp(280px, 58vw, 380px);
        order: -1;
    }
    .zd-about-hero__mosaic-stack {
        gap: 8px;
    }
    .zd-about-hero__mosaic-tile--a,
    .zd-about-hero__mosaic-tile--b {
        border-radius: 12px;
    }
    .zd-about-hero__mosaic-primary {
        border-radius: 12px;
    }
    .zd-about-hero__mosaic-card {
        padding: 12px 14px;
    }
    .zd-about-hero__card-num { font-size: 24px; }
    .zd-about-hero__title {
        font-size: clamp(26px, 7vw, 38px);
    }
    .zd-about-hero__stats {
        flex-wrap: wrap;
        gap: 16px 0;
    }
    .zd-about-hero__stat {
        flex: 0 0 50%;
        padding-inline: 0;
        padding-right: 16px;
    }
    .zd-about-hero__stat-divider { display: none; }
    .zd-about-hero__cta {
        gap: 12px;
    }
    .zd-about-hero__btn { padding: 12px 22px; }
    .zd-about-hero__kanji--1,
    .zd-about-hero__kanji--2,
    .zd-about-hero__kanji--3 { display: none; }
    .zd-about-hero__cursor-orb { display: none; }
}

/* =============================================
   RESPONSIVE — MOBILE-M (≤ 480px)
============================================= */
@media (max-width: 480px) {
    .zd-about-hero__mosaic {
        height: clamp(240px, 55vw, 320px);
    }
    .zd-about-hero__title { font-size: clamp(24px, 7.5vw, 34px); }
    .zd-about-hero__stat-num { font-size: clamp(22px, 6vw, 32px); }
}

/* =============================================
   RESPONSIVE — MOBILE-S (≤ 360px)
============================================= */
@media (max-width: 360px) {
    .zd-about-hero__title { font-size: 22px; }
    .zd-about-hero__lead { font-size: 14px; }
    .zd-about-hero__btn--ghost { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .zd-about-hero__word,
    .zd-about-hero__stat,
    .zd-about-hero__mosaic-primary,
    .zd-about-hero__mosaic-tile--a,
    .zd-about-hero__mosaic-tile--b,
    .zd-about-hero__mosaic-card,
    .zd-about-hero__copy,
    .zd-about-hero__mosaic-bar {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .zd-about-hero__brush-path { stroke-dashoffset: 0; }
    .zd-about-hero__ticker-track,
    .zd-about-hero__strip-track { animation: none !important; }
}


/* =========================================================
   ZENDOJO — ABOUT HERO  (.zd-about-hero)
   "Ink on the Mat" Kinetic Mosaic Hero Section
   ========================================================= */

/* ---- Section shell ---- */
.zd-about-hero {
    position: relative;
    overflow: hidden;
    min-height: 100svh;
    background: var(--zd-ab-bg, var(--color-background));
    color: var(--zd-ab-text, var(--color-text));
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
}

/* ---- Cursor orb ---- */
.zd-about-hero__cursor-orb {
    position: fixed;
    top: 0; left: 0;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--zd-ab-orb, rgba(229,57,53,.13)) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    will-change: transform;
    filter: blur(2px);
    transition: opacity .3s ease;
}

/* ---- Ambient layer ---- */
.zd-about-hero__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.zd-about-hero__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(17,17,17,.07) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: .6;
}

html[data-theme="dark"] .zd-about-hero__grid {
    background-image: radial-gradient(rgba(250,250,247,.07) 1px, transparent 1px);
    opacity: .35;
}

/* Floating kanji */
.zd-about-hero__kanji {
    position: absolute;
    font-family: var(--font-display);
    color: transparent;
    -webkit-text-stroke: 1px var(--zd-ab-kanji, rgba(17,17,17,.06));
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

.zd-about-hero__kanji--1 {
    font-size: clamp(120px, 18vw, 260px);
    top: -4%; right: -3%;
    animation: zdAbKanjiDrift 18s ease-in-out infinite alternate;
}
.zd-about-hero__kanji--2 {
    font-size: clamp(80px, 11vw, 160px);
    bottom: 10%; left: 2%;
    animation: zdAbKanjiDrift 22s ease-in-out infinite alternate-reverse;
}
.zd-about-hero__kanji--3 {
    font-size: clamp(60px, 8vw, 120px);
    top: 40%; left: 38%;
    opacity: .5;
    animation: zdAbKanjiDrift 26s ease-in-out infinite alternate;
}

@keyframes zdAbKanjiDrift {
    0%   { transform: translate(0, 0) rotate(-3deg); }
    100% { transform: translate(20px, -24px) rotate(2deg); }
}

/* ---- Inner layout ---- */
.zd-about-hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: clamp(48px, 7vh, 96px) clamp(16px, 4vw, 64px) clamp(24px, 4vh, 56px);
}

/* =============================================
   LEFT — KINETIC PHOTO MOSAIC
============================================= */
.zd-about-hero__mosaic {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 14px;
    height: clamp(480px, 70vh, 760px);
}

/* Primary tall card */
.zd-about-hero__mosaic-primary {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    animation: zdAbSlideUp .9s cubic-bezier(.16,1,.3,1) .1s both;
}

.zd-about-hero__mosaic-primary .zd-about-hero__mosaic-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .7s ease;
}

.zd-about-hero__mosaic-primary:hover .zd-about-hero__mosaic-img {
    transform: scale(1.04);
}

/* Vertical scarlet accent bar */
.zd-about-hero__mosaic-bar {
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 5px;
    border-radius: 999px;
    background: #E53935;
    animation: zdAbBarGrow 1s cubic-bezier(.16,1,.3,1) .6s both;
    transform-origin: top center;
}

@keyframes zdAbBarGrow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* EST. 2019 chip */
.zd-about-hero__year-chip {
    position: absolute;
    bottom: 20px; left: 20px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(17,17,17,.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FAFAF7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Stack column */
.zd-about-hero__mosaic-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Tile base */
.zd-about-hero__mosaic-tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    flex: 1;
}

.zd-about-hero__mosaic-tile--a {
    animation: zdAbSlideDown .85s cubic-bezier(.16,1,.3,1) .25s both;
}
.zd-about-hero__mosaic-tile--b {
    animation: zdAbSlideDown .85s cubic-bezier(.16,1,.3,1) .4s both;
}

.zd-about-hero__mosaic-tile .zd-about-hero__mosaic-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.zd-about-hero__mosaic-tile:hover .zd-about-hero__mosaic-img {
    transform: scale(1.06);
}

.zd-about-hero__tile-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 14px 12px;
    background: linear-gradient(transparent, rgba(17,17,17,.88));
    color: #FAFAF7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Stat micro card */
.zd-about-hero__mosaic-card {
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--zd-ab-card, #FFFFFF);
    border: 1px solid var(--zd-ab-card-border, rgba(17,17,17,.12));
    box-shadow: 0 12px 36px rgba(17,17,17,.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: zdAbSlideUp .85s cubic-bezier(.16,1,.3,1) .5s both;
}

.zd-about-hero__card-num {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1;
    color: var(--zd-ab-accent, #E53935);
}

.zd-about-hero__card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zd-ab-text-soft, #333333);
}

/* =============================================
   RIGHT — COPY COLUMN
============================================= */
.zd-about-hero__copy {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 30px);
    animation: zdAbFadeRight .9s cubic-bezier(.16,1,.3,1) .15s both;
}

/* Eyebrow */
.zd-about-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--zd-ab-accent, #E53935);
}

.zd-about-hero__eyebrow-line {
    width: 32px; height: 2px;
    background: currentColor;
    display: block;
}

/* Title — word-by-word ink reveal */
.zd-about-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 5.2vw, 68px);
    line-height: 1.1;
    color: var(--zd-ab-text, #111111);
    font-weight: 400;
}

.zd-about-hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px) skewY(2deg);
    animation: zdAbWordReveal .7s cubic-bezier(.16,1,.3,1) calc(.3s + var(--wi, 0) * .1s) forwards;
}

.zd-about-hero__word--accent {
    position: relative;
    color: var(--zd-ab-accent, #E53935);
}

.zd-about-hero__word--bold {
    color: var(--zd-ab-text, #111111);
}

@keyframes zdAbWordReveal {
    to { opacity: 1; transform: translateY(0) skewY(0deg); }
}

/* Animated brushstroke SVG under "kicks" */
.zd-about-hero__brush {
    position: absolute;
    bottom: -6px; left: 0;
    width: 100%;
    height: 18px;
    overflow: visible;
    pointer-events: none;
}

.zd-about-hero__brush-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: zdAbBrush 1.3s cubic-bezier(.4,0,.2,1) 1.1s forwards;
}

@keyframes zdAbBrush {
    to { stroke-dashoffset: 0; }
}

/* Lead text */
.zd-about-hero__lead {
    margin: 0;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.7;
    color: var(--zd-ab-text-soft, #333333);
    max-width: 56ch;
}

/* Stat triplet */
.zd-about-hero__stats {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px 0;
    border-top: 1px solid var(--zd-ab-card-border, rgba(17,17,17,.12));
    border-bottom: 1px solid var(--zd-ab-card-border, rgba(17,17,17,.12));
}

.zd-about-hero__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline: 20px;
    opacity: 0;
    transform: translateY(16px);
    animation: zdAbStatIn .6s cubic-bezier(.16,1,.3,1) calc(.9s + var(--si, 0) * .15s) forwards;
}

.zd-about-hero__stat:first-child { padding-inline-start: 0; }

@keyframes zdAbStatIn {
    to { opacity: 1; transform: translateY(0); }
}

.zd-about-hero__stat-num {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.5vw, 42px);
    line-height: 1;
    color: var(--zd-ab-text, #111111);
    font-weight: 400;
}

.zd-about-hero__stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zd-ab-text-soft, #333333);
}

.zd-about-hero__stat-divider {
    width: 1px;
    height: 44px;
    background: var(--zd-ab-card-border, rgba(17,17,17,.14));
    flex-shrink: 0;
}

/* CTA buttons */
.zd-about-hero__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.zd-about-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .22s cubic-bezier(.16,1,.3,1);
}

.zd-about-hero__btn--primary {
    background: var(--zd-ab-accent, #E53935);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(229,57,53,.32);
}

.zd-about-hero__btn--primary:hover {
    background: #C92F2C;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(229,57,53,.44);
}

.zd-about-hero__btn--primary svg {
    transition: transform .2s ease;
}

.zd-about-hero__btn--primary:hover svg {
    transform: translateX(4px);
}

.zd-about-hero__btn--ghost {
    background: transparent;
    color: var(--zd-ab-text, #111111);
    border: 1.5px solid var(--zd-ab-card-border, rgba(17,17,17,.22));
}

.zd-about-hero__btn--ghost:hover {
    border-color: var(--zd-ab-accent, #E53935);
    color: var(--zd-ab-accent, #E53935);
    transform: translateY(-2px);
}

/* Values ticker strip */
.zd-about-hero__ticker-wrap {
    overflow: hidden;
    padding-block: 2px;
}

.zd-about-hero__ticker-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    animation: zdAbTickerScroll 20s linear infinite;
}

.zd-about-hero__ticker-track span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--zd-ab-text-soft, #333333);
    white-space: nowrap;
}

.zd-about-hero__ticker-track b {
    font-size: 10px;
    color: var(--zd-ab-accent, #E53935);
    font-weight: 900;
}

@keyframes zdAbTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* =============================================
   BOTTOM PHOTO STRIP
============================================= */
.zd-about-hero__strip {
    position: relative;
    z-index: 2;
    overflow: hidden;
    height: clamp(100px, 14vh, 160px);
    border-top: 1px solid var(--zd-ab-card-border, rgba(17,17,17,.1));
    background: var(--zd-ab-bg, var(--color-background));
}

.zd-about-hero__strip-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: max-content;
    gap: 8px;
    animation: zdAbStripScroll 28s linear infinite;
}

.zd-about-hero__strip-track img {
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    transition: transform .5s ease;
}

.zd-about-hero__strip-track img:hover {
    transform: scale(1.06);
    z-index: 2;
}

@keyframes zdAbStripScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --- Entry keyframes shared --- */
@keyframes zdAbSlideUp {
    from { opacity: 0; transform: translateY(44px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes zdAbSlideDown {
    from { opacity: 0; transform: translateY(-32px) scale(.96) rotate(1.5deg); }
    to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes zdAbFadeRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* =============================================
   RESPONSIVE — LAPTOP-L (≥ 1440px)
============================================= */
@media (min-width: 1440px) {
    .zd-about-hero__inner {
        gap: 72px;
    }
    .zd-about-hero__mosaic {
        height: 780px;
    }
}

/* =============================================
   RESPONSIVE — TABLET (768px – 1023px)
============================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .zd-about-hero__inner {
        grid-template-columns: 1fr;
        padding-top: clamp(36px, 5vh, 64px);
    }
    .zd-about-hero__mosaic {
        height: clamp(340px, 45vw, 480px);
    }
    .zd-about-hero__title {
        font-size: clamp(32px, 5.5vw, 52px);
    }
    .zd-about-hero__copy {
        animation: zdAbFadeRight 0s both; /* cancel horizontal on mobile */
        animation-name: zdAbSlideUp;
    }
    .zd-about-hero__kanji--3 { display: none; }
}

/* =============================================
   RESPONSIVE — MOBILE-L (≤ 767px)
============================================= */
@media (max-width: 767px) {
    .zd-about-hero__inner {
        grid-template-columns: 1fr;
        padding: 32px 16px 20px;
        gap: 28px;
    }
    .zd-about-hero__mosaic {
        height: clamp(280px, 58vw, 380px);
        order: -1;
    }
    .zd-about-hero__mosaic-stack {
        gap: 8px;
    }
    .zd-about-hero__mosaic-tile--a,
    .zd-about-hero__mosaic-tile--b {
        border-radius: 12px;
    }
    .zd-about-hero__mosaic-primary {
        border-radius: 12px;
    }
    .zd-about-hero__mosaic-card {
        padding: 12px 14px;
    }
    .zd-about-hero__card-num { font-size: 24px; }
    .zd-about-hero__title {
        font-size: clamp(26px, 7vw, 38px);
    }
    .zd-about-hero__stats {
        flex-wrap: wrap;
        gap: 16px 0;
    }
    .zd-about-hero__stat {
        flex: 0 0 50%;
        padding-inline: 0;
        padding-right: 16px;
    }
    .zd-about-hero__stat-divider { display: none; }
    .zd-about-hero__cta {
        gap: 12px;
    }
    .zd-about-hero__btn { padding: 12px 22px; }
    .zd-about-hero__kanji--1,
    .zd-about-hero__kanji--2,
    .zd-about-hero__kanji--3 { display: none; }
    .zd-about-hero__cursor-orb { display: none; }
}

/* =============================================
   RESPONSIVE — MOBILE-M (≤ 480px)
============================================= */
@media (max-width: 480px) {
    .zd-about-hero__mosaic {
        height: clamp(240px, 55vw, 320px);
    }
    .zd-about-hero__title { font-size: clamp(24px, 7.5vw, 34px); }
    .zd-about-hero__stat-num { font-size: clamp(22px, 6vw, 32px); }
}

/* =============================================
   RESPONSIVE — MOBILE-S (≤ 360px)
============================================= */
@media (max-width: 360px) {
    .zd-about-hero__title { font-size: 22px; }
    .zd-about-hero__lead { font-size: 14px; }
    .zd-about-hero__btn--ghost { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .zd-about-hero__word,
    .zd-about-hero__stat,
    .zd-about-hero__mosaic-primary,
    .zd-about-hero__mosaic-tile--a,
    .zd-about-hero__mosaic-tile--b,
    .zd-about-hero__mosaic-card,
    .zd-about-hero__copy,
    .zd-about-hero__mosaic-bar {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .zd-about-hero__brush-path { stroke-dashoffset: 0; }
    .zd-about-hero__ticker-track,
    .zd-about-hero__strip-track { animation: none !important; }
}

/* =========================================================
   INSTRUCTORS HERO: "SENSEI ORBIT"  ("ih-")
   ========================================================= */

.ih {
    --ih-cw: 150px;                               /* card width  */
    --ih-ch: calc(var(--ih-cw) * 1.3);            /* card height */
    --ih-r:  calc(var(--ih-cw) * 1.1);            /* ring radius */

    position: relative;
    overflow: hidden;
    padding-top: clamp(28px, 6vw, 72px);
    background: var(--ih-bg);
    color: var(--ih-text);
    font-family: var(--font-body);
}

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

.ih button:focus-visible,
.ih a:focus-visible,
.ih .ih-carousel:focus-visible {
    outline: 3px solid var(--ih-focus);
    outline-offset: 3px;
    box-shadow: none;
}

.ih-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-width, 1440px);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}

.ih-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
}

/* ---------- Background ---------- */
.ih-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ih-waves-box {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 25%, transparent 92%);
}

.ih-waves {
    position: absolute;
    inset: -64px;
    background-image: radial-gradient(circle at 50% 100%,
        transparent 0 28%, var(--ih-pat) 28% 31%,
        transparent 31% 46%, var(--ih-pat) 46% 49%,
        transparent 49% 64%, var(--ih-pat) 64% 67%,
        transparent 67%);
    background-size: 64px 32px;
    animation: ihDrift 26s linear infinite;
}

.ih-sun {
    position: absolute;
    inset-inline-end: 4%;
    top: 4%;
    width: clamp(200px, 40vw, 540px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ih-sun) 0%, transparent 68%);
    translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -12px);
    animation: ihPulse 6s ease-in-out infinite;
}

.ih-ghost {
    position: absolute;
    inset-inline: 0;
    bottom: clamp(24px, 6vw, 90px);
    display: flex;
    justify-content: center;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(88px, 19vw, 360px);
    line-height: 0.8;
    white-space: nowrap;
    translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 8px);
}

.ih-ghost span {
    display: block;
    color: transparent;
    -webkit-text-stroke: 2px var(--ih-ghost);
}

.ih-sparks {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ih-sparks i {
    position: absolute;
    bottom: -20px;
    width: var(--z, 8px);
    height: var(--z, 8px);
    background: var(--c, #E53935);
    opacity: 0;
    rotate: 45deg;
    animation: ihRise var(--t, 12s) linear infinite;
    animation-delay: var(--w, 0s);
}

/* ---------- Copy ---------- */
.ih-copy {
    min-width: 0;
}

.ih-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ih-accent-text);
}

.ih-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.ih-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 5.2vw, 78px);
    font-weight: 400;
    font-style: normal;
    line-height: 1.03;
    letter-spacing: -.025em;
    color: var(--color-text, #111111);
    text-wrap: balance;
}

.ih-w {
    display: inline-block;
    margin-bottom: -0.14em;
    padding-bottom: 0.14em;
    overflow: hidden;
    vertical-align: top;
}

.ih-wi {
    display: inline-block;
}

.ih-mark {
    padding-inline: 0.1em;
    background: linear-gradient(var(--ih-mark), var(--ih-mark)) no-repeat;
    background-size: 100% 42%;
    background-position: 0 92%;
    transition: background-size 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1s;
}

.ih-lead {
    max-width: 54ch;
    margin: 18px 0 0;
    font-size: clamp(15px, 2.2vw, 19px);
    line-height: 1.65;
    color: var(--ih-text-soft);
}

.ih-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.ih-btn {
    display: inline-flex;
    flex: 1 1 200px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 15px 24px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--ih-btn-bg);
    color: var(--ih-btn-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ih-btn:hover {
    background: var(--ih-btn-hover);
    transform: translateY(-2px);
}

.ih-btn svg {
    flex: 0 0 auto;
    transition: translate 0.2s ease;
}

.ih-btn:hover svg {
    translate: 4px 0;
}

.ih-btn--ghost {
    background: transparent;
    border-color: var(--ih-ghost-border);
    color: var(--ih-text);
}

.ih-btn--ghost:hover {
    background: var(--ih-tag-bg);
}

.ih-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.ih-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 8px;
    border: 1px solid var(--ih-line);
    border-radius: 14px;
    background: var(--ih-stat-bg);
    text-align: center;
}

.ih-stat-num {
    font-family: var(--font-display);
    font-size: clamp(24px, 7vw, 40px);
    line-height: 1;
    color: var(--ih-accent-text);
}

.ih-stat-label {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ih-text);
}

/* ---------- 3D stage ---------- */
.ih-stage {
    width: 100%;
    max-width: 640px;
    min-width: 0;
    margin-inline: auto;
}

.ih-carousel {
    position: relative;
    padding-top: 34px;
    overflow: hidden;
    border-radius: 24px;
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.ih-carousel.is-drag {
    cursor: grabbing;
}

.ih-persp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--ih-ch) + 30px);
    perspective: calc(var(--ih-cw) * 5);
}

.ih-persp::after {
    content: "";
    position: absolute;
    inset-inline: 16%;
    bottom: 4px;
    height: 20px;
    border-radius: 50%;
    background: var(--ih-floor);
    filter: blur(12px);
}

.ih-ring {
    position: relative;
    z-index: 1;
    width: var(--ih-cw);
    height: var(--ih-ch);
    margin: 0;
    padding: 0;
    list-style: none;
    transform-style: preserve-3d;
    transform:
        translateZ(calc(var(--ih-r) * -1))
        rotateX(calc(var(--my, 0) * -5deg))
        rotateY(calc(var(--rot, 0) * 1deg));
}

.ih-ring > li {
    position: absolute;
    inset: 0;
    transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--ih-r));
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ih-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--ih-card-border);
    border-radius: clamp(14px, 2vw, 22px);
    background: var(--ih-photo-bg);
    box-shadow: var(--ih-card-shadow);
    cursor: pointer;
    transition: border-color 0.4s ease;
}

.ih-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 25%);
    pointer-events: none;
    -webkit-user-drag: none;
}

.ih-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: calc(var(--d, 0) * 0.6);
    pointer-events: none;
}

.ih-card.is-front {
    border-color: #E53935;
}

.ih-card-belt {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    height: 8px;
    background: var(--b);
    box-shadow: 0 -1px 0 rgba(250, 250, 247, 0.5);
}

/* "Osu!" bubble + shockwave */
.ih-osu {
    position: absolute;
    left: 50%;
    top: 4px;
    z-index: 4;
    translate: -50% 0;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--ih-pill-bg);
    color: var(--ih-pill-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
}

.ih-osu.is-go {
    animation: ihPop 1.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.ih-wave {
    position: absolute;
    left: 50%;
    top: calc(34px + var(--ih-ch) / 2);
    z-index: 0;
    width: calc(var(--ih-ch) * 1.1);
    aspect-ratio: 1;
    border: 3px solid #E53935;
    border-radius: 50%;
    translate: -50% -50%;
    opacity: 0;
    pointer-events: none;
}

.ih-wave.is-go {
    animation: ihBurst 0.9s ease-out;
}

/* Controls */
.ih-ctrls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.ih-arrow {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--ih-ctrl-border);
    border-radius: 50%;
    background: var(--ih-ctrl-bg);
    color: var(--ih-ctrl-icon);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ih-arrow:hover {
    background: var(--ih-ctrl-hover-bg);
    color: var(--ih-ctrl-hover-icon);
    transform: scale(1.08);
}

.ih-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ih-dot {
    position: relative;
    width: 24px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
}

.ih-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid var(--ih-dot);
    border-radius: 999px;
    translate: -50% -50%;
    transition: width 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.ih-dot.is-active::before {
    width: 22px;
    background: #C92F2C;
    border-color: #C92F2C;
}

/* Instructor panel (all bios share one cell: no height jump) */
.ih-panel {
    display: grid;
    margin-top: 12px;
    padding: clamp(16px, 3vw, 26px);
    border: 1px solid var(--ih-panel-border);
    border-radius: clamp(18px, 2.4vw, 26px);
    background: var(--ih-panel);
    box-shadow: var(--ih-panel-shadow);
}

.ih-info {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    translate: 0 12px;
    transition: opacity 0.45s ease, translate 0.45s ease, visibility 0s linear 0.45s;
}

.ih-info.is-active {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
}

.ih-info > * {
    margin: 0;
}

.ih-info.is-active > * {
    animation: ihUp 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ih-info.is-active > :nth-child(2) { animation-delay: 0.06s; }
.ih-info.is-active > :nth-child(3) { animation-delay: 0.12s; }
.ih-info.is-active > :nth-child(4) { animation-delay: 0.18s; }
.ih-info.is-active > :nth-child(5) { animation-delay: 0.24s; }

.ih-role {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ih-pill-bg);
    color: var(--ih-pill-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.ih-name {
    font-family: var(--font-display);
    font-size: clamp(24px, 5.4vw, 36px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ih-text);
}

.ih-belt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ih-text);
}

.ih-belt-bar {
    display: block;
    flex: 0 0 auto;
    width: 76px;
    height: 12px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ih-meter);
    outline: 1.5px solid var(--ih-line-strong);
}

.ih-belt-bar i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--b);
    transform-origin: left center;
}

.ih-info.is-active .ih-belt-bar i {
    animation: ihFill 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

.ih-quote {
    padding-inline-start: 12px;
    border-inline-start: 3px solid #E53935;
    font-size: clamp(14.5px, 1.8vw, 17px);
    line-height: 1.6;
    color: var(--ih-text-soft);
}

.ih-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    list-style: none;
}

.ih-tags li {
    padding: 5px 11px;
    border: 1px solid var(--ih-tag-border);
    border-radius: 999px;
    background: var(--ih-tag-bg);
    color: var(--ih-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

/* ---------- Ribbon ---------- */
.ih-ribbon {
    position: relative;
    z-index: 2;
    margin-top: clamp(32px, 5vw, 64px);
}

.ih-belts {
    display: flex;
    height: 8px;
}

.ih-belts i {
    flex: 1;
    background: var(--c);
    box-shadow: inset 0 0 0 1px var(--ih-line-strong);
}

.ih-view {
    overflow: hidden;
    background: var(--ih-ribbon-bg);
    color: var(--ih-ribbon-text);
}

.ih-track {
    display: flex;
    width: max-content;
}

.ih-set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ih-item {
    padding: 14px clamp(18px, 3vw, 44px);
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

.ih-star {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    background: var(--ih-ribbon-star);
    rotate: 45deg;
}

/* ---------- Entrance (JS ready) ---------- */
.ih--ready .ih-fx {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--d, 0) * 90ms + 250ms);
}

.ih--go .ih-fx {
    opacity: 1;
    translate: 0 0;
}

.ih--ready .ih-wi {
    transform: translateY(112%);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--k, 0) * 80ms + 250ms);
}

.ih--go .ih-wi {
    transform: none;
}

.ih--ready .ih-mark {
    background-size: 0% 42%;
}

.ih--go .ih-mark {
    background-size: 100% 42%;
}

.ih--ready .ih-ghost span {
    translate: 0 60%;
    opacity: 0;
    transition: translate 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.1s ease;
    transition-delay: calc(var(--k, 0) * 110ms + 400ms);
}

.ih--go .ih-ghost span {
    translate: 0 0;
    opacity: 1;
}

.ih--ready .ih-persp {
    opacity: 0;
    scale: 0.7;
    transition: opacity 0.9s ease 0.3s, scale 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}

.ih--go .ih-persp {
    opacity: 1;
    scale: 1;
}

.ih--ready .ih-belts i {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--k, 0) * 90ms + 700ms);
}

.ih--go .ih-belts i {
    transform: scaleX(1);
}

.ih--ready .ih-view {
    opacity: 0;
    transition: opacity 0.8s ease 1.2s;
}

.ih--go .ih-view {
    opacity: 1;
}

/* ---------- Keyframes ---------- */
@keyframes ihSlide { to { transform: translateX(-50%); } }
@keyframes ihDrift { to { transform: translateX(64px); } }
@keyframes ihPulse {
    0%, 100% { scale: 1;    opacity: 0.8; }
    50%      { scale: 1.1;  opacity: 1; }
}
@keyframes ihRise {
    0%   { opacity: 0;   transform: translateY(0); }
    10%  { opacity: 0.9; }
    90%  { opacity: 0.6; }
    100% { opacity: 0;   transform: translateY(-110vh) translateX(var(--x, 30px)); }
}
@keyframes ihUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ihFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ihPop {
    0%   { opacity: 0; transform: translateY(10px) scale(0.6); }
    25%  { opacity: 1; transform: translateY(0) scale(1.08); }
    70%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: translateY(-6px) scale(1); }
}
@keyframes ihBurst {
    0%   { opacity: 0.8; scale: 0.3; }
    100% { opacity: 0;   scale: 1.7; }
}

/* =========================================================
   Mobile M  (375px and up)
   ========================================================= */
@media (min-width: 375px) {
    .ih { --ih-cw: 168px; }
    .ih-stat-label { font-size: 13px; }
}

/* =========================================================
   Mobile L  (425px and up)
   ========================================================= */
@media (min-width: 425px) {
    .ih { --ih-cw: 188px; }
    .ih-btn { padding: 16px 30px; }
}

/* =========================================================
   Tablet  (768px and up)
   ========================================================= */
@media (min-width: 768px) {
    .ih { --ih-cw: 228px; }

    .ih-stat {
        padding: 16px 12px;
    }

    .ih-stat-label { font-size: 14px; }
    .ih-btn { flex: 0 0 auto; }
    .ih-panel { padding: 24px 28px; }
}

/* =========================================================
   Laptop  (1024px and up)
   ========================================================= */
@media (min-width: 1024px) {
    .ih { --ih-cw: clamp(200px, 17vw, 250px); }

    .ih {
        min-height: calc(100svh - var(--nav-height, 76px));
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: clamp(24px, 4vw, 56px);
    }

    .ih-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
        gap: clamp(32px, 4vw, 72px);
    }

    .ih-stage {
        max-width: none;
    }

    .ih-ribbon {
        margin-top: clamp(28px, 4vw, 56px);
    }
}

/* =========================================================
   Laptop L  (1440px and up)
   ========================================================= */
@media (min-width: 1440px) {
    .ih { --ih-cw: 280px; }

    .ih-lead { font-size: 20px; }
    .ih-panel { padding: 28px 32px; }
    .ih-quote { font-size: 18px; }
}

/* Short laptop screens: keep the hero compact */
@media (min-width: 1024px) and (max-height: 760px) {
    .ih { --ih-cw: clamp(170px, 14vw, 210px); }
    .ih-stats { margin-top: 20px; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {

    .ih *,
    .ih *::before,
    .ih *::after {
        animation: none !important;
        transition: none !important;
    }

    .ih--ready .ih-fx,
    .ih--ready .ih-persp,
    .ih--ready .ih-view,
    .ih--ready .ih-ghost span {
        opacity: 1;
        translate: none;
        scale: 1;
    }

    .ih--ready .ih-wi,
    .ih--ready .ih-belts i { transform: none; }
    .ih--ready .ih-mark { background-size: 100% 42%; }
    .ih-info { translate: none; }
}


/* =========================================================
   A DAY AT THE DOJO  ("dd-")
   Default = calm stacked layout (no JS / reduced motion /
   short screens). JS adds .dd--pinned for the cinematic mode.
   ========================================================= */

.dd {
    --dd-top: var(--nav-height, 76px);          /* set to 0px if your header is not sticky/fixed */
    --dd-rounds: 5;
    --dd-stage-h: calc(100vh - var(--dd-top));
    --dd-step: 70vh;                             /* scroll distance per round */
    --dd-hud: 62px;
    --dd-ground-h: clamp(34px, 6vw, 72px);

    position: relative;
    background: var(--dd-bg, var(--color-background));
    color: var(--dd-text, var(--color-text));
    font-family: var(--font-body);
}

@supports (height: 100svh) {
    .dd {
        --dd-stage-h: calc(100svh - var(--dd-top));
        --dd-step: 70svh;
    }
}

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

.dd button:focus-visible,
.dd a:focus-visible {
    outline: 3px solid var(--dd-focus);
    outline-offset: 3px;
    box-shadow: none;
}

.dd-wrap {
    width: 100%;
    max-width: var(--container-width, 1440px);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}

/* ---------- Intro ---------- */
.dd-intro {
    padding-block: clamp(56px, 9vw, 112px) clamp(28px, 5vw, 56px);
}

.dd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dd-accent-text);
}

.dd-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.dd-title {
    max-width: 18ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 7.4vw, 68px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--dd-text);
    text-wrap: balance;
}

.dd-mark {
    padding-inline: 0.1em;
    background: linear-gradient(var(--dd-mark), var(--dd-mark)) no-repeat;
    background-size: 100% 42%;
    background-position: 0 92%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
}

.dd-lead {
    max-width: 56ch;
    margin: 18px 0 0;
    font-size: clamp(15px, 2.2vw, 19px);
    line-height: 1.65;
    color: var(--dd-text-soft);
}

.dd-cue {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dd-text-soft);
}

.dd-mouse {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 34px;
    border: 2px solid currentColor;
    border-radius: 12px;
}

.dd-mouse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 4px;
    height: 7px;
    margin-left: -2px;
    border-radius: 2px;
    background: #E53935;
    animation: ddCue 1.6s ease-in-out infinite;
}

/* ---------- Stacked layout (default) ---------- */
.dd-track,
.dd-stage {
    position: relative;
}

.dd-sky,
.dd-hud,
.dd-ground,
.dd-bar,
.dd-ghost {
    display: none;
}

.dd-rounds {
    display: grid;
    gap: clamp(24px, 5vw, 48px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) clamp(40px, 6vw, 80px);
    width: 100%;
    max-width: var(--container-width, 1440px);
    list-style: none;
}

.dd-round {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.dd-photo {
    position: relative;
}

.dd-photo-in {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: clamp(16px, 2.4vw, 26px);
    background: var(--dd-photo-bg);
}

.dd-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 30%);
}

.dd-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: clamp(16px, 3vw, 32px);
    border: 1px solid var(--dd-panel-border);
    border-radius: clamp(18px, 2.4vw, 28px);
    background: var(--dd-panel);
    box-shadow: var(--dd-panel-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dd-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dd-accent-text);
}

.dd-time::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E53935;
}

.dd-word {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 9vw, 56px);
    font-weight: 400;
    line-height: 1;
    color: var(--dd-text);
}

.dd-w {
    display: inline-block;
    margin-inline-end: 0.25em;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
    overflow: hidden;
    white-space: nowrap;
}

.dd-l {
    display: inline-block;
}

.dd-outcome {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 100%;
    margin: 0;
    padding: 9px 14px;
    border-radius: 14px;
    background: var(--dd-pill-bg);
    color: var(--dd-pill-text);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}

.dd-outcome span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dd-pill-label);
}

.dd-text {
    max-width: 54ch;
    margin: 0;
    font-size: clamp(14.5px, 1.7vw, 18px);
    line-height: 1.6;
    color: var(--dd-text-soft);
}

/* ---------- Finale ---------- */
.dd-finale {
    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 9vw, 120px);
    background: var(--dd-fin-bg);
    color: var(--dd-fin-text);
    text-align: center;
}

.dd-finale .dd-wrap {
    position: relative;
    z-index: 1;
}

.dd-roof {
    display: block;
    width: min(86vw, 460px);
    height: auto;
    margin: 0 auto clamp(24px, 4vw, 44px);
    overflow: visible;
}

.dd-roof path {
    fill: none;
    stroke: var(--dd-fin-text);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dd-roof-sun {
    fill: #E53935;
    transform-box: fill-box;
    transform-origin: center;
}

.dd-fin-title {
    max-width: 20ch;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: clamp(26px, 5.6vw, 54px);
    font-weight: 400;
    line-height: 1.12;
    color: var(--dd-fin-text);
    text-wrap: balance;
}

.dd-fin-text {
    max-width: 48ch;
    margin: 16px auto 28px;
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.65;
    color: var(--dd-fin-soft);
}

.dd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 15px 26px;
    border-radius: 999px;
    background: var(--dd-btn-bg);
    color: var(--dd-btn-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dd-btn:hover {
    background: var(--dd-btn-hover);
    transform: translateY(-2px);
}

.dd-btn svg {
    flex: 0 0 auto;
    transition: translate 0.2s ease;
}

.dd-btn:hover svg {
    translate: 4px 0;
}

/* ---------- Stars (sky + finale) ---------- */
.dd-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dd-stars i {
    position: absolute;
    width: var(--z, 2px);
    height: var(--z, 2px);
    border-radius: 50%;
    background: #FAFAF7;
    opacity: 0.25;
    animation: ddTwinkle 3.2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

/* ---------- Entrance animations (JS ready) ---------- */
.dd--ready .dd-reveal {
    opacity: 0;
    translate: 0 30px;
    transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--d, 0) * 100ms);
}

.dd--ready .dd-reveal.is-in {
    opacity: 1;
    translate: 0 0;
}

.dd--ready .dd-intro .dd-mark {
    background-size: 0% 42%;
}

.dd--ready .dd-intro .dd-title.is-in .dd-mark {
    background-size: 100% 42%;
}

/* Stacked-mode round reveal */
.dd--ready:not(.dd--pinned) .dd-round {
    opacity: 0;
    translate: 0 36px;
    transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dd--ready:not(.dd--pinned) .dd-round.is-on {
    opacity: 1;
    translate: 0 0;
}

/* Word letters + copy stagger (both modes) */
.dd--ready .dd-l {
    transform: translateY(112%);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dd--ready .dd-round.is-on .dd-l {
    transform: none;
    transition-delay: calc(var(--k, 0) * 45ms + 200ms);
}

.dd--ready .dd-copy > *:not(.dd-word) {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.6s ease, translate 0.6s ease;
}

.dd--ready .dd-round.is-on .dd-copy > *:not(.dd-word) {
    opacity: 1;
    translate: 0 0;
}

.dd--ready .dd-round.is-on .dd-time    { transition-delay: 0.1s; }
.dd--ready .dd-round.is-on .dd-outcome { transition-delay: 0.55s; }
.dd--ready .dd-round.is-on .dd-text    { transition-delay: 0.7s; }

/* Finale roof draws itself */
.dd--ready .dd-roof path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.3s cubic-bezier(0.5, 0, 0.2, 1);
}

.dd--ready .dd-roof path:nth-of-type(2) { transition-delay: 0.3s; }
.dd--ready .dd-roof path:nth-of-type(3) { transition-delay: 0.6s; }
.dd--ready .dd-roof path:nth-of-type(4) { transition-delay: 0.9s; }
.dd--ready .dd-roof path:nth-of-type(5) { transition-delay: 1.1s; }

.dd--ready .dd-roof-sun {
    scale: 0;
    transition: scale 1s cubic-bezier(0.3, 1.4, 0.5, 1) 1.2s;
}

.dd--ready .dd-finale.is-in .dd-roof path { stroke-dashoffset: 0; }
.dd--ready .dd-finale.is-in .dd-roof-sun  { scale: 1; }

/* =========================================================
   PINNED (cinematic) MODE
   ========================================================= */
.dd--pinned .dd-track {
    height: calc(var(--dd-stage-h) + var(--dd-rounds) * var(--dd-step));
}

.dd--pinned .dd-stage {
    position: sticky;
    top: var(--dd-top);
    height: var(--dd-stage-h);
    overflow: hidden;
    isolation: isolate;
    background: var(--dd-sky, var(--dd-sky-1));
}

.dd--pinned .dd-sky,
.dd--pinned .dd-ground,
.dd--pinned .dd-bar {
    display: block;
}

.dd--pinned .dd-hud {
    display: flex;
}

.dd--pinned .dd-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.dd-stars--sky {
    opacity: var(--dd-star-op, 0);
}

.dd-sun {
    position: absolute;
    left: calc(var(--sx, 8) * 1%);
    top: calc(var(--sy, 70) * 1%);
    width: clamp(52px, 9vw, 120px);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: #E53935;
}

.dd-sun::before {
    content: "";
    position: absolute;
    inset: -24%;
    border-radius: 50%;
    background: rgba(229, 57, 53, 0.25);
    animation: ddPulse 3.6s ease-in-out infinite;
}

.dd-cloud {
    position: absolute;
    left: -24%;
    width: clamp(90px, 14vw, 190px);
    height: clamp(24px, 3.6vw, 40px);
    border-radius: 999px;
    background: var(--dd-cloud);
    animation: ddDrift 60s linear infinite;
}

.dd-cloud::before {
    content: "";
    position: absolute;
    left: 22%;
    bottom: 40%;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: inherit;
}

.dd-cloud--1 { top: 14%; }
.dd-cloud--2 { top: 30%; animation-duration: 84s; animation-delay: -30s; scale: 0.75; }
.dd-cloud--3 { top: 44%; animation-duration: 110s; animation-delay: -70s; scale: 0.55; }

.dd-hill {
    position: absolute;
    left: -16%;
    right: -16%;
    bottom: 0;
}

.dd-hill--1 {
    height: 46%;
    background: var(--dd-hill-1);
    clip-path: polygon(0 100%, 0 58%, 10% 44%, 22% 56%, 36% 26%, 50% 50%, 64% 32%, 78% 54%, 90% 40%, 100% 56%, 100% 100%);
    translate: calc((var(--dd-p, 0) - 0.5) * -9%) 0;
}

.dd-hill--2 {
    height: 32%;
    background: var(--dd-hill-2);
    clip-path: polygon(0 100%, 0 52%, 14% 64%, 30% 40%, 46% 60%, 60% 42%, 76% 62%, 90% 46%, 100% 58%, 100% 100%);
    translate: calc((var(--dd-p, 0) - 0.5) * 12%) 0;
}

.dd-ground {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    height: var(--dd-ground-h);
    background: var(--dd-ground);
}

.dd-bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    height: 4px;
}

.dd-bar i {
    display: block;
    width: 100%;
    height: 100%;
    background: #E53935;
    transform: scaleX(var(--dd-p, 0));
    transform-origin: left center;
}

/* HUD */
.dd-hud {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 4;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px clamp(16px, 4vw, 48px);
}

.dd-count {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--dd-text);
}

.dd-count b {
    font-family: var(--font-display);
    font-size: clamp(26px, 4.4vw, 40px);
    font-weight: 400;
    line-height: 1;
}

.dd-count span {
    font-size: 14px;
    font-weight: 600;
    color: var(--dd-text-soft);
}

.dd-rail {
    position: relative;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-dot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid var(--dd-dot);
    border-radius: 50%;
    background: var(--dd-dot-bg);
    color: var(--dd-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, scale 0.3s ease;
}

.dd-dot:hover {
    scale: 1.12;
}

.dd-dot.is-active {
    background: #C92F2C;
    border-color: #C92F2C;
    color: #FFFFFF;
    scale: 1.1;
}

/* Rounds on the stage */
.dd--pinned .dd-rounds {
    position: relative;
    z-index: 3;
    display: grid;
    height: 100%;
    padding-block: calc(var(--dd-hud) + 4px) calc(var(--dd-ground-h) + 14px);
    padding-inline: clamp(16px, 4vw, 48px);
    gap: 0;
}

.dd--pinned .dd-round {
    position: relative;
    grid-area: 1 / 1;
    align-self: center;
    justify-items: center;
    gap: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.dd--pinned .dd-round.is-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.dd--pinned .dd-ghost {
    display: block;
    position: absolute;
    z-index: -1;
    inset-inline-end: 2%;
    bottom: 18%;
    font-family: var(--font-display);
    font-size: clamp(140px, 36vw, 440px);
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 2px var(--dd-ghost);
    pointer-events: none;
    translate: 0 calc(var(--dd-lp, 0) * -50px);
}

.dd--pinned .dd-photo {
    width: min(40vw, 24svh);
    min-width: 96px;
    aspect-ratio: 1;
    translate: 0 calc((0.5 - var(--dd-lp, 0)) * 22px);
}

.dd--pinned .dd-photo-in {
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
}

.dd--pinned .dd-photo::before,
.dd--pinned .dd-photo::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease 0.5s;
}

.dd--pinned .dd-photo::before {
    inset: -9px;
    border: 2px dashed var(--dd-ring);
    animation: ddSpin 26s linear infinite;
}

.dd--pinned .dd-photo::after {
    inset: -17px;
    border: 3px solid transparent;
    border-top-color: #E53935;
    animation: ddSpin 7s linear infinite reverse;
}

.dd--pinned .dd-round.is-on .dd-photo::before,
.dd--pinned .dd-round.is-on .dd-photo::after {
    opacity: 1;
}

.dd--ready.dd--pinned .dd-photo-in {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1) 0.1s;
}

.dd--ready.dd--pinned .dd-round.is-on .dd-photo-in {
    clip-path: circle(50% at 50% 50%);
}

.dd--ready.dd--pinned .dd-photo img {
    scale: 1.5;
    transition: scale 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}

.dd--ready.dd--pinned .dd-round.is-on .dd-photo img {
    scale: 1;
}

.dd--pinned .dd-copy {
    width: 100%;
    max-width: 640px;
    gap: 10px;
    padding: 14px;
}

.dd--pinned .dd-word {
    font-size: clamp(30px, 9vw, 40px);
}

.dd--pinned .dd-outcome {
    padding: 7px 12px;
    font-size: 14px;
}

.dd--pinned .dd-text {
    font-size: 14.5px;
    line-height: 1.5;
}

/* ---------- Keyframes ---------- */
@keyframes ddCue {
    0%   { opacity: 0; translate: 0 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; translate: 0 12px; }
}
@keyframes ddSpin  { to { rotate: 360deg; } }
@keyframes ddDrift { to { translate: 150vw 0; } }
@keyframes ddPulse {
    0%, 100% { transform: scale(1);    opacity: 0.7; }
    50%      { transform: scale(1.18); opacity: 1; }
}
@keyframes ddTwinkle {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1; }
}

/* =========================================================
   Mobile M  (375px and up)
   ========================================================= */
@media (min-width: 375px) {
    .dd-dot { width: 32px; height: 32px; }
    .dd--pinned .dd-copy { padding: 16px; }
}

/* =========================================================
   Mobile L  (425px and up)
   ========================================================= */
@media (min-width: 425px) {
    .dd-btn { padding: 16px 32px; }
    .dd--pinned .dd-word { font-size: clamp(34px, 9vw, 44px); }
    .dd--pinned .dd-text { font-size: 15px; }
}

/* =========================================================
   Tablet  (768px and up)
   ========================================================= */
@media (min-width: 768px) {

    .dd {
        --dd-hud: 72px;
    }

    /* Stacked mode: two columns, alternating */
    .dd-round {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(20px, 3vw, 40px);
    }

    .dd-round:nth-child(even) .dd-photo {
        order: 2;
    }

    /* Pinned: rail goes vertical on the right edge */
    .dd--pinned .dd-hud {
        inset: 0;
        padding: 16px clamp(16px, 4vw, 48px);
        align-items: flex-start;
        pointer-events: none;
    }

    .dd--pinned .dd-rail {
        position: absolute;
        inset-inline-end: clamp(14px, 2.4vw, 36px);
        top: 50%;
        flex-direction: column;
        gap: 16px;
        translate: 0 -50%;
        pointer-events: auto;
    }

    .dd-rail::before,
    .dd-rail::after {
        content: "";
        position: absolute;
        inset-block: 16px;
        left: 50%;
        width: 2px;
        margin-left: -1px;
        background: var(--dd-rail);
    }

    .dd-rail::after {
        background: #C92F2C;
        transform: scaleY(var(--dd-p, 0));
        transform-origin: top center;
    }

    .dd-rail li {
        position: relative;
        z-index: 1;
    }

    .dd-dot { width: 34px; height: 34px; font-size: 13px; }

    .dd--pinned .dd-rounds {
        padding-inline-end: calc(clamp(16px, 4vw, 48px) + 64px);
    }

    .dd--pinned .dd-photo {
        width: min(56vw, 38svh, 460px);
    }

    .dd--pinned .dd-ghost {
        font-size: clamp(200px, 30vw, 460px);
    }

    .dd--pinned .dd-copy {
        padding: clamp(18px, 3vw, 36px);
        gap: 12px;
    }

    .dd--pinned .dd-word {
        font-size: clamp(44px, min(8vw, 11svh), 84px);
    }

    .dd--pinned .dd-outcome { padding: 9px 16px; font-size: 15px; }
    .dd--pinned .dd-text    { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.6; }
}

/* Landscape-style screens (tablet landscape, laptops): two columns */
@media (min-width: 768px) and (min-aspect-ratio: 5/4) {

    .dd--pinned .dd-round {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: clamp(24px, 4vw, 64px);
        justify-items: stretch;
        align-items: center;
    }

    .dd--pinned .dd-copy {
        order: 1;
        max-width: none;
    }

    .dd--pinned .dd-photo {
        order: 2;
        justify-self: center;
        width: min(100%, calc(var(--dd-stage-h) * 0.66), 500px);
    }

    .dd--pinned .dd-word {
        font-size: clamp(44px, min(7vw, 11svh), 104px);
    }
}

/* =========================================================
   Laptop  (1024px and up)
   ========================================================= */
@media (min-width: 1024px) {

    .dd--pinned .dd-copy { max-width: 720px; }
    .dd--pinned .dd-text { font-size: 17px; }
}

/* =========================================================
   Laptop L  (1440px and up)
   ========================================================= */
@media (min-width: 1440px) {

    .dd-lead { font-size: 20px; }
    .dd--pinned .dd-copy { padding: 40px; }
    .dd--pinned .dd-text { font-size: 18px; }
    .dd--pinned .dd-outcome { font-size: 16px; }
}

/* ---------- Reduced motion: calm stacked layout, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {

    .dd *,
    .dd *::before,
    .dd *::after {
        animation: none !important;
        transition: none !important;
    }

    .dd--ready .dd-reveal,
    .dd--ready .dd-round,
    .dd--ready .dd-copy > * {
        opacity: 1;
        translate: none;
    }

    .dd--ready .dd-l { transform: none; }
    .dd--ready .dd-intro .dd-mark { background-size: 100% 42%; }
    .dd--ready .dd-roof path { stroke-dashoffset: 0; }
    .dd--ready .dd-roof-sun { scale: 1; }
}

/* =========================================================
   INSTRUCTORS: THE BELT TRAIL
   ========================================================= */
.rk{--rk-ink:var(--color-text,#111);--rk-bg:var(--color-background,#FAFAF7);--rk-mute:rgba(17,17,17,.68);--rk-line:rgba(17,17,17,.12);--rk-card:rgba(17,17,17,.035);--rk-red:var(--color-accent,#E53935);--rk-red-text:#C62828;--rk-dir:1;position:relative;overflow-x:clip;color:var(--rk-ink);background:var(--rk-bg);padding:clamp(64px,8vw,130px) var(--nav-padding-inline,24px)}
.rk-wrap{max-width:var(--container-width,1440px);margin-inline:auto}
.rk-head{max-width:820px;margin:0 auto clamp(40px,6vw,88px);text-align:center}
.rk-eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:0 0 18px;font:500 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--rk-red-text)}
.rk-eyebrow i{width:28px;height:2px;border-radius:2px;background:var(--rk-red)}
.rk-title{margin:0;font:400 clamp(32px,5.2vw,78px)/1.03 var(--font-display);letter-spacing:-.025em}
.rk-title em{font-style:normal;color:var(--rk-red)}
.rk-lead{margin:20px auto 0;max-width:600px;color:var(--rk-mute);font:400 clamp(16px,1.3vw,18px)/1.65 var(--font-body)}
.rk-roster{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(24px,3vw,36px)}
.rk-chip{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border:1px solid var(--rk-line);border-radius:999px;background:var(--rk-card);color:var(--rk-ink);font:500 14px/1 var(--font-body);text-decoration:none;transition:background-color .25s,border-color .25s,transform .25s}
.rk-chip img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.rk-chip:hover{transform:translateY(-2px);border-color:var(--rk-red)}
.rk-chip.is-active{background:var(--rk-ink);color:var(--rk-bg);border-color:var(--rk-ink)}
/* trail */
.rk-list{--p:0;position:relative;display:grid;gap:clamp(64px,9vw,150px)}
.rk-line{position:absolute;top:0;bottom:0;inset-inline-start:13px;width:2px;background:var(--rk-line);border-radius:2px}
.rk-line::after{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(#F4C430,#E8833A,#43A047,#1E88E5,#E53935);transform:scaleY(var(--p));transform-origin:top}
.rk-ch{scroll-margin-top:96px;position:relative;isolation:isolate;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:22px;--sx:0px}
.rk-no{position:absolute;z-index:-1;top:-.12em;inset-inline-end:0;font:400 clamp(110px,26vw,300px)/1 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--rk-line);user-select:none}
.rk-node{grid-column:1;grid-row:1/3;justify-self:center;align-self:start;margin-top:8px;width:20px;height:20px;border-radius:50%;background:var(--c);border:4px solid var(--rk-bg);box-shadow:0 0 0 2px var(--c);z-index:1}
.rk-node::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c);animation:rkPing 2.4s ease-out infinite}
.rk-photo{grid-column:2;position:relative;margin:0;width:min(100%,380px);aspect-ratio:4/5;filter:drop-shadow(calc(var(--rk-dir)*12px) 12px 0 color-mix(in srgb,var(--c) 38%,transparent))}
.rk-shape{width:100%;height:100%;overflow:hidden;background:var(--rk-card)}
.rk-shape img{width:100%;height:100%;object-fit:cover;object-position:var(--pos);animation:rkKen 16s ease-in-out infinite alternate}
.rk-ch--1 .rk-shape{border-radius:999px 999px 28px 28px}
.rk-ch--2 .rk-photo{aspect-ratio:1}.rk-ch--2 .rk-shape{border-radius:50%}
.rk-ch--3 .rk-shape{clip-path:polygon(50% 0,100% 20%,100% 100%,0 100%,0 20%)}
.rk-ch--4 .rk-photo{aspect-ratio:3/4}.rk-ch--4 .rk-shape{border-radius:999px}
.rk-ch--5 .rk-photo{aspect-ratio:1/1.1}.rk-ch--5 .rk-shape{border-radius:42% 58% 55% 45%/48% 42% 58% 52%}
.rk-badge{position:absolute;inset-inline-start:-6px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--rk-ink);color:var(--rk-bg);font:500 13px/1 var(--font-body);box-shadow:0 10px 24px -10px rgba(0,0,0,.55)}
.rk-badge i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--rk-bg)}
.rk-body{grid-column:2;display:grid;gap:18px;align-content:start}
.rk-role{margin:0;font:500 13px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--rk-red-text)}
.rk-name{margin:0;font:400 clamp(30px,4.6vw,60px)/1.04 var(--font-display);letter-spacing:-.02em}
.rk-quote{margin:0;padding-inline-start:16px;border-inline-start:4px solid var(--c);font:500 clamp(17px,1.5vw,21px)/1.55 var(--font-body)}
.rk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none}
.rk-stats li{display:grid;gap:4px;padding:14px 14px;border:1px solid var(--rk-line);border-radius:16px;background:var(--rk-card)}
.rk-stats b{font:400 clamp(24px,2.8vw,38px)/1 var(--font-display)}
.rk-stats span{font:400 12px/1.3 var(--font-body);color:var(--rk-mute)}
.rk-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.rk-box{padding:18px;border:1px solid var(--rk-line);border-radius:18px;background:var(--rk-card)}
.rk-box h4{margin:0 0 10px;font:500 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--rk-mute)}
.rk-box p{margin:0;font:400 15px/1.6 var(--font-body)}
.rk-meters{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.rk-meters li{display:grid;grid-template-columns:68px 1fr 28px;align-items:center;gap:10px;font:500 13px/1 var(--font-body)}
.rk-meters i{display:block;height:8px;border-radius:8px;background:var(--rk-line);position:relative;overflow:hidden}
.rk-meters i::after{content:"";position:absolute;inset:0;width:var(--v);border-radius:8px;background:var(--c);transition:width 1.2s cubic-bezier(.2,.8,.2,1) .7s}
.rk-meters em{font-style:normal;text-align:end;color:var(--rk-mute)}
.rk-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.rk-tags li{padding:8px 14px;border:1px solid var(--rk-line);border-radius:999px;font:500 13px/1 var(--font-body)}
.rk-fact{display:flex;gap:12px;align-items:baseline;margin:0;font:400 15px/1.55 var(--font-body);color:var(--rk-mute)}
.rk-fact b{flex:none;padding:5px 10px 7px;border-radius:8px;background:var(--rk-ink);color:var(--rk-bg);box-shadow:inset 0 -3px 0 var(--c);font:500 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.rk-when{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font:400 14px/1 var(--font-body)}
.rk-when b{font-weight:500;color:var(--rk-mute);margin-inline-end:4px}
.rk-when span{padding:8px 14px;border-radius:10px;background:var(--rk-ink);color:var(--rk-bg);font-weight:500}
/* band */
.rk-band{margin-top:clamp(64px,9vw,130px);padding:clamp(22px,3vw,40px);border:1px solid var(--rk-line);border-radius:26px;background:var(--rk-card);display:grid;gap:26px}
.rk-band__nums{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rk-band__nums p{display:grid;gap:6px;margin:0}
.rk-band__nums b{font:400 clamp(28px,4vw,56px)/1 var(--font-display);color:var(--rk-ink)}
.rk-band__nums span{font:400 14px/1.4 var(--font-body);color:var(--rk-mute)}
.rk-trust{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:22px 0 0;list-style:none;border-top:1px solid var(--rk-line)}
.rk-trust li{position:relative;padding:9px 16px 9px 34px;border:1px solid var(--rk-line);border-radius:999px;font:500 13px/1 var(--font-body)}
.rk-trust li::before{content:"";position:absolute;inset-inline-start:15px;top:50%;width:9px;height:5px;margin-top:-4px;border-inline-start:2px solid #3fa45b;border-bottom:2px solid #3fa45b;transform:rotate(-45deg)}
/* slide-in animations (armed by JS) */
.rk.is-armed .rk-head>*{opacity:0;translate:0 30px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.rk.is-armed .rk-head.is-in>*{opacity:1;translate:0 0}
.rk-head>:nth-child(2){transition-delay:.1s}.rk-head>:nth-child(3){transition-delay:.2s}.rk-head>:nth-child(4){transition-delay:.3s}
.rk.is-armed .rk-photo{opacity:0;translate:calc(var(--rk-dir)*var(--sx)) 50px;scale:.94;transition:opacity .9s ease,translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1)}
.rk.is-armed .rk-body>*{opacity:0;translate:calc(var(--rk-dir)*var(--sx)*-1) 28px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.rk.is-armed .rk-node{scale:0;transition:scale .6s cubic-bezier(.3,1.7,.5,1) .2s}
.rk.is-armed .rk-ch.is-in .rk-photo,.rk.is-armed .rk-ch.is-in .rk-body>*{opacity:1;translate:0 0;scale:1}
.rk.is-armed .rk-ch.is-in .rk-node{scale:1}
.rk-body>:nth-child(1){transition-delay:.15s!important}.rk-body>:nth-child(2){transition-delay:.25s!important}.rk-body>:nth-child(3){transition-delay:.35s!important}.rk-body>:nth-child(4){transition-delay:.45s!important}.rk-body>:nth-child(5){transition-delay:.55s!important}.rk-body>:nth-child(6){transition-delay:.65s!important}.rk-body>:nth-child(7){transition-delay:.75s!important}.rk-body>:nth-child(8){transition-delay:.85s!important}
.rk.is-armed .rk-meters i::after{width:0}.rk.is-armed .rk-ch.is-in .rk-meters i::after{width:var(--v)}
.rk.is-armed .rk-shape img{scale:1.3;transition:scale 1.6s cubic-bezier(.2,.8,.2,1) .2s}.rk.is-armed .rk-ch.is-in .rk-shape img{scale:1}
.rk.is-armed .rk-band{opacity:0;translate:0 40px;transition:opacity .9s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.rk.is-armed .rk-band.is-in{opacity:1;translate:0 0}
@keyframes rkKen{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes rkPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.4);opacity:0}}
/* tablet */
@media (min-width:768px){
 .rk-line{inset-inline-start:23px}
 .rk-ch{grid-template-columns:48px minmax(0,1fr);column-gap:24px}
 .rk-photo{width:min(100%,400px)}
 .rk-stats li{padding:16px}
}
/* laptop and up: alternating chapters around a centre trail */
@media (min-width:1024px){
 .rk-line{inset-inline-start:calc(50% - 1px)}
 .rk-ch{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);column-gap:0;--sx:-70px;align-items:start}
 .rk-node{grid-column:2;grid-row:1;justify-self:center;margin-top:12px}
 .rk-photo{grid-column:1;grid-row:1;position:sticky;top:110px;justify-self:center;width:min(100%,430px)}
 .rk-body{grid-column:3;grid-row:1;padding-inline-start:clamp(8px,2vw,40px)}
 .rk-ch:nth-of-type(even){--sx:70px}
 .rk-ch:nth-of-type(even) .rk-photo{grid-column:3}
 .rk-ch:nth-of-type(even) .rk-body{grid-column:1;padding-inline-start:0;padding-inline-end:clamp(8px,2vw,40px)}
 .rk-no{top:-.2em;inset-inline-end:auto;inset-inline-start:0;font-size:clamp(180px,20vw,300px)}
 .rk-ch:nth-of-type(even) .rk-no{inset-inline-start:auto;inset-inline-end:0}
}
@media (min-width:1440px){.rk-photo{width:min(100%,480px)}}
/* mobile fine-tuning */
@media (max-width:767px){
 .rk-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .rk-stats li{padding:12px 10px}
 .rk-stats b{font-size:22px}
 .rk-band__nums{grid-template-columns:repeat(2,1fr)}
 .rk-meters li{grid-template-columns:64px 1fr 26px}
 .rk-fact{flex-direction:column;gap:8px}
}
@media (max-width:424px){
 .rk-ch{grid-template-columns:22px minmax(0,1fr);column-gap:10px}
 .rk-line{inset-inline-start:10px}.rk-node{width:16px;height:16px}
 .rk-badge{font-size:12px;padding:9px 13px}
 .rk-box{padding:14px}.rk-cols{grid-template-columns:1fr}
 .rk-stats{grid-template-columns:1fr}
 .rk-stats li{grid-template-columns:96px 1fr;align-items:baseline;gap:10px;padding:12px 14px}
 .rk-stats b{font-size:24px}
}
@media (max-width:374px){
 .rk{padding-inline:14px}
 .rk-stats li{grid-template-columns:88px 1fr}.rk-stats b{font-size:21px}
 .rk-chip{font-size:13px}
 .rk-meters li{grid-template-columns:58px 1fr 24px;gap:8px}
}
@media (prefers-reduced-motion:reduce){.rk *,.rk *::before,.rk *::after{animation:none!important;transition:none!important}}

/* =========================================================
   ABOUT PAGE — ZENDOJO PROOF / VALUES SECTION
   Scoped to .zd-about-proof
   ========================================================= */
.zd-about-proof {
    position: relative;
    overflow: hidden;
    padding: clamp(52px, 7vw, 104px) var(--nav-padding-inline, clamp(18px, 5vw, 72px));
    background: var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}

.zd-about-proof *,
.zd-about-proof *::before,
.zd-about-proof *::after {
    box-sizing: border-box;
}

.zd-about-proof__inner {
    width: min(1280px, 100%);
    margin-inline: auto;
}

.zd-about-proof__values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    letter-spacing: .13em;
}

.zd-about-proof__values i {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--color-accent, #E53935);
    transform: rotate(45deg);
}

.zd-about-proof__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: center;
    gap: clamp(42px, 7vw, 96px);
    padding-top: clamp(40px, 5vw, 68px);
}

.zd-about-proof__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    padding: 0 clamp(4px, 2vw, 24px);
}

.zd-about-proof__photo {
    position: relative;
    aspect-ratio: 1 / 1.08;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 5px solid var(--color-surface, #FAFAF7);
    border-radius: 20px;
    background: var(--zd-hero-card-bg, #E9E9E4);
    box-shadow: 0 18px 42px rgba(17, 17, 17, .13);
}

.zd-about-proof__photo--two,
.zd-about-proof__photo--four {
    transform: translateY(28px);
}

.zd-about-proof__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.zd-about-proof__photo:hover img {
    transform: scale(1.045);
}

.zd-about-proof__copy {
    min-width: 0;
}

.zd-about-proof__eyebrow {
    margin: 0 0 14px;
    color: var(--zd-hero-accent-text, var(--color-accent, #C92F2C));
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.5;
}

.zd-about-proof__title {
    max-width: 13ch;
    margin: 0;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(40px, 5vw, 66px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.zd-about-proof__title span {
    display: block;
    color: var(--zd-hero-accent-text, var(--color-accent, #C92F2C));
}

.zd-about-proof__lead {
    max-width: 58ch;
    margin: 20px 0 28px;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.75;
}

.zd-about-proof__features {
    border-top: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
}

.zd-about-proof__feature {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
}

.zd-about-proof__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--color-accent, #E53935);
    color: var(--zd-hero-accent-text, var(--color-accent, #C92F2C));
    font-size: 12px;
    font-weight: 600;
}

.zd-about-proof__feature h3 {
    margin: 0 0 6px;
    color: var(--color-text, #111111);
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 600;
    line-height: 1.35;
}

.zd-about-proof__feature p {
    margin: 0;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.7;
}

.zd-about-proof__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 24px;
    margin-top: 28px;
}

.zd-about-proof__button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 22px;
    border: 1px solid var(--zd-hero-btn-bg, #C92F2C);
    border-radius: 999px;
    background: var(--zd-hero-btn-bg, #C92F2C);
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}

.zd-about-proof__button:hover {
    background: var(--zd-hero-btn-bg-hover, #A9231F);
    transform: translateY(-2px);
}

.zd-about-proof__link {
    color: var(--color-text, #111111);
    font-size: 15px;
    font-weight: 600;
    text-decoration-color: var(--color-accent, #E53935);
    text-underline-offset: 5px;
}

.zd-about-proof__button:focus-visible,
.zd-about-proof__link:focus-visible {
    outline: 3px solid var(--color-accent, #E53935);
    outline-offset: 4px;
}

@media (max-width: 1023px) {
    .zd-about-proof__layout {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
        gap: 36px;
    }

    .zd-about-proof__photo {
        border-width: 4px;
        border-radius: 16px;
    }

    .zd-about-proof__feature {
        gap: 12px;
        padding: 17px 0;
    }
}

@media (max-width: 820px) {
    .zd-about-proof__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 54px;
    }

    .zd-about-proof__gallery {
        width: min(620px, 100%);
        margin-inline: auto;
    }

    .zd-about-proof__copy {
        width: min(680px, 100%);
        margin-inline: auto;
    }

    .zd-about-proof__title {
        max-width: 15ch;
    }
}

@media (max-width: 767px) {
    .zd-about-proof {
        padding-block: 48px;
    }

    .zd-about-proof__values {
        justify-content: center;
        gap: 10px 14px;
        padding-bottom: 19px;
        font-size: 11px;
    }

    .zd-about-proof__values i {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
    }

    .zd-about-proof__layout {
        gap: 42px;
        padding-top: 32px;
    }

    .zd-about-proof__gallery {
        gap: 12px;
        padding-inline: 4px;
    }

    .zd-about-proof__photo {
        border-width: 3px;
        border-radius: 13px;
        box-shadow: 0 12px 28px rgba(17, 17, 17, .13);
    }

    .zd-about-proof__photo--two,
    .zd-about-proof__photo--four {
        transform: translateY(18px);
    }

    .zd-about-proof__title {
        font-size: clamp(38px, 9.5vw, 58px);
    }

    .zd-about-proof__lead {
        margin: 17px 0 23px;
        font-size: 18px;
        line-height: 1.7;
    }

    .zd-about-proof__feature p {
        font-size: 17px;
    }
}

@media (max-width: 424px) {
    .zd-about-proof {
        padding-inline: 16px;
    }

    .zd-about-proof__values {
        column-gap: 10px;
        letter-spacing: .09em;
    }

    .zd-about-proof__gallery {
        gap: 9px;
    }

    .zd-about-proof__photo {
        aspect-ratio: 1 / 1.12;
        border-radius: 11px;
    }

    .zd-about-proof__feature {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .zd-about-proof__icon {
        width: 32px;
        height: 32px;
    }

    .zd-about-proof__feature p {
        font-size: 16px;
    }

    .zd-about-proof__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .zd-about-proof__button,
    .zd-about-proof__link {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 374px) {
    .zd-about-proof {
        padding-inline: 13px;
    }

    .zd-about-proof__values {
        font-size: 10px;
        gap: 9px 8px;
    }

    .zd-about-proof__eyebrow {
        font-size: 11px;
    }

    .zd-about-proof__title {
        font-size: 36px;
    }

    .zd-about-proof__lead,
    .zd-about-proof__feature p {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zd-about-proof *,
    .zd-about-proof *::before,
    .zd-about-proof *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   CONTACT PAGE — 75VH HERO BANNER
   Scoped to .zd-contact-hero
   ========================================================= */
.zd-contact-hero {
    padding: clamp(12px, 1.8vw, 26px) var(--nav-padding-inline, clamp(12px, 3vw, 40px));
    background: var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}

.zd-contact-hero *,
.zd-contact-hero *::before,
.zd-contact-hero *::after {
    box-sizing: border-box;
}

.zd-contact-hero__banner {
    position: relative;
    isolation: isolate;
    width: min(100%, 1600px);
    height: 75vh;
    height: 75svh;
    min-height: 520px;
    max-height: 920px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: clamp(20px, 3vw, 42px);
    background: #111111;
    color: #FAFAF7;
}

.zd-contact-hero__image,
.zd-contact-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zd-contact-hero__image {
    z-index: -2;
    display: block;
    object-fit: cover;
    object-position: center 48%;
}

.zd-contact-hero__shade {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(8, 10, 12, .54) 0%, transparent 34%),
        linear-gradient(90deg, rgba(8, 10, 12, .78) 0%, rgba(8, 10, 12, .43) 48%, rgba(8, 10, 12, .08) 100%),
        linear-gradient(0deg, rgba(8, 10, 12, .72) 0%, transparent 72%);
}

.zd-contact-hero__topline {
    position: absolute;
    z-index: 1;
    top: clamp(14px, 1.4vw, 20px);
    right: clamp(22px, 4vw, 58px);
    left: clamp(22px, 4vw, 58px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.zd-contact-hero__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
}

.zd-contact-hero__brand i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent, #E53935);
    box-shadow: 0 0 18px rgba(229, 57, 53, .8);
}

.zd-contact-hero__quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.zd-contact-hero__quick-links a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 0 16px;
    border: 1px solid rgba(250, 250, 247, .62);
    border-radius: 999px;
    background: rgba(17, 17, 17, .2);
    color: #FAFAF7;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: background-color .2s ease, border-color .2s ease;
}

.zd-contact-hero__quick-links a:hover {
    border-color: #FAFAF7;
    background: rgba(17, 17, 17, .48);
}

.zd-contact-hero__copy {
    position: absolute;
    z-index: 1;
    right: clamp(22px, 4vw, 58px);
    bottom: clamp(32px, 5vw, 68px);
    left: clamp(22px, 4vw, 58px);
    max-width: 800px;
}

.zd-contact-hero__eyebrow {
    margin: 0 0 15px;
    color: #FAFAF7;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .17em;
    line-height: 1.5;
}

.zd-contact-hero__title {
    margin: 0;
    color: #FAFAF7;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(46px, 6.6vw, 94px);
    font-weight: 400;
    line-height: .99;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.zd-contact-hero__title span {
    color: var(--zd-hero-accent-text, #F2605C);
}

.zd-contact-hero__description {
    max-width: 58ch;
    margin: clamp(16px, 2vw, 24px) 0 0;
    color: rgba(250, 250, 247, .92);
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 1.65;
}

.zd-contact-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: clamp(20px, 2.4vw, 30px);
}

.zd-contact-hero__button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 22px;
    border: 1px solid var(--zd-hero-btn-bg, #C92F2C);
    border-radius: 999px;
    background: var(--zd-hero-btn-bg, #C92F2C);
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}

.zd-contact-hero__button:hover {
    background: var(--zd-hero-btn-bg-hover, #A9231F);
    transform: translateY(-2px);
}

.zd-contact-hero__button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform .2s ease;
}

.zd-contact-hero__button:hover svg {
    transform: translateX(3px);
}

.zd-contact-hero__secondary {
    color: #FAFAF7;
    font-size: 15px;
    font-weight: 600;
    text-decoration-color: var(--zd-hero-accent-text, #F2605C);
    text-underline-offset: 5px;
}

.zd-contact-hero__stamp {
    position: absolute;
    right: clamp(22px, 4vw, 58px);
    bottom: clamp(32px, 5vw, 68px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    color: #FAFAF7;
    text-align: right;
}

.zd-contact-hero__stamp span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .15em;
}

.zd-contact-hero__stamp strong {
    color: #FAFAF7;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
}

.zd-contact-hero__button:focus-visible,
.zd-contact-hero__secondary:focus-visible,
.zd-contact-hero__quick-links a:focus-visible {
    outline: 3px solid #FAFAF7;
    outline-offset: 4px;
}

@media (max-width: 1023px) {
    .zd-contact-hero__stamp {
        display: none;
    }

    .zd-contact-hero__copy {
        max-width: 760px;
    }
}

@media (max-width: 767px) {
    .zd-contact-hero {
        padding: 10px 12px 18px;
    }

    .zd-contact-hero__banner {
        height: 75vh;
        height: 75svh;
        min-height: 520px;
        border-radius: 22px;
    }

    .zd-contact-hero__image {
        object-position: 43% center;
    }

    .zd-contact-hero__shade {
        background:
            linear-gradient(180deg, rgba(8, 10, 12, .58) 0%, rgba(8, 10, 12, .08) 34%),
            linear-gradient(90deg, rgba(8, 10, 12, .62), rgba(8, 10, 12, .12)),
            linear-gradient(0deg, rgba(8, 10, 12, .82), rgba(8, 10, 12, .08) 88%);
    }

    .zd-contact-hero__topline {
        top: 20px;
        right: 18px;
        left: 18px;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .zd-contact-hero__quick-links {
        justify-content: flex-start;
        gap: 8px;
    }

    .zd-contact-hero__quick-links a {
        min-height: 38px;
        padding-inline: 13px;
        font-size: 13px;
    }

    .zd-contact-hero__copy {
        right: 18px;
        bottom: 24px;
        left: 18px;
    }

    .zd-contact-hero__eyebrow {
        margin-bottom: 10px;
        font-size: 11px;
    }

    .zd-contact-hero__title {
        font-size: clamp(40px, 9vw, 64px);
        line-height: 1.02;
    }

    .zd-contact-hero__description {
        max-width: 54ch;
        margin-top: 13px;
        font-size: clamp(17px, 4.2vw, 19px);
        line-height: 1.55;
    }

    .zd-contact-hero__actions {
        gap: 14px 18px;
        margin-top: 17px;
    }

    .zd-contact-hero__button {
        min-height: 49px;
        padding-inline: 17px;
        font-size: 14px;
    }
}

@media (max-width: 424px) {
    .zd-contact-hero__banner {
        min-height: 540px;
        border-radius: 18px;
    }

    .zd-contact-hero__copy {
        right: 16px;
        bottom: 20px;
        left: 16px;
    }

    .zd-contact-hero__title {
        font-size: clamp(36px, 10vw, 44px);
    }

    .zd-contact-hero__description {
        font-size: 17px;
    }

    .zd-contact-hero__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }
}

@media (max-width: 374px) {
    .zd-contact-hero__banner {
        min-height: 560px;
    }

    .zd-contact-hero__topline {
        top: 16px;
        right: 14px;
        left: 14px;
    }

    .zd-contact-hero__brand {
        font-size: 10px;
    }

    .zd-contact-hero__copy {
        right: 14px;
        left: 14px;
    }

    .zd-contact-hero__title {
        font-size: 36px;
    }

    .zd-contact-hero__description {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zd-contact-hero *,
    .zd-contact-hero *::before,
    .zd-contact-hero *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   ZENDOJO — ABOUT HERO V2
   SCARLET MOTION EDITORIAL HERO
   SECTION ONLY
   EXACT HEIGHT: 75VH
========================================================= */

.zd-ah2 {
    --ah2-red: #e53935;
    --ah2-red-dark: #b91f1c;
    --ah2-red-soft: #ef4a46;

    --ah2-bg: #f5f3ef;
    --ah2-text: #111111;
    --ah2-muted: #454545;
    --ah2-border: rgba(17, 17, 17, 0.16);

    position: relative;
    width: 100%;
    height: 75vh;
    min-height: 560px;
    max-height: 820px;

    overflow: hidden;
    isolation: isolate;

    background: var(--ah2-bg);
    color: var(--ah2-text);
}


/* =========================================================
   MAIN INNER LAYOUT
========================================================= */

.zd-ah2__inner {
    position: relative;
    z-index: 5;

    width: min(1420px, calc(100% - 80px));
    height: 100%;
    margin-inline: auto;

    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: clamp(20px, 4vw, 80px);

    padding-block: 42px 54px;
}


/* =========================================================
   SCARLET PAINTED BACKGROUND
========================================================= */

.zd-ah2__paint {
    position: absolute;
    z-index: 1;

    top: -12%;
    right: -7%;

    width: 62%;
    height: 125%;

    pointer-events: none;

    transform: rotate(-4deg);
}

.zd-ah2__paint-stroke {
    position: absolute;
    display: block;

    background:
        linear-gradient(
            120deg,
            var(--ah2-red-dark),
            var(--ah2-red),
            var(--ah2-red-soft)
        );

    filter: saturate(1.08);
}


/* Main paint */
.zd-ah2__paint-stroke--one {
    inset: 5% 5% 2% 18%;

    clip-path: polygon(
        8% 2%,
        92% 0%,
        100% 8%,
        96% 23%,
        100% 42%,
        94% 61%,
        98% 79%,
        90% 100%,
        15% 96%,
        4% 85%,
        9% 66%,
        3% 47%,
        8% 28%,
        2% 12%
    );

    opacity: 0.98;

    animation:
        zd-ah2-paint-in
        1.2s
        cubic-bezier(.16, 1, .3, 1)
        both;
}


/* Upper brush */
.zd-ah2__paint-stroke--two {
    top: 17%;
    right: 0;

    width: 90%;
    height: 13%;

    transform: rotate(5deg);

    background: var(--ah2-red-soft);

    clip-path: polygon(
        0 20%,
        8% 8%,
        21% 17%,
        36% 4%,
        52% 18%,
        70% 7%,
        87% 18%,
        100% 9%,
        100% 78%,
        83% 91%,
        64% 80%,
        48% 94%,
        31% 80%,
        14% 92%,
        0 77%
    );

    opacity: 0.55;

    animation:
        zd-ah2-paint-swipe
        1.4s
        .15s
        cubic-bezier(.16, 1, .3, 1)
        both;
}


/* Lower brush */
.zd-ah2__paint-stroke--three {
    bottom: 14%;
    right: 2%;

    width: 78%;
    height: 9%;

    transform: rotate(-7deg);

    background: #a71918;

    clip-path: polygon(
        0 38%,
        11% 12%,
        27% 28%,
        44% 8%,
        61% 30%,
        80% 11%,
        100% 29%,
        96% 72%,
        81% 89%,
        61% 71%,
        44% 94%,
        26% 70%,
        10% 88%,
        0 67%
    );

    opacity: 0.48;

    animation:
        zd-ah2-paint-swipe
        1.5s
        .3s
        cubic-bezier(.16, 1, .3, 1)
        both;
}


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

.zd-ah2__content {
    position: relative;
    z-index: 8;

    width: min(100%, 680px);
}


.zd-ah2__eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 clamp(14px, 1.4vw, 22px);

    color: var(--ah2-red);

    font-family: Inter, sans-serif;
    font-size: clamp(11px, .8vw, 14px);
    font-weight: 600;

    letter-spacing: .19em;
    text-transform: uppercase;
}


.zd-ah2__eyebrow-mark {
    width: 34px;
    height: 2px;

    flex: 0 0 auto;

    background: var(--ah2-red);
}


/* =========================================================
   LARGE EDITORIAL TITLE
========================================================= */

.zd-ah2__title {
    margin: 0;

    font-family:
        "Archivo Black",
        Inter,
        sans-serif;

    font-size:
        clamp(
            48px,
            5.4vw,
            92px
        );

    line-height: .88;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.zd-ah2__title-line {
    display: block;

    opacity: 0;

    transform: translateY(45px);

    animation:
        zd-ah2-title-in
        .75s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.zd-ah2__title-line:nth-child(1) {
    animation-delay: .15s;
}


.zd-ah2__title-line:nth-child(2) {
    animation-delay: .28s;
}


.zd-ah2__title-line:nth-child(3) {
    animation-delay: .41s;
}


.zd-ah2__title-line--accent {
    position: relative;

    width: max-content;

    color: var(--ah2-red);
}


/* Brush underline */
.zd-ah2__title-line--accent::after {
    content: "";

    position: absolute;

    left: 0;
    right: -8px;
    bottom: -7px;

    height: 5px;

    background: var(--ah2-red);

    clip-path: polygon(
        0 40%,
        14% 16%,
        31% 37%,
        48% 13%,
        65% 34%,
        82% 18%,
        100% 30%,
        100% 70%,
        82% 55%,
        65% 78%,
        47% 58%,
        30% 79%,
        14% 58%,
        0 72%
    );

    transform-origin: left;

    transform: scaleX(0);

    animation:
        zd-ah2-brush-line
        .8s
        .75s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


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

.zd-ah2__description {
    max-width: 610px;

    margin:
        clamp(22px, 2.2vw, 32px)
        0
        0;

    color: var(--ah2-muted);

    font-family: Inter, sans-serif;

    font-size:
        clamp(
            14px,
            1vw,
            17px
        );

    line-height: 1.7;

    opacity: 0;

    transform: translateY(20px);

    animation:
        zd-ah2-content-in
        .7s
        .58s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/* =========================================================
   THREE CORE VALUES
========================================================= */

.zd-ah2__meta {
    display: flex;
    align-items: stretch;

    margin-top:
        clamp(20px, 2vw, 30px);

    opacity: 0;

    transform: translateY(20px);

    animation:
        zd-ah2-content-in
        .7s
        .7s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.zd-ah2__meta-item {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-inline: 20px;
}


.zd-ah2__meta-item:first-child {
    padding-inline-start: 0;
}


.zd-ah2__meta-item strong {
    color: var(--ah2-red);

    font-family:
        "Archivo Black",
        Inter,
        sans-serif;

    font-size: 20px;
}


.zd-ah2__meta-item span {
    color: var(--ah2-muted);

    font-family: Inter, sans-serif;

    font-size: 11px;

    line-height: 1.35;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: .06em;
}


.zd-ah2__meta-divider {
    width: 1px;

    background: var(--ah2-border);
}


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

.zd-ah2__actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-top:
        clamp(22px, 2.4vw, 34px);

    opacity: 0;

    transform: translateY(20px);

    animation:
        zd-ah2-content-in
        .7s
        .82s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.zd-ah2__button {
    min-height: 48px;

    display: inline-flex;

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

    gap: 13px;

    padding: 13px 21px;

    font-family: Inter, sans-serif;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

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


/* Primary CTA */
.zd-ah2__button--primary {
    color: #ffffff;

    background: var(--ah2-red);
}


.zd-ah2__button--primary:hover {
    background: var(--ah2-red-dark);

    transform: translateY(-3px);
}


.zd-ah2__button--primary svg {
    width: 18px;
    height: 18px;

    transition:
        transform .25s ease;
}


.zd-ah2__button--primary:hover svg {
    transform: translateX(4px);
}


/* Secondary CTA */
.zd-ah2__button--text {
    color: var(--ah2-text);

    padding-inline: 4px;

    border-bottom:
        1px solid
        var(--ah2-text);
}


.zd-ah2__button--text:hover {
    color: var(--ah2-red);

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


/* =========================================================
   VISUAL AREA
========================================================= */

.zd-ah2__visual {
    position: relative;

    z-index: 7;

    height: 100%;
    min-height: 480px;

    display: flex;

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


/* =========================================================
   BOY IMAGE
========================================================= */

.zd-ah2__image-wrap {
    position: relative;

    width: min(46vw, 650px);
    height: min(65vh, 610px);

    display: flex;

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

    /*
       Initial slide from right.
       JavaScript later modifies --ah2-mx/--ah2-my.
    */
    opacity: 0;

    transform:
        translate3d(
            100px,
            0,
            0
        );

    animation:
        zd-ah2-image-in
        1.15s
        .2s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/*
   IMPORTANT:
   The PNG itself remains transparent.
   No box/background is applied here.
*/
.zd-ah2__image {
    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position:
        center bottom;

    /*
       Mouse movement variables.
       Defaults to zero.
    */
    --ah2-mx: 0px;
    --ah2-my: 0px;

    filter:
        drop-shadow(
            0 22px 24px
            rgba(0, 0, 0, .18)
        );

    /*
       The animation contains the floating motion
       while JS controls the subtle mouse movement.
    */
    animation:
        zd-ah2-image-float
        5.5s
        1.4s
        ease-in-out
        infinite;
}


/* Ground shadow */
.zd-ah2__image-shadow {
    position: absolute;

    z-index: 2;

    bottom: 4%;
    left: 20%;

    width: 60%;
    height: 8%;

    background:
        rgba(0, 0, 0, .23);

    filter: blur(24px);

    border-radius: 50%;
}


/* =========================================================
   VISUAL LABEL
========================================================= */

.zd-ah2__visual-label {
    position: absolute;

    z-index: 9;

    top: 12%;
    right: 5%;

    display: flex;

    flex-direction: column;

    color: #ffffff;

    font-family: Inter, sans-serif;

    font-size:
        clamp(
            10px,
            .75vw,
            13px
        );

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .2em;

    text-transform: uppercase;

    transform:
        rotate(90deg);

    transform-origin:
        right top;

    opacity: 0;

    animation:
        zd-ah2-label-in
        .7s
        1s
        ease
        forwards;
}


.zd-ah2__visual-label strong {
    color: #111111;

    font-size: 1.25em;
}


/* =========================================================
   VERTICAL WORDS
========================================================= */

.zd-ah2__vertical-note {
    position: absolute;

    left: 2%;
    bottom: 14%;

    z-index: 10;

    display: flex;

    flex-direction: column;

    gap: 7px;

    color:
        rgba(255, 255, 255, .88);

    font-family: Inter, sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

    opacity: 0;

    animation:
        zd-ah2-label-in
        .7s
        1.15s
        ease
        forwards;
}


.zd-ah2__vertical-note span::before {
    content: "—";

    margin-inline-end: 5px;
}


/* =========================================================
   YEAR
========================================================= */

.zd-ah2__number {
    position: absolute;

    z-index: 3;

    right: 0;
    bottom: 8%;

    color:
        rgba(255, 255, 255, .32);

    font-family:
        "Archivo Black",
        Inter,
        sans-serif;

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

    line-height: 1;

    opacity: 0;

    animation:
        zd-ah2-year-in
        1s
        .8s
        ease
        forwards;
}


/* =========================================================
   TRAINING PATH
========================================================= */

.zd-ah2__path {
    position: absolute;

    z-index: 2;

    right: 0;
    bottom: 13%;

    width: 48%;
    height: 42%;

    pointer-events: none;

    opacity: .75;
}


.zd-ah2__path-line {
    position: absolute;

    top: 8%;
    right: 0;

    width: 90%;
    height: 70%;

    border-top:
        2px dashed
        rgba(255, 255, 255, .45);

    border-right:
        2px dashed
        rgba(255, 255, 255, .45);

    border-radius:
        0 70% 0 0;

    transform: rotate(-7deg);

    animation:
        zd-ah2-path-draw
        2.1s
        1s
        cubic-bezier(.16, 1, .3, 1)
        both;
}


.zd-ah2__path-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    background: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(255, 255, 255, .12);
}


.zd-ah2__path-dot--one {
    top: 7%;
    right: 2%;
}


.zd-ah2__path-dot--two {
    top: 47%;
    right: 31%;
}


.zd-ah2__path-dot--three {
    bottom: 8%;
    left: 7%;
}


/* =========================================================
   TOP INDEX
========================================================= */

.zd-ah2__index {
    position: absolute;

    z-index: 9;

    top: 32px;
    right: 42px;

    display: flex;

    align-items: center;

    gap: 9px;

    font-family: Inter, sans-serif;

    font-size: 10px;

    letter-spacing: .18em;

    font-weight: 600;

    transform:
        rotate(90deg);

    transform-origin:
        right top;
}


.zd-ah2__index span {
    color: var(--ah2-muted);
}


.zd-ah2__index strong {
    color: var(--ah2-red);
}


/* =========================================================
   BOTTOM EDITORIAL BAR
========================================================= */

.zd-ah2__bottom {
    position: absolute;

    z-index: 12;

    left: 0;
    right: 0;
    bottom: 0;

    height: 46px;

    display: flex;

    align-items: center;

    padding-inline:
        max(
            24px,
            calc(
                (100vw - 1420px) / 2
            )
        );

    color: var(--ah2-text);

    font-family: Inter, sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .15em;

    text-transform: uppercase;

    background:
        color-mix(
            in srgb,
            var(--ah2-bg) 88%,
            transparent
        );

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


.zd-ah2__bottom-label {
    white-space: nowrap;
}


.zd-ah2__bottom-line {
    width: 55px;
    height: 1px;

    margin-inline: 18px;

    background: var(--ah2-red);
}


.zd-ah2__bottom-copy {
    color: var(--ah2-muted);

    white-space: nowrap;
}


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

@keyframes zd-ah2-paint-in {

    from {
        opacity: 0;

        transform:
            translateX(110px)
            scaleX(.75);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scaleX(1);
    }
}


@keyframes zd-ah2-paint-swipe {

    from {
        opacity: 0;

        transform:
            translateX(180px)
            rotate(5deg);
    }

    to {
        opacity: .55;

        transform:
            translateX(0)
            rotate(5deg);
    }
}


@keyframes zd-ah2-title-in {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes zd-ah2-content-in {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes zd-ah2-brush-line {

    to {
        transform:
            scaleX(1);
    }
}


/* Image entrance */
@keyframes zd-ah2-image-in {

    from {
        opacity: 0;

        transform:
            translate3d(
                120px,
                0,
                0
            )
            scale(.9);
    }

    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }
}


/*
   IMPORTANT:
   Image floating animation uses CSS variables.
   This avoids fighting with JS parallax.
*/
@keyframes zd-ah2-image-float {

    0%,
    100% {

        transform:
            translate3d(
                var(--ah2-mx, 0px),
                var(--ah2-my, 0px),
                0
            )
            translateY(0)
            rotate(0deg);
    }

    50% {

        transform:
            translate3d(
                var(--ah2-mx, 0px),
                var(--ah2-my, 0px),
                0
            )
            translateY(-9px)
            rotate(-.7deg);
    }
}


@keyframes zd-ah2-label-in {

    from {
        opacity: 0;

        transform:
            translateX(20px)
            rotate(90deg);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            rotate(90deg);
    }
}


@keyframes zd-ah2-year-in {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes zd-ah2-path-draw {

    from {
        opacity: 0;

        clip-path:
            inset(
                0 100% 0 0
            );
    }

    to {
        opacity: 1;

        clip-path:
            inset(
                0 0 0 0
            );
    }
}


/* =========================================================
   LAPTOP-L
   1201px — 1440px
========================================================= */

@media (max-width: 1440px) {

    .zd-ah2__inner {
        width:
            min(
                1360px,
                calc(100% - 64px)
            );
    }


    .zd-ah2__title {
        font-size:
            clamp(
                50px,
                5.2vw,
                78px
            );
    }


    .zd-ah2__image-wrap {
        width:
            min(
                44vw,
                580px
            );

        height:
            min(
                64vh,
                570px
            );
    }
}


/* =========================================================
   LAPTOP
   1025px — 1200px
========================================================= */

@media (max-width: 1200px) {

    .zd-ah2 {
        min-height: 540px;
    }


    .zd-ah2__inner {
        width:
            calc(100% - 54px);

        gap: 20px;
    }


    .zd-ah2__title {
        font-size:
            clamp(
                46px,
                5.6vw,
                70px
            );
    }


    .zd-ah2__description {
        max-width: 530px;

        font-size: 14px;
    }


    .zd-ah2__meta-item {
        padding-inline: 13px;
    }


    .zd-ah2__image-wrap {
        width:
            min(
                46vw,
                520px
            );

        height:
            min(
                61vh,
                520px
            );
    }


    .zd-ah2__bottom {
        padding-inline: 27px;
    }
}


/* =========================================================
   TABLET
   768px — 1024px
========================================================= */

@media (max-width: 1024px) {

    .zd-ah2 {
        height: 75vh;

        min-height: 620px;
    }


    .zd-ah2__inner {
        width:
            calc(100% - 44px);

        grid-template-columns:
            minmax(0, .92fr)
            minmax(0, 1.08fr);

        gap: 5px;

        padding-block:
            36px 52px;
    }


    .zd-ah2__title {
        font-size:
            clamp(
                43px,
                6.3vw,
                65px
            );
    }


    .zd-ah2__description {
        max-width: 440px;

        font-size: 13px;

        line-height: 1.6;
    }


    .zd-ah2__meta-item {
        gap: 7px;

        padding-inline: 8px;
    }


    .zd-ah2__meta-item strong {
        font-size: 16px;
    }


    .zd-ah2__meta-item span {
        font-size: 9px;
    }


    .zd-ah2__image-wrap {
        width:
            min(
                48vw,
                470px
            );

        height:
            min(
                60vh,
                470px
            );
    }


    .zd-ah2__visual-label {
        right: 0;
    }


    .zd-ah2__bottom {
        padding-inline: 22px;
    }
}


/* =========================================================
   MOBILE-L
   576px — 767px
========================================================= */

@media (max-width: 767px) {

    .zd-ah2 {
        height: 75vh;

        min-height: 690px;

        max-height: none;
    }


    .zd-ah2__inner {
        width:
            calc(100% - 32px);

        display: block;

        padding-top: 60px;

        padding-bottom: 55px;
    }


    .zd-ah2__content {
        width: 72%;
    }


    .zd-ah2__eyebrow {
        margin-bottom: 12px;

        font-size: 9px;
    }


    .zd-ah2__eyebrow-mark {
        width: 22px;
    }


    .zd-ah2__title {
        font-size:
            clamp(
                42px,
                12vw,
                58px
            );

        line-height: .88;
    }


    .zd-ah2__description {
        width: 100%;

        max-width: 440px;

        margin-top: 18px;

        font-size: 12px;

        line-height: 1.55;
    }


    .zd-ah2__meta {
        margin-top: 16px;
    }


    .zd-ah2__meta-item {
        padding-inline: 7px;
    }


    .zd-ah2__meta-item:first-child {
        padding-inline-start: 0;
    }


    .zd-ah2__meta-item strong {
        font-size: 13px;
    }


    .zd-ah2__meta-item span {
        font-size: 7px;
    }


    .zd-ah2__actions {
        gap: 12px;

        margin-top: 17px;
    }


    .zd-ah2__button {
        min-height: 40px;

        padding: 10px 14px;

        font-size: 10px;
    }


    .zd-ah2__button--text {
        padding-inline: 2px;
    }


    /*
       Image becomes an overlapping foreground
       element on mobile.
    */
    .zd-ah2__visual {
        position: absolute;

        right: -4%;
        bottom: 25px;

        width: 58%;
        height: 58%;

        min-height: 0;
    }


    .zd-ah2__paint {
        top: 24%;

        right: -20%;

        width: 75%;

        height: 74%;
    }


    .zd-ah2__image-wrap {
        width: 100%;
        height: 100%;

        transform:
            translate3d(
                70px,
                0,
                0
            );
    }


    .zd-ah2__image {
        filter:
            drop-shadow(
                0 15px 17px
                rgba(0, 0, 0, .2)
            );
    }


    .zd-ah2__visual-label {
        top: 13%;

        right: -2%;

        font-size: 7px;
    }


    .zd-ah2__vertical-note {
        display: none;
    }


    .zd-ah2__number {
        right: -4%;

        bottom: 5%;

        font-size: 45px;
    }


    .zd-ah2__path {
        right: 2%;

        bottom: 15%;

        width: 56%;

        height: 28%;
    }


    .zd-ah2__index {
        top: 22px;

        right: 24px;

        font-size: 8px;
    }


    .zd-ah2__bottom {
        height: 38px;

        padding-inline: 16px;

        font-size: 7px;
    }


    .zd-ah2__bottom-label {
        display: none;
    }


    .zd-ah2__bottom-line {
        width: 28px;

        margin-inline:
            0 10px;
    }


    .zd-ah2__bottom-copy {
        overflow: hidden;

        text-overflow: ellipsis;
    }
}


/* =========================================================
   MOBILE-M
   391px — 575px
========================================================= */

@media (max-width: 575px) {

    .zd-ah2 {
        min-height: 670px;
    }


    .zd-ah2__inner {
        width:
            calc(100% - 26px);
    }


    .zd-ah2__content {
        width: 82%;
    }


    .zd-ah2__title {
        font-size:
            clamp(
                38px,
                12.5vw,
                52px
            );
    }


    .zd-ah2__description {
        font-size: 11px;

        max-width: 350px;
    }


    .zd-ah2__meta-item span {
        font-size: 6.5px;
    }


    .zd-ah2__meta-item strong {
        font-size: 12px;
    }


    .zd-ah2__meta-divider {
        height: 26px;
    }


    .zd-ah2__visual {
        right: -7%;

        width: 62%;

        height: 56%;
    }


    .zd-ah2__paint {
        right: -25%;

        width: 82%;
    }


    .zd-ah2__button--text {
        display: none;
    }


    .zd-ah2__bottom-copy {
        font-size: 6.5px;
    }
}


/* =========================================================
   MOBILE-S
   390px and below
========================================================= */

@media (max-width: 390px) {

    .zd-ah2 {
        min-height: 640px;
    }


    .zd-ah2__inner {
        padding-top: 54px;
    }


    .zd-ah2__content {
        width: 88%;
    }


    .zd-ah2__title {
        font-size: 36px;
    }


    .zd-ah2__description {
        font-size: 10.5px;

        line-height: 1.5;
    }


    .zd-ah2__meta-item {
        gap: 4px;

        padding-inline: 5px;
    }


    .zd-ah2__meta-item strong {
        font-size: 11px;
    }


    .zd-ah2__meta-item span {
        font-size: 6px;

        letter-spacing: .03em;
    }


    .zd-ah2__actions {
        margin-top: 14px;
    }


    .zd-ah2__button {
        min-height: 37px;

        padding: 9px 12px;

        font-size: 9px;
    }


    .zd-ah2__visual {
        width: 65%;

        height: 52%;

        right: -10%;

        bottom: 30px;
    }


    .zd-ah2__number {
        font-size: 37px;
    }


    .zd-ah2__bottom-copy {
        font-size: 6px;

        letter-spacing: .08em;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .zd-ah2 *,
    .zd-ah2 *::before,
    .zd-ah2 *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;
    }
}

/* =========================================================
   CONTACT PAGE — FIRST STEPS SECTION
   Scoped to .zd-contact-journey
   ========================================================= */
.zd-contact-journey {
    padding: clamp(56px, 7vw, 104px) var(--nav-padding-inline, clamp(16px, 4vw, 56px));
    overflow: hidden;
    background: var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}

.zd-contact-journey *,
.zd-contact-journey *::before,
.zd-contact-journey *::after {
    box-sizing: border-box;
}

.zd-contact-journey__inner {
    width: min(1320px, 100%);
    margin-inline: auto;
}

.zd-contact-journey__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
}

.zd-contact-journey__eyebrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--zd-hero-accent-text, #C92F2C);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
}

.zd-contact-journey__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent, #E53935);
}

.zd-contact-journey__ribbon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px 16px;
    color: var(--zd-hero-muted, #333333);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .11em;
}

.zd-contact-journey__ribbon b {
    color: var(--color-accent, #E53935);
    font-size: 9px;
}

.zd-contact-journey__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
    align-items: end;
    gap: clamp(30px, 7vw, 100px);
    margin: clamp(36px, 5vw, 62px) 0 clamp(32px, 4vw, 52px);
}

.zd-contact-journey__heading h2 {
    margin: 0;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(38px, 5.1vw, 68px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.zd-contact-journey__heading h2 span {
    color: var(--zd-hero-accent-text, #C92F2C);
}

.zd-contact-journey__heading > p {
    max-width: 50ch;
    margin: 0 0 3px;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.7;
}

.zd-contact-journey__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(260px, 1fr) minmax(250px, 1fr);
    gap: clamp(14px, 1.7vw, 22px);
}

.zd-contact-journey__card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .12));
    border-radius: clamp(18px, 2vw, 28px);
    background: var(--zd-hero-card-bg, #E9E9E4);
    color: var(--color-text, #111111);
}

.zd-contact-journey__card--welcome {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    min-height: 520px;
    background: #171717;
    color: #FAFAF7;
}

.zd-contact-journey__card--ages {
    grid-column: 6 / span 3;
    grid-row: 1;
    min-height: 250px;
    padding: clamp(20px, 2.2vw, 30px);
    background: var(--zd-hero-card-bg, #E9E9E4);
}

.zd-contact-journey__card--coach {
    grid-column: 9 / span 4;
    grid-row: 1;
    min-height: 250px;
    background: #171717;
    color: #FAFAF7;
}

.zd-contact-journey__card--trial {
    grid-column: 6 / span 7;
    grid-row: 2;
    min-height: 250px;
    padding: clamp(24px, 3vw, 38px);
    border-color: transparent;
    background: var(--zd-hero-btn-bg, #C92F2C);
    color: var(--zd-hero-btn-text, #FAFAF7);
}

.zd-contact-journey__card > img,
.zd-contact-journey__image-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zd-contact-journey__card > img {
    display: block;
    object-fit: cover;
    transition: transform .75s cubic-bezier(.2, .8, .2, 1);
}

.zd-contact-journey__card:hover > img {
    transform: scale(1.045);
}

.zd-contact-journey__image-shade {
    background: linear-gradient(180deg, rgba(8, 10, 12, .02) 15%, rgba(8, 10, 12, .86) 100%);
}

.zd-contact-journey__card-copy {
    position: absolute;
    right: clamp(20px, 2.6vw, 36px);
    bottom: clamp(20px, 2.6vw, 36px);
    left: clamp(20px, 2.6vw, 36px);
    z-index: 1;
}

.zd-contact-journey__card-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--zd-hero-accent-text, #C92F2C);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.5;
}

.zd-contact-journey__card-copy h3,
.zd-contact-journey__card--ages h3,
.zd-contact-journey__card--trial h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(23px, 2.3vw, 34px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.zd-contact-journey__card-copy h3 {
    max-width: 18ch;
    color: #FAFAF7;
}

.zd-contact-journey__card-copy p,
.zd-contact-journey__card--ages p,
.zd-contact-journey__card--trial p {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    font-size: clamp(17px, 1.2vw, 19px);
    line-height: 1.65;
}

.zd-contact-journey__card-copy p {
    max-width: 48ch;
    color: rgba(250, 250, 247, .9);
}

.zd-contact-journey__big-number {
    display: block;
    position: relative;
    z-index: 1;
    margin: clamp(12px, 2vw, 24px) 0 4px;
    color: var(--zd-hero-accent-text, #C92F2C);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(46px, 5vw, 70px);
    line-height: .95;
    letter-spacing: -.05em;
}

.zd-contact-journey__card--ages h3 {
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 600;
    line-height: 1.4;
}

.zd-contact-journey__card--ages p {
    max-width: 34ch;
    color: var(--zd-hero-muted, #333333);
}

.zd-contact-journey__card-mark {
    position: absolute;
    right: 18px;
    bottom: -42px;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: 170px;
    line-height: 1;
    opacity: .045;
    pointer-events: none;
}

.zd-contact-journey__card--trial .zd-contact-journey__card-kicker {
    color: var(--zd-hero-btn-text, #FAFAF7);
    opacity: .85;
}

.zd-contact-journey__card--trial h3 {
    max-width: 20ch;
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: clamp(25px, 3vw, 40px);
}

.zd-contact-journey__card--trial p {
    max-width: 62ch;
    color: var(--zd-hero-btn-text, #FAFAF7);
    opacity: .9;
}

.zd-contact-journey__card--trial a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: 15px;
    font-weight: 600;
    text-decoration-color: currentColor;
    text-underline-offset: 5px;
}

.zd-contact-journey__card--trial a span {
    transition: transform .2s ease;
}

.zd-contact-journey__card--trial a:hover span {
    transform: translateX(4px);
}

.zd-contact-journey__card--trial a:focus-visible {
    outline: 3px solid #FAFAF7;
    outline-offset: 4px;
}

.zd-contact-journey.is-motion-ready [data-contact-journey-reveal] {
    opacity: 0;
    transition: opacity .75s ease, transform .85s cubic-bezier(.2, .8, .2, 1);
}

.zd-contact-journey.is-motion-ready [data-contact-journey-reveal="up"] {
    transform: translateY(34px);
}

.zd-contact-journey.is-motion-ready [data-contact-journey-reveal="left"] {
    transform: translateX(-48px);
}

.zd-contact-journey.is-motion-ready [data-contact-journey-reveal="right"] {
    transform: translateX(48px);
}

.zd-contact-journey [data-contact-journey-reveal].is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

.zd-contact-journey__grid [data-contact-journey-reveal]:nth-child(2) { transition-delay: 90ms; }
.zd-contact-journey__grid [data-contact-journey-reveal]:nth-child(3) { transition-delay: 170ms; }
.zd-contact-journey__grid [data-contact-journey-reveal]:nth-child(4) { transition-delay: 250ms; }

@media (max-width: 1023px) {
    .zd-contact-journey__heading {
        grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr);
        gap: 32px;
    }

    .zd-contact-journey__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
    }

    .zd-contact-journey__card--welcome { grid-column: 1; grid-row: 1; min-height: 430px; }
    .zd-contact-journey__card--ages { grid-column: 2; grid-row: 1; min-height: 430px; }
    .zd-contact-journey__card--coach { grid-column: 1; grid-row: 2; min-height: 360px; }
    .zd-contact-journey__card--trial { grid-column: 2; grid-row: 2; min-height: 360px; }
}

@media (max-width: 767px) {
    .zd-contact-journey {
        padding-block: 52px;
    }

    .zd-contact-journey__topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        padding-bottom: 18px;
    }

    .zd-contact-journey__ribbon {
        justify-content: flex-start;
        gap: 8px 12px;
        font-size: 10px;
    }

    .zd-contact-journey__heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin: 32px 0 26px;
    }

    .zd-contact-journey__heading h2 {
        font-size: clamp(36px, 9vw, 54px);
    }

    .zd-contact-journey__heading > p {
        font-size: 18px;
    }

    .zd-contact-journey__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 14px;
    }

    .zd-contact-journey__card--welcome,
    .zd-contact-journey__card--ages,
    .zd-contact-journey__card--coach,
    .zd-contact-journey__card--trial {
        grid-column: 1;
        grid-row: auto;
        min-height: 0;
    }

    .zd-contact-journey__card--welcome { min-height: 380px; }
    .zd-contact-journey__card--ages { padding: 24px; }
    .zd-contact-journey__card--coach { min-height: 310px; }
    .zd-contact-journey__card--trial { padding: 26px 24px; }

    .zd-contact-journey__card-copy {
        right: 22px;
        bottom: 22px;
        left: 22px;
    }

    .zd-contact-journey__card-copy h3,
    .zd-contact-journey__card--ages h3,
    .zd-contact-journey__card--trial h3 {
        font-size: 26px;
    }

    .zd-contact-journey__card-copy p,
    .zd-contact-journey__card--ages p,
    .zd-contact-journey__card--trial p {
        font-size: 17px;
    }
}

@media (max-width: 424px) {
    .zd-contact-journey {
        padding: 44px 16px;
    }

    .zd-contact-journey__heading h2 {
        font-size: 36px;
    }

    .zd-contact-journey__heading > p {
        font-size: 17px;
    }

    .zd-contact-journey__card--welcome { min-height: 360px; }
    .zd-contact-journey__card--coach { min-height: 290px; }
    .zd-contact-journey__card--ages,
    .zd-contact-journey__card--trial { padding: 21px; }

    .zd-contact-journey__card-copy h3,
    .zd-contact-journey__card--ages h3,
    .zd-contact-journey__card--trial h3 { font-size: 23px; }

    .zd-contact-journey__card-copy p,
    .zd-contact-journey__card--ages p,
    .zd-contact-journey__card--trial p { font-size: 16px; }
}

@media (max-width: 374px) {
    .zd-contact-journey {
        padding-inline: 13px;
    }

    .zd-contact-journey__eyebrow { font-size: 10px; }
    .zd-contact-journey__ribbon { letter-spacing: .08em; }
    .zd-contact-journey__heading h2 { font-size: 33px; }
}

@media (prefers-reduced-motion: reduce) {
    .zd-contact-journey *,
    .zd-contact-journey *::before,
    .zd-contact-journey *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   ZENDOJO — MISSION & VISION
   MAIN / LIGHT MODE
   SECTION ONLY
========================================================= */

.zd-mv {
    --mv-bg: #f5f3ef;
    --mv-surface: #ffffff;
    --mv-surface-soft: #eeece7;

    --mv-text: #111111;
    --mv-text-soft: #4a4a4a;
    --mv-text-faint: #777777;

    --mv-red: #e53935;
    --mv-red-dark: #c92724;
    --mv-red-soft: #f06460;

    --mv-border: rgba(17, 17, 17, 0.14);
    --mv-border-strong: rgba(17, 17, 17, 0.24);

    position: relative;

    width: 100%;

    overflow: hidden;

    isolation: isolate;

    background: var(--mv-bg);

    color: var(--mv-text);

    padding:
        clamp(80px, 9vw, 135px)
        0
        clamp(75px, 8vw, 120px);
}


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

.zd-mv__background {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;
}


.zd-mv__grid-line {
    position: absolute;

    display: block;

    background: var(--mv-border);
}


.zd-mv__grid-line--one {
    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    opacity: .45;
}


.zd-mv__grid-line--two {
    left: 0;
    right: 0;

    top: 39%;

    height: 1px;

    opacity: .3;
}


.zd-mv__grid-line--three {
    left: 0;
    right: 0;

    bottom: 18%;

    height: 1px;

    opacity: .22;
}


.zd-mv__grain {
    position: absolute;

    inset: 0;

    opacity: .025;

    background-image:
        radial-gradient(
            rgba(0, 0, 0, .8) .6px,
            transparent .6px
        );

    background-size: 5px 5px;
}


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

.zd-mv__container {
    width:
        min(
            1400px,
            calc(100% - 80px)
        );

    margin-inline: auto;
}


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

.zd-mv__heading {
    position: relative;

    z-index: 4;

    width: min(850px, 100%);

    margin-bottom:
        clamp(45px, 5vw, 75px);
}


.zd-mv__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: var(--mv-red);

    font-family: Inter, sans-serif;

    font-size:
        clamp(10px, .8vw, 13px);

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.zd-mv__eyebrow-line {
    width: 34px;

    height: 2px;

    flex: 0 0 auto;

    background: var(--mv-red);
}


.zd-mv__title {
    margin: 0;

    font-family:
        "Archivo Black",
        Inter,
        sans-serif;

    font-size:
        clamp(
            48px,
            6.3vw,
            92px
        );

    line-height: .9;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.zd-mv__title span {
    display: block;
}


.zd-mv__title-accent {
    color: var(--mv-red);
}


.zd-mv__intro {
    width: min(650px, 100%);

    margin:
        clamp(22px, 2vw, 30px)
        0
        0;

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

    font-family: Inter, sans-serif;

    font-size:
        clamp(
            14px,
            1.05vw,
            17px
        );

    line-height: 1.7;
}


/* =========================================================
   STAGE
========================================================= */

.zd-mv__stage {
    position: relative;

    display: grid;

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

    align-items: stretch;

    gap: clamp(18px, 3vw, 48px);

    min-height:
        clamp(
            440px,
            31vw,
            510px
        );
}


/* =========================================================
   CARDS
========================================================= */

.zd-mv__card {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    /*
       Both cards are equal height.
       Content therefore begins and ends
       on matching horizontal lines.
    */
    min-height: 100%;

    padding:
        clamp(27px, 3vw, 46px);

    border:
        1px solid
        var(--mv-border-strong);

    border-radius: 28px;

    overflow: hidden;

    box-sizing: border-box;

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


.zd-mv__card--mission {
    background:
        linear-gradient(
            135deg,
            var(--mv-red),
            var(--mv-red-dark)
        );

    color: #ffffff;

    transform:
        translateX(-115%);
}


.zd-mv__card--vision {
    background: var(--mv-surface);

    color: var(--mv-text);

    transform:
        translateX(115%);
}


/* Activated by JS */
.zd-mv.is-visible .zd-mv__card--mission {
    animation:
        zd-mv-mission-in
        1.15s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.zd-mv.is-visible .zd-mv__card--vision {
    animation:
        zd-mv-vision-in
        1.15s
        .06s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.zd-mv__card:hover {
    border-color: var(--mv-red);

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


.zd-mv__card--mission:hover {
    transform: translateY(-5px);
}


.zd-mv__card--vision:hover {
    transform: translateY(-5px);
}


/* =========================================================
   CARD TOP
========================================================= */

.zd-mv__card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 30px;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        currentColor;

    opacity: .8;
}


.zd-mv__number {
    font-family:
        "Archivo Black",
        Inter,
        sans-serif;

    font-size: 15px;

    letter-spacing: .08em;
}


.zd-mv__card-label {
    font-family: Inter, sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;
}


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

.zd-mv__card-content {
    flex: 1;

    /*
       Same internal start/end region for
       both cards because both use the
       same flex structure.
    */
    padding-top:
        clamp(34px, 3vw, 48px);

    padding-bottom:
        clamp(30px, 3vw, 44px);
}


.zd-mv__card-content h3 {
    max-width: 560px;

    margin: 0;

    font-family:
        "Archivo Black",
        Inter,
        sans-serif;

    font-size:
        clamp(
            31px,
            3.3vw,
            54px
        );

    line-height: .98;

    letter-spacing: -.04em;
}


.zd-mv__card-content h3 span {
    display: block;

    color: currentColor;
}


.zd-mv__card--mission .zd-mv__card-content h3 span {
    color: #111111;
}


.zd-mv__card--vision .zd-mv__card-content h3 span {
    color: var(--mv-red);
}


.zd-mv__card-content p {
    max-width: 560px;

    margin:
        clamp(22px, 2vw, 31px)
        0
        0;

    font-family: Inter, sans-serif;

    font-size:
        clamp(
            13px,
            .95vw,
            16px
        );

    line-height: 1.7;
}


.zd-mv__card--mission .zd-mv__card-content p {
    color: rgba(255, 255, 255, .9);
}


.zd-mv__card--vision .zd-mv__card-content p {
    color: var(--mv-text-soft);
}


/* =========================================================
   POINTS
========================================================= */

.zd-mv__points {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        9px 20px;

    min-height: 28px;

    padding-top: 19px;

    border-top:
        1px solid
        currentColor;
}


.zd-mv__points span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-family: Inter, sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.zd-mv__points i {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: currentColor;
}


/* =========================================================
   CENTER IMPACT
========================================================= */

.zd-mv__impact {
    position: absolute;

    z-index: 10;

    left: 50%;
    top: 50%;

    width: 84px;
    height: 84px;

    display: flex;

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

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

    pointer-events: none;
}


.zd-mv.is-visible .zd-mv__impact {
    animation:
        zd-mv-impact-in
        .55s
        .83s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.zd-mv__impact-line {
    position: absolute;

    left: 50%;

    top: 50%;

    width: 0;

    height: 2px;

    background: var(--mv-red);

    transform:
        translate(-50%, -50%);

    box-shadow:
        -180px 0 0 var(--mv-red),
        180px 0 0 var(--mv-red);
}


.zd-mv.is-visible .zd-mv__impact-line {
    animation:
        zd-mv-impact-line
        .7s
        1.05s
        ease-out
        forwards;
}


.zd-mv__impact-mark {
    position: relative;

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    background: var(--mv-red);

    box-shadow:
        0 0 0 8px
        color-mix(
            in srgb,
            var(--mv-red) 15%,
            transparent
        );
}


.zd-mv__impact-mark span {
    position: absolute;

    display: block;

    width: 3px;
    height: 12px;

    background: #ffffff;

    border-radius: 3px;
}


.zd-mv__impact-mark span:nth-child(1) {
    transform: rotate(0deg);
}


.zd-mv__impact-mark span:nth-child(2) {
    transform: rotate(60deg);
}


.zd-mv__impact-mark span:nth-child(3) {
    transform: rotate(-60deg);
}


.zd-mv__impact-ring {
    position: absolute;

    inset: -11px;

    border:
        1px solid
        var(--mv-red);

    border-radius: 50%;

    opacity: .5;
}


.zd-mv.is-visible .zd-mv__impact-ring {
    animation:
        zd-mv-ring
        .8s
        1.02s
        ease-out
        forwards;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.zd-mv__philosophy {
    display: grid;

    grid-template-columns:
        minmax(30px, 1fr)
        auto
        minmax(30px, 1fr);

    align-items: center;

    gap: 25px;

    margin-top:
        clamp(50px, 6vw, 82px);

    text-align: center;
}


.zd-mv__philosophy-line {
    height: 1px;

    background: var(--mv-border-strong);
}


.zd-mv__philosophy-content {
    min-width: min(470px, 70vw);
}


.zd-mv__philosophy-kicker {
    display: block;

    margin-bottom: 10px;

    color: var(--mv-red);

    font-family: Inter, sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.zd-mv__philosophy-content h3 {
    margin: 0;

    font-family:
        "Archivo Black",
        Inter,
        sans-serif;

    font-size:
        clamp(
            27px,
            3vw,
            44px
        );

    line-height: 1;

    letter-spacing: -.04em;

    text-transform: uppercase;
}


.zd-mv__philosophy-content h3 span {
    color: var(--mv-red);

    padding-inline: 6px;
}


.zd-mv__philosophy-content p {
    margin: 14px 0 0;

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

    font-family: Inter, sans-serif;

    font-size:
        clamp(
            12px,
            .9vw,
            14px
        );

    line-height: 1.5;
}


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

@keyframes zd-mv-mission-in {

    0% {
        opacity: 0;

        transform:
            translateX(-115%);
    }

    72% {
        opacity: 1;

        transform:
            translateX(4%);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes zd-mv-vision-in {

    0% {
        opacity: 0;

        transform:
            translateX(115%);
    }

    72% {
        opacity: 1;

        transform:
            translateX(-4%);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes zd-mv-impact-in {

    0% {
        opacity: 0;

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

    65% {
        opacity: 1;

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

    100% {
        opacity: 1;

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


@keyframes zd-mv-impact-line {

    from {
        width: 0;
    }

    to {
        width: 34px;
    }
}


@keyframes zd-mv-ring {

    0% {
        opacity: .7;

        transform: scale(.65);
    }

    100% {
        opacity: 0;

        transform: scale(1.65);
    }
}


/* =========================================================
   LAPTOP-L
   1201px — 1440px
========================================================= */

@media (max-width: 1440px) {

    .zd-mv__container {
        width:
            min(
                1360px,
                calc(100% - 64px)
            );
    }


    .zd-mv__card {
        padding: 38px;
    }


    .zd-mv__card-content h3 {
        font-size:
            clamp(
                32px,
                3.4vw,
                49px
            );
    }
}


/* =========================================================
   LAPTOP
   1025px — 1200px
========================================================= */

@media (max-width: 1200px) {

    .zd-mv__container {
        width:
            calc(100% - 54px);
    }


    .zd-mv__stage {
        min-height: 430px;

        gap: 24px;
    }


    .zd-mv__card {
        padding: 31px;
    }


    .zd-mv__card-content h3 {
        font-size:
            clamp(
                29px,
                3.6vw,
                43px
            );
    }


    .zd-mv__card-content p {
        font-size: 13px;
    }


    .zd-mv__points {
        gap: 8px 13px;
    }


    .zd-mv__points span {
        font-size: 9px;
    }
}


/* =========================================================
   TABLET
   768px — 1024px
========================================================= */

@media (max-width: 1024px) {

    .zd-mv {
        padding:
            80px 0
            78px;
    }


    .zd-mv__container {
        width:
            calc(100% - 44px);
    }


    .zd-mv__title {
        font-size:
            clamp(
                47px,
                7vw,
                67px
            );
    }


    .zd-mv__intro {
        font-size: 14px;
    }


    .zd-mv__stage {
        min-height: 410px;

        gap: 18px;
    }


    .zd-mv__card {
        padding: 27px;
        border-radius: 22px;
    }


    .zd-mv__card-content {
        padding-top: 30px;
        padding-bottom: 27px;
    }


    .zd-mv__card-content h3 {
        font-size:
            clamp(
                27px,
                4vw,
                38px
            );
    }


    .zd-mv__card-content p {
        font-size: 12px;

        line-height: 1.6;
    }


    .zd-mv__points {
        gap: 7px 10px;
    }


    .zd-mv__points span {
        font-size: 8px;
    }


    .zd-mv__impact {
        width: 68px;
        height: 68px;
    }


    .zd-mv__impact-mark {
        width: 32px;
        height: 32px;
    }
}


/* =========================================================
   MOBILE-L
   576px — 767px
========================================================= */

@media (max-width: 767px) {

    .zd-mv {
        padding:
            72px 0
            70px;
    }


    .zd-mv__container {
        width:
            calc(100% - 32px);
    }


    .zd-mv__heading {
        margin-bottom: 40px;
    }


    .zd-mv__title {
        font-size:
            clamp(
                43px,
                11vw,
                58px
            );
    }


    .zd-mv__intro {
        max-width: 550px;

        font-size: 13px;

        line-height: 1.65;
    }


    /*
       Cards become vertical, but the
       animation still comes from opposite
       horizontal sides.
    */
    .zd-mv__stage {
        display: flex;

        flex-direction: column;

        gap: 18px;

        min-height: auto;
    }


    .zd-mv__card {
        width: 100%;

        min-height: 390px;

        padding: 27px;

        border-radius: 22px;
    }


    .zd-mv__card--mission {
        transform:
            translateX(-115%);
    }


    .zd-mv__card--vision {
        transform:
            translateX(115%);
    }


    .zd-mv__card-content {
        padding-top: 32px;

        padding-bottom: 30px;
    }


    .zd-mv__card-content h3 {
        font-size:
            clamp(
                31px,
                8vw,
                43px
            );
    }


    .zd-mv__card-content p {
        max-width: 560px;

        font-size: 13px;

        line-height: 1.65;
    }


    .zd-mv__points {
        gap: 9px 18px;
    }


    .zd-mv__points span {
        font-size: 9px;
    }


    /*
       Impact becomes the divider between
       the two cards.
    */
    .zd-mv__impact {
        top: 50%;

        width: 68px;
        height: 68px;
    }


    .zd-mv__impact-line {
        width: 0;

        box-shadow:
            -120px 0 0 var(--mv-red),
            120px 0 0 var(--mv-red);
    }


    .zd-mv__philosophy {
        margin-top: 52px;

        gap: 14px;
    }


    .zd-mv__philosophy-content {
        min-width: 0;
    }


    .zd-mv__philosophy-content h3 {
        font-size:
            clamp(
                24px,
                7vw,
                34px
            );
    }


    .zd-mv__grid-line--one {
        left: 50%;
    }
}


/* =========================================================
   MOBILE-M
   391px — 575px
========================================================= */

@media (max-width: 575px) {

    .zd-mv {
        padding:
            62px 0
            62px;
    }


    .zd-mv__container {
        width:
            calc(100% - 26px);
    }


    .zd-mv__eyebrow {
        font-size: 9px;

        letter-spacing: .17em;
    }


    .zd-mv__eyebrow-line {
        width: 25px;
    }


    .zd-mv__title {
        font-size:
            clamp(
                38px,
                11.5vw,
                52px
            );
    }


    .zd-mv__intro {
        margin-top: 18px;

        font-size: 12px;
    }


    .zd-mv__card {
        min-height: 370px;

        padding: 23px;

        border-radius: 19px;
    }


    .zd-mv__card-top {
        padding-bottom: 14px;
    }


    .zd-mv__number {
        font-size: 12px;
    }


    .zd-mv__card-label {
        font-size: 8px;
    }


    .zd-mv__card-content {
        padding-top: 27px;

        padding-bottom: 24px;
    }


    .zd-mv__card-content h3 {
        font-size:
            clamp(
                28px,
                8vw,
                38px
            );
    }


    .zd-mv__card-content p {
        margin-top: 19px;

        font-size: 11px;

        line-height: 1.65;
    }


    .zd-mv__points {
        padding-top: 15px;

        gap: 7px 12px;
    }


    .zd-mv__points span {
        font-size: 7px;
    }


    .zd-mv__points i {
        width: 5px;
        height: 5px;
    }


    .zd-mv__impact {
        width: 60px;
        height: 60px;
    }


    .zd-mv__impact-mark {
        width: 28px;
        height: 28px;
    }


    .zd-mv__impact-mark span {
        width: 2px;
        height: 9px;
    }


    .zd-mv__philosophy {
        grid-template-columns:
            1fr;

        gap: 15px;

        margin-top: 45px;
    }


    .zd-mv__philosophy-line {
        width: 100%;
    }


    .zd-mv__philosophy-line:last-child {
        display: none;
    }


    .zd-mv__philosophy-content h3 {
        font-size: 26px;
    }


    .zd-mv__philosophy-content p {
        font-size: 11px;
    }
}


/* =========================================================
   MOBILE-S
   390px and below
========================================================= */

@media (max-width: 390px) {

    .zd-mv {
        padding:
            55px 0
            55px;
    }


    .zd-mv__container {
        width:
            calc(100% - 22px);
    }


    .zd-mv__title {
        font-size: 36px;
    }


    .zd-mv__intro {
        font-size: 11px;
    }


    .zd-mv__card {
        min-height: 350px;

        padding: 20px;

        border-radius: 17px;
    }


    .zd-mv__card-content {
        padding-top: 23px;

        padding-bottom: 20px;
    }


    .zd-mv__card-content h3 {
        font-size: 27px;
    }


    .zd-mv__card-content p {
        font-size: 10.5px;

        line-height: 1.6;
    }


    .zd-mv__points {
        gap: 6px 9px;
    }


    .zd-mv__points span {
        font-size: 6.5px;
    }


    .zd-mv__philosophy-content h3 {
        font-size: 23px;
    }


    .zd-mv__philosophy-content p {
        font-size: 10px;
    }
}


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

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

    .zd-mv *,
    .zd-mv *::before,
    .zd-mv *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}

/* =========================================================
   ZENDOJO — HISTORY / THE PATH WE FORGED
   Section scope: .zd-history
   ========================================================= */

.zd-history {
    --history-bg: #f4f1ec;
    --history-surface: #ffffff;
    --history-surface-soft: #ebe7e1;

    --history-text: #111111;
    --history-text-soft: #4b4946;
    --history-text-faint: #77736e;

    --history-red: #e53935;
    --history-red-dark: #bd2825;
    --history-red-soft: #f06460;

    --history-border: rgba(17, 17, 17, 0.13);
    --history-border-strong: rgba(17, 17, 17, 0.22);

    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;

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

    padding: clamp(88px, 9vw, 150px)
             clamp(20px, 4vw, 64px)
             clamp(100px, 10vw, 170px);
}


/* =========================================================
   AMBIENT BACKGROUND
   ========================================================= */

.zd-history__ambient {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.zd-history__grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            90deg,
            transparent 49.8%,
            var(--history-border) 50%,
            transparent 50.2%
        );

    opacity: 0.35;
}

.zd-history__grid::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            var(--history-border) 1px,
            transparent 1px
        );

    background-size: 100% 120px;
    opacity: 0.28;
}

.zd-history__orb {
    position: absolute;
    width: 420px;
    height: 420px;

    border-radius: 50%;

    border: 1px solid var(--history-border);
    opacity: 0.4;

    filter: blur(0.2px);
}

.zd-history__orb--one {
    top: 7%;
    left: -300px;
}

.zd-history__orb--two {
    right: -300px;
    bottom: 12%;
}

.zd-history__grain {
    position: absolute;
    inset: 0;

    opacity: 0.055;

    background-image:
        radial-gradient(
            rgba(0, 0, 0, 0.9) 0.6px,
            transparent 0.7px
        );

    background-size: 5px 5px;
}


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

.zd-history__container {
    width: min(1400px, 100%);
    margin-inline: auto;
}


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

.zd-history__header {
    position: relative;
    margin-bottom: clamp(75px, 9vw, 135px);
}

.zd-history__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;

    color: var(--history-red);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
    line-height: 1.4;
}

.zd-history__eyebrow-line {
    width: 42px;
    height: 2px;

    flex: 0 0 auto;

    background: var(--history-red);
}

.zd-history__heading-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    align-items: end;
    gap: clamp(40px, 8vw, 130px);
}

.zd-history__title {
    max-width: 800px;
    margin: 0;

    font-size: clamp(44px, 6.4vw, 92px);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.92;

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

.zd-history__title span {
    display: block;
    color: var(--history-red);
}

.zd-history__intro {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 18px;

    max-width: 430px;

    padding-bottom: 8px;

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

.zd-history__intro-mark {
    color: var(--history-red);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.zd-history__intro p {
    margin: 0;

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

    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 500;
    line-height: 1.7;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.zd-history__timeline {
    position: relative;

    width: 100%;

    padding-top: 20px;
}


/* =========================================================
   CENTRAL PATH
   ========================================================= */

.zd-history__path {
    position: absolute;
    top: 0;
    bottom: 220px;
    left: 50%;

    width: 2px;

    transform: translateX(-50%);

    pointer-events: none;
}

.zd-history__path-base,
.zd-history__path-progress {
    position: absolute;
    inset: 0;

    display: block;

    width: 2px;
}

.zd-history__path-base {
    background:
        repeating-linear-gradient(
            to bottom,
            var(--history-border-strong) 0 7px,
            transparent 7px 14px
        );
}

.zd-history__path-progress {
    height: 0;

    background: var(--history-red);

    box-shadow:
        0 0 12px rgba(229, 57, 53, 0.22);

    transition: height 0.12s linear;
}


/* =========================================================
   MILESTONE
   ========================================================= */

.zd-history__milestone {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
    align-items: center;

    min-height: 420px;

    margin-bottom: clamp(30px, 5vw, 80px);

    opacity: 0;
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.zd-history__milestone--left {
    transform: translateX(-70px);
}

.zd-history__milestone--right {
    transform: translateX(70px);
}

.zd-history__milestone.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   YEAR
   ========================================================= */

.zd-history__year {
    display: flex;
    flex-direction: column;

    gap: 7px;

    align-self: center;
}

.zd-history__milestone--left .zd-history__year {
    grid-column: 1;
    grid-row: 1;

    align-items: flex-end;

    padding-right: clamp(25px, 4vw, 70px);

    text-align: right;
}

.zd-history__milestone--right .zd-history__year {
    grid-column: 3;
    grid-row: 1;

    align-items: flex-start;

    padding-left: clamp(25px, 4vw, 70px);

    text-align: left;
}

.zd-history__year span {
    font-size: clamp(42px, 5.5vw, 78px);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.85;

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

.zd-history__year small {
    color: var(--history-text-faint);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.17em;
    line-height: 1.4;
}


/* =========================================================
   CENTER MARKER
   ========================================================= */

.zd-history__marker {
    position: relative;
    z-index: 5;

    grid-column: 2;
    grid-row: 1;

    justify-self: center;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--history-bg);

    transform: scale(0.55) rotate(-12deg);
    opacity: 0;

    transition:
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s ease;
}

.zd-history__milestone.is-visible .zd-history__marker {
    transform: scale(1) rotate(0);
    opacity: 1;
}

.zd-history__marker-ring {
    position: absolute;
    inset: 0;

    border: 2px solid var(--history-red);
    border-radius: 50%;
}

.zd-history__marker-core {
    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: var(--history-red);

    box-shadow:
        0 0 0 5px var(--history-bg),
        0 0 0 7px var(--history-red);
}

.zd-history__marker-star {
    position: absolute;

    color: var(--history-red);

    font-size: 12px;

    opacity: 0;
    transform: scale(0);
}

.zd-history__milestone.is-visible
.zd-history__marker-star {
    animation: zd-history-impact 0.8s 0.35s ease forwards;
}

@keyframes zd-history-impact {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    55% {
        opacity: 1;
        transform: scale(1.35);
    }

    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}


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

.zd-history__content {
    position: relative;

    width: min(100%, 540px);

    padding: clamp(27px, 3vw, 42px);

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

    border-radius: 28px;

    background: var(--history-surface);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.055);

    overflow: hidden;
}

.zd-history__content::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 4px;

    background: var(--history-red);

    transform: scaleY(0);

    transform-origin: center;

    transition:
        transform 0.7s 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.zd-history__milestone--left
.zd-history__content {
    grid-column: 3;
    grid-row: 1;

    justify-self: start;

    margin-left: clamp(20px, 3vw, 45px);
}

.zd-history__milestone--right
.zd-history__content {
    grid-column: 1;
    grid-row: 1;

    justify-self: end;

    margin-right: clamp(20px, 3vw, 45px);
}

.zd-history__milestone--left
.zd-history__content::before {
    right: 0;
}

.zd-history__milestone--right
.zd-history__content::before {
    left: 0;
}

.zd-history__milestone.is-visible
.zd-history__content::before {
    transform: scaleY(1);
}

.zd-history__content-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 26px;
}

.zd-history__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--history-red);
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
}

.zd-history__label {
    color: var(--history-red);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.zd-history__content h3 {
    margin: 0 0 17px;

    color: var(--history-text);

    font-size: clamp(25px, 2.5vw, 38px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.zd-history__content p {
    margin: 0;

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

    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    line-height: 1.75;
}

.zd-history__principle {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 28px;
    padding-top: 17px;

    border-top: 1px solid var(--history-border);

    color: var(--history-text-faint);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.zd-history__principle-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--history-red);
}


/* =========================================================
   NOW / FINAL MOMENT
   ========================================================= */

.zd-history__now {
    position: relative;

    width: min(760px, calc(100% - 40px));

    margin: 30px auto 0;

    padding: 2px;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            var(--history-red),
            transparent 42%,
            var(--history-border-strong)
        );

    opacity: 0;
    transform: translateY(70px);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.zd-history__now.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.zd-history__now-inner {
    position: relative;

    padding: clamp(40px, 6vw, 72px);

    border-radius: 32px;

    background: var(--history-surface);

    text-align: center;

    overflow: hidden;
}

.zd-history__now-inner::before {
    content: "∞";

    position: absolute;

    top: -70px;
    right: -25px;

    color: var(--history-red);

    font-family: Georgia, serif;
    font-size: 230px;
    line-height: 1;

    opacity: 0.035;
}

.zd-history__now-kicker {
    display: block;

    margin-bottom: 22px;

    color: var(--history-red);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.zd-history__now-year {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-bottom: 25px;
}

.zd-history__now-year strong {
    color: var(--history-text);

    font-size: clamp(26px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.zd-history__now-line {
    width: clamp(30px, 6vw, 90px);
    height: 1px;

    background: var(--history-red);
}

.zd-history__now h3 {
    position: relative;

    max-width: 600px;

    margin: 0 auto 20px;

    color: var(--history-text);

    font-size: clamp(32px, 4.5vw, 62px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.zd-history__now h3 span {
    display: block;
    color: var(--history-red);
}

.zd-history__now p {
    max-width: 570px;

    margin: 0 auto;

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

    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.75;
}

.zd-history__now-seal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 32px;
}

.zd-history__now-seal span {
    padding: 8px 13px;

    border: 1px solid var(--history-border-strong);
    border-radius: 999px;

    color: var(--history-text-faint);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}


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

@media (max-width: 1440px) {
    .zd-history__container {
        max-width: 1240px;
    }

    .zd-history__milestone {
        grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    }

    .zd-history__content {
        max-width: 500px;
    }
}


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

@media (max-width: 1200px) {
    .zd-history {
        padding-inline: clamp(28px, 4vw, 45px);
    }

    .zd-history__heading-wrap {
        gap: 55px;
    }

    .zd-history__title {
        font-size: clamp(44px, 6vw, 76px);
    }

    .zd-history__milestone {
        grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
        min-height: 390px;
    }

    .zd-history__content {
        max-width: 450px;
        padding: 30px;
    }

    .zd-history__year span {
        font-size: clamp(42px, 5vw, 65px);
    }
}


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

@media (max-width: 1024px) {
    .zd-history {
        padding-top: 90px;
        padding-bottom: 110px;
    }

    .zd-history__header {
        margin-bottom: 75px;
    }

    .zd-history__heading-wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .zd-history__intro {
        max-width: 600px;
    }

    .zd-history__milestone {
        grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
        min-height: 360px;
    }

    .zd-history__content {
        max-width: 370px;
        padding: 27px;
    }

    .zd-history__content h3 {
        font-size: 27px;
    }

    .zd-history__content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .zd-history__year span {
        font-size: 50px;
    }

    .zd-history__year small {
        font-size: 8px;
    }

    .zd-history__marker {
        width: 50px;
        height: 50px;
    }
}


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

@media (max-width: 767px) {
    .zd-history {
        padding:
            76px
            clamp(18px, 5vw, 28px)
            90px;
    }

    .zd-history__grid {
        opacity: 0.2;
    }

    .zd-history__header {
        margin-bottom: 62px;
    }

    .zd-history__eyebrow {
        margin-bottom: 18px;
    }

    .zd-history__title {
        font-size: clamp(42px, 11vw, 62px);
        line-height: 0.94;
    }

    .zd-history__intro {
        grid-template-columns: 30px 1fr;
        gap: 12px;
    }

    .zd-history__intro p {
        font-size: 14px;
        line-height: 1.65;
    }

    /* Vertical mobile path */
    .zd-history__path {
        left: 25px;
        bottom: 170px;

        transform: none;
    }

    .zd-history__timeline {
        padding-top: 0;
    }

    .zd-history__milestone,
    .zd-history__milestone--left,
    .zd-history__milestone--right {
        display: block;

        min-height: auto;

        margin-bottom: 65px;
        padding-left: 56px;

        opacity: 0;
        transform: translateY(45px);
    }

    .zd-history__milestone.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .zd-history__marker {
        position: absolute;

        top: 4px;
        left: 0;

        width: 50px;
        height: 50px;
    }

    .zd-history__milestone--left .zd-history__year,
    .zd-history__milestone--right .zd-history__year {
        display: flex;
        align-items: flex-start;

        padding: 0;
        margin-bottom: 17px;

        text-align: left;
    }

    .zd-history__year {
        gap: 6px;
    }

    .zd-history__year span {
        font-size: 45px;
    }

    .zd-history__year small {
        font-size: 8px;
        letter-spacing: 0.13em;
    }

    .zd-history__milestone--left .zd-history__content,
    .zd-history__milestone--right .zd-history__content {
        display: block;

        width: 100%;
        max-width: none;

        margin: 0;

        padding: 24px;

        border-radius: 22px;
    }

    .zd-history__content h3 {
        font-size: 26px;
    }

    .zd-history__content p {
        font-size: 14px;
        line-height: 1.72;
    }

    .zd-history__now {
        width: calc(100% - 56px);

        margin-left: 56px;
        margin-right: 0;
    }

    .zd-history__now-inner {
        padding: 38px 24px;
    }

    .zd-history__now h3 {
        font-size: clamp(31px, 8vw, 45px);
    }
}


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

@media (max-width: 575px) {
    .zd-history {
        padding:
            68px
            16px
            80px;
    }

    .zd-history__header {
        margin-bottom: 52px;
    }

    .zd-history__eyebrow {
        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .zd-history__eyebrow-line {
        width: 30px;
    }

    .zd-history__title {
        font-size: clamp(38px, 11.5vw, 52px);
    }

    .zd-history__intro {
        grid-template-columns: 25px 1fr;
    }

    .zd-history__intro p {
        font-size: 13px;
    }

    .zd-history__path {
        left: 21px;
    }

    .zd-history__milestone,
    .zd-history__milestone--left,
    .zd-history__milestone--right {
        padding-left: 46px;
        margin-bottom: 55px;
    }

    .zd-history__marker {
        width: 43px;
        height: 43px;
    }

    .zd-history__marker-core {
        width: 11px;
        height: 11px;
    }

    .zd-history__year span {
        font-size: 39px;
    }

    .zd-history__year small {
        max-width: 180px;

        font-size: 7px;
        line-height: 1.5;
    }

    .zd-history__milestone--left .zd-history__content,
    .zd-history__milestone--right .zd-history__content {
        padding: 21px;
        border-radius: 19px;
    }

    .zd-history__content-top {
        margin-bottom: 21px;
    }

    .zd-history__content h3 {
        margin-bottom: 14px;
        font-size: 23px;
    }

    .zd-history__content p {
        font-size: 13px;
        line-height: 1.7;
    }

    .zd-history__principle {
        margin-top: 22px;
        padding-top: 14px;
        font-size: 8px;
    }

    .zd-history__now {
        width: calc(100% - 46px);
        margin-left: 46px;
    }

    .zd-history__now-inner {
        padding: 34px 19px;
        border-radius: 26px;
    }

    .zd-history__now-kicker {
        font-size: 8px;
    }

    .zd-history__now-year strong {
        font-size: 24px;
    }

    .zd-history__now h3 {
        font-size: 31px;
    }

    .zd-history__now p {
        font-size: 13px;
        line-height: 1.7;
    }

    .zd-history__now-seal {
        gap: 6px;
    }

    .zd-history__now-seal span {
        padding: 7px 9px;
        font-size: 7px;
    }
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 390px) {
    .zd-history {
        padding-inline: 13px;
    }

    .zd-history__title {
        font-size: 36px;
    }

    .zd-history__intro p {
        font-size: 12px;
    }

    .zd-history__path {
        left: 18px;
    }

    .zd-history__milestone,
    .zd-history__milestone--left,
    .zd-history__milestone--right {
        padding-left: 39px;
    }

    .zd-history__marker {
        width: 37px;
        height: 37px;
    }

    .zd-history__marker-core {
        width: 9px;
        height: 9px;

        box-shadow:
            0 0 0 4px var(--history-bg),
            0 0 0 6px var(--history-red);
    }

    .zd-history__year span {
        font-size: 34px;
    }

    .zd-history__year small {
        font-size: 6.5px;
    }

    .zd-history__milestone--left .zd-history__content,
    .zd-history__milestone--right .zd-history__content {
        padding: 18px;
    }

    .zd-history__content h3 {
        font-size: 21px;
    }

    .zd-history__content p {
        font-size: 12px;
    }

    .zd-history__now {
        width: calc(100% - 39px);
        margin-left: 39px;
    }

    .zd-history__now-inner {
        padding: 30px 15px;
    }

    .zd-history__now h3 {
        font-size: 28px;
    }

    .zd-history__now p {
        font-size: 12px;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .zd-history *,
    .zd-history *::before,
    .zd-history *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .zd-history__milestone,
    .zd-history__now {
        opacity: 1;
        transform: none;
    }

    .zd-history__path-progress {
        height: 100% !important;
    }
}


/* =========================================================
   ZENDOJO — ABOUT CTA
   NORMAL FULL-WIDTH CTA
   Section scoped: .zd-about-cta
========================================================= */

.zd-about-cta {

    --zd-cta-bg: #f4f1ec;
    --zd-cta-text: #111111;
    --zd-cta-text-soft: #55514c;
    --zd-cta-red: #e53935;
    --zd-cta-red-dark: #bd2825;
    --zd-cta-border: rgba(17, 17, 17, 0.18);

    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 690px;

    padding:
        clamp(85px, 9vw, 135px)
        clamp(20px, 5vw, 70px)
        clamp(75px, 8vw, 120px);

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

    overflow: hidden;

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

    text-align: center;
}


/* =========================================================
   SUBTLE BACKGROUND DETAILS
========================================================= */

.zd-about-cta::before {

    content: "";

    position: absolute;

    width: min(680px, 70vw);
    aspect-ratio: 1;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(229, 57, 53, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


.zd-about-cta::after {

    content: "";

    position: absolute;

    width: 1px;
    height: 150px;

    left: 50%;
    bottom: -55px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(229, 57, 53, 0.5),
            transparent
        );

    transform: translateX(-50%);

    pointer-events: none;
}


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

.zd-about-cta__content {

    position: relative;
    z-index: 2;

    width: min(900px, 100%);

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

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.zd-about-cta__eyebrow {

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

    gap: 16px;

    margin-bottom: 26px;

    color: var(--zd-cta-red);

    font-family: "Manrope", sans-serif;
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 800;

    letter-spacing: 0.24em;
    line-height: 1;

    opacity: 0;
    transform: translateY(20px);
}


.zd-about-cta.is-visible
.zd-about-cta__eyebrow {

    animation:
        zdAboutCtaReveal
        0.65s
        cubic-bezier(.16, 1, .3, 1)
        0.1s forwards;
}


.zd-about-cta__eyebrow-line {

    display: block;

    width: clamp(25px, 4vw, 55px);
    height: 1px;

    background: var(--zd-cta-red);
}


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

.zd-about-cta__title {

    margin: 0;

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

    font-family: "Manrope", sans-serif;
    font-size: clamp(46px, 6.3vw, 86px);
    font-weight: 800;

    line-height: 0.98;
    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.zd-about-cta__title-line {

    display: block;

    opacity: 0;
    transform: translateY(45px);
}


.zd-about-cta.is-visible
.zd-about-cta__title-line:first-child {

    animation:
        zdAboutCtaReveal
        0.8s
        cubic-bezier(.16, 1, .3, 1)
        0.28s forwards;
}


.zd-about-cta.is-visible
.zd-about-cta__title-line--accent {

    animation:
        zdAboutCtaReveal
        0.8s
        cubic-bezier(.16, 1, .3, 1)
        0.42s forwards;
}


.zd-about-cta__title-line--accent {

    color: var(--zd-cta-red);
}


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

.zd-about-cta__description {

    width: min(760px, 100%);

    margin: 34px auto 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(15px, 1.25vw, 17px);
    font-weight: 500;

    line-height: 1.8;

    color: var(--zd-cta-text-soft);

    opacity: 0;
    transform: translateY(28px);
}


.zd-about-cta.is-visible
.zd-about-cta__description {

    animation:
        zdAboutCtaReveal
        0.75s
        cubic-bezier(.16, 1, .3, 1)
        0.62s forwards;
}


/* =========================================================
   SECONDARY TEXT
========================================================= */

.zd-about-cta__subtext {

    width: min(690px, 100%);

    margin: 15px auto 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 500;

    line-height: 1.75;

    color: var(--zd-cta-text-soft);

    opacity: 0;
    transform: translateY(22px);
}


.zd-about-cta.is-visible
.zd-about-cta__subtext {

    animation:
        zdAboutCtaReveal
        0.7s
        cubic-bezier(.16, 1, .3, 1)
        0.76s forwards;
}


/* =========================================================
   VALUES
========================================================= */

.zd-about-cta__values {

    margin-top: 29px;

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

    gap: 17px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(10px, 0.8vw, 12px);
    font-weight: 800;

    letter-spacing: 0.17em;

    color: var(--zd-cta-text);

    opacity: 0;
    transform: translateY(20px);
}


.zd-about-cta.is-visible
.zd-about-cta__values {

    animation:
        zdAboutCtaReveal
        0.65s
        cubic-bezier(.16, 1, .3, 1)
        0.88s forwards;
}


.zd-about-cta__value-dot {

    width: 4px;
    height: 4px;

    flex: 0 0 4px;

    border-radius: 50%;

    background: var(--zd-cta-red);
}


/* =========================================================
   CTA BUTTON
========================================================= */

.zd-about-cta__button {

    min-width: 150px;
    min-height: 50px;

    margin-top: 35px;

    padding:
        0 20px;

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

    gap: 12px;

    border:
        1px solid
        var(--zd-cta-text);

    border-radius: 999px;

    background: var(--zd-cta-text);
    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: 0.06em;

    text-decoration: none;
    text-transform: uppercase;

    opacity: 0;
    transform:
        translateY(25px)
        scale(0.9);

    box-shadow:
        0 10px 24px rgba(17, 17, 17, 0.14);

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


.zd-about-cta.is-visible
.zd-about-cta__button {

    animation:
        zdAboutCtaButton
        0.8s
        cubic-bezier(.16, 1, .3, 1)
        1s forwards;
}


.zd-about-cta__button:hover {

    background: var(--zd-cta-red);
    color: #ffffff;

    border-color: var(--zd-cta-red);

    transform:
        translateY(-3px)
        scale(1.025);

    box-shadow:
        0 14px 30px rgba(229, 57, 53, 0.22);
}


.zd-about-cta__button:focus-visible {

    outline:
        3px solid
        rgba(229, 57, 53, 0.35);

    outline-offset: 5px;
}


.zd-about-cta__button-arrow {

    font-size: 18px;
    line-height: 1;

    transition:
        transform 0.25s ease;
}


.zd-about-cta__button:hover
.zd-about-cta__button-arrow {

    transform:
        translate(3px, -3px);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.zd-about-cta__bottom {

    width: 100%;

    margin-top: 52px;

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

    gap: 15px;

    color: var(--zd-cta-text-soft);

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.19em;
    line-height: 1.4;

    opacity: 0;
    transform: translateY(18px);
}


.zd-about-cta.is-visible
.zd-about-cta__bottom {

    animation:
        zdAboutCtaReveal
        0.65s
        cubic-bezier(.16, 1, .3, 1)
        1.15s forwards;
}


.zd-about-cta__bottom-line {

    display: block;

    width: clamp(25px, 5vw, 65px);
    height: 1px;

    background: var(--zd-cta-border);
}


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

@keyframes zdAboutCtaReveal {

    from {

        opacity: 0;
        transform: translateY(30px);
    }

    to {

        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes zdAboutCtaButton {

    0% {

        opacity: 0;

        transform:
            translateY(25px)
            scale(0.9);
    }

    70% {

        opacity: 1;

        transform:
            translateY(-3px)
            scale(1.025);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   LAPTOP-L — 1440px
========================================================= */

@media (max-width: 1440px) {

    .zd-about-cta {

        min-height: 650px;
    }

    .zd-about-cta__title {

        font-size: clamp(48px, 6vw, 80px);
    }
}


/* =========================================================
   LAPTOP — 1200px
========================================================= */

@media (max-width: 1200px) {

    .zd-about-cta {

        min-height: 620px;

        padding:
            85px
            40px
            75px;
    }

    .zd-about-cta__content {

        width: min(820px, 100%);
    }

    .zd-about-cta__description {

        max-width: 700px;
    }
}


/* =========================================================
   TABLET — 1024px
========================================================= */

@media (max-width: 1024px) {

    .zd-about-cta {

        min-height: 590px;

        padding:
            75px
            28px
            65px;
    }

    .zd-about-cta__title {

        font-size: clamp(42px, 7vw, 68px);

        line-height: 1;
    }

    .zd-about-cta__description {

        margin-top: 28px;

        font-size: 15px;
        line-height: 1.75;
    }

    .zd-about-cta__subtext {

        font-size: 14px;
    }

    .zd-about-cta__values {

        margin-top: 25px;
    }

    .zd-about-cta__button {

        margin-top: 30px;
    }

    .zd-about-cta__bottom {

        margin-top: 42px;
    }
}


/* =========================================================
   MOBILE-L — 767px
========================================================= */

@media (max-width: 767px) {

    .zd-about-cta {

        min-height: auto;

        padding:
            75px
            18px
            65px;
    }

    .zd-about-cta::before {

        width: 90vw;
    }

    .zd-about-cta__content {

        width: 100%;
    }

    .zd-about-cta__eyebrow {

        gap: 11px;

        margin-bottom: 22px;

        font-size: 10px;
        letter-spacing: 0.19em;
    }

    .zd-about-cta__eyebrow-line {

        width: 28px;
    }

    .zd-about-cta__title {

        font-size: clamp(34px, 9vw, 50px);

        line-height: 1.02;

        letter-spacing: -0.045em;
    }

    .zd-about-cta__description {

        margin-top: 25px;

        font-size: 14px;

        line-height: 1.72;
    }

    .zd-about-cta__subtext {

        margin-top: 14px;

        font-size: 13px;

        line-height: 1.7;
    }

    .zd-about-cta__values {

        flex-wrap: wrap;

        gap: 10px 13px;

        margin-top: 24px;

        font-size: 9px;

        letter-spacing: 0.14em;
    }

    .zd-about-cta__value-dot {

        width: 3px;
        height: 3px;

        flex-basis: 3px;
    }

    .zd-about-cta__button {

        min-width: 145px;
        min-height: 49px;

        margin-top: 29px;

        font-size: 13px;
    }

    .zd-about-cta__bottom {

        margin-top: 40px;

        gap: 10px;

        font-size: 8px;

        letter-spacing: 0.13em;
    }

    .zd-about-cta__bottom-line {

        width: 25px;
    }
}


/* =========================================================
   MOBILE-M — 480px
========================================================= */

@media (max-width: 480px) {

    .zd-about-cta {

        padding:
            65px
            15px
            58px;
    }

    .zd-about-cta__eyebrow {

        margin-bottom: 19px;

        font-size: 9px;
        letter-spacing: 0.17em;
    }

    .zd-about-cta__eyebrow-line {

        width: 23px;
    }

    .zd-about-cta__title {

        font-size: clamp(29px, 9.7vw, 42px);

        line-height: 1.04;
    }

    .zd-about-cta__description {

        margin-top: 23px;

        font-size: 13px;

        line-height: 1.7;
    }

    .zd-about-cta__subtext {

        margin-top: 13px;

        font-size: 12.5px;

        line-height: 1.68;
    }

    .zd-about-cta__values {

        margin-top: 22px;

        gap: 9px 10px;

        font-size: 8px;
    }

    .zd-about-cta__button {

        min-width: 138px;
        min-height: 47px;

        margin-top: 26px;

        padding: 0 17px;

        font-size: 12px;
    }

    .zd-about-cta__button-arrow {

        font-size: 16px;
    }

    .zd-about-cta__bottom {

        margin-top: 35px;

        font-size: 7.5px;
    }
}


/* =========================================================
   MOBILE-S — 390px
========================================================= */

@media (max-width: 390px) {

    .zd-about-cta {

        padding:
            55px
            12px
            50px;
    }

    .zd-about-cta__eyebrow {

        gap: 8px;

        margin-bottom: 17px;

        font-size: 8px;

        letter-spacing: 0.15em;
    }

    .zd-about-cta__eyebrow-line {

        width: 19px;
    }

    .zd-about-cta__title {

        font-size: clamp(26px, 9.5vw, 35px);

        line-height: 1.05;
    }

    .zd-about-cta__description {

        margin-top: 21px;

        font-size: 12.5px;

        line-height: 1.68;
    }

    .zd-about-cta__subtext {

        margin-top: 12px;

        font-size: 12px;

        line-height: 1.65;
    }

    .zd-about-cta__values {

        margin-top: 20px;

        gap: 8px;

        font-size: 7.5px;

        letter-spacing: 0.11em;
    }

    .zd-about-cta__button {

        min-width: 132px;
        min-height: 45px;

        margin-top: 24px;

        padding: 0 15px;

        font-size: 11px;
    }

    .zd-about-cta__bottom {

        margin-top: 32px;

        gap: 7px;

        font-size: 7px;

        letter-spacing: 0.1em;
    }

    .zd-about-cta__bottom-line {

        width: 18px;
    }
}


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

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

    .zd-about-cta__eyebrow,
    .zd-about-cta__title-line,
    .zd-about-cta__description,
    .zd-about-cta__subtext,
    .zd-about-cta__values,
    .zd-about-cta__button,
    .zd-about-cta__bottom {

        animation: none !important;
        transition: none !important;

        opacity: 1;
        transform: none;
    }

    .zd-about-cta::before,
    .zd-about-cta::after {

        display: none;
    }
}

/* =========================================================
   PROGRAMS PAGE — WHY OUR PROGRAM IS DIFFERENT
   Scoped to .zd-program-difference
   ========================================================= */
.zd-program-difference {
    position: relative;
    overflow: hidden;
    padding: clamp(38px, 5vw, 72px) var(--nav-padding-inline, clamp(16px, 4vw, 58px));
    background: var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}

.zd-program-difference *,
.zd-program-difference *::before,
.zd-program-difference *::after { box-sizing: border-box; }

.zd-program-difference__inner { width: min(1320px, 100%); margin-inline: auto; }

.zd-program-difference__header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .7fr);
    align-items: end;
    gap: clamp(28px, 7vw, 100px);
    margin-bottom: clamp(24px, 3vw, 42px);
}

.zd-program-difference__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--zd-hero-accent-text, #C92F2C);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.5;
}

.zd-program-difference__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent, #E53935);
}

.zd-program-difference__header h2 {
    margin: 0;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(40px, 5.5vw, 74px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.zd-program-difference__header h2 span { color: var(--zd-hero-accent-text, #C92F2C); }

.zd-program-difference__intro {
    max-width: 52ch;
    margin: 0 0 4px;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.75;
}

.zd-program-difference__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(14px, 2vw, 24px);
}

.zd-program-difference__card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
    border-radius: clamp(18px, 2vw, 26px);
    background: var(--zd-hero-card-bg, #E9E9E4);
    color: var(--color-text, #111111);
    box-shadow: 0 18px 46px rgba(17, 17, 17, .07);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.zd-program-difference__card:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 56px rgba(17, 17, 17, .13);
}

.zd-program-difference__visual {
    position: relative;
    display: grid;
    min-height: clamp(230px, 23vw, 300px);
    place-items: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-background, #FAFAF7) 78%, var(--color-accent, #E53935) 7%);
}

.zd-program-difference__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.zd-program-difference__visual--cutout img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: 50% 65%;
    mix-blend-mode: multiply;
}

.zd-program-difference__visual--photo img { object-position: center 38%; }

.zd-program-difference__card:hover .zd-program-difference__visual img { transform: scale(1.045); }

.zd-program-difference__visual-note {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    padding: 8px 10px;
    border: 1px solid rgba(250, 250, 247, .35);
    border-radius: 8px;
    background: rgba(17, 17, 17, .74);
    color: #FAFAF7;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.45;
    text-align: right;
}

.zd-program-difference__visual--safety {
    background: var(--color-surface-alt, #333333);
    color: #FAFAF7;
}

.zd-program-difference__safety-mark {
    position: relative;
    z-index: 1;
    color: rgba(250, 250, 247, .86);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(25px, 3vw, 40px);
    line-height: 1.12;
    letter-spacing: -.025em;
    text-align: center;
}

.zd-program-difference__safety-mark b {
    color: var(--zd-hero-accent-text, #F2605C);
    font-weight: 400;
}

.zd-program-difference__safety-ring {
    position: absolute;
    width: 220px;
    aspect-ratio: 1;
    border: 1px solid rgba(250, 250, 247, .14);
    border-radius: 50%;
}

.zd-program-difference__safety-ring--one { transform: scale(1.35); }
.zd-program-difference__safety-ring--two { transform: scale(1.8); }

.zd-program-difference__card-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: clamp(20px, 2.2vw, 30px);
}

.zd-program-difference__card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--zd-hero-muted, #333333);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
}

.zd-program-difference__card-meta > span:first-child { color: var(--zd-hero-accent-text, #C92F2C); }
.zd-program-difference__card-meta i { width: 24px; height: 1px; background: var(--color-accent, #E53935); opacity: .72; }

.zd-program-difference__card h3 {
    margin: 0;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.zd-program-difference__card p {
    margin: 15px 0 20px;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(17px, 1.25vw, 19px);
    line-height: 1.75;
}

.zd-program-difference__takeaway {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
    color: var(--color-text, #111111);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.zd-program-difference__takeaway span {
    color: var(--zd-hero-accent-text, #C92F2C);
    font-size: 18px;
}

.zd-program-difference__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: 22px;
    border-top: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
}

.zd-program-difference__bottom p {
    margin: 0;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.6;
}

.zd-program-difference__bottom a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--color-text, #111111);
    font-size: 15px;
    font-weight: 600;
    text-decoration-color: var(--color-accent, #E53935);
    text-underline-offset: 5px;
    white-space: nowrap;
}

.zd-program-difference__bottom a span { color: var(--zd-hero-accent-text, #C92F2C); transition: transform .2s ease; }
.zd-program-difference__bottom a:hover span { transform: translateX(4px); }
.zd-program-difference__bottom a:focus-visible { outline: 3px solid var(--color-accent, #E53935); outline-offset: 4px; }

.zd-program-difference.is-motion-ready [data-program-difference-reveal] {
    opacity: 0;
    transition: opacity .75s ease, transform .85s cubic-bezier(.2, .8, .2, 1);
}

.zd-program-difference.is-motion-ready [data-program-difference-reveal="up"] { transform: translateY(34px); }
.zd-program-difference.is-motion-ready [data-program-difference-reveal="left"] { transform: translateX(-44px); }
.zd-program-difference.is-motion-ready [data-program-difference-reveal="right"] { transform: translateX(44px); }
.zd-program-difference [data-program-difference-reveal].is-visible { opacity: 1; transform: translate(0, 0); }
.zd-program-difference__grid .zd-program-difference__card:nth-child(2) { transition-delay: 100ms; }
.zd-program-difference__grid .zd-program-difference__card:nth-child(3) { transition-delay: 190ms; }

@media (max-width: 1023px) {
    .zd-program-difference__header { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 30px; }
    .zd-program-difference__grid { gap: 14px; }
    .zd-program-difference__card-content { padding: 20px; }
    .zd-program-difference__card h3 { font-size: clamp(22px, 2.8vw, 29px); }
    .zd-program-difference__card p { font-size: 17px; }
}

@media (max-width: 767px) {
    .zd-program-difference { padding-block: 52px; }
    .zd-program-difference__header { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
    .zd-program-difference__header h2 { font-size: clamp(36px, 9vw, 54px); }
    .zd-program-difference__intro { font-size: 18px; }
    .zd-program-difference__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .zd-program-difference__visual { min-height: 230px; }
    .zd-program-difference__card-content { padding: 22px; }
    .zd-program-difference__card h3 { font-size: 28px; }
    .zd-program-difference__card p { font-size: 18px; }
    .zd-program-difference__bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 424px) {
    .zd-program-difference { padding: 44px 16px; }
    .zd-program-difference__header h2 { font-size: 36px; }
    .zd-program-difference__intro { font-size: 17px; }
    .zd-program-difference__visual { min-height: 205px; }
    .zd-program-difference__card-content { padding: 19px; }
    .zd-program-difference__card h3 { font-size: 25px; }
    .zd-program-difference__card p { font-size: 17px; }
}

@media (max-width: 374px) {
    .zd-program-difference { padding-inline: 13px; }
    .zd-program-difference__eyebrow { font-size: 10px; }
    .zd-program-difference__header h2 { font-size: 33px; }
    .zd-program-difference__card-meta { font-size: 9px; gap: 7px; }
    .zd-program-difference__card p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .zd-program-difference *,
    .zd-program-difference *::before,
    .zd-program-difference *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* PROGRAMS PAGE — denser editorial treatment for the life-skills feature */
.zd-program-difference {
    isolation: isolate;
    padding-inline: var(--nav-padding-inline, clamp(16px, 4vw, 58px));
    background:
        radial-gradient(ellipse at 92% 5%, color-mix(in srgb, var(--color-accent, #E53935) 11%, transparent), transparent 34%),
        var(--color-background, #FAFAF7);
}

.zd-program-difference__inner { width: min(1320px, 100%); margin-inline: auto; }

.zd-program-difference::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: clamp(22px, 5vw, 78px);
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, var(--zd-hero-border, rgba(17, 17, 17, .14)) 16%, var(--zd-hero-border, rgba(17, 17, 17, .14)) 84%, transparent);
    content: "";
    opacity: .55;
}

.zd-program-difference__header { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .72fr); }
.zd-program-difference__header h2 { max-width: 14ch; }
.zd-program-difference__header h2 span { position: relative; display: inline-block; }
.zd-program-difference__header h2 span::after {
    position: absolute;
    right: 0;
    bottom: -.08em;
    left: 0;
    height: .11em;
    background: var(--color-accent, #E53935);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
}
.zd-program-difference__header.is-visible h2 span::after { animation: zdDifferenceUnderline .8s .25s cubic-bezier(.2, .8, .2, 1) forwards; }

.zd-program-difference__intro-wrap { align-self: end; }
.zd-program-difference__intro { max-width: 46ch; margin-bottom: 18px; }
.zd-program-difference__class-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
    border-radius: 999px;
    color: var(--color-text, #111111);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
}
.zd-program-difference__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent, #E53935); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent, #E53935) 40%, transparent); }
.zd-program-difference__header.is-visible .zd-program-difference__pulse { animation: zdDifferencePulse 1.8s .4s infinite; }

.zd-program-difference__grid { align-items: stretch; gap: clamp(12px, 1.35vw, 20px); }
.zd-program-difference__card {
    border-radius: 15px;
    box-shadow: 0 18px 44px rgba(17, 17, 17, .09);
}
.zd-program-difference__card::after {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--color-accent, #E53935);
    content: "";
    transition: height .55s cubic-bezier(.2, .8, .2, 1);
}
.zd-program-difference__card:hover::after,
.zd-program-difference__card.is-visible::after { height: 100%; }

.zd-program-difference__visual { min-height: clamp(245px, 25vw, 330px); }
.zd-program-difference__card--confidence .zd-program-difference__visual,
.zd-program-difference__card--safety .zd-program-difference__visual { background: linear-gradient(145deg, #191919, #353535 65%, #6b1c1a); }
.zd-program-difference__card--confidence .zd-program-difference__visual--cutout img { mix-blend-mode: screen; }
.zd-program-difference__card--focus .zd-program-difference__visual { flex: 1 1 auto; min-height: clamp(245px, 25vw, 330px); }
.zd-program-difference__visual::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, .26));
    content: "";
    pointer-events: none;
}
.zd-program-difference__visual img { transform: scale(1.025); }
.zd-program-difference__card.is-visible .zd-program-difference__visual img { animation: zdDifferenceImageIn .95s cubic-bezier(.2, .8, .2, 1) both; }
.zd-program-difference__visual--cutout img { z-index: 0; }
.zd-program-difference__visual--cutout::after { background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--color-accent, #E53935) 20%, transparent)); }
.zd-program-difference__visual-index {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 17px;
    color: #fff;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: 18px;
    letter-spacing: .03em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.zd-program-difference__visual-index i { color: rgba(255, 255, 255, .72); font-family: var(--font-body, "Inter", sans-serif); font-size: 10px; font-style: normal; }
.zd-program-difference__visual-note { z-index: 2; right: 16px; bottom: 16px; font-size: 10px; }

.zd-program-difference__visual--safety { background: linear-gradient(145deg, #191919, #353535 65%, #6b1c1a); }
.zd-program-difference__visual--safety::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 175px;
    height: 175px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
}
.zd-program-difference__safety-mark { z-index: 1; font-size: clamp(31px, 3.4vw, 47px); line-height: 1.03; }
.zd-program-difference__safety-ring { z-index: 0; border-color: rgba(255, 255, 255, .2); }
.zd-program-difference__card.is-visible .zd-program-difference__safety-ring--one { animation: zdDifferenceOrbit 18s linear infinite; }
.zd-program-difference__card.is-visible .zd-program-difference__safety-ring--two { animation: zdDifferenceOrbit 26s linear infinite reverse; }
.zd-program-difference__safety-cross { position: absolute; z-index: 1; right: 23%; top: 22%; color: var(--zd-hero-accent-text, #F2605C); font-size: 32px; font-weight: 300; animation: zdDifferenceFloat 3.5s ease-in-out infinite; }

.zd-program-difference__card-content { padding: clamp(20px, 2vw, 28px); }
.zd-program-difference__card-meta { flex-wrap: wrap; margin-bottom: 12px; font-size: 9px; }
.zd-program-difference__card h3 { font-size: clamp(25px, 2.1vw, 32px); }
.zd-program-difference__card p { margin: 12px 0 16px; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.62; }
.zd-program-difference__outcomes {
    display: grid;
    gap: 9px;
    margin: 0 0 5px;
    padding: 0;
    color: var(--color-text, #111111);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    list-style: none;
}
.zd-program-difference__outcomes li { display: flex; align-items: flex-start; gap: 9px; }
.zd-program-difference__outcomes li span { color: var(--zd-hero-accent-text, #C92F2C); font-weight: 700; }
.zd-program-difference__card.is-visible .zd-program-difference__outcomes li { animation: zdDifferenceListIn .5s both; }
.zd-program-difference__card.is-visible .zd-program-difference__outcomes li:nth-child(2) { animation-delay: 120ms; }
.zd-program-difference__takeaway { margin-top: 17px; padding-top: 13px; font-size: 12px; }
.zd-program-difference__bottom {
    margin-top: clamp(22px, 3vw, 34px);
    padding: 18px 20px;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
    border-left: 4px solid var(--color-accent, #E53935);
    background: var(--zd-hero-card-bg, #E9E9E4);
}
.zd-program-difference__bottom p { max-width: 74ch; font-size: clamp(15px, 1.2vw, 18px); }
.zd-program-difference__bottom p strong { color: var(--color-text, #111111); }
.zd-program-difference__bottom a { flex: 0 0 auto; }

@keyframes zdDifferenceUnderline { to { transform: scaleX(1); } }
@keyframes zdDifferencePulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes zdDifferenceImageIn { from { opacity: .35; transform: scale(1.12); } to { opacity: 1; transform: scale(1.025); } }
@keyframes zdDifferenceOrbit { to { rotate: 360deg; } }
@keyframes zdDifferenceFloat { 50% { translate: 0 -9px; } }
@keyframes zdDifferenceListIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 1023px) {
    .zd-program-difference__header { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 28px; }
    .zd-program-difference__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zd-program-difference__card:last-child { grid-column: 1 / -1; }
    .zd-program-difference__card:last-child .zd-program-difference__visual { min-height: 250px; }
    .zd-program-difference__card:last-child .zd-program-difference__card-content { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
    .zd-program-difference__card:last-child .zd-program-difference__card-meta,
    .zd-program-difference__card:last-child h3 { grid-column: 1; }
    .zd-program-difference__card:last-child p,
    .zd-program-difference__card:last-child .zd-program-difference__outcomes,
    .zd-program-difference__card:last-child .zd-program-difference__takeaway { grid-column: 2; }
    .zd-program-difference__card:last-child p { grid-row: 1 / span 2; margin-top: 0; }
    .zd-program-difference__card:last-child .zd-program-difference__outcomes { grid-row: 3; }
    .zd-program-difference__card:last-child .zd-program-difference__takeaway { grid-row: 4; }
}

@media (max-width: 767px) {
    .zd-program-difference::before { display: none; }
    .zd-program-difference__header { grid-template-columns: 1fr; gap: 18px; }
    .zd-program-difference__header h2 { max-width: 100%; }
    .zd-program-difference__intro { margin-bottom: 12px; }
    .zd-program-difference__grid { grid-template-columns: 1fr; }
    .zd-program-difference__card:last-child { grid-column: auto; }
    .zd-program-difference__card:last-child .zd-program-difference__visual { min-height: 230px; }
    .zd-program-difference__card:last-child .zd-program-difference__card-content { display: flex; }
    .zd-program-difference__card:last-child .zd-program-difference__card-meta,
    .zd-program-difference__card:last-child h3,
    .zd-program-difference__card:last-child p,
    .zd-program-difference__card:last-child .zd-program-difference__outcomes,
    .zd-program-difference__card:last-child .zd-program-difference__takeaway { grid-column: auto; grid-row: auto; }
    .zd-program-difference__bottom { align-items: flex-start; }
}

@media (max-width: 424px) {
    .zd-program-difference__class-note { font-size: 9px; letter-spacing: .1em; }
    .zd-program-difference__visual { min-height: 215px; }
    .zd-program-difference__card p { font-size: 17px; }
    .zd-program-difference__bottom { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .zd-program-difference *,
    .zd-program-difference *::before,
    .zd-program-difference *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* PROGRAMS PAGE — beginner first-day timeline */
.zd-program-dayone {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 112px) var(--nav-padding-inline, clamp(16px, 4vw, 58px));
    background:
        radial-gradient(ellipse at 7% 92%, color-mix(in srgb, var(--color-accent, #E53935) 10%, transparent), transparent 35%),
        var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}
.zd-program-dayone *,
.zd-program-dayone *::before,
.zd-program-dayone *::after { box-sizing: border-box; }
.zd-program-dayone__inner {
    display: grid;
    width: min(1320px, 100%);
    margin-inline: auto;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(38px, 7vw, 96px);
}
.zd-program-dayone__copy { min-width: 0; }
.zd-program-dayone__eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 20px;
    color: var(--zd-hero-accent-text, #C92F2C);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.5;
}
.zd-program-dayone__eyebrow span,
.zd-program-dayone__video-label i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-accent, #E53935);
}
.zd-program-dayone__copy h2 {
    margin: 0;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.03;
    text-wrap: balance;
}
.zd-program-dayone__copy h2 em { color: var(--zd-hero-accent-text, #C92F2C); font-style: normal; }
.zd-program-dayone__intro {
    max-width: 54ch;
    margin: 20px 0 30px;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.7;
}
.zd-program-dayone__steps {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.zd-program-dayone__steps::before {
    position: absolute;
    top: 25px;
    bottom: 34px;
    left: 23px;
    width: 1px;
    background: linear-gradient(var(--color-accent, #E53935), var(--zd-hero-border, rgba(17, 17, 17, .14)) 92%);
    content: "";
}
.zd-program-dayone__step {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 17px;
    padding: 15px 0 19px;
}
.zd-program-dayone__number {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-accent, #E53935) 55%, transparent);
    border-radius: 50%;
    background: var(--color-background, #FAFAF7);
    color: var(--zd-hero-accent-text, #C92F2C);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: 14px;
    transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.zd-program-dayone__step:hover .zd-program-dayone__number {
    transform: scale(1.08);
    background: var(--color-accent, #E53935);
    color: #fff;
    box-shadow: 0 7px 22px color-mix(in srgb, var(--color-accent, #E53935) 28%, transparent);
}
.zd-program-dayone__step-copy h3 {
    margin: 0 0 6px;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(19px, 1.6vw, 23px);
    font-weight: 400;
    line-height: 1.25;
}
.zd-program-dayone__step-copy p {
    max-width: 52ch;
    margin: 0;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.65;
}
.zd-program-dayone__detail {
    display: inline-block;
    margin-top: 9px;
    color: var(--zd-hero-accent-text, #C92F2C);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.5;
}
.zd-program-dayone__media { min-width: 0; margin: 0; }
.zd-program-dayone__video-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: .96;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
    border-radius: clamp(20px, 3vw, 34px);
    background: #181818;
    box-shadow: 0 28px 80px rgba(17, 17, 17, .18);
}
.zd-program-dayone__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zd-program-dayone__video-label,
.zd-program-dayone__video-count {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(17, 17, 17, .72);
    color: #FAFAF7;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    backdrop-filter: blur(10px);
    pointer-events: none;
}
.zd-program-dayone__video-label { top: 18px; left: 18px; }
.zd-program-dayone__video-count { right: 18px; bottom: 56px; }
.zd-program-dayone__video-count b { color: #F2605C; }
.zd-program-dayone__video-label i { width: 7px; height: 7px; }
.zd-program-dayone__media figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 4px 0;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
}
.zd-program-dayone__media figcaption strong { color: var(--color-text, #111111); }

.zd-program-dayone.is-motion-ready [data-dayone-reveal] {
    opacity: 0;
    transition: opacity .75s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.zd-program-dayone.is-motion-ready [data-dayone-reveal="left"] { transform: translateX(-36px); }
.zd-program-dayone.is-motion-ready [data-dayone-reveal="right"] { transform: translateX(36px); }
.zd-program-dayone.is-motion-ready [data-dayone-reveal="up"] { transform: translateY(24px); }
.zd-program-dayone [data-dayone-reveal].is-visible { opacity: 1; transform: translate(0, 0); }
.zd-program-dayone__step:nth-child(2) { transition-delay: 100ms; }
.zd-program-dayone__step:nth-child(3) { transition-delay: 200ms; }
.zd-program-dayone__video-frame::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: inherit;
    content: "";
    pointer-events: none;
    transition: inset .35s ease, border-color .35s ease;
}
.zd-program-dayone__video-frame:hover::after { inset: 10px; border-color: rgba(255, 255, 255, .3); }

@media (max-width: 960px) {
    .zd-program-dayone__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .zd-program-dayone__copy { max-width: 780px; }
    .zd-program-dayone__video-frame { aspect-ratio: 16 / 10; }
    .zd-program-dayone__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .zd-program-dayone__steps::before { top: 23px; right: 12%; bottom: auto; left: 12%; width: auto; height: 1px; background: linear-gradient(90deg, var(--color-accent, #E53935), var(--zd-hero-border, rgba(17, 17, 17, .14))); }
    .zd-program-dayone__step { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 12px 0 0; }
}
@media (max-width: 640px) {
    .zd-program-dayone { padding-block: 52px; }
    .zd-program-dayone__copy h2 { font-size: clamp(38px, 10vw, 54px); }
    .zd-program-dayone__intro { margin: 16px 0 23px; font-size: 18px; }
    .zd-program-dayone__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .zd-program-dayone__steps::before { top: 25px; right: auto; bottom: 36px; left: 23px; width: 1px; height: auto; background: linear-gradient(var(--color-accent, #E53935), var(--zd-hero-border, rgba(17, 17, 17, .14)) 92%); }
    .zd-program-dayone__step { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 12px 0 17px; }
    .zd-program-dayone__step-copy p { font-size: 17px; }
    .zd-program-dayone__video-frame { aspect-ratio: 4 / 5; border-radius: 20px; }
    .zd-program-dayone__video-label { top: 12px; left: 12px; }
    .zd-program-dayone__video-count { right: 12px; bottom: 48px; }
    .zd-program-dayone__media figcaption { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (max-width: 374px) {
    .zd-program-dayone__eyebrow { font-size: 9px; letter-spacing: .12em; }
    .zd-program-dayone__step-copy h3 { font-size: 18px; }
    .zd-program-dayone__step-copy p { font-size: 16px; }
    .zd-program-dayone__video-label, .zd-program-dayone__video-count { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .zd-program-dayone *,
    .zd-program-dayone *::before,
    .zd-program-dayone *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* 404 PAGE — scoped layout, illustration, and responsive styles */
.zd-404 {
            --error-radius: clamp(24px, 4vw, 42px);
            position: relative;
            display: flex;
            min-height: 100svh;
            flex-direction: column;
            overflow: hidden;
            background:
                radial-gradient(ellipse at 12% 82%, color-mix(in srgb, var(--color-accent, #E53935) 9%, transparent), transparent 34%),
                var(--color-background, #FAFAF7);
            color: var(--color-text, #111111);
            font-family: var(--font-body, "Inter", sans-serif);
        }
        .zd-404 *, .zd-404 *::before, .zd-404 *::after { box-sizing: border-box; }
        .zd-404__topbar {
            position: relative;
            z-index: 5;
            display: flex;
            width: min(1360px, 100%);
            justify-content: flex-end;
            gap: 10px;
            margin-inline: auto;
            padding: 22px clamp(18px, 4vw, 54px) 0;
            direction: ltr;
        }
        .zd-404__theme,
        .zd-404__rtl {
            display: inline-flex;
            min-width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
            border-radius: 13px;
            background: var(--zd-hero-card-bg, #E9E9E4);
            color: var(--color-text, #111111);
            cursor: pointer;
            transition: transform .2s ease, border-color .2s ease, background .2s ease;
        }
        .zd-404__theme { width: 44px; padding: 0; }
        .zd-404__theme:hover, .zd-404__rtl:hover { transform: translateY(-2px); border-color: var(--color-accent, #E53935); }
        .zd-404__theme svg { width: 20px; height: 20px; }
        .zd-404__rtl { padding-inline: 13px; font-family: inherit; font-size: 13px; font-weight: 600; }
        .zd-404__main {
            display: grid;
            width: min(1260px, 100%);
            flex: 1;
            grid-template-columns: minmax(0, 1fr) minmax(330px, .92fr);
            align-items: center;
            gap: clamp(30px, 7vw, 94px);
            margin-inline: auto;
            padding: 28px clamp(18px, 4vw, 54px) clamp(48px, 7vw, 86px);
        }
        .zd-404__copy { position: relative; z-index: 2; max-width: 660px; }
        .zd-404__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 15px;
            color: var(--zd-hero-accent-text, #C92F2C);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .16em;
            line-height: 1.5;
        }
        .zd-404__eyebrow::before { width: 22px; height: 2px; background: var(--color-accent, #E53935); content: ""; }
        .zd-404__code {
            margin: 0 0 4px -.055em;
            color: var(--zd-hero-accent-text, #C92F2C);
            font-family: var(--font-display, "Archivo Black", sans-serif);
            font-size: clamp(112px, 18vw, 218px);
            font-weight: 400;
            letter-spacing: -.09em;
            line-height: .78;
            text-shadow: 7px 7px 0 color-mix(in srgb, var(--color-accent, #E53935) 13%, transparent);
        }
        .zd-404__title {
            max-width: 13ch;
            margin: 18px 0 13px;
            color: var(--color-text, #111111);
            font-family: var(--font-display, "Archivo Black", sans-serif);
            font-size: clamp(34px, 4.3vw, 58px);
            font-weight: 400;
            letter-spacing: -.04em;
            line-height: 1.08;
            text-wrap: balance;
        }
        .zd-404__title span { color: var(--zd-hero-accent-text, #C92F2C); }
        .zd-404__description {
            max-width: 54ch;
            margin: 0;
            color: var(--zd-hero-muted, #333333);
            font-size: clamp(17px, 1.45vw, 21px);
            line-height: 1.75;
        }
        .zd-404__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 27px; }
        .zd-404__home {
            display: inline-flex;
            min-height: 54px;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 0 22px;
            border: 1px solid var(--color-accent, #E53935);
            border-radius: 12px;
            background: var(--zd-hero-btn-bg, #C92F2C);
            color: var(--zd-hero-btn-text, #FAFAF7);
            font-size: 15px;
            font-weight: 700;
            text-decoration: none;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .zd-404__home:hover { transform: translateY(-3px); box-shadow: 0 12px 26px color-mix(in srgb, var(--color-accent, #E53935) 25%, transparent); }
        .zd-404__home svg { width: 18px; height: 18px; }
        .zd-404__secondary { color: var(--color-text, #111111); font-size: 14px; font-weight: 600; text-underline-offset: 5px; text-decoration-color: var(--color-accent, #E53935); }
        .zd-404__secondary:hover { color: var(--zd-hero-accent-text, #C92F2C); }
        .zd-404__note { display: flex; align-items: center; gap: 9px; margin-top: 27px; color: var(--zd-hero-muted, #333333); font-size: 13px; line-height: 1.5; }
        .zd-404__note-mark { color: var(--zd-hero-accent-text, #C92F2C); font-size: 18px; }
        .zd-404__art {
            position: relative;
            display: grid;
            min-width: 0;
            min-height: clamp(350px, 42vw, 550px);
            place-items: center;
            isolation: isolate;
        }
        .zd-404__art::before {
            position: absolute;
            z-index: -2;
            width: min(92%, 490px);
            aspect-ratio: 1;
            border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
            border-radius: 50%;
            background: radial-gradient(circle, color-mix(in srgb, var(--zd-hero-card-bg, #E9E9E4) 78%, transparent), transparent 70%);
            content: "";
        }
        .zd-404__orbit {
            position: absolute;
            z-index: -1;
            width: min(96%, 520px);
            aspect-ratio: 1;
            border: 1px dashed color-mix(in srgb, var(--color-accent, #E53935) 45%, transparent);
            border-radius: 50%;
            animation: zd404Orbit 34s linear infinite;
        }
        .zd-404__orbit::before, .zd-404__orbit::after { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--color-accent, #E53935); content: ""; }
        .zd-404__orbit::before { top: 14%; left: 20%; }
        .zd-404__orbit::after { right: 10%; bottom: 27%; width: 7px; height: 7px; }
        .zd-404__art-number {
            position: absolute;
            z-index: -1;
            top: 5%;
            right: 1%;
            color: color-mix(in srgb, var(--color-text, #111111) 7%, transparent);
            font-family: var(--font-display, "Archivo Black", sans-serif);
            font-size: clamp(100px, 16vw, 205px);
            letter-spacing: -.08em;
            line-height: 1;
            user-select: none;
        }
        .zd-404__panda {
            width: min(88%, 400px);
            overflow: visible;
            filter: drop-shadow(0 24px 25px rgba(17, 17, 17, .15));
            animation: zd404Float 4.2s ease-in-out infinite;
        }
        .zd-404__panda .panda-eye { transform-box: fill-box; transform-origin: center; animation: zd404Blink 4.4s infinite; }
        .zd-404__panda .panda-eye:nth-of-type(2) { animation-delay: .08s; }
        .zd-404__badge {
            position: absolute;
            right: 4%;
            bottom: 14%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
            border-radius: 16px;
            background: var(--zd-hero-card-bg, #E9E9E4);
            color: var(--color-text, #111111);
            box-shadow: 0 12px 32px rgba(17, 17, 17, .1);
            animation: zd404Badge 3.4s ease-in-out infinite;
        }
        .zd-404__badge-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--color-accent, #E53935) 13%, transparent); color: var(--zd-hero-accent-text, #C92F2C); font-size: 19px; }
        .zd-404__badge strong, .zd-404__badge small { display: block; }
        .zd-404__badge strong { font-size: 12px; }
        .zd-404__badge small { margin-top: 3px; color: var(--zd-hero-muted, #333333); font-size: 10px; }
        .zd-404__spark { position: absolute; color: var(--zd-hero-accent-text, #C92F2C); font-size: 24px; animation: zd404Twinkle 2.2s ease-in-out infinite; }
        .zd-404__spark--one { top: 14%; right: 22%; }
        .zd-404__spark--two { bottom: 22%; left: 7%; font-size: 18px; animation-delay: .7s; }
        .zd-404__footer { padding: 0 18px 20px; color: var(--zd-hero-muted, #333333); font-size: 11px; text-align: center; }
        .zd-404 a:focus-visible, .zd-404 button:focus-visible { outline: 3px solid var(--color-accent, #E53935); outline-offset: 4px; }

        @keyframes zd404Float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
        @keyframes zd404Orbit { to { transform: rotate(360deg); } }
        @keyframes zd404Blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
        @keyframes zd404Badge { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-7px) rotate(-1deg); } }
        @keyframes zd404Twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .55; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }

        @media (max-width: 900px) {
            .zd-404__main { grid-template-columns: minmax(0, 1fr) minmax(270px, .82fr); gap: 28px; }
            .zd-404__code { font-size: clamp(104px, 17vw, 164px); }
            .zd-404__art { min-height: 390px; }
            .zd-404__badge { right: 0; }
        }
        @media (max-width: 680px) {
            .zd-404__topbar { padding-top: 14px; }
            .zd-404__main { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 12px; padding-bottom: 36px; }
            .zd-404__copy { max-width: none; }
            .zd-404__code { font-size: clamp(104px, 25vw, 152px); }
            .zd-404__title { max-width: 15ch; font-size: clamp(34px, 8.5vw, 48px); }
            .zd-404__description { font-size: 17px; }
            .zd-404__art { min-height: clamp(290px, 84vw, 410px); grid-row: 1; }
            .zd-404__panda { width: min(74%, 330px); }
            .zd-404__orbit { width: min(80%, 370px); }
            .zd-404__art::before { width: min(76%, 350px); }
            .zd-404__art-number { top: 2%; right: 5%; font-size: clamp(110px, 32vw, 170px); }
            .zd-404__badge { right: 2%; bottom: 8%; }
            .zd-404__spark--one { top: 10%; right: 18%; }
            .zd-404__spark--two { bottom: 14%; left: 10%; }
        }
        @media (max-width: 390px) {
            .zd-404__topbar { padding-inline: 14px; }
            .zd-404__main { padding-inline: 16px; }
            .zd-404__art { min-height: 270px; }
            .zd-404__panda { width: 72%; }
            .zd-404__badge { bottom: 5%; padding: 9px 11px; }
            .zd-404__buttons { align-items: stretch; flex-direction: column; }
            .zd-404__home { width: 100%; }
            .zd-404__secondary { align-self: center; padding: 6px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .zd-404 *, .zd-404 *::before, .zd-404 *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        }
        .zd-404.is-ready .zd-404__copy { animation: zd404EnterCopy .8s cubic-bezier(.2, .8, .2, 1) both; }
        .zd-404.is-ready .zd-404__art { animation: zd404EnterArt .9s .08s cubic-bezier(.2, .8, .2, 1) both; }
        @keyframes zd404EnterCopy { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
        @keyframes zd404EnterArt { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }


/* =========================================================
   ZENDOJO — COMING SOON
   LIGHT MODE / BASE
   Everything is scoped to .zd-coming
========================================================= */

.zd-coming {

    --zd-coming-bg: #f4f1ec;
    --zd-coming-text: #111111;
    --zd-coming-text-soft: #57534e;
    --zd-coming-text-faint: #817c75;

    --zd-coming-red: #e53935;
    --zd-coming-red-dark: #bd2825;

    --zd-coming-border: rgba(17, 17, 17, 0.16);
    --zd-coming-grid: rgba(17, 17, 17, 0.035);

    position: relative;
    isolation: isolate;

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

    padding:
        105px
        clamp(18px, 5vw, 70px)
        65px;

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

    overflow: hidden;

    background: var(--zd-coming-bg);
    color: var(--zd-coming-text);

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

    text-align: center;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.zd-coming__grid {

    position: absolute;
    z-index: -3;

    inset: 0;

    background-image:
        linear-gradient(
            to right,
            var(--zd-coming-grid) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--zd-coming-grid) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );

    opacity: 0;

    animation:
        zdComingGrid
        1.8s
        ease
        0.3s
        forwards;
}


@keyframes zdComingGrid {

    from {
        opacity: 0;
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   ATMOSPHERIC RINGS
========================================================= */

.zd-coming__ring {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.7);

    opacity: 0;
}


.zd-coming__ring--one {

    z-index: -2;

    width: min(680px, 78vw);
    aspect-ratio: 1;

    border:
        1px solid
        rgba(229, 57, 53, 0.10);

    animation:
        zdComingRingOne
        2.2s
        cubic-bezier(.16, 1, .3, 1)
        0.3s
        forwards;
}


.zd-coming__ring--two {

    z-index: -2;

    width: min(850px, 95vw);
    aspect-ratio: 1;

    border:
        1px solid
        rgba(229, 57, 53, 0.045);

    animation:
        zdComingRingTwo
        2.8s
        cubic-bezier(.16, 1, .3, 1)
        0.45s
        forwards;
}


@keyframes zdComingRingOne {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.7);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


@keyframes zdComingRingTwo {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.65);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   TOP-RIGHT CONTROLS
========================================================= */

.zd-coming__controls {

    position: absolute;
    z-index: 20;

    top: 25px;
    right: clamp(18px, 3vw, 45px);

    display: flex;
    align-items: center;

    gap: 9px;

    opacity: 0;

    animation:
        zdComingControls
        0.7s
        ease
        0.2s
        forwards;
}


@keyframes zdComingControls {

    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.zd-coming__control {

    width: 42px;
    height: 42px;

    padding: 0;

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

    border:
        1px solid
        var(--zd-coming-border);

    border-radius: 50%;

    background: transparent;
    color: var(--zd-coming-text);

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

    cursor: pointer;

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


.zd-coming__control:hover {

    background: var(--zd-coming-text);
    color: var(--zd-coming-bg);

    border-color: var(--zd-coming-text);

    transform: translateY(-2px);
}


.zd-coming__control:focus-visible {

    outline:
        2px solid
        var(--zd-coming-red);

    outline-offset: 4px;
}


/* Theme icon */

.zd-coming__theme {

    font-size: 17px;
}


.zd-coming__sun {
    display: none;
}


.zd-coming__moon {
    display: block;
}


/* RTL */

.zd-coming__rtl {

    border-radius: 999px;

    width: 49px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.06em;
}


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

.zd-coming__main {

    position: relative;
    z-index: 5;

    width: min(950px, 100%);

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


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

.zd-coming__brand {

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

    gap: 15px;

    margin-bottom: 42px;

    opacity: 0;
    transform: translateY(18px);

    animation:
        zdComingReveal
        0.7s
        cubic-bezier(.16, 1, .3, 1)
        0.35s
        forwards;
}


.zd-coming__brand-name {

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.3em;

    color: var(--zd-coming-text);
}


.zd-coming__brand-line {

    width: clamp(28px, 5vw, 65px);
    height: 1px;

    background: var(--zd-coming-red);
}


/* =========================================================
   EYEBROW
========================================================= */

.zd-coming__eyebrow {

    margin: 0 0 20px;

    font-size: clamp(11px, 1vw, 13px);
    font-weight: 800;

    letter-spacing: 0.28em;

    color: var(--zd-coming-red);

    opacity: 0;
    transform: translateY(20px);

    animation:
        zdComingReveal
        0.7s
        cubic-bezier(.16, 1, .3, 1)
        0.55s
        forwards;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.zd-coming__title {

    margin: 0;

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

    font-size: clamp(48px, 7vw, 94px);
    font-weight: 800;

    line-height: 0.94;
    letter-spacing: -0.06em;

    text-transform: uppercase;
}


.zd-coming__title-line {

    display: block;

    opacity: 0;
    transform: translateY(50px);
}


.zd-coming__title-line:first-child {

    animation:
        zdComingReveal
        0.85s
        cubic-bezier(.16, 1, .3, 1)
        0.72s
        forwards;
}


.zd-coming__title-accent {

    color: var(--zd-coming-red);

    animation:
        zdComingReveal
        0.85s
        cubic-bezier(.16, 1, .3, 1)
        0.87s
        forwards;
}


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

.zd-coming__description {

    width: min(660px, 100%);

    margin: 32px auto 0;

    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 500;

    line-height: 1.8;

    color: var(--zd-coming-text-soft);

    opacity: 0;
    transform: translateY(25px);

    animation:
        zdComingReveal
        0.75s
        cubic-bezier(.16, 1, .3, 1)
        1.05s
        forwards;
}


/* =========================================================
   TIMER
========================================================= */

.zd-coming__timer {

    margin-top: 40px;

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

    gap: clamp(10px, 2vw, 25px);

    opacity: 0;
    transform: translateY(25px);

    animation:
        zdComingReveal
        0.75s
        cubic-bezier(.16, 1, .3, 1)
        1.22s
        forwards;
}


.zd-coming__timer-item {

    min-width: clamp(62px, 8vw, 95px);

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


.zd-coming__timer-number {

    display: block;

    font-family: "Manrope", sans-serif;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.045em;

    font-variant-numeric: tabular-nums;

    color: var(--zd-coming-text);

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}


.zd-coming__timer-number.zd-coming__tick {

    transform: translateY(-3px);

    color: var(--zd-coming-red);
}


.zd-coming__timer-label {

    margin-top: 9px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.17em;

    color: var(--zd-coming-text-faint);
}


.zd-coming__timer-separator {

    padding-top: 3px;

    font-size: clamp(24px, 3vw, 40px);
    font-weight: 300;

    line-height: 1;

    color: var(--zd-coming-red);
}


/* =========================================================
   VALUES
========================================================= */

.zd-coming__values {

    margin-top: 32px;

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

    gap: 15px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.18em;

    color: var(--zd-coming-text);

    opacity: 0;
    transform: translateY(20px);

    animation:
        zdComingReveal
        0.7s
        cubic-bezier(.16, 1, .3, 1)
        1.42s
        forwards;
}


.zd-coming__values i {

    width: 4px;
    height: 4px;

    flex: 0 0 4px;

    border-radius: 50%;

    background: var(--zd-coming-red);
}


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

.zd-coming__button {

    min-width: 160px;
    min-height: 51px;

    margin-top: 32px;

    padding: 0 21px;

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

    gap: 12px;

    border:
        1px solid
        var(--zd-coming-text);

    border-radius: 999px;

    background: var(--zd-coming-text);
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-decoration: none;
    text-transform: uppercase;

    box-shadow:
        0 10px 25px rgba(17, 17, 17, 0.13);

    opacity: 0;

    animation:
        zdComingButton
        0.8s
        cubic-bezier(.16, 1, .3, 1)
        1.6s
        forwards;

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


.zd-coming__button:hover {

    background: var(--zd-coming-red);
    color: #ffffff;

    border-color: var(--zd-coming-red);

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px rgba(229, 57, 53, 0.2);
}


.zd-coming__button:focus-visible {

    outline:
        3px solid
        rgba(229, 57, 53, 0.3);

    outline-offset: 5px;
}


.zd-coming__button-arrow {

    font-size: 18px;

    transition:
        transform 0.25s ease;
}


.zd-coming__button:hover
.zd-coming__button-arrow {

    transform:
        translate(3px, -3px);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.zd-coming__bottom {

    width: 100%;

    margin-top: 52px;

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

    gap: 14px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.17em;

    line-height: 1.5;

    color: var(--zd-coming-text-faint);

    opacity: 0;

    animation:
        zdComingReveal
        0.7s
        cubic-bezier(.16, 1, .3, 1)
        1.78s
        forwards;
}


.zd-coming__bottom-line {

    width: clamp(25px, 5vw, 65px);
    height: 1px;

    background:
        var(--zd-coming-border);
}


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

@keyframes zdComingReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes zdComingButton {

    0% {
        opacity: 0;
        transform:
            translateY(25px)
            scale(0.9);
    }

    70% {
        opacity: 1;
        transform:
            translateY(-3px)
            scale(1.025);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   LAPTOP-L — 1440px
========================================================= */

@media (max-width: 1440px) {

    .zd-coming {
        padding-top: 95px;
    }

    .zd-coming__brand {
        margin-bottom: 35px;
    }
}


/* =========================================================
   LAPTOP — 1200px
========================================================= */

@media (max-width: 1200px) {

    .zd-coming {
        min-height: 100vh;
        padding:
            95px
            35px
            55px;
    }

    .zd-coming__title {
        font-size: clamp(46px, 7.5vw, 82px);
    }

    .zd-coming__description {
        max-width: 610px;
    }
}


/* =========================================================
   TABLET — 1024px
========================================================= */

@media (max-width: 1024px) {

    .zd-coming {
        padding:
            95px
            25px
            50px;
    }

    .zd-coming__brand {
        margin-bottom: 30px;
    }

    .zd-coming__title {
        font-size: clamp(42px, 8vw, 68px);
    }

    .zd-coming__description {
        margin-top: 27px;

        font-size: 15px;
        line-height: 1.75;
    }

    .zd-coming__timer {
        margin-top: 34px;
    }

    .zd-coming__values {
        margin-top: 27px;
    }

    .zd-coming__bottom {
        margin-top: 40px;
    }
}


/* =========================================================
   MOBILE-L — 767px
========================================================= */

@media (max-width: 767px) {

    .zd-coming {

        min-height: 100svh;

        padding:
            90px
            17px
            40px;
    }

    .zd-coming__controls {

        top: 18px;
        right: 17px;

        gap: 7px;
    }

    .zd-coming__control {

        width: 38px;
        height: 38px;
    }

    .zd-coming__rtl {

        width: 45px;

        font-size: 9px;
    }

    .zd-coming__brand {

        margin-bottom: 27px;

        gap: 11px;
    }

    .zd-coming__brand-name {

        font-size: 11px;
        letter-spacing: 0.25em;
    }

    .zd-coming__brand-line {

        width: 28px;
    }

    .zd-coming__eyebrow {

        margin-bottom: 17px;

        font-size: 10px;
        letter-spacing: 0.21em;
    }

    .zd-coming__title {

        font-size: clamp(34px, 10vw, 52px);

        line-height: 0.98;

        letter-spacing: -0.05em;
    }

    .zd-coming__description {

        margin-top: 24px;

        font-size: 13.5px;
        line-height: 1.72;
    }

    .zd-coming__timer {

        width: 100%;

        margin-top: 32px;

        gap: 7px;
    }

    .zd-coming__timer-item {

        min-width: 52px;
    }

    .zd-coming__timer-number {

        font-size: clamp(25px, 7.5vw, 38px);
    }

    .zd-coming__timer-label {

        margin-top: 7px;

        font-size: 7px;
        letter-spacing: 0.1em;
    }

    .zd-coming__timer-separator {

        padding-top: 2px;

        font-size: 24px;
    }

    .zd-coming__values {

        flex-wrap: wrap;

        gap: 9px 11px;

        margin-top: 25px;

        font-size: 8px;

        letter-spacing: 0.12em;
    }

    .zd-coming__values i {

        width: 3px;
        height: 3px;

        flex-basis: 3px;
    }

    .zd-coming__button {

        min-width: 145px;
        min-height: 48px;

        margin-top: 27px;

        font-size: 12px;
    }

    .zd-coming__bottom {

        margin-top: 36px;

        gap: 9px;

        font-size: 7px;

        letter-spacing: 0.11em;
    }

    .zd-coming__bottom-line {

        width: 22px;
    }

    .zd-coming__ring--one {

        width: 95vw;
    }

    .zd-coming__ring--two {

        width: 115vw;
    }
}


/* =========================================================
   MOBILE-M — 480px
========================================================= */

@media (max-width: 480px) {

    .zd-coming {

        padding:
            82px
            14px
            34px;
    }

    .zd-coming__controls {

        top: 15px;
        right: 14px;
    }

    .zd-coming__control {

        width: 35px;
        height: 35px;
    }

    .zd-coming__rtl {

        width: 42px;
    }

    .zd-coming__brand {

        margin-bottom: 24px;
    }

    .zd-coming__brand-name {

        font-size: 10px;
    }

    .zd-coming__brand-line {

        width: 22px;
    }

    .zd-coming__eyebrow {

        margin-bottom: 15px;

        font-size: 9px;
    }

    .zd-coming__title {

        font-size: clamp(29px, 10vw, 42px);

        line-height: 1;
    }

    .zd-coming__description {

        margin-top: 22px;

        font-size: 12.5px;
        line-height: 1.68;
    }

    .zd-coming__timer {

        margin-top: 28px;

        gap: 5px;
    }

    .zd-coming__timer-item {

        min-width: 47px;
    }

    .zd-coming__timer-number {

        font-size: clamp(23px, 7.8vw, 34px);
    }

    .zd-coming__timer-label {

        margin-top: 6px;

        font-size: 6.5px;
    }

    .zd-coming__timer-separator {

        font-size: 21px;
    }

    .zd-coming__values {

        margin-top: 22px;

        gap: 8px 9px;

        font-size: 7px;
    }

    .zd-coming__button {

        min-width: 137px;
        min-height: 46px;

        margin-top: 24px;

        font-size: 11px;
    }

    .zd-coming__bottom {

        margin-top: 31px;

        font-size: 6.5px;
    }
}


/* =========================================================
   MOBILE-S — 390px
========================================================= */

@media (max-width: 390px) {

    .zd-coming {

        padding:
            76px
            11px
            28px;
    }

    .zd-coming__controls {

        top: 13px;
        right: 11px;

        gap: 5px;
    }

    .zd-coming__control {

        width: 32px;
        height: 32px;
    }

    .zd-coming__rtl {

        width: 39px;

        font-size: 8px;
    }

    .zd-coming__theme {

        font-size: 14px;
    }

    .zd-coming__brand {

        gap: 8px;
        margin-bottom: 21px;
    }

    .zd-coming__brand-name {

        font-size: 9px;
        letter-spacing: 0.2em;
    }

    .zd-coming__brand-line {

        width: 18px;
    }

    .zd-coming__eyebrow {

        font-size: 8px;
        letter-spacing: 0.16em;
    }

    .zd-coming__title {

        font-size: clamp(26px, 9.8vw, 36px);

        line-height: 1.02;
    }

    .zd-coming__description {

        margin-top: 20px;

        font-size: 11.5px;
        line-height: 1.65;
    }

    .zd-coming__timer {

        margin-top: 25px;

        gap: 3px;
    }

    .zd-coming__timer-item {

        min-width: 42px;
    }

    .zd-coming__timer-number {

        font-size: clamp(20px, 7.5vw, 29px);
    }

    .zd-coming__timer-label {

        margin-top: 5px;

        font-size: 5.5px;
        letter-spacing: 0.07em;
    }

    .zd-coming__timer-separator {

        font-size: 18px;
    }

    .zd-coming__values {

        margin-top: 19px;

        gap: 7px;

        font-size: 6.5px;

        letter-spacing: 0.08em;
    }

    .zd-coming__button {

        min-width: 128px;
        min-height: 44px;

        margin-top: 22px;

        padding: 0 15px;

        font-size: 10px;

        gap: 9px;
    }

    .zd-coming__button-arrow {

        font-size: 15px;
    }

    .zd-coming__bottom {

        margin-top: 27px;

        gap: 6px;

        font-size: 6px;

        letter-spacing: 0.07em;
    }

    .zd-coming__bottom-line {

        width: 15px;
    }
}


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

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

    .zd-coming *,
    .zd-coming::before,
    .zd-coming::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* PROGRAMS PAGE — confidence and life skills framework */
.zd-life-framework {
    position: relative;
    overflow: hidden;
    padding: clamp(62px, 7vw, 100px) var(--nav-padding-inline, clamp(16px, 4vw, 58px));
    background: radial-gradient(ellipse at 91% 13%, color-mix(in srgb, var(--color-accent, #E53935) 8%, transparent), transparent 34%), var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}
.zd-life-framework *, .zd-life-framework *::before, .zd-life-framework *::after { box-sizing: border-box; }
.zd-life-framework__inner { width: min(1320px, 100%); margin-inline: auto; }
.zd-life-framework__header { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr); align-items: end; gap: clamp(28px, 6vw, 78px); margin-bottom: clamp(32px, 4.5vw, 58px); }
.zd-life-framework__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 17px; color: var(--zd-hero-accent-text, #C92F2C); font-size: 10px; font-weight: 700; letter-spacing: .15em; line-height: 1.6; }
.zd-life-framework__eyebrow span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--color-accent, #E53935); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent, #E53935) 12%, transparent); }
.zd-life-framework__header h2 { margin: 0; color: var(--color-text, #111111); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(38px, 5vw, 66px); font-weight: 400; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.zd-life-framework__header h2 em { color: var(--zd-hero-accent-text, #C92F2C); font-style: normal; }
.zd-life-framework__intro { max-width: 52ch; margin: 0 0 4px; color: var(--zd-hero-muted, #333333); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.72; }
.zd-life-framework__layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.5fr); align-items: stretch; gap: clamp(24px, 4vw, 54px); }
.zd-life-framework__manifesto { position: relative; display: flex; min-width: 0; min-height: 100%; flex-direction: column; overflow: hidden; padding: clamp(22px, 2.8vw, 34px); border: 1px solid rgba(250, 250, 247, .13); border-radius: 20px; background: radial-gradient(circle at 50% 38%, rgba(229, 57, 53, .22), transparent 44%), var(--color-surface-alt, #333333); color: #FAFAF7; }
.zd-life-framework__manifesto::after { position: absolute; right: -34px; bottom: -57px; width: 170px; height: 170px; border: 1px solid rgba(250, 250, 247, .12); border-radius: 50%; box-shadow: 0 0 0 17px rgba(250, 250, 247, .035), 0 0 0 36px rgba(250, 250, 247, .025); content: ""; }
.zd-life-framework__manifesto-top, .zd-life-framework__manifesto-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zd-life-framework__manifesto-top { color: rgba(250, 250, 247, .7); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.zd-life-framework__manifesto-top span:last-child { color: #F2605C; }
.zd-life-framework__seal { position: relative; display: grid; width: min(230px, 100%); aspect-ratio: 1; place-items: center; align-self: center; margin: clamp(20px, 3vw, 36px) auto 21px; }
.zd-life-framework__seal-ring { position: absolute; inset: 12%; border: 1px solid rgba(250, 250, 247, .22); border-radius: 50%; }
.zd-life-framework__seal-ring--outer { border-style: dashed; animation: zdLifeOrbit 34s linear infinite; }
.zd-life-framework__seal-ring--inner { inset: 27%; border-color: rgba(242, 96, 92, .67); box-shadow: 0 0 28px rgba(229, 57, 53, .12); }
.zd-life-framework__seal-center { display: grid; width: 76px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(250, 250, 247, .25); border-radius: 50%; background: rgba(17, 17, 17, .42); color: #F2605C; font-family: serif; font-size: 43px; }
.zd-life-framework__seal-point { position: absolute; padding: 5px 8px; border: 1px solid rgba(250, 250, 247, .16); border-radius: 999px; background: rgba(17, 17, 17, .58); color: #FAFAF7; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.zd-life-framework__seal-point--one { top: 3%; left: 50%; transform: translateX(-50%); }
.zd-life-framework__seal-point--two { right: -2%; bottom: 20%; }
.zd-life-framework__seal-point--three { bottom: 20%; left: -5%; }
.zd-life-framework__manifesto-title { position: relative; z-index: 1; margin: 0; color: #FAFAF7; font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(20px, 2vw, 27px); line-height: 1.25; }
.zd-life-framework__manifesto-title span { color: #F2605C; }
.zd-life-framework__manifesto-copy { position: relative; z-index: 1; margin: 12px 0 22px; color: rgba(250, 250, 247, .76); font-size: 15px; line-height: 1.65; }
.zd-life-framework__manifesto-foot { position: relative; z-index: 1; justify-content: flex-start; gap: 9px; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(250, 250, 247, .2); color: rgba(250, 250, 247, .8); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.zd-life-framework__manifesto-foot i { width: 7px; height: 7px; border-radius: 50%; background: #F2605C; box-shadow: 0 0 0 5px rgba(242, 96, 92, .12); }
.zd-life-framework__principles { min-width: 0; border-top: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14)); }
.zd-life-framework__principle { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px; align-items: start; gap: clamp(14px, 2vw, 24px); padding: clamp(19px, 2.3vw, 29px) 0; border-bottom: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14)); transition: padding-inline .25s ease, background .25s ease; }
.zd-life-framework__principle:hover { padding-inline: 12px; background: color-mix(in srgb, var(--zd-hero-card-bg, #E9E9E4) 56%, transparent); }
.zd-life-framework__icon { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14)); border-radius: 17px; background: var(--zd-hero-card-bg, #E9E9E4); color: var(--zd-hero-accent-text, #C92F2C); transition: color .25s ease, background .25s ease, transform .25s ease; }
.zd-life-framework__principle:hover .zd-life-framework__icon { transform: rotate(-5deg) scale(1.05); background: var(--color-accent, #E53935); color: #fff; }
.zd-life-framework__icon svg { width: 34px; height: 34px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.zd-life-framework__principle.is-visible .zd-life-framework__icon svg { animation: zdLifeIconDraw .8s ease both; }
.zd-life-framework__principle-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 1px 0 8px; color: var(--zd-hero-muted, #333333); font-size: 8px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
.zd-life-framework__principle-meta span:first-child { color: var(--zd-hero-accent-text, #C92F2C); }
.zd-life-framework__principle-meta i { width: 22px; height: 1px; background: var(--color-accent, #E53935); opacity: .65; }
.zd-life-framework__principle h3 { margin: 0 0 7px; color: var(--color-text, #111111); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(20px, 2vw, 27px); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; }
.zd-life-framework__principle p { max-width: 68ch; margin: 0; color: var(--zd-hero-muted, #333333); font-size: clamp(16px, 1.22vw, 18px); line-height: 1.65; }
.zd-life-framework__transfer { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; margin-top: 13px; padding: 9px 12px; border-inline-start: 2px solid var(--color-accent, #E53935); background: color-mix(in srgb, var(--zd-hero-card-bg, #E9E9E4) 64%, transparent); }
.zd-life-framework__transfer span { color: var(--zd-hero-accent-text, #C92F2C); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.zd-life-framework__transfer b { color: var(--color-text, #111111); font-size: 12px; font-weight: 600; line-height: 1.5; }
.zd-life-framework__row-index { padding-top: 3px; color: color-mix(in srgb, var(--color-text, #111111) 30%, transparent); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 18px; text-align: end; }
.zd-life-framework.is-motion-ready [data-life-reveal] { opacity: 0; transition: opacity .72s ease, transform .78s cubic-bezier(.2, .8, .2, 1); }
.zd-life-framework.is-motion-ready [data-life-reveal="up"] { transform: translateY(24px); }
.zd-life-framework.is-motion-ready [data-life-reveal="left"] { transform: translateX(-30px); }
.zd-life-framework.is-motion-ready [data-life-reveal="right"] { transform: translateX(30px); }
.zd-life-framework [data-life-reveal].is-visible { opacity: 1; transform: translate(0, 0); }
.zd-life-framework__principle:nth-child(2) { transition-delay: 110ms; }
.zd-life-framework__principle:nth-child(3) { transition-delay: 220ms; }
@keyframes zdLifeOrbit { to { transform: rotate(360deg); } }
@keyframes zdLifeIconDraw { from { opacity: .4; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 920px) {
    .zd-life-framework__header { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .zd-life-framework__header h2 { max-width: 18ch; }
    .zd-life-framework__layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .zd-life-framework__manifesto { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1fr); column-gap: 28px; align-items: center; min-height: 0; }
    .zd-life-framework__manifesto-top, .zd-life-framework__seal { grid-column: 1; }
    .zd-life-framework__manifesto-top { align-self: end; }
    .zd-life-framework__seal { grid-row: 2 / span 3; width: min(210px, 100%); margin: 12px auto; }
    .zd-life-framework__manifesto-title, .zd-life-framework__manifesto-copy, .zd-life-framework__manifesto-foot { grid-column: 2; }
    .zd-life-framework__manifesto-title { grid-row: 1; align-self: end; }
    .zd-life-framework__manifesto-copy { grid-row: 2; align-self: start; }
    .zd-life-framework__manifesto-foot { grid-row: 3; align-self: end; margin-top: 0; }
}
@media (max-width: 640px) {
    .zd-life-framework { padding-block: 50px; }
    .zd-life-framework__header { margin-bottom: 28px; }
    .zd-life-framework__header h2 { font-size: clamp(35px, 9vw, 50px); }
    .zd-life-framework__intro { font-size: 17px; }
    .zd-life-framework__manifesto { display: flex; align-items: stretch; padding: 22px; }
    .zd-life-framework__seal { width: 185px; margin: 15px auto 18px; }
    .zd-life-framework__seal-center { width: 65px; font-size: 37px; }
    .zd-life-framework__manifesto-title { font-size: 22px; }
    .zd-life-framework__manifesto-copy { font-size: 15px; }
    .zd-life-framework__principle { grid-template-columns: 48px minmax(0, 1fr); gap: 13px; padding: 20px 0; }
    .zd-life-framework__principle:hover { padding-inline: 5px; }
    .zd-life-framework__icon { width: 48px; height: 48px; border-radius: 14px; }
    .zd-life-framework__icon svg { width: 28px; height: 28px; }
    .zd-life-framework__principle-meta { font-size: 7px; gap: 6px; }
    .zd-life-framework__principle h3 { font-size: 20px; }
    .zd-life-framework__principle p { font-size: 16px; }
    .zd-life-framework__row-index { display: none; }
    .zd-life-framework__transfer { gap: 5px 10px; }
    .zd-life-framework__transfer b { font-size: 11px; }
}
@media (max-width: 360px) {
    .zd-life-framework__eyebrow { font-size: 9px; letter-spacing: .1em; }
    .zd-life-framework__principle { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
    .zd-life-framework__icon { width: 42px; height: 42px; }
    .zd-life-framework__principle-meta { font-size: 6.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .zd-life-framework *, .zd-life-framework *::before, .zd-life-framework *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* LOGIN PAGE — standalone split-screen sign in */
.zd-login-page {
    --zd-login-accent: var(--zd-hero-accent-text, #C92F2C);
    min-height: 100svh;
    overflow-x: hidden;
    background: var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
}
.zd-login-tools {
    position: absolute;
    z-index: 5;
    top: clamp(16px, 3vh, 28px);
    right: clamp(16px, 4vw, 58px);
    display: flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
}
.zd-login-tools .theme-toggle { border: 1px solid var(--nav-border); background: var(--color-background); }
.zd-login-main { display: flex; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; padding: 82px clamp(16px, 4vw, 58px) 20px; }
.zd-login-card {
    display: grid;
    width: min(1280px, 100%);
    min-height: min(740px, calc(100svh - 142px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14));
    border-radius: clamp(20px, 2.5vw, 32px);
    background: var(--color-background, #FAFAF7);
    box-shadow: 0 32px 100px rgba(17, 17, 17, .13);
    direction: ltr;
    animation: zdLoginCardIn .8s cubic-bezier(.2, .75, .25, 1) both;
}
.zd-login-brand-panel { position: relative; display: flex; min-width: 0; min-height: 100%; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4vw, 54px); background: #111; color: #FAFAF7; isolation: isolate; }
.zd-login-photo, .zd-login-photo-shade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.zd-login-photo { object-fit: cover; object-position: 42% center; opacity: .82; animation: zdLoginPhotoIn 1.2s .1s ease both; }
.zd-login-photo-shade { z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 10, .42) 0%, rgba(10, 10, 10, .06) 36%, rgba(10, 10, 10, .28) 57%, rgba(10, 10, 10, .9) 100%), linear-gradient(90deg, rgba(10, 10, 10, .18), transparent 70%); }
.zd-login-brand { display: inline-flex; width: max-content; align-items: center; gap: 10px; color: #FAFAF7; }
.zd-login-brand .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
.zd-login-brand .brand-name { color: #FAFAF7; font-size: 19px; }
.zd-login-brand .dojo-roof, .zd-login-brand .dojo-beam, .zd-login-brand .dojo-post, .zd-login-brand .dojo-base { fill: #FAFAF7; }
.zd-login-brand .dojo-sun { fill: #E53935; }
.zd-login-brand-copy { max-width: 510px; margin-top: auto; padding-top: 60px; animation: zdLoginCopyIn .75s .2s both; }
.zd-login-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #F47B76; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.zd-login-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: #E53935; box-shadow: 0 0 0 5px rgba(229, 57, 53, .17); }
.zd-login-brand-copy h1 { margin: 0; color: #FAFAF7; font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(42px, 5.2vw, 72px); font-weight: 400; letter-spacing: -.055em; line-height: .98; text-wrap: balance; }
.zd-login-brand-copy h1 em { color: #F2605C; font-style: normal; }
.zd-login-brand-copy > p:not(.zd-login-eyebrow) { max-width: 42ch; margin: 22px 0 0; color: rgba(250, 250, 247, .84); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; }
.zd-login-values { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(26px, 4vw, 48px); color: rgba(250, 250, 247, .78); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.zd-login-values i { width: 4px; height: 4px; border-radius: 50%; background: #F2605C; }
.zd-login-panel-mark { position: absolute; right: 26px; top: 50%; color: rgba(250, 250, 247, .42); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 11px; letter-spacing: .16em; writing-mode: vertical-rl; }
.zd-login-form-panel { display: flex; min-width: 0; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 74px); background: var(--color-background, #FAFAF7); }
.zd-login-form-inner { width: min(440px, 100%); animation: zdLoginCopyIn .8s .12s both; }
.zd-login-heading { margin-bottom: clamp(24px, 3.2vw, 38px); text-align: center; }
.zd-login-kicker { margin: 0 0 12px; color: var(--zd-login-accent); font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.zd-login-heading h2 { margin: 0; color: var(--color-text, #111); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(34px, 4vw, 48px); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
.zd-login-heading h2 span { color: var(--color-accent, #E53935); }
.zd-login-heading > p:last-child { margin: 12px 0 0; color: var(--zd-hero-muted, #333); font-size: 16px; line-height: 1.6; }
.zd-login-form { display: grid; gap: 16px; }
.zd-login-field { display: grid; min-width: 0; gap: 7px; }
.zd-login-field label { color: var(--color-text, #111); font-size: 13px; font-weight: 600; }
.zd-login-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zd-login-forgot { color: var(--zd-login-accent); font-size: 12px; font-weight: 600; text-underline-offset: 3px; }
.zd-login-forgot:hover, .zd-login-signup a:hover { text-decoration: underline; }
.zd-login-field input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .16)); border-radius: 10px; outline: 0; background: var(--zd-hero-card-bg, #E9E9E4); color: var(--color-text, #111); font: inherit; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.zd-login-field input::placeholder { color: var(--zd-hero-muted, #555); opacity: .68; }
.zd-login-field input:focus { border-color: var(--color-accent, #E53935); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent, #E53935) 13%, transparent); }
.zd-login-field input[aria-invalid="true"] { border-color: #D32F2F; box-shadow: 0 0 0 3px rgba(211, 47, 47, .1); }
.zd-login-password-wrap { position: relative; }
.zd-login-password-wrap input { padding-inline-end: 72px; }
.zd-login-show-password { position: absolute; top: 50%; right: 13px; padding: 6px 2px; transform: translateY(-50%); background: transparent; color: var(--zd-login-accent); font-size: 12px; font-weight: 700; }
.zd-login-error { min-height: 0; color: #D32F2F; font-size: 12px; line-height: 1.45; }
.zd-login-error:empty { display: none; }
.zd-login-submit { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; margin-top: 2px; padding: 0 18px; border-radius: 10px; background: var(--zd-hero-btn-bg, #C92F2C); color: var(--zd-hero-btn-text, #FAFAF7); font-size: 14px; font-weight: 700; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.zd-login-submit:hover { transform: translateY(-2px); background: var(--zd-hero-btn-bg-hover, #A9231F); box-shadow: 0 12px 25px rgba(201, 47, 44, .2); }
.zd-login-submit span:last-child { font-size: 20px; transition: transform .2s ease; }
.zd-login-submit:hover span:last-child { transform: translateX(4px); }
.zd-login-status { min-height: 0; margin: -8px 0 0; color: var(--zd-login-accent); font-size: 12px; line-height: 1.5; text-align: center; }
.zd-login-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 22px 0 15px; color: var(--zd-hero-muted, #555); }
.zd-login-divider span { height: 1px; background: var(--zd-hero-border, rgba(17, 17, 17, .14)); }
.zd-login-divider b { font-size: 8px; letter-spacing: .14em; }
.zd-login-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.zd-login-socials button { display: flex; min-width: 0; min-height: 45px; align-items: center; justify-content: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .16)); border-radius: 9px; background: var(--color-background, #FAFAF7); color: var(--color-text, #111); cursor: pointer; font-size: 12px; font-weight: 600; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.zd-login-socials button:hover { transform: translateY(-2px); border-color: var(--color-accent, #E53935); background: var(--zd-hero-card-bg, #E9E9E4); }
.zd-login-social-icon { display: grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; font-family: Arial, sans-serif; font-weight: 700; }
.zd-login-google { color: #4285F4; font-size: 17px; }
.zd-login-facebook { border-radius: 50%; background: #1877F2; color: #fff; font-size: 15px; }
.zd-login-apple { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; }
.zd-login-signup { margin: 22px 0 0; color: var(--zd-hero-muted, #333); font-size: 13px; text-align: center; }
.zd-login-signup a { margin-inline-start: 3px; color: var(--zd-login-accent); font-weight: 700; text-underline-offset: 3px; }
.zd-login-footnote { margin: 14px 0 0; color: var(--zd-hero-muted, #555); font-size: 10px; letter-spacing: .06em; text-align: center; }
html[dir="rtl"] .zd-login-card { direction: rtl; }
html[dir="rtl"] .zd-login-tools { right: auto; left: clamp(16px, 4vw, 58px); }
html[dir="rtl"] .zd-login-form-inner { text-align: right; }
html[dir="rtl"] .zd-login-heading { text-align: center; }
html[dir="rtl"] .zd-login-label-row { flex-direction: row-reverse; }
html[dir="rtl"] .zd-login-submit { flex-direction: row-reverse; }
html[dir="rtl"] .zd-login-submit:hover span:last-child { transform: translateX(-4px); }
@keyframes zdLoginCardIn { from { opacity: 0; transform: translateY(22px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes zdLoginPhotoIn { from { opacity: .45; transform: scale(1.04); } to { opacity: .82; transform: scale(1); } }
@keyframes zdLoginCopyIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
    .zd-login-main { justify-content: flex-start; padding-top: 90px; }
    .zd-login-card { width: min(760px, 100%); min-height: 0; grid-template-columns: minmax(0, 1fr); }
    .zd-login-brand-panel { min-height: 390px; padding: clamp(25px, 5vw, 42px); }
    .zd-login-photo { object-position: 42% 38%; }
    .zd-login-brand-copy { max-width: 560px; padding-top: 45px; }
    .zd-login-brand-copy h1 { font-size: clamp(40px, 7vw, 62px); }
    .zd-login-values { margin-top: 22px; }
    .zd-login-panel-mark { top: auto; right: 24px; bottom: 25px; writing-mode: horizontal-tb; }
    .zd-login-form-panel { padding: clamp(30px, 6vw, 54px); }
    .zd-login-form-inner { width: min(480px, 100%); }
}
@media (max-width: 560px) {
    .zd-login-tools { top: 13px; right: 14px; gap: 7px; }
    html[dir="rtl"] .zd-login-tools { right: auto; left: 14px; }
    .zd-login-tools .theme-toggle { width: 36px; height: 36px; }
    .zd-login-tools .rtl-toggle { min-width: 39px; height: 34px; font-size: 11px; }
    .zd-login-main { padding: 66px 12px 14px; }
    .zd-login-card { border-radius: 18px; }
    .zd-login-brand-panel { min-height: 330px; padding: 23px 20px; }
    .zd-login-brand .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
    .zd-login-brand .brand-name { font-size: 16px; }
    .zd-login-brand-copy { padding-top: 38px; }
    .zd-login-eyebrow { margin-bottom: 12px; font-size: 8px; }
    .zd-login-brand-copy h1 { font-size: clamp(36px, 10vw, 48px); }
    .zd-login-brand-copy > p:not(.zd-login-eyebrow) { margin-top: 13px; font-size: 15px; line-height: 1.55; }
    .zd-login-values { gap: 8px; margin-top: 18px; font-size: 7px; }
    .zd-login-panel-mark { right: 15px; bottom: 13px; font-size: 8px; }
    .zd-login-form-panel { padding: 30px 20px 27px; }
    .zd-login-heading { margin-bottom: 23px; }
    .zd-login-kicker { font-size: 8px; }
    .zd-login-heading h2 { font-size: clamp(31px, 9vw, 40px); }
    .zd-login-heading > p:last-child { font-size: 15px; }
    .zd-login-form { gap: 14px; }
    .zd-login-field input { min-height: 50px; font-size: 14px; }
    .zd-login-submit { min-height: 51px; }
    .zd-login-divider { margin: 18px 0 13px; }
    .zd-login-socials { gap: 6px; }
    .zd-login-socials button { min-height: 43px; gap: 5px; padding-inline: 5px; font-size: 11px; }
    .zd-login-signup { margin-top: 19px; font-size: 12px; }
    .zd-login-footnote { max-width: 36ch; font-size: 9px; line-height: 1.5; }
}
@media (max-width: 360px) {
    .zd-login-brand-panel { min-height: 315px; }
    .zd-login-form-panel { padding-inline: 15px; }
    .zd-login-socials button { gap: 4px; font-size: 10px; }
    .zd-login-social-icon { width: 16px; flex-basis: 16px; }
    .zd-login-signup a { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
    .zd-login-page *, .zd-login-page *::before, .zd-login-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* PROGRAMS PAGE — pinned parent empathy story */
.zd-parent-problem {
    --problem-accent: var(--zd-hero-accent-text, #C92F2C);
    position: relative;
    overflow: clip;
    background: var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}
.zd-parent-problem *, .zd-parent-problem *::before, .zd-parent-problem *::after { box-sizing: border-box; }
.zd-parent-problem__track { position: relative; }
.zd-parent-problem.is-pinned .zd-parent-problem__track { height: 300svh; }
.zd-parent-problem__stage {
    display: grid;
    width: min(1440px, 100%);
    min-height: 620px;
    grid-template-columns: minmax(290px, .82fr) minmax(0, 1.18fr);
    align-items: stretch;
    gap: clamp(22px, 4vw, 56px);
    margin-inline: auto;
    padding: clamp(28px, 4vw, 58px) var(--nav-padding-inline, clamp(18px, 4vw, 58px));
}
.zd-parent-problem.is-pinned .zd-parent-problem__stage { position: sticky; top: var(--nav-height, 76px); height: calc(100svh - var(--nav-height, 76px)); min-height: 0; }
.zd-parent-problem__guide { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.zd-parent-problem__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; color: var(--problem-accent); font-size: 10px; font-weight: 700; letter-spacing: .15em; line-height: 1.5; }
.zd-parent-problem__eyebrow span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--color-accent, #E53935); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent, #E53935) 12%, transparent); }
.zd-parent-problem__guide h2 { max-width: 15ch; margin: 0; color: var(--color-text, #111111); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(32px, 4.2vw, 54px); font-weight: 400; letter-spacing: -.045em; line-height: 1.06; text-wrap: balance; }
.zd-parent-problem__guide h2 em { color: var(--problem-accent); font-style: normal; }
.zd-parent-problem__intro { max-width: 48ch; margin: 16px 0 22px; color: var(--zd-hero-muted, #333333); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; }
.zd-parent-problem__journey-label { display: flex; align-items: baseline; gap: 7px; color: var(--zd-hero-muted, #333333); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.zd-parent-problem__journey-label span { margin-inline-end: auto; }
.zd-parent-problem__journey-label b { color: var(--problem-accent); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 18px; }
.zd-parent-problem__journey-label i { font-style: normal; opacity: .6; }
.zd-parent-problem__progress { height: 3px; margin: 9px 0 11px; overflow: hidden; background: var(--zd-hero-border, rgba(17, 17, 17, .14)); }
.zd-parent-problem__progress span { display: block; width: 33.333%; height: 100%; background: var(--color-accent, #E53935); transform-origin: left center; transition: width .35s ease; }
.zd-parent-problem__steps { display: grid; gap: 4px; }
.zd-parent-problem__steps button { display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--zd-hero-muted, #333333); cursor: pointer; font: inherit; text-align: start; transition: border-color .25s ease, background .25s ease, color .25s ease; }
.zd-parent-problem__steps button > span { color: var(--problem-accent); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 11px; }
.zd-parent-problem__steps button > b { overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.zd-parent-problem__steps button.is-active { border-color: var(--zd-hero-border, rgba(17, 17, 17, .14)); background: var(--zd-hero-card-bg, #E9E9E4); color: var(--color-text, #111111); }
.zd-parent-problem__steps button:hover { border-color: color-mix(in srgb, var(--color-accent, #E53935) 45%, transparent); }
.zd-parent-problem__steps button:focus-visible { outline: 3px solid var(--color-accent, #E53935); outline-offset: 2px; }
.zd-parent-problem__guide-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--zd-hero-muted, #333333); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.zd-parent-problem__scroll-mark { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14)); border-radius: 50%; color: var(--problem-accent); font-size: 14px; animation: zdProblemNudge 1.8s ease-in-out infinite; }
.zd-parent-problem__panels { position: relative; display: grid; min-width: 0; min-height: 480px; align-self: center; }
.zd-parent-problem__panel { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(180px, .78fr) minmax(0, 1.22fr); align-items: stretch; overflow: hidden; border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14)); border-radius: clamp(18px, 2.5vw, 30px); background: var(--zd-hero-card-bg, #E9E9E4); box-shadow: 0 26px 72px rgba(17, 17, 17, .1); }
.zd-parent-problem.is-pinned .zd-parent-problem__panels { min-height: 0; height: min(100%, 570px); }
.zd-parent-problem.is-pinned .zd-parent-problem__panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(25px) scale(.985); transition: opacity .55s ease, transform .72s cubic-bezier(.2, .8, .2, 1); }
.zd-parent-problem.is-pinned .zd-parent-problem__panel.is-active { z-index: 1; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.zd-parent-problem__art { position: relative; display: grid; min-height: 100%; place-items: center; overflow: hidden; background: radial-gradient(circle at 48% 45%, rgba(229, 57, 53, .28), transparent 42%), linear-gradient(145deg, #191919, #333 74%, #641f1e); color: #FAFAF7; }
.zd-parent-problem__art::before { position: absolute; inset: 12%; border: 1px solid rgba(250, 250, 247, .15); border-radius: 50%; content: ""; }
.zd-parent-problem__art-index { position: absolute; top: 17px; left: 18px; color: rgba(250, 250, 247, .8); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 14px; }
.zd-parent-problem__art svg { position: relative; z-index: 1; width: min(62%, 190px); fill: none; stroke: #FAFAF7; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.zd-parent-problem__art svg circle { stroke: rgba(250, 250, 247, .22); stroke-dasharray: 2 7; }
.zd-parent-problem__art .zd-parent-problem__art-slash { stroke: #F2605C; stroke-width: 6; }
.zd-parent-problem__art-orbit { position: absolute; width: 64%; aspect-ratio: 1; border: 1px dashed rgba(250, 250, 247, .2); border-radius: 50%; }
.zd-parent-problem__art-orbit--one { animation: zdProblemOrbit 28s linear infinite; }
.zd-parent-problem__art-orbit--two { width: 80%; border-style: solid; border-color: rgba(250, 250, 247, .09); animation: zdProblemOrbit 38s linear infinite reverse; }
.zd-parent-problem__art-caption { position: absolute; z-index: 2; right: 8%; bottom: 8%; color: #F2605C; font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(14px, 2vw, 22px); letter-spacing: -.03em; line-height: 1; text-align: end; }
.zd-parent-problem__panel-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(23px, 3.2vw, 44px); }
.zd-parent-problem__panel-kicker { margin: 0 0 13px; color: var(--problem-accent); font-size: 9px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.zd-parent-problem__panel h3 { margin: 0; color: var(--color-text, #111111); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(29px, 3.4vw, 45px); font-weight: 400; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.zd-parent-problem__body { margin: 16px 0 19px; color: var(--zd-hero-muted, #333333); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; }
.zd-parent-problem__answer { display: grid; gap: 6px; padding: 12px 14px; border-inline-start: 3px solid var(--color-accent, #E53935); background: color-mix(in srgb, var(--color-background, #FAFAF7) 70%, transparent); }
.zd-parent-problem__answer span { color: var(--problem-accent); font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.zd-parent-problem__answer b { color: var(--color-text, #111111); font-size: 13px; line-height: 1.5; }
.zd-parent-problem__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.zd-parent-problem__tags span { padding: 6px 9px; border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, .14)); border-radius: 999px; color: var(--zd-hero-muted, #333333); font-size: 8px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; }
.zd-parent-problem__panel-corner { position: absolute; right: 18px; bottom: 15px; z-index: 2; color: var(--zd-hero-muted, #333333); font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.zd-parent-problem__panel.is-active .zd-parent-problem__art svg { animation: zdProblemIconIn .7s .1s cubic-bezier(.2, .8, .2, 1) both; }
.zd-parent-problem__panel.is-active .zd-parent-problem__art-caption { animation: zdProblemCaption .6s .22s ease both; }
.zd-parent-problem:not(.is-pinned) .zd-parent-problem__panels { gap: 16px; }
.zd-parent-problem:not(.is-pinned) .zd-parent-problem__panel { min-height: 440px; }
@keyframes zdProblemOrbit { to { transform: rotate(360deg); } }
@keyframes zdProblemNudge { 50% { transform: translateY(3px); } }
@keyframes zdProblemIconIn { from { opacity: .25; transform: scale(.78) rotate(-9deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes zdProblemCaption { from { opacity: 0; translate: 10px 0; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 900px) {
    .zd-parent-problem__stage { min-height: 560px; grid-template-columns: minmax(245px, .78fr) minmax(0, 1.22fr); gap: 19px; padding-inline: clamp(18px, 3vw, 32px); }
    .zd-parent-problem__guide h2 { font-size: clamp(30px, 4vw, 42px); }
    .zd-parent-problem__intro { font-size: 16px; }
    .zd-parent-problem__panel { grid-template-columns: minmax(130px, .66fr) minmax(0, 1.34fr); }
    .zd-parent-problem__panel-copy { padding: 22px; }
    .zd-parent-problem__panel h3 { font-size: clamp(25px, 3.2vw, 34px); }
    .zd-parent-problem__body { font-size: 15px; }
}
@media (max-width: 680px) {
    .zd-parent-problem.is-pinned .zd-parent-problem__track { height: 300svh; }
    .zd-parent-problem__stage { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(320px, 1fr); gap: 10px; padding: 18px 16px; }
    .zd-parent-problem.is-pinned .zd-parent-problem__stage { height: calc(100svh - var(--nav-height, 66px)); }
    .zd-parent-problem__guide { justify-content: start; }
    .zd-parent-problem__eyebrow { margin-bottom: 7px; font-size: 8px; }
    .zd-parent-problem__guide h2 { max-width: 100%; font-size: clamp(24px, 6vw, 34px); line-height: 1.04; }
    .zd-parent-problem__intro { margin: 7px 0 8px; font-size: 13px; line-height: 1.42; }
    .zd-parent-problem__journey-label { font-size: 8px; }
    .zd-parent-problem__progress { margin: 5px 0; }
    .zd-parent-problem__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .zd-parent-problem__steps button { grid-template-columns: 1fr; align-content: start; gap: 1px; padding: 4px 5px; }
    .zd-parent-problem__steps button > span { font-size: 8px; }
    .zd-parent-problem__steps button > b { display: block; overflow: visible; font-size: 8px; line-height: 1.15; text-overflow: clip; white-space: normal; }
    .zd-parent-problem__guide-foot { display: none; }
    .zd-parent-problem__panels { min-height: 0; height: 100%; }
    .zd-parent-problem__panel { grid-template-columns: minmax(90px, .36fr) minmax(0, 1fr); border-radius: 16px; }
    .zd-parent-problem.is-pinned .zd-parent-problem__panels { height: 100%; min-height: 0; }
    .zd-parent-problem__panel-copy { justify-content: center; padding: clamp(12px, 3.8vw, 20px); }
    .zd-parent-problem__panel-kicker { margin-bottom: 8px; font-size: 7px; letter-spacing: .1em; }
    .zd-parent-problem__panel h3 { font-size: clamp(21px, 5.4vw, 29px); }
    .zd-parent-problem__body { margin: 9px 0 10px; font-size: clamp(13px, 3.5vw, 15px); line-height: 1.48; }
    .zd-parent-problem__answer { gap: 4px; padding: 8px 9px; }
    .zd-parent-problem__answer span { font-size: 7px; }
    .zd-parent-problem__answer b { font-size: 10px; line-height: 1.35; }
    .zd-parent-problem__tags { gap: 4px; margin-top: 9px; }
    .zd-parent-problem__tags span { padding: 4px 6px; font-size: 6px; }
    .zd-parent-problem__art-index { top: 10px; left: 9px; font-size: 10px; }
    .zd-parent-problem__art svg { width: 65%; }
    .zd-parent-problem__art-caption { right: 7%; bottom: 8%; font-size: 12px; }
    .zd-parent-problem__panel-corner { right: 9px; bottom: 7px; font-size: 5px; }
    .zd-parent-problem:not(.is-pinned) .zd-parent-problem__panel { min-height: 320px; }
}
@media (max-width: 390px) {
    .zd-parent-problem__stage { padding-inline: 12px; }
    .zd-parent-problem__panel { grid-template-columns: minmax(74px, .3fr) minmax(0, 1fr); }
    .zd-parent-problem__panel-copy { padding: 10px; }
    .zd-parent-problem__body { font-size: 13px; }
    .zd-parent-problem__tags span { font-size: 5.5px; }
    .zd-parent-problem__steps button > b { font-size: 7px; }
}
@media (max-height: 540px) {
    .zd-parent-problem.is-pinned .zd-parent-problem__track { height: auto; }
    .zd-parent-problem.is-pinned .zd-parent-problem__stage { position: relative; top: auto; height: auto; min-height: 0; }
    .zd-parent-problem.is-pinned .zd-parent-problem__panels { height: auto; min-height: 0; }
    .zd-parent-problem.is-pinned .zd-parent-problem__panel { position: relative; inset: auto; min-height: 360px; opacity: 1; pointer-events: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .zd-parent-problem *, .zd-parent-problem *::before, .zd-parent-problem *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Keep the parent challenge guide fully visible on shorter desktop and tablet screens. */
@media (min-width: 681px) and (max-height: 760px) {
    #parentProblemScroll .zd-parent-problem__stage {
        min-height: 0;
        padding-block: 16px;
        align-items: center;
    }

    #parentProblemScroll .zd-parent-problem__guide {
        min-height: 0;
        justify-content: flex-start;
    }

    #parentProblemScroll .zd-parent-problem__eyebrow { margin-bottom: 8px; }
    #parentProblemScroll .zd-parent-problem__guide h2 {
        max-width: 100%;
        font-size: clamp(32px, 3.5vw, 48px);
        line-height: 1.02;
    }

    #parentProblemScroll .zd-parent-problem__intro {
        margin: 10px 0 12px;
        line-height: 1.5;
    }

    #parentProblemScroll .zd-parent-problem__progress { margin-block: 6px 8px; }
    #parentProblemScroll .zd-parent-problem__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    #parentProblemScroll .zd-parent-problem__steps button {
        min-height: 54px;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 3px;
        padding: 6px;
    }

    #parentProblemScroll .zd-parent-problem__steps button > b {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #parentProblemScroll .zd-parent-problem__guide-foot { margin-top: 10px; }
}

@media (max-width: 680px) {
    #parentProblemScroll .zd-parent-problem__stage {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(320px, auto);
        align-items: start;
    }

    #parentProblemScroll .zd-parent-problem__guide,
    #parentProblemScroll .zd-parent-problem__panels { min-width: 0; }
}

@media (min-width: 681px) {
    #parentProblemScroll .zd-parent-problem__guide { justify-content: flex-start; }

    #parentProblemScroll .zd-parent-problem__guide h2 {
        max-width: 100%;
        font-size: clamp(32px, 3.5vw, 48px);
        line-height: 1.02;
    }

    #parentProblemScroll .zd-parent-problem__intro { margin: 10px 0 12px; }

    #parentProblemScroll .zd-parent-problem__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    #parentProblemScroll .zd-parent-problem__steps button {
        min-width: 0;
        min-height: 54px;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 4px;
        padding: 7px 6px;
    }

    #parentProblemScroll .zd-parent-problem__steps button > b {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   PROGRAMS HERO: "BREAK THE BOARD"  ("pb-")
   75vh banner
   ========================================================= */

.pb {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 75vh;
    overflow: hidden;
    background: var(--pb-bg);
    color: var(--pb-text);
    font-family: var(--font-body);
}

@supports (height: 75svh) {
    .pb { min-height: 75svh; }
}

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

.pb button:focus-visible,
.pb a:focus-visible {
    outline: 3px solid var(--pb-focus);
    outline-offset: 3px;
    box-shadow: none;
}

.pb-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-width, 1440px);
    margin-inline: auto;
    padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 48px);
}

.pb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3.5vw, 44px);
    align-items: center;
}

/* ---------- Background ---------- */
.pb-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.pb-rays {
    position: absolute;
    inset-inline-end: -18%;
    top: 50%;
    width: clamp(520px, 96vw, 1100px);
    aspect-ratio: 1;
    translate: 0 -50%;
    background: repeating-conic-gradient(from 0deg, var(--pb-ray) 0 4deg, transparent 4deg 14deg);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    animation: pbSpin 90s linear infinite;
}

.pb--hit .pb-rays {
    animation: pbSpin 90s linear infinite, pbRay 0.9s ease-out;
}

.pb-dots {
    position: absolute;
    inset: -16px;
    background-image: radial-gradient(var(--pb-dot) 1.6px, transparent 2px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(120deg, transparent 45%, #000);
    mask-image: linear-gradient(120deg, transparent 45%, #000);
    animation: pbDrift 8s linear infinite;
}

/* ---------- Copy ---------- */
.pb-copy {
    min-width: 0;
}

.pb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pb-accent-text);
}

.pb-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.pb-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 8.6vw, 72px);
    font-weight: 400;
    line-height: 1.08;
    color: var(--pb-text);
    text-wrap: balance;
}

.pb-wi {
    display: inline-block;
}

.pb-mark {
    padding-inline: 0.1em;
    background: linear-gradient(var(--pb-mark), var(--pb-mark)) no-repeat;
    background-size: 100% 42%;
    background-position: 0 92%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1s;
}

.pb-lead {
    max-width: 46ch;
    margin: 14px 0 0;
    font-size: clamp(15px, 1.9vw, 19px);
    line-height: 1.6;
    color: var(--pb-text-soft);
}

.pb-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 18px;
}

.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 14px 24px;
    border-radius: 999px;
    background: var(--pb-btn-bg);
    color: var(--pb-btn-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pb-btn:hover {
    background: var(--pb-btn-hover);
    transform: translateY(-2px);
}

.pb-btn svg {
    flex: 0 0 auto;
    transition: translate 0.2s ease;
}

.pb-btn:hover svg {
    translate: 4px 0;
}

.pb-link {
    padding-block: 10px;
    border-bottom: 2px solid var(--pb-link-line);
    color: var(--pb-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color 0.2s ease;
}

.pb-link:hover {
    border-color: #E53935;
}

.pb-replay {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px solid var(--pb-ghost-border);
    border-radius: 999px;
    background: transparent;
    color: var(--pb-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.pb--ready .pb-replay {
    display: inline-flex;
}

.pb-replay:hover:not(:disabled) {
    background: var(--pb-chip-bg);
}

.pb-replay:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---------- Stage ---------- */
.pb-stage {
    position: relative;
    width: 100%;
    max-width: 760px;
    min-width: 0;
    margin-inline: auto;
}

.pb--shake .pb-stage {
    animation: pbShake 0.5s ease-out;
}

/* Program cards */
.pb-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pb-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--pb-card-border);
    border-radius: 16px;
    background: var(--pb-card);
    box-shadow: var(--pb-card-shadow);
    transition: transform 0.25s ease, opacity 0.3s ease, scale 0.3s ease;
}

.pb-card:hover {
    transform: translateY(-3px);
}

.pb-belts {
    display: flex;
    gap: 3px;
    margin-bottom: 2px;
}

.pb-belts i {
    display: block;
    width: 20px;
    height: 9px;
    border: 1px solid var(--pb-line-strong);
    border-radius: 2px;
    background: var(--c);
}

.pb-card-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(15px, 4.4vw, 20px);
    font-weight: 400;
    line-height: 1.12;
    color: var(--pb-text);
}

.pb-card-meta {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--pb-text);
}

.pb-belt-txt,
.pb-card-text,
.pb-card-foot {
    display: none;
}

.pb-card-text {
    margin: 2px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pb-text-soft);
}

.pb-card-foot {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    margin: auto 0 0;
    padding-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pb-text);
}

.pb-enrol {
    padding-block: 4px;
    color: var(--pb-link);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* The wooden board (only shown when JS is ready) */
.pb-board {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pb--ready .pb-board {
    display: block;
    animation: pbDrop 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) 0.3s both;
}

.pb--done .pb-board {
    visibility: hidden;
    pointer-events: none;
}

.pb-slab {
    position: absolute;
    inset: 0;
    display: block;
}

.pb--ready:not(.pb--charge) .pb-slab {
    animation: pbHint 1.8s ease-in-out infinite;
}

.pb--charge:not(.pb--crack) .pb-slab {
    animation: pbCharge 0.7s linear both;
}

.pb-wood {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background:
        repeating-linear-gradient(90deg, var(--pb-grain) 0 2px, transparent 2px 15px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 7px),
        linear-gradient(135deg, var(--pb-wood-1), var(--pb-wood-2));
    transition: transform 0.8s cubic-bezier(0.3, 1.2, 0.5, 1), opacity 0.2s ease;
    will-change: transform;
}

.pb-wood--l {
    clip-path: polygon(0 0, 52% 0, 47% 14%, 55% 30%, 46% 46%, 54% 62%, 47% 78%, 53% 100%, 0 100%);
    transform-origin: 20% 60%;
}

.pb-wood--r {
    clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%, 47% 78%, 54% 62%, 46% 46%, 55% 30%, 47% 14%);
    transform-origin: 80% 60%;
}

.pb--broken .pb-wood {
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.55, 0, 0.9, 0.4), opacity 0.5s ease 0.45s;
}

.pb--broken .pb-wood--l { transform: translate(-26%, 118%) rotate(-26deg); }
.pb--broken .pb-wood--r { transform: translate(26%, 118%) rotate(26deg); }

.pb-crack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pb-crack path {
    fill: none;
    stroke: var(--pb-crack);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.25s ease-out;
}

.pb--crack .pb-crack path {
    stroke-dashoffset: 0;
}

.pb-board-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-family: var(--font-display);
    font-size: clamp(20px, 4.6vw, 36px);
    line-height: 1.1;
    text-align: center;
    color: var(--pb-board-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.pb--crack .pb-board-text {
    opacity: 0;
}

/* Effects layer */
.pb-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.pb-flash {
    position: absolute;
    inset: -8%;
    background: radial-gradient(circle, var(--pb-flash), transparent 65%);
    opacity: 0;
}

.pb--hit .pb-flash {
    animation: pbFlash 0.4s ease-out both;
}

.pb-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border: 4px solid #E53935;
    border-radius: 50%;
    opacity: 0;
}

.pb-wave--2 {
    border-width: 2px;
}

.pb--hit .pb-wave {
    animation: pbWave 0.8s ease-out both;
}

.pb--hit .pb-wave--2 {
    animation-delay: 0.15s;
}

.pb-kiai {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 6px 18px;
    translate: -50% -50%;
    rotate: -6deg;
    border-radius: 999px;
    background: #C92F2C;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: clamp(20px, 4vw, 30px);
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
}

.pb--hit .pb-kiai {
    animation: pbKiai 1.2s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

.pb-chips {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
}

.pb-chips i {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--z, 10px);
    height: calc(var(--z, 10px) * 0.45);
    border: 1px solid var(--pb-wood-edge);
    background: var(--pb-wood-2);
    animation: pbChip 0.95s cubic-bezier(0.2, 0.7, 0.4, 1) both;
}

/* ---------- Entrance (JS ready) ---------- */
.pb--ready .pb-fx {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--d, 0) * 110ms + 400ms);
}

.pb--go .pb-fx {
    opacity: 1;
    translate: 0 0;
}

.pb--ready .pb-wi {
    opacity: 0;
    translate: 0 -70%;
    transition: opacity 0.45s ease, translate 0.75s cubic-bezier(0.3, 1.6, 0.5, 1);
    transition-delay: calc(var(--k, 0) * 100ms + 200ms);
}

.pb--go .pb-wi {
    opacity: 1;
    translate: 0 0;
}

.pb--ready .pb-mark {
    background-size: 0% 42%;
}

.pb--go .pb-mark {
    background-size: 100% 42%;
}

/* Cards pop out when the board breaks */
.pb--ready .pb-card {
    opacity: 0;
    scale: 0.86;
}

.pb--broken .pb-card {
    opacity: 1;
    scale: 1;
    transition:
        transform 0.25s ease,
        opacity 0.5s ease calc(var(--k, 0) * 90ms + 0.2s),
        scale 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--k, 0) * 90ms + 0.2s);
}

/* ---------- Keyframes ---------- */
@keyframes pbSpin  { to { rotate: 360deg; } }
@keyframes pbDrift { to { translate: 16px 16px; } }
@keyframes pbRay {
    0%   { scale: 1; }
    35%  { scale: 1.16; }
    100% { scale: 1; }
}
@keyframes pbDrop {
    from { opacity: 0; translate: 0 -30px; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes pbHint {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.018); }
}
@keyframes pbCharge {
    0%   { transform: translate(0, 0) rotate(0deg); }
    10%  { transform: translate(-1px, 1px) rotate(-0.4deg); }
    20%  { transform: translate(2px, -1px) rotate(0.5deg); }
    30%  { transform: translate(-2px, 1px) rotate(-0.7deg); }
    40%  { transform: translate(3px, -2px) rotate(0.8deg); }
    50%  { transform: translate(-3px, 2px) rotate(-1deg); }
    60%  { transform: translate(4px, -2px) rotate(1deg); }
    70%  { transform: translate(-4px, 2px) rotate(-1.2deg); }
    80%  { transform: translate(4px, -3px) rotate(1.2deg); }
    90%  { transform: translate(-3px, 2px) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes pbShake {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-5px, 3px); }
    40%      { transform: translate(5px, -3px); }
    60%      { transform: translate(-3px, 2px); }
    80%      { transform: translate(3px, -1px); }
}
@keyframes pbFlash {
    0%   { opacity: 0; }
    20%  { opacity: 0.55; }
    100% { opacity: 0; }
}
@keyframes pbWave {
    0%   { opacity: 0.9; scale: 0.2; }
    100% { opacity: 0;   scale: 2.2; }
}
@keyframes pbKiai {
    0%   { opacity: 0; scale: 0.3; }
    25%  { opacity: 1; scale: 1.15; }
    70%  { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1; }
}
@keyframes pbChip {
    0%   { opacity: 1; translate: 0 0; rotate: 0deg; }
    45%  { translate: calc(var(--dx) * 0.75) var(--dy); }
    100% { opacity: 0; translate: var(--dx) calc(var(--dy) + 170px); rotate: var(--r); }
}

/* =========================================================
   Mobile M  (375px and up)
   ========================================================= */
@media (min-width: 375px) {
    .pb-card { padding: 12px; }
}

/* =========================================================
   Mobile L  (425px and up)
   ========================================================= */
@media (min-width: 425px) {
    .pb-belt-txt { display: inline; }
    .pb-card-text { display: block; }
    .pb-card-foot { display: flex; }
    .pb-btn { padding: 15px 30px; }
}

/* =========================================================
   Tablet  (768px and up)
   ========================================================= */
@media (min-width: 768px) {

    .pb-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    }

    .pb-title { font-size: clamp(34px, 5vw, 68px); }

    .pb-cards { gap: 10px; }
    .pb-card { gap: 6px; padding: 14px; }
    .pb-card-name { font-size: 20px; }
    .pb-card-meta { font-size: 13px; }
}

/* =========================================================
   Laptop  (1024px and up)
   ========================================================= */
@media (min-width: 1024px) {

    .pb-grid { gap: clamp(32px, 4vw, 64px); }
    .pb-card { padding: 16px; }
    .pb-card-name { font-size: 22px; }
    .pb-card-text { font-size: 15px; }
    .pb-card-foot { font-size: 13.5px; }
}

/* =========================================================
   Laptop L  (1440px and up)
   ========================================================= */
@media (min-width: 1440px) {

    .pb-lead { font-size: 20px; }
    .pb-stage { max-width: 820px; }
    .pb-card { padding: 20px; }
    .pb-card-name { font-size: 26px; }
    .pb-card-text { font-size: 16px; }
}

/* ---------- Reduced motion: no board, no motion, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {

    .pb *,
    .pb *::before,
    .pb *::after {
        animation: none !important;
        transition: none !important;
    }

    .pb-board,
    .pb-replay { display: none !important; }
}

/* =========================================================
   PARENT DASHBOARD  ("db-")
   ========================================================= */

.db-body {
    margin: 0;
    background: var(--db-bg);
    color: var(--db-text);
    font-family: var(--font-body);
}

html.db-lock,
html.db-lock .db-body {
    overflow: hidden;
    overscroll-behavior: none;
}

.db-body :focus-visible {
    outline: 3px solid var(--db-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.db-skip {
    position: absolute;
    inset-inline-start: 12px;
    top: -64px;
    z-index: 3000;
    padding: 10px 16px;
    border-radius: 8px;
    background: #111111;
    color: #FAFAF7;
    font-weight: 600;
}

.db-skip:focus {
    top: 12px;
}

/* ---------- Shell ---------- */
.db-shell {
    --db-side-w: 280px;
    display: block;
}

.db-col {
    min-width: 0;
}

/* ---------- Top bar (sticky) ---------- */
.db-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--nav-height, 70px);
    padding-inline: clamp(14px, 3vw, 32px);
    background: var(--nav-background);
    border-bottom: 1px solid var(--nav-border);
}

.db-top-title {
    min-width: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 1.2;
    color: var(--db-text);
}

.db-top-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.db-logout.login-btn {
    background: var(--db-btn-bg);
    border-color: var(--db-btn-bg);
    color: var(--db-btn-text);
}

.db-logout.login-btn:hover {
    background: var(--db-btn-hover);
    border-color: var(--db-btn-hover);
}

/* ---------- Sidebar (default = full-screen menu on tablet and mobile) ---------- */
.db-sidebar {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--db-side-bg);
    color: var(--db-text);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.db-sidebar.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.db-side-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--nav-height, 70px);
    padding: 12px 18px;
    border-bottom: 1px solid var(--db-side-line);
}

.db-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: transparent;
    color: var(--nav-icon);
    transition: color 0.18s ease, background-color 0.18s ease;
}

.db-close:hover {
    background: var(--icon-hover);
    color: var(--color-accent);
}

.db-side-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.db-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--db-side-line);
    border-radius: 16px;
    background: var(--db-card);
}

.db-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 2px solid var(--db-line-strong);
    border-radius: 50%;
}

.db-profile-text {
    min-width: 0;
}

.db-pname {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--db-text);
}

.db-ploc {
    margin: 2px 0 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--db-soft);
}

.db-nav ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.db-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 50px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--db-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color 0.2s ease;
}

.db-link:hover {
    background: var(--db-link-hover);
}

.db-link[aria-current="page"] {
    background: var(--db-link-active-bg);
    font-weight: 700;
}

.db-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block: 10px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 4px;
    background: #E53935;
}

.db-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.db-sidebar.is-open .db-link {
    animation: dbSlide 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 50ms + 100ms);
}

.db-side-foot {
    display: grid;
    flex: 0 0 auto;
    gap: 12px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--db-side-line);
}

.db-help {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--db-soft);
}

.db-help b {
    color: var(--db-text);
}

.db-help a {
    color: var(--db-accent-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Content ---------- */
.db-content {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding: clamp(16px, 3.4vw, 40px);
    outline: none;
}

.db-view[hidden] {
    display: none;
}

.db-view.is-show {
    animation: dbIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.db-head {
    margin-bottom: clamp(16px, 3vw, 28px);
}

.db-kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--db-accent-text);
}

.db-h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 6.4vw, 42px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--db-text);
    outline: none;
}

.db-sub {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--db-soft);
}

.db-h2 {
    margin: 0;
    font-size: clamp(17px, 2.4vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--db-text);
}

.db-text {
    margin: 6px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--db-soft);
}

.db-gap-top {
    margin-top: clamp(14px, 2.4vw, 22px);
}

/* ---------- Cards and grids ---------- */
.db-card {
    min-width: 0;
    padding: clamp(14px, 2.6vw, 24px);
    border: 1px solid var(--db-line);
    border-radius: 18px;
    background: var(--db-card);
    box-shadow: var(--db-shadow);
}

.db-grid {
    display: grid;
    gap: 12px;
}

.db-grid + .db-grid,
.db-grid + .db-card,
.db-card + .db-card {
    margin-top: 12px;
}

.db-grid--stats {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.db-grid--cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.db-grid--two {
    grid-template-columns: minmax(0, 1fr);
}

.db-grid--top {
    align-items: start;
}

/* Stat tiles */
.db-stat {
    padding: 16px 12px;
    border: 1px solid var(--db-line);
    border-radius: 16px;
    background: var(--db-card);
    text-align: center;
}

.db-stat-num {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1;
    color: var(--db-accent-text);
}

.db-stat-label {
    margin: 8px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--db-text);
}

/* Pills and banners */
.db-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--db-chip-bg);
    color: var(--db-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.db-pill--ok   { background: var(--db-ok-bg);   color: var(--db-ok); }
.db-pill--warn { background: var(--db-warn-bg); color: var(--db-warn); }
.db-pill--dark { background: var(--db-pill-bg); color: var(--db-pill-text); }

.db-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.db-banner--ok   { background: var(--db-ok-bg);   color: var(--db-ok); }
.db-banner--warn { background: var(--db-warn-bg); color: var(--db-warn); }

/* Rows */
.db-list {
    display: grid;
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.db-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 36px;
    border: 1px solid var(--db-line-strong);
    border-radius: 4px;
    background: var(--c);
}

.db-row-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--db-text);
}

.db-row-sub {
    margin: 2px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--db-soft);
}

/* Next test card */
.db-next {
    display: flex;
    gap: 16px;
    align-items: center;
}

.db-next-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.db-next-body .db-btns {
    margin-top: 8px;
}

.db-date {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 66px;
    padding: 10px 6px;
    border-radius: 14px;
    background: var(--db-date-bg);
    color: var(--db-date-text);
    line-height: 1;
    text-align: center;
}

.db-date span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.db-date b {
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
}

.db-count-down {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--db-accent-text);
}

/* Timeline */
.db-timeline {
    display: grid;
    gap: 14px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.db-timeline li {
    position: relative;
    padding-inline-start: 22px;
}

.db-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E53935;
}

/* Buttons */
.db-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 22px;
    border: 1.5px solid var(--db-btn-bg);
    border-radius: 999px;
    background: var(--db-btn-bg);
    color: var(--db-btn-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.db-btn:hover:not(:disabled) {
    background: var(--db-btn-hover);
    border-color: var(--db-btn-hover);
    transform: translateY(-2px);
}

.db-btn--ghost {
    background: transparent;
    border-color: var(--db-ghost-border);
    color: var(--db-text);
}

.db-btn--ghost:hover:not(:disabled) {
    background: var(--db-chip-bg);
    border-color: var(--db-ghost-border);
}

.db-btn--sm {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 14px;
}

.db-btn--block {
    width: 100%;
}

.db-btn:disabled {
    background: var(--db-disabled-bg);
    border-color: var(--db-disabled-bg);
    color: var(--db-disabled-text);
    cursor: not-allowed;
}

.db-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Child chips */
.db-kids {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.db-kidchip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 5px 16px 5px 6px;
    border: 1.5px solid var(--db-line-strong);
    border-radius: 999px;
    background: var(--db-card);
    color: var(--db-text);
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.db-kidchip[aria-pressed="true"] {
    background: var(--db-on-bg);
    border-color: var(--db-on-bg);
    color: var(--db-on-text);
}

.db-initial {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 3px solid var(--c);
    border-radius: 50%;
    background: var(--db-card);
    box-shadow: 0 0 0 1px var(--db-line-strong);
    color: var(--db-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.db-initial--lg {
    width: 52px;
    height: 52px;
    font-size: 20px;
}

/* Children cards */
.db-kid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.db-kid-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.db-kid-top .db-sub {
    margin: 2px 0 0;
}

.db-belt-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--db-text);
}

.db-belt {
    display: block;
    width: 34px;
    height: 12px;
    border: 1px solid var(--db-line-strong);
    border-radius: 3px;
    background: var(--c);
}

.db-meter-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--db-text);
}

.db-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--db-track);
}

.db-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #E53935, #FF6B66);
    transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}

.is-fill .db-fill {
    width: var(--w, 0%);
}

.db-kid .db-btns {
    margin-top: auto;
}

/* Program cards */
.db-prog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-prog.is-current {
    border-color: var(--db-line-strong);
    box-shadow: 0 0 0 2px #E53935, var(--db-shadow);
}

.db-prog-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.db-belts {
    display: flex;
    gap: 4px;
}

.db-belts i {
    display: block;
    width: 26px;
    height: 11px;
    border: 1px solid var(--db-line-strong);
    border-radius: 3px;
    background: var(--c);
}

.db-prog-meta {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--db-text);
}

.db-prog .db-text {
    margin: 0;
    flex: 1 1 auto;
}

.db-prog-foot {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--db-soft);
}

.db-confirm {
    padding: 12px;
    border: 1.5px dashed var(--db-ghost-border);
    border-radius: 14px;
}

.db-confirm .db-text {
    margin: 0 0 10px;
    font-weight: 600;
    color: var(--db-text);
}

/* Progress view */
.db-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
}

.db-ring {
    position: relative;
    flex: 0 0 auto;
    width: 112px;
    aspect-ratio: 1;
}

.db-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.db-ring-bg,
.db-ring-fill {
    fill: none;
    stroke-width: 10;
}

.db-ring-bg {
    stroke: var(--db-track);
}

.db-ring-fill {
    stroke: #E53935;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}

.is-fill .db-ring-fill {
    stroke-dashoffset: calc(326.73 * (1 - var(--p, 0)));
}

.db-ring-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 36%;
    font-family: var(--font-display);
    line-height: 1;
    color: var(--db-text);
}

.db-ring-val b {
    font-size: 28px;
    font-weight: 400;
}

.db-ring-val small {
    margin-inline-start: 2px;
    font-size: 14px;
}

.db-hero-copy {
    flex: 1 1 200px;
    min-width: 0;
}

.db-ladder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.db-step {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-bg);
}

.db-step.is-now {
    border: 2px solid #E53935;
    background: var(--db-link-active-bg);
}

.db-step-sw {
    display: block;
    height: 14px;
    border: 1px solid var(--db-line-strong);
    border-radius: 3px;
    background: var(--c);
}

.db-step-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--db-text);
}

.db-step-state {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--db-soft);
}

.db-skills {
    display: grid;
    gap: 14px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.db-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.db-badge {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: var(--db-bg);
    text-align: center;
}

.db-badge svg {
    width: 30px;
    height: 30px;
}

.db-badge.is-on svg { fill: #E53935; stroke: #E53935; }
.db-badge:not(.is-on) svg { fill: none; stroke: var(--db-soft); }

.db-badge b {
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--db-text);
}

.db-badge small {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--db-soft);
}

/* Testing view */
.db-tests {
    display: grid;
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.db-test {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.db-test.is-reg {
    border-color: var(--db-line-strong);
    box-shadow: 0 0 0 2px #E53935, var(--db-shadow);
}

.db-test .db-btns {
    grid-column: 1 / -1;
}

.db-test-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}

/* Forms */
.db-form {
    display: grid;
    gap: 16px;
}

.db-fields {
    display: grid;
    gap: 14px;
}

.db-field {
    display: grid;
    gap: 6px;
}

.db-field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--db-text);
}

.db-field input,
.db-field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1.5px solid var(--db-line-strong);
    border-radius: 10px;
    background: var(--db-input);
    color: var(--db-text);
    font: inherit;
    font-size: 16px;
}

.db-field input[aria-invalid="true"] {
    border-color: var(--db-error);
}

.db-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.db-msg {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--db-ok);
}

.db-msg.is-error {
    color: var(--db-error);
}

.db-switches {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.db-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--db-line);
}

.db-switch-row:last-child {
    border-bottom: 0;
}

.db-switch {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 30px;
    border: 1.5px solid var(--db-line-strong);
    border-radius: 999px;
    background: var(--db-track);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.db-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: inset-inline-start 0.25s ease;
}

.db-switch[aria-checked="true"] {
    background: #C92F2C;
    border-color: #C92F2C;
}

.db-switch[aria-checked="true"]::after {
    inset-inline-start: 23px;
}

/* Toasts */
.db-toasts {
    position: fixed;
    inset-inline: 0;
    bottom: 16px;
    z-index: 2000;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding-inline: 16px;
    pointer-events: none;
}

.db-toast {
    max-width: 440px;
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--db-toast-bg);
    color: var(--db-toast-text);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    animation: dbToast 4.2s ease both;
}

/* ---------- Keyframes ---------- */
@keyframes dbIn    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dbSlide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes dbToast {
    0%   { opacity: 0; transform: translateY(14px); }
    8%   { opacity: 1; transform: none; }
    90%  { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(8px); }
}

/* =========================================================
   Mobile M  (375px and up)
   ========================================================= */
@media (min-width: 375px) {
    .db-ring { width: 120px; }
}

/* =========================================================
   Mobile L  (425px and up)
   ========================================================= */
@media (min-width: 425px) {
    .db-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   Tablet  (768px and up)
   ========================================================= */
@media (min-width: 768px) {

    .db-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .db-test {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .db-test .db-btns {
        grid-column: auto;
    }

    .db-ladder { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .db-ring   { width: 132px; }
}

/* =========================================================
   Laptop  (1024px and up): sticky sidebar appears
   ========================================================= */
@media (min-width: 1024px) {

    .db-shell {
        display: grid;
        grid-template-columns: var(--db-side-w) minmax(0, 1fr);
        align-items: start;
    }

    .db-sidebar {
        position: sticky;
        top: 0;
        inset: auto;
        z-index: 30;
        width: auto;
        height: 100vh;
        height: 100dvh;
        align-self: start;
        visibility: visible;
        opacity: 1;
        transform: none;
        border-inline-end: 1px solid var(--db-side-line);
        transition: none;
    }

    .db-close,
    .db-logout-menu {
        display: none;
    }

    .db-link {
        font-size: 15px;
    }

    .db-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .db-grid--two > .db-card + .db-card {
        margin-top: 0;
    }
}

/* =========================================================
   Laptop L  (1440px and up)
   ========================================================= */
@media (min-width: 1440px) {

    .db-shell { --db-side-w: 300px; }

    .db-content { padding: 44px 48px; }
    .db-stat-num { font-size: 44px; }
    .db-grid { gap: 16px; }
}

/* Short laptop screens: keep the sidebar usable */
@media (min-width: 1024px) and (max-height: 640px) {
    .db-profile { padding: 10px; margin-bottom: 10px; }
    .db-link { min-height: 44px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    .db-body *,
    .db-body *::before,
    .db-body *::after {
        animation: none !important;
        transition: none !important;
    }

    .db-fill { width: var(--w, 0%); }
    .db-ring-fill { stroke-dashoffset: calc(326.73 * (1 - var(--p, 0))); }
}

/* USER DASHBOARD — keep desktop sidebar and brand fixed to the viewport */
@media (min-width: 1024px) {
    .db-shell {
        display: grid;
        grid-template-columns: var(--db-side-w, 280px) minmax(0, 1fr);
        align-items: stretch;
    }

    .db-sidebar {
        position: fixed;
        inset: auto;
        inset-block: 0;
        inset-inline: 0 auto;
        width: var(--db-side-w, 280px);
        height: 100vh;
        height: 100dvh;
        align-self: auto;
    }

    .db-col {
        grid-column: 2;
        min-width: 0;
    }
}

/* USER DASHBOARD — hide only the active section label in the top bar */
.db-body .db-top-title {
    display: none;
}

.db-body .db-top-actions {
    margin-inline-start: auto;
}

/* PROGRAMS PAGE — sticky belt progression story */
.zd-belt-path {
    --belt-accent: var(--zd-hero-accent-text, #C92F2C);
    position: relative;
    overflow: clip;
    padding: clamp(64px, 8vw, 112px) var(--nav-padding-inline, clamp(18px, 4vw, 58px));
    background:
        radial-gradient(ellipse at 90% 12%, color-mix(in srgb, var(--color-accent, #E53935) 9%, transparent), transparent 34%),
        var(--color-background, #FAFAF7);
    color: var(--color-text, #111);
    font-family: var(--font-body, "Inter", sans-serif);
    isolation: isolate;
}
.zd-belt-path *, .zd-belt-path *::before, .zd-belt-path *::after { box-sizing: border-box; }
.zd-belt-path::before { position: absolute; z-index: -1; inset: 10% -12% auto auto; width: 38vw; aspect-ratio: 1; border: 1px solid var(--zd-hero-line, rgba(17,17,17,.06)); border-radius: 50%; box-shadow: 0 0 0 32px var(--zd-hero-line, rgba(17,17,17,.035)), 0 0 0 68px var(--zd-hero-line, rgba(17,17,17,.025)); content: ""; animation: zdBeltHalo 30s linear infinite; }
.zd-belt-path__inner { display: grid; width: min(1380px, 100%); grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: start; gap: clamp(30px, 5vw, 76px); margin-inline: auto; }
.zd-belt-path__visual { position: sticky; top: calc(var(--nav-height, 76px) + 22px); display: flex; min-width: 0; height: min(760px, calc(100svh - var(--nav-height, 76px) - 46px)); min-height: 590px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(25px, 3.2vw, 42px); border: 1px solid rgba(250,250,247,.18); border-radius: clamp(22px, 3vw, 36px); background: #171717; color: #FAFAF7; box-shadow: 0 28px 80px rgba(17,17,17,.18); isolation: isolate; }
.zd-belt-path__visual > img, .zd-belt-path__visual-shade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.zd-belt-path__visual > img { object-fit: cover; object-position: 37% center; opacity: .84; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.zd-belt-path__visual:hover > img { transform: scale(1.035); }
.zd-belt-path__visual-shade { z-index: -1; background: linear-gradient(180deg, rgba(11,11,11,.52), rgba(11,11,11,.08) 33%, rgba(11,11,11,.34) 52%, rgba(11,11,11,.94) 100%), linear-gradient(90deg, rgba(11,11,11,.28), transparent 75%); }
.zd-belt-path__visual-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(250,250,247,.84); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.zd-belt-path__visual-top span { display: flex; align-items: center; gap: 9px; }
.zd-belt-path__visual-top i { width: 7px; height: 7px; border-radius: 50%; background: #F2605C; box-shadow: 0 0 0 5px rgba(242,96,92,.18); animation: zdBeltPulse 2.2s ease-in-out infinite; }
.zd-belt-path__visual-top b { padding: 7px 9px; border: 1px solid rgba(250,250,247,.28); border-radius: 999px; font-size: 7px; white-space: nowrap; }
.zd-belt-path__belt-map { position: relative; width: min(350px, 100%); margin-inline-start: auto; padding: 15px 17px 14px; border: 1px solid rgba(250,250,247,.28); border-radius: 15px; background: rgba(14,14,14,.64); box-shadow: 0 12px 35px rgba(0,0,0,.18); backdrop-filter: blur(9px); }
.zd-belt-path__map-label { display: block; margin-bottom: 14px; color: rgba(250,250,247,.7); font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.zd-belt-path__belt-sequence { display: flex; align-items: center; direction: ltr; }
.zd-belt-path__belt-sequence i { position: relative; display: block; width: 34px; height: 11px; flex: 0 0 34px; border: 1px solid rgba(250,250,247,.6); border-radius: 3px; box-shadow: 0 5px 10px rgba(0,0,0,.28); }
.zd-belt-path__belt-sequence i::after { position: absolute; top: -1px; right: 7px; width: 6px; height: 11px; border-inline: 1px solid rgba(17,17,17,.2); background: rgba(255,255,255,.35); content: ""; }
.zd-belt-path__belt--white { background: #F8F8F2; }
.zd-belt-path__belt--yellow { background: #F4C430; }
.zd-belt-path__belt--orange { background: #E8833A; }
.zd-belt-path__belt--green { background: #43A047; }
.zd-belt-path__belt--black { background: #101010; }
.zd-belt-path__belt-sequence b { width: clamp(13px, 2vw, 29px); height: 1px; flex: 1 1 auto; background: linear-gradient(90deg, #F2605C, rgba(250,250,247,.45)); transform-origin: left; animation: zdBeltLineGrow 2.2s ease-in-out infinite alternate; }
.zd-belt-path__map-start, .zd-belt-path__map-end { display: inline-block; margin-top: 9px; color: rgba(250,250,247,.74); font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.zd-belt-path__map-end { float: right; }
.zd-belt-path__visual-copy { max-width: 520px; margin-top: auto; padding-top: 28px; }
.zd-belt-path__eyebrow, .zd-belt-path__section-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #F47B76; font-size: 9px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.zd-belt-path__eyebrow span, .zd-belt-path__section-label span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--color-accent, #E53935); box-shadow: 0 0 0 5px rgba(229,57,53,.16); }
.zd-belt-path__visual-copy h2 { margin: 0; color: #FAFAF7; font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(37px, 4.2vw, 58px); font-weight: 400; letter-spacing: -.05em; line-height: .99; text-wrap: balance; }
.zd-belt-path__visual-copy h2 em { color: #F2605C; font-style: normal; }
.zd-belt-path__visual-copy > p:last-of-type { max-width: 42ch; margin: 17px 0 0; color: rgba(250,250,247,.86); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; }
.zd-belt-path__visual-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; color: rgba(250,250,247,.75); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.zd-belt-path__visual-foot i { width: 4px; height: 4px; border-radius: 50%; background: #F2605C; }
.zd-belt-path__visual-index { position: absolute; right: 20px; bottom: 17px; color: rgba(250,250,247,.58); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 8px; letter-spacing: .15em; }
.zd-belt-path__content { min-width: 0; }
.zd-belt-path__header { margin: 0 0 clamp(25px, 3vw, 42px); }
.zd-belt-path__section-label { margin-bottom: 14px; color: var(--belt-accent); font-size: 9px; }
.zd-belt-path__header h3 { margin: 0; color: var(--color-text, #111); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(36px, 4vw, 56px); font-weight: 400; letter-spacing: -.05em; line-height: 1.02; text-wrap: balance; }
.zd-belt-path__header h3 em { color: var(--belt-accent); font-style: normal; }
.zd-belt-path__header > p:last-child { max-width: 55ch; margin: 16px 0 0; color: var(--zd-hero-muted, #333); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.7; }
.zd-belt-path__cards { position: relative; display: grid; gap: 16px; }
.zd-belt-path__cards::before { position: absolute; z-index: -1; inset-block: 30px 30px; inset-inline-start: 24px; width: 1px; background: linear-gradient(var(--color-accent, #E53935), var(--zd-hero-border, rgba(17,17,17,.15)) 90%); content: ""; }
.zd-belt-path__card { position: relative; min-width: 0; padding: clamp(21px, 2.5vw, 32px); border: 1px solid var(--zd-hero-border, rgba(17,17,17,.14)); border-radius: 20px; background: var(--zd-hero-card-bg, #E9E9E4); box-shadow: 0 14px 32px rgba(17,17,17,.055); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.zd-belt-path__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-accent, #E53935) 52%, var(--zd-hero-border, rgba(17,17,17,.14))); box-shadow: 0 22px 44px rgba(17,17,17,.1); }
.zd-belt-path__card-top { display: grid; grid-template-columns: auto minmax(0,1fr) 42px; align-items: center; gap: 12px; margin-bottom: 18px; }
.zd-belt-path__number { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid color-mix(in srgb, var(--color-accent, #E53935) 36%, transparent); border-radius: 50%; background: var(--color-background, #FAFAF7); color: var(--belt-accent); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 10px; }
.zd-belt-path__category { color: var(--zd-hero-muted, #333); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.zd-belt-path__icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--zd-hero-border, rgba(17,17,17,.14)); border-radius: 13px; background: var(--color-background, #FAFAF7); color: var(--belt-accent); transition: transform .3s ease, background .3s ease, color .3s ease; }
.zd-belt-path__card:hover .zd-belt-path__icon { transform: rotate(-7deg) scale(1.06); background: var(--color-accent, #E53935); color: #fff; }
.zd-belt-path__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.zd-belt-path__card h4 { margin: 0; color: var(--color-text, #111); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(22px, 2.2vw, 29px); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; }
.zd-belt-path__card > p { max-width: 65ch; margin: 11px 0 0; color: var(--zd-hero-muted, #333); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.7; }
.zd-belt-path__card-note { display: flex; min-height: 45px; align-items: center; gap: 12px; margin-top: 19px; padding: 10px 13px; border-inline-start: 3px solid var(--color-accent, #E53935); background: color-mix(in srgb, var(--color-background, #FAFAF7) 72%, transparent); }
.zd-belt-path__card-note b { color: var(--color-text, #111); font-size: 12px; font-weight: 600; line-height: 1.5; }
.zd-belt-path__stripe-sample { display: flex; flex: 0 0 auto; gap: 4px; }
.zd-belt-path__stripe-sample i { display: block; width: 5px; height: 18px; border-radius: 2px; background: var(--color-accent, #E53935); }
.zd-belt-path__stripe-sample i:nth-child(2) { opacity: .68; }
.zd-belt-path__stripe-sample i:nth-child(3) { opacity: .36; }
.zd-belt-path__goal-track { display: flex; flex: 0 0 auto; gap: 4px; }
.zd-belt-path__goal-track i { width: 13px; height: 13px; border: 1px solid var(--zd-hero-border, rgba(17,17,17,.2)); border-radius: 50%; background: var(--color-background, #FAFAF7); }
.zd-belt-path__goal-track i:first-child { border-color: #E7C334; background: #E7C334; box-shadow: 0 0 0 3px color-mix(in srgb, #E7C334 20%, transparent); }
.zd-belt-path__goal-track i:nth-child(2) { border-color: #E8833A; }
.zd-belt-path__goal-track i:nth-child(3) { border-color: #43A047; }
.zd-belt-path__goal-track i:nth-child(4) { border-color: #1E88E5; }
.zd-belt-path__path-mark { flex: 0 0 auto; color: var(--belt-accent); font-size: 21px; line-height: 1; }
.zd-belt-path__past-mark { flex: 0 0 auto; color: var(--belt-accent); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 9px; letter-spacing: .04em; white-space: nowrap; }
.zd-belt-path__closing { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--zd-hero-border, rgba(17,17,17,.14)); border-radius: 13px; color: var(--zd-hero-muted, #333); font-size: 14px; font-weight: 600; line-height: 1.6; }
.zd-belt-path__closing span { flex: 0 0 auto; color: var(--belt-accent); }
.zd-belt-path.is-motion-ready [data-belt-reveal] { opacity: 0; transition: opacity .72s ease, transform .78s cubic-bezier(.2,.8,.2,1); }
.zd-belt-path.is-motion-ready [data-belt-reveal="visual"] { transform: translateX(-26px) scale(.985); }
.zd-belt-path.is-motion-ready [data-belt-reveal="up"] { transform: translateY(22px); }
.zd-belt-path.is-motion-ready [data-belt-reveal="right"] { transform: translateX(32px); }
.zd-belt-path [data-belt-reveal].is-visible { opacity: 1; transform: translate(0,0) scale(1); }
.zd-belt-path__card:nth-child(2) { transition-delay: 80ms; }
.zd-belt-path__card:nth-child(3) { transition-delay: 160ms; }
.zd-belt-path__card:nth-child(4) { transition-delay: 240ms; }
@keyframes zdBeltHalo { to { transform: rotate(360deg); } }
@keyframes zdBeltPulse { 50% { box-shadow: 0 0 0 8px rgba(242,96,92,.06); } }
@keyframes zdBeltLineGrow { to { transform: scaleX(.58); opacity: .55; } }
@media (max-width: 920px) {
    .zd-belt-path { padding-block: 58px; }
    .zd-belt-path__inner { grid-template-columns: minmax(0,1fr); gap: 34px; }
    .zd-belt-path__visual { position: relative; top: auto; width: min(680px,100%); height: clamp(420px,65vw,560px); min-height: 0; margin-inline: auto; }
    .zd-belt-path__visual-copy { max-width: 560px; }
    .zd-belt-path__content { width: min(760px,100%); margin-inline: auto; }
    .zd-belt-path__cards { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
    .zd-belt-path__cards::before { display: none; }
    .zd-belt-path__card { display: flex; flex-direction: column; }
    .zd-belt-path__card-note { margin-top: auto; }
}
@media (min-width: 921px) and (max-height: 740px) {
    .zd-belt-path__visual { height: calc(100svh - var(--nav-height, 76px) - 42px); min-height: 500px; }
}
@media (min-width: 921px) and (max-height: 560px) {
    .zd-belt-path__visual { position: relative; top: auto; height: 520px; min-height: 0; }
}
@media (max-width: 600px) {
    .zd-belt-path { padding: 48px 16px; }
    .zd-belt-path__inner { gap: 28px; }
    .zd-belt-path__visual { width: 100%; height: 480px; padding: 22px 19px; border-radius: 22px; }
    .zd-belt-path__visual-top { align-items: flex-start; flex-direction: column; gap: 9px; font-size: 7px; }
    .zd-belt-path__visual-top b { font-size: 6px; }
    .zd-belt-path__belt-map { width: 100%; padding: 13px 12px; }
    .zd-belt-path__belt-sequence i { width: 28px; flex-basis: 28px; }
    .zd-belt-path__visual-copy { padding-top: 20px; }
    .zd-belt-path__visual-copy h2 { font-size: clamp(36px, 10vw, 48px); }
    .zd-belt-path__visual-copy > p:last-of-type { margin-top: 12px; font-size: 16px; line-height: 1.55; }
    .zd-belt-path__visual-foot { gap: 7px; margin-top: 18px; font-size: 7px; }
    .zd-belt-path__visual-index { right: 13px; bottom: 10px; font-size: 6px; }
    .zd-belt-path__header h3 { font-size: clamp(34px, 9.3vw, 45px); }
    .zd-belt-path__header > p:last-child { font-size: 17px; line-height: 1.65; }
    .zd-belt-path__cards { grid-template-columns: minmax(0,1fr); gap: 12px; }
    .zd-belt-path__card { padding: 21px 19px; border-radius: 17px; }
    .zd-belt-path__card h4 { font-size: 23px; }
    .zd-belt-path__card > p { font-size: 16px; line-height: 1.62; }
    .zd-belt-path__card-note { margin-top: 17px; }
    .zd-belt-path__closing { font-size: 13px; }
}
@media (max-width: 360px) {
    .zd-belt-path { padding-inline: 12px; }
    .zd-belt-path__visual { height: 500px; padding-inline: 16px; }
    .zd-belt-path__belt-sequence i { width: 24px; flex-basis: 24px; }
    .zd-belt-path__visual-copy h2 { font-size: 35px; }
    .zd-belt-path__card-top { grid-template-columns: auto minmax(0,1fr) 36px; gap: 8px; }
    .zd-belt-path__category { font-size: 7px; }
    .zd-belt-path__icon { width: 36px; height: 36px; }
    .zd-belt-path__card-note b { font-size: 11px; }
}
html[dir="rtl"] .zd-belt-path__visual { text-align: right; }
html[dir="rtl"] .zd-belt-path__belt-map { margin-inline-start: auto; }
@media (prefers-reduced-motion: reduce) {
    .zd-belt-path *, .zd-belt-path *::before, .zd-belt-path *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Programs page closing CTA */
.zd-program-super-cta {
    --program-cta-ink: var(--color-text, #111);
    position: relative;
    display: grid;
    min-height: clamp(390px, 46vw, 590px);
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(56px, 8vw, 112px) clamp(20px, 6vw, 80px);
    background: var(--color-background, #FAFAF7);
    color: var(--program-cta-ink);
    text-align: center;
}
.zd-program-super-cta::before,
.zd-program-super-cta::after {
    position: absolute;
    z-index: -1;
    width: clamp(260px, 38vw, 520px);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--color-accent, #E53935) 24%, transparent);
    border-radius: 50%;
    content: "";
    animation: zd-program-cta-orbit 18s linear infinite;
}
.zd-program-super-cta::before { inset-inline-start: -13%; top: -40%; }
.zd-program-super-cta::after { inset-inline-end: -14%; bottom: -48%; animation-direction: reverse; animation-duration: 24s; }
.zd-program-super-cta__content { width: min(920px, 100%); animation: zd-program-cta-enter .8s cubic-bezier(.2,.75,.25,1) both; }
.zd-program-super-cta__eyebrow { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0 0 20px; color: var(--color-accent, #E53935); font-size: 11px; font-weight: 700; letter-spacing: .18em; line-height: 1.5; }
.zd-program-super-cta__eyebrow span { width: 30px; height: 2px; background: currentColor; }
.zd-program-super-cta h2 { max-width: 900px; margin: 0 auto; color: var(--program-cta-ink); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(42px, 7vw, 88px); font-weight: 400; letter-spacing: -.055em; line-height: 1.03; text-wrap: balance; }
.zd-program-super-cta h2 em { color: var(--color-accent, #E53935); font-style: normal; }
.zd-program-super-cta__description { max-width: 680px; margin: 23px auto 0; color: var(--zd-hero-muted, #333); font-size: clamp(18px, 2vw, 23px); line-height: 1.65; text-wrap: pretty; }
.zd-program-super-cta__button { display: inline-flex; min-height: 58px; align-items: center; justify-content: center; gap: 24px; margin-top: 30px; padding: 15px 24px; border-radius: 8px; box-shadow: 0 14px 32px color-mix(in srgb, var(--color-accent, #E53935) 25%, transparent); font-size: 16px; font-weight: 700; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.zd-program-super-cta__button:hover { transform: translateY(-4px); background: var(--color-accent-hover, #C92F2C); box-shadow: 0 18px 40px color-mix(in srgb, var(--color-accent, #E53935) 32%, transparent); }
.zd-program-super-cta__button span { font-size: 21px; transition: transform .25s ease; }
.zd-program-super-cta__button:hover span { transform: translateX(4px); }
.zd-program-super-cta__note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 23px auto 0; color: var(--zd-hero-muted, #333); font-size: 13px; font-weight: 600; line-height: 1.6; }
.zd-program-super-cta__note span { color: var(--color-accent, #E53935); }
.zd-program-super-cta__orbit { position: absolute; z-index: -1; inset: 0; display: grid; place-items: center; pointer-events: none; }
.zd-program-super-cta__orbit span { position: absolute; width: min(72vw, 860px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--color-text, #111) 6%, transparent); border-radius: 50%; animation: zd-program-cta-pulse 5s ease-in-out infinite; }
.zd-program-super-cta__orbit span:nth-child(2) { width: min(56vw, 660px); animation-delay: -1.7s; }
.zd-program-super-cta__orbit span:nth-child(3) { width: min(40vw, 460px); animation-delay: -3.3s; }
@keyframes zd-program-cta-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zd-program-cta-orbit { to { transform: rotate(360deg); } }
@keyframes zd-program-cta-pulse { 0%,100% { transform: scale(.97); opacity: .45; } 50% { transform: scale(1.03); opacity: 1; } }
@media (max-width: 760px) {
    .zd-program-super-cta { min-height: 420px; padding: 68px 22px; }
    .zd-program-super-cta__description { margin-top: 19px; }
    .zd-program-super-cta__note { max-width: 440px; }
    .zd-program-super-cta__orbit span { width: 90vw; }
    .zd-program-super-cta__orbit span:nth-child(2) { width: 72vw; }
    .zd-program-super-cta__orbit span:nth-child(3) { width: 54vw; }
}
@media (max-width: 380px) {
    .zd-program-super-cta { min-height: 0; padding: 58px 17px; }
    .zd-program-super-cta__eyebrow { font-size: 9px; letter-spacing: .13em; }
    .zd-program-super-cta h2 { font-size: clamp(37px, 11vw, 44px); }
    .zd-program-super-cta__description { font-size: 17px; }
    .zd-program-super-cta__button { width: 100%; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .zd-program-super-cta *, .zd-program-super-cta *::before, .zd-program-super-cta *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Contact page typography: match the bento section's clearer scale. */
.zd-contact-info__title,
.zd-message__title,
.zd-location__title,
.zd-contact-cta__title {
    font-size: clamp(38px, 5.1vw, 68px);
    line-height: 1.03;
}
.zd-contact-info__description,
.zd-message__description,
.zd-location__intro,
.zd-contact-cta__description {
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.7;
}
.zd-contact-info__detail strong,
.zd-contact-info__hours-grid strong,
.zd-message__field label,
.zd-message__field input,
.zd-message__field textarea,
.zd-message__response span,
.zd-location__place-info address,
.zd-location__directions,
.zd-contact-cta__value strong,
.zd-contact-cta__value small {
    font-size: clamp(17px, 1.2vw, 19px);
    line-height: 1.65;
}
.zd-contact-info__detail span,
.zd-contact-info__hours-heading,
.zd-contact-info__hours-grid span,
.zd-message__topline,
.zd-message__mini,
.zd-message__response strong,
.zd-message__error,
.zd-message__required,
.zd-message__submit,
.zd-location__heading-top,
.zd-location__mini,
.zd-location__image-label,
.zd-location__place-info p,
.zd-location__map-badge,
.zd-contact-cta__mini,
.zd-contact-cta__eyebrow,
.zd-contact-cta__index,
.zd-contact-cta__button,
.zd-contact-cta__secondary,
.zd-contact-cta__value > span,
.zd-contact-cta__bottom {
    font-size: 11px;
}
.zd-location__place-info h3 { font-size: clamp(23px, 2.3vw, 34px); line-height: 1.12; }
.zd-message__submit { min-height: 54px; padding-inline: 23px; letter-spacing: .08em; }
.zd-contact-cta__button { min-height: 54px; font-size: 16px; letter-spacing: .06em; }
.zd-contact-cta__secondary { font-size: 14px; }
@media (max-width: 767px) {
    .zd-contact-info__title,
    .zd-message__title,
    .zd-location__title,
    .zd-contact-cta__title { font-size: clamp(33px, 8vw, 48px); line-height: 1.05; }
    .zd-contact-info__description,
    .zd-message__description,
    .zd-location__intro,
    .zd-contact-cta__description { font-size: clamp(17px, 4vw, 19px); }
    .zd-contact-info__detail strong,
    .zd-contact-info__hours-grid strong,
    .zd-message__field label,
    .zd-message__field input,
    .zd-message__field textarea,
    .zd-message__response span,
    .zd-location__place-info address,
    .zd-location__directions,
    .zd-contact-cta__value strong,
    .zd-contact-cta__value small { font-size: 17px; }
    .zd-location__place-info h3 { font-size: clamp(23px, 6vw, 30px); }
}
@media (max-width: 374px) {
    .zd-contact-info__title,
    .zd-message__title,
    .zd-location__title,
    .zd-contact-cta__title { font-size: 33px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .zd-message__field label {
        min-height: 2.5em;
    }
}

/* Instructor CTA typography follows the instructor roster section's scale. */
.zd-instructor-cta__eyebrow { font-size: 13px; }
.zd-instructor-cta__mini { font-size: 13px; }
.zd-instructor-cta__title { font-size: clamp(32px, 5.2vw, 78px); line-height: 1.03; }
.zd-instructor-cta__description { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; }
.zd-instructor-cta__button { font-size: 14px; letter-spacing: .04em; }
.zd-instructor-cta__value span { font-size: 13px; }
.zd-instructor-cta__value strong { font-size: 14px; letter-spacing: 0; line-height: 1.4; }
@media (max-width: 767px) {
    .zd-instructor-cta__title { font-size: clamp(32px, 8vw, 48px); }
    .zd-instructor-cta__description { font-size: 16px; }
    .zd-instructor-cta__eyebrow { font-size: 11px; white-space: normal; }
    .zd-instructor-cta__button { font-size: 13px; }
    .zd-instructor-cta__value span { font-size: 12px; }
    .zd-instructor-cta__value strong { font-size: 13px; }
}

/* Site-wide back-to-top control */
.zd-back-to-top {
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    z-index: 999;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(250, 250, 247, .45);
    border-radius: 50%;
    background: var(--color-accent, #E53935);
    color: #FAFAF7;
    box-shadow: 0 8px 24px rgba(17, 17, 17, .28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .2s ease;
}

.zd-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.zd-back-to-top:hover {
    background: var(--color-accent-hover, #C92F2C);
}

.zd-back-to-top:focus-visible {
    outline: 3px solid var(--color-text, #111111);
    outline-offset: 3px;
}

.zd-back-to-top svg {
    display: block;
    width: 23px;
    height: 23px;
}

@media (max-width: 767px) {
    .zd-back-to-top {
        right: max(14px, env(safe-area-inset-right, 0px));
        bottom: max(14px, env(safe-area-inset-bottom, 0px));
        width: 48px;
        height: 48px;
    }
}

/* Instructor overview section typography follows the roster section's scale. */
.zd-instructors-hero__eyebrow,
.zd-instructors-hero__counter,
.zd-instructors-hero__label,
.zd-instructors-hero__link { font-size: 13px; }
.zd-instructors-hero__title { font-size: clamp(32px, 5.2vw, 78px); line-height: 1.03; }
.zd-instructors-hero__description { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; }
.zd-instructors-hero__card-top { font-size: 11px; }
.zd-instructors-hero__card h2 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
.zd-instructors-hero__card p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; }
.zd-instructors-hero__status { font-size: 11px; }
@media (max-width: 767px) {
    .zd-instructors-hero__eyebrow,
    .zd-instructors-hero__counter,
    .zd-instructors-hero__label { font-size: 11px; }
    .zd-instructors-hero__title { font-size: clamp(32px, 8vw, 48px); }
    .zd-instructors-hero__description { font-size: 16px; }
    .zd-instructors-hero__link { font-size: 13px; }
    .zd-instructors-hero__card-top { font-size: 10px; }
    .zd-instructors-hero__card h2 { font-size: 19px; }
    .zd-instructors-hero__card p { font-size: 15px; }
    .zd-instructors-hero__status { font-size: 10px; }
}

/* Keep the overview cards clear of the content at every viewport size. */
.zd-instructors-hero { height: auto; min-height: 75vh; }
.zd-instructors-hero__inner { height: auto; min-height: 75vh; }
.zd-instructors-hero__content { flex: 1 0 auto; }
.zd-instructors-hero__cards {
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
    margin-top: clamp(20px, 3vh, 32px);
}
.zd-instructors-hero__card,
.zd-instructors-hero__card:first-child,
.zd-instructors-hero__card:last-child {
    min-height: 0;
    border: 1px solid rgba(250, 250, 247, .13);
    border-radius: 16px;
}
.zd-instructor-cta { margin-block-start: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) {
    .zd-instructors-hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zd-instructors-hero__card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .zd-instructors-hero__cards { grid-template-columns: minmax(0, 1fr); }
    .zd-instructors-hero__card:last-child { grid-column: auto; }
    .zd-instructors-hero__card { min-height: 0; }
}

/* Monochrome social links beneath the shared footer brand note. */
.zd-footer__socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.zd-footer__socials a {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid var(--zdf-line-strong, rgba(250, 250, 247, .22));
    border-radius: 50%;
    color: var(--zdf-white-soft, rgba(250, 250, 247, .82));
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.zd-footer__socials a:hover {
    transform: translateY(-3px);
    border-color: var(--zdf-white, #FAFAF7);
    background: rgba(250, 250, 247, .09);
    color: var(--zdf-white, #FAFAF7);
}
.zd-footer__socials a:focus-visible { outline: 2px solid var(--zdf-white, #FAFAF7); outline-offset: 3px; }
.zd-footer__socials svg { display: block; width: 19px; height: 19px; }
@media (max-width: 600px) {
    .zd-footer__socials { gap: 9px; margin-top: 14px; }
    .zd-footer__socials a { width: 38px; height: 38px; flex-basis: 38px; }
    .zd-footer__socials svg { width: 18px; height: 18px; }
}

/* Instructor coaching journey timeline */
.zd-coach-timeline {
    --coach-journey-accent: var(--zd-hero-accent-text, #C92F2C);
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 112px) var(--nav-padding-inline, clamp(18px, 4vw, 58px));
    background: var(--color-background, #FAFAF7);
    color: var(--color-text, #111);
    font-family: var(--font-body, "Inter", sans-serif);
}
.zd-coach-timeline *, .zd-coach-timeline *::before, .zd-coach-timeline *::after { box-sizing: border-box; }
.zd-coach-timeline__inner { width: min(1380px, 100%); margin-inline: auto; }
.zd-coach-timeline__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--coach-journey-accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.5; }
.zd-coach-timeline__eyebrow span { width: 28px; height: 2px; background: currentColor; }
.zd-coach-timeline__heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr); align-items: end; gap: clamp(24px, 6vw, 80px); }
.zd-coach-timeline__heading h2 { max-width: 760px; margin: 0; font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(38px, 5.1vw, 68px); font-weight: 400; letter-spacing: -.04em; line-height: 1.03; text-wrap: balance; }
.zd-coach-timeline__heading h2 em { color: var(--coach-journey-accent); font-style: normal; }
.zd-coach-timeline__heading > p { max-width: 48ch; margin: 0 0 4px; color: var(--zd-hero-muted, #333); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; }
.zd-coach-timeline__track { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.zd-coach-timeline__progress { position: absolute; z-index: 0; top: 23px; inset-inline: 6.25%; height: 2px; background: linear-gradient(90deg, var(--coach-journey-accent), color-mix(in srgb, var(--coach-journey-accent) 38%, transparent)); transform: scaleX(0); transform-origin: left center; transition: transform 1.25s cubic-bezier(.2,.8,.2,1); }
.zd-coach-timeline.is-visible .zd-coach-timeline__progress { transform: scaleX(1); }
html[dir="rtl"] .zd-coach-timeline__progress { transform-origin: right center; }
.zd-coach-timeline__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 20px); margin: 0; padding: 0; list-style: none; }
.zd-coach-timeline__step { display: flex; min-width: 0; flex-direction: column; }
.zd-coach-timeline__marker { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; margin: 0 0 18px; border: 1px solid var(--zd-hero-border, rgba(17,17,17,.16)); border-radius: 50%; background: var(--color-background, #FAFAF7); color: var(--coach-journey-accent); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 13px; box-shadow: 0 0 0 8px var(--color-background, #FAFAF7); transition: color .25s ease, background-color .25s ease, transform .35s ease; }
.zd-coach-timeline__step:hover .zd-coach-timeline__marker { transform: scale(1.08); background: var(--coach-journey-accent); color: #fff; }
.zd-coach-timeline__card { display: flex; width: 100%; min-height: 250px; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(19px, 2vw, 27px); border: 1px solid var(--zd-hero-border, rgba(17,17,17,.14)); border-radius: 18px; background: var(--zd-hero-card-bg, #E9E9E4); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.zd-coach-timeline__card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--coach-journey-accent) 48%, transparent); box-shadow: 0 18px 40px rgba(17,17,17,.09); }
.zd-coach-timeline__phase { margin: 0 0 12px; color: var(--coach-journey-accent); font-size: 10px; font-weight: 700; letter-spacing: .11em; line-height: 1.5; }
.zd-coach-timeline__card h3 { margin: 0; color: var(--color-text, #111); font-family: var(--font-display, "Archivo Black", sans-serif); font-size: clamp(20px, 1.7vw, 25px); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.zd-coach-timeline__card > p:not(.zd-coach-timeline__phase) { margin: 12px 0 20px; color: var(--zd-hero-muted, #333); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.65; }
.zd-coach-timeline__proof { display: flex; align-items: center; gap: 8px; margin-top: auto; color: var(--color-text, #111); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.5; }
.zd-coach-timeline__proof i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--coach-journey-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coach-journey-accent) 14%, transparent); }
.zd-coach-timeline__closing { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin: clamp(24px, 3vw, 38px) 0 0; padding: 17px 20px; border: 1px solid var(--zd-hero-border, rgba(17,17,17,.14)); border-inline-start: 3px solid var(--coach-journey-accent); color: var(--zd-hero-muted, #333); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; text-align: center; }
.zd-coach-timeline__closing strong { color: var(--color-text, #111); }
.zd-coach-timeline.is-motion-ready [data-coach-timeline-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
.zd-coach-timeline [data-coach-timeline-reveal].is-visible { opacity: 1; transform: translateY(0); }
.zd-coach-timeline__step:nth-child(2) { transition-delay: 90ms; }
.zd-coach-timeline__step:nth-child(3) { transition-delay: 180ms; }
.zd-coach-timeline__step:nth-child(4) { transition-delay: 270ms; }
@media (max-width: 900px) {
    .zd-coach-timeline__heading { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .zd-coach-timeline__heading > p { max-width: 65ch; }
    .zd-coach-timeline__progress { display: none; }
    .zd-coach-timeline__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .zd-coach-timeline__card { min-height: 230px; }
}
@media (max-width: 600px) {
    .zd-coach-timeline { padding: 54px 16px; }
    .zd-coach-timeline__heading h2 { font-size: clamp(34px, 9vw, 48px); }
    .zd-coach-timeline__heading > p { font-size: 17px; }
    .zd-coach-timeline__track { margin-top: 30px; }
    .zd-coach-timeline__steps { grid-template-columns: minmax(0, 1fr); gap: 15px; padding-inline-start: 4px; }
    .zd-coach-timeline__step { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; }
    .zd-coach-timeline__marker { width: 40px; height: 40px; margin: 10px 0 0; font-size: 11px; box-shadow: 0 0 0 5px var(--color-background, #FAFAF7); }
    .zd-coach-timeline__card { min-height: 0; padding: 19px 17px; }
    .zd-coach-timeline__card h3 { font-size: 21px; }
    .zd-coach-timeline__card > p:not(.zd-coach-timeline__phase) { font-size: 16px; }
    .zd-coach-timeline__phase, .zd-coach-timeline__proof { font-size: 9px; }
    .zd-coach-timeline__closing { justify-content: flex-start; padding: 15px; text-align: start; }
}
@media (prefers-reduced-motion: reduce) {
    .zd-coach-timeline *, .zd-coach-timeline *::before, .zd-coach-timeline *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */
.ad{--ad-bg:#F2F1ED;--ad-surface:#FFFFFF;--ad-ink:var(--color-text,#111);--ad-mute:rgba(17,17,17,.68);--ad-line:rgba(17,17,17,.11);--ad-soft:rgba(17,17,17,.045);--ad-red:var(--color-accent,#E53935);--ad-red-text:#C62828;--sbw:272px;--bar:68px;display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--ad-bg);color:var(--ad-ink);font-family:var(--font-body)}
.ad *,.ad *::before,.ad *::after{box-sizing:border-box}
.ad h1,.ad h2,.ad p{margin:0}
.ad-skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:2000;padding:10px 16px;border-radius:8px;background:var(--ad-red);color:#fff;font:500 14px var(--font-body)}
.ad-skip:focus{top:12px}
.ad-i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ad-col{min-width:0;display:flex;flex-direction:column}
/* sidebar */
.ad-side{display:none}
.ad-brand{display:inline-flex;align-items:center;gap:12px;color:var(--ad-ink);text-decoration:none}
.ad-profile{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--ad-line);border-radius:18px;background:var(--ad-soft)}
.ad-avatar{width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;border:3px solid var(--ad-surface);box-shadow:0 0 0 2px var(--ad-red)}
.ad-avatar svg{display:block;width:100%;height:100%}
.ad-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.ad-profile__txt{display:grid;gap:2px;min-width:0}
.ad-profile__txt strong{font:500 16px/1.25 var(--font-body)}
.ad-profile__txt span{font:400 13px/1.3 var(--font-body);color:var(--ad-mute)}
.ad-profile__txt em{display:inline-flex;align-items:center;gap:4px;font:500 12px/1.3 var(--font-body);font-style:normal;color:var(--ad-red-text)}
.ad-profile__txt em .ad-i{width:14px;height:14px}
.ad-nav{display:grid;align-content:start;gap:4px}
.ad-nav__label{margin:14px 12px 6px;font:500 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ad-mute)}
.ad-nav__label:first-child{margin-top:4px}
.ad-link{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:12px;color:var(--ad-ink);font:500 14.5px/1.2 var(--font-body);text-decoration:none;transition:background-color .2s,color .2s}
.ad-link:hover{background:var(--ad-soft)}
.ad-link.is-active{background:color-mix(in srgb,var(--ad-red) 12%,transparent)}
.ad-link.is-active::before{content:"";position:absolute;inset-inline-start:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--ad-red)}
.ad-link.is-active .ad-i{color:var(--ad-red-text)}
.ad-link span{flex:1;min-width:0}
.ad-badge{min-width:22px;padding:4px 7px;border-radius:999px;background:#C62828;color:#fff;font:500 11px/1 var(--font-body);font-style:normal;text-align:center}
.ad-side__foot{margin-top:auto;padding-top:12px;font:400 12px/1.4 var(--font-body);color:var(--ad-mute)}
/* navbar */
.ad-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--bar);padding:10px 16px;background:var(--ad-surface);border-bottom:1px solid var(--ad-line)}
.ad-bar__title{min-width:0}
.ad-bar__title h1{display:none;font:400 clamp(20px,2.4vw,28px)/1.15 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.ad-bar__title p{margin-top:3px;font:400 13px/1.2 var(--font-body);color:var(--ad-mute)}
.ad-actions{display:flex;align-items:center;gap:8px;flex:none}
.ad-logout{display:none;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:9px;background-color:#D43330;background-image:linear-gradient(135deg,#E53935,#C92F2C);color:#fff;font:500 14px/1 var(--font-body);text-decoration:none;transition:transform .2s,box-shadow .2s}
.ad-logout:hover{background-image:none;background-color:#C62828;transform:translateY(-1px)}
.ad-logout .ad-i{width:18px;height:18px}
.ad-bar .menu-toggle{display:inline-flex;border:1px solid var(--nav-border,var(--ad-line))}
/* drawer */
.ad-drawer{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:var(--ad-surface);color:var(--ad-ink);transform:translateX(100%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s;overscroll-behavior:contain}
.ad-drawer.is-open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.ad-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--ad-line)}
.ad-close{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--ad-line);border-radius:10px;background:transparent;color:var(--ad-ink);cursor:pointer}
.ad-drawer__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:14px;padding:18px;-webkit-overflow-scrolling:touch}
.ad-drawer__foot{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ad-line)}
.ad-logout--block{display:flex;justify-content:center;width:100%;height:50px;font-size:16px}
html.ad-lock,html.ad-lock body{overflow:hidden;overscroll-behavior:none}
.ad-drawer.is-open .ad-link{animation:adSlide .5s cubic-bezier(.2,.8,.2,1) both}
.ad-drawer.is-open .ad-link:nth-child(2){animation-delay:.04s}.ad-drawer.is-open .ad-link:nth-child(3){animation-delay:.08s}.ad-drawer.is-open .ad-link:nth-child(4){animation-delay:.12s}.ad-drawer.is-open .ad-link:nth-child(5){animation-delay:.16s}.ad-drawer.is-open .ad-link:nth-child(n+6){animation-delay:.2s}
/* content */
.ad-main{flex:1;min-width:0;padding:clamp(16px,2.4vw,32px);outline:0}
.ad-sec{display:grid;gap:clamp(14px,1.6vw,22px)}
.ad-sec[hidden]{display:none}
.ad-lede{max-width:680px;color:var(--ad-mute);font:400 15px/1.6 var(--font-body)}
.ad-grid{display:grid;gap:clamp(12px,1.4vw,20px)}
.ad-g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.ad-g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.ad-g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.ad-wide{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.ad-card{min-width:0;padding:clamp(16px,1.8vw,24px);border:1px solid var(--ad-line);border-radius:20px;background:var(--ad-surface)}
.ad-card__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.ad-card__h h2{font:500 17px/1.3 var(--font-body)}
.ad-card__h p{margin-top:3px;font:400 13px/1.4 var(--font-body);color:var(--ad-mute)}
.ad-stat{display:grid;gap:8px}
.ad-stat span{font:500 13px/1.3 var(--font-body);color:var(--ad-mute)}
.ad-stat strong{font:400 clamp(26px,2.6vw,36px)/1.1 var(--font-display)}
.ad-stat em{font:500 12.5px/1.3 var(--font-body);font-style:normal;color:var(--ad-ink)}
.ad-stat em b{color:#1f7a3a;font-weight:600}
.ad-spark{width:100%;height:36px;overflow:visible}
.ad-spark path{fill:none;stroke:var(--ad-red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.is-in .ad-spark path,.is-in .ad-line path.ad-line__s{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease .3s}
/* charts */
.ad-bars{display:flex;align-items:stretch;gap:clamp(4px,.8vw,10px);height:200px}
.ad-bars>span{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.ad-bars i{display:block;width:100%;height:var(--h);min-height:6px;border-radius:8px 8px 3px 3px;background:var(--ad-red);opacity:.88;transform:scaleY(0);transform-origin:bottom}
.ad-bars>span:last-child i{opacity:1}
.is-in .ad-bars i{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i)*55ms)}
.ad-bars small{font:400 11.5px/1 var(--font-body);color:var(--ad-mute)}
.ad-line{position:relative}
.ad-line svg{display:block;width:100%;height:170px;overflow:visible}
.ad-line .ad-line__a{fill:color-mix(in srgb,var(--ad-red) 14%,transparent);stroke:none;opacity:0}
.is-in .ad-line .ad-line__a{opacity:1;transition:opacity 1s ease .8s}
.ad-line path.ad-line__s{fill:none;stroke:var(--ad-red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.ad-axis{display:flex;justify-content:space-between;margin-top:8px;font:400 11.5px/1 var(--font-body);color:var(--ad-mute)}
.ad-donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ad-donut__c{position:relative;width:132px;height:132px;flex:none}
.ad-donut__c svg{width:100%;height:100%;transform:rotate(-90deg)}
.ad-donut__c circle{fill:none;stroke-width:4.2;stroke-linecap:butt}
.ad-donut__c .bg{stroke:var(--ad-soft)}
.ad-donut__c .sg{stroke:var(--c);stroke-dasharray:0 100;transition:stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.15s)}
.is-in .ad-donut__c .sg{stroke-dasharray:var(--d) 100}
.ad-donut__c b{position:absolute;inset:0;display:grid;place-items:center;font:400 24px/1 var(--font-display)}
.ad-legend{display:grid;gap:8px;margin:0;padding:0;list-style:none;font:400 13.5px/1.3 var(--font-body)}
.ad-legend li{display:flex;align-items:center;gap:8px}
.ad-legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
/* lists, chips, bits */
.ad-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ad-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--ad-line);border-radius:14px;background:var(--ad-soft)}
.ad-row__t{flex:1;min-width:0;display:grid;gap:2px}
.ad-row__t strong{font:500 14.5px/1.3 var(--font-body)}
.ad-row__t span{font:400 13px/1.4 var(--font-body);color:var(--ad-mute)}
.ad-time{flex:none;min-width:64px;padding:8px 10px;border-radius:10px;background:var(--ad-ink);color:var(--ad-surface);font:500 12.5px/1.2 var(--font-body);text-align:center}
.ad-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--t) 16%,transparent);color:var(--ad-ink);font:500 12px/1 var(--font-body);white-space:nowrap}
.ad-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t)}
.ad-belt{width:12px;height:12px;flex:none;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--ad-line),inset 0 0 0 1px rgba(0,0,0,.12)}
.ad-beltlab{display:inline-flex;align-items:center;gap:8px}
.ad-ava{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:color-mix(in srgb,hsl(var(--h) 70% 52%) 28%,var(--ad-surface));color:var(--ad-ink);font:500 13px/1 var(--font-body)}
.ad-who{display:flex;align-items:center;gap:10px;min-width:0}
.ad-who strong{font:500 14px/1.3 var(--font-body)}
.ad-who small{display:block;font:400 12px/1.3 var(--font-body);color:var(--ad-mute)}
.ad-meter{display:flex;align-items:center;gap:10px;min-width:110px}
.ad-meter b{flex:1;height:7px;border-radius:7px;background:var(--ad-soft);overflow:hidden;box-shadow:inset 0 0 0 1px var(--ad-line)}
.ad-meter i{display:block;height:100%;width:0;border-radius:7px;background:var(--ad-red)}
.is-in .ad-meter i{width:var(--v);transition:width 1.1s cubic-bezier(.2,.8,.2,1) .3s}
.ad-meter span{min-width:38px;font:500 12.5px/1 var(--font-body);text-align:end}
.ad-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border:1px solid var(--ad-line);border-radius:10px;background:transparent;color:var(--ad-ink);font:500 13.5px/1 var(--font-body);cursor:pointer;text-decoration:none;transition:border-color .2s,background-color .2s,transform .2s}
.ad-btn:hover{border-color:var(--ad-red);transform:translateY(-1px)}
.ad-btn--p{background-color:#D43330;background-image:linear-gradient(135deg,#E53935,#C92F2C);border-color:transparent;color:#fff}
.ad-btn--p:hover{background-image:none;background-color:#C62828}
.ad-btn.is-done{background:color-mix(in srgb,#3fa45b 16%,transparent);border-color:transparent;cursor:default;transform:none}
/* tables */
.ad-tw{overflow-x:auto}
.ad-table{width:100%;border-collapse:collapse}
.ad-table th{padding:10px 14px;border-bottom:1px solid var(--ad-line);font:500 11.5px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ad-mute);text-align:start;white-space:nowrap}
.ad-table td{padding:13px 14px;border-bottom:1px solid var(--ad-line);font:400 14px/1.4 var(--font-body);vertical-align:middle}
.ad-table tbody tr{transition:background-color .2s}
.ad-table tbody tr:hover{background:var(--ad-soft)}
.ad-table tr:last-child td{border-bottom:0}
.ad-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ad-field{display:grid;gap:6px}
.ad-field label{font:500 13px/1.2 var(--font-body)}
.ad-in{width:100%;min-height:44px;padding:0 14px;border:1px solid var(--ad-line);border-radius:10px;background:var(--ad-surface);color:var(--ad-ink);font:400 14.5px/1.2 var(--font-body)}
.ad-in::placeholder{color:var(--ad-mute)}
.ad-in:focus{outline:2px solid var(--ad-red);outline-offset:1px}
.ad-pills{display:flex;flex-wrap:wrap;gap:8px}
.ad-pill{padding:9px 14px;border:1px solid var(--ad-line);border-radius:999px;background:transparent;color:var(--ad-ink);font:500 13px/1 var(--font-body);cursor:pointer}
.ad-pill.is-on{background:var(--ad-ink);color:var(--ad-surface);border-color:var(--ad-ink)}
/* schedule + heat */
.ad-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:12px}
.ad-day{display:grid;align-content:start;gap:10px;padding:14px;border:1px solid var(--ad-line);border-radius:16px;background:var(--ad-surface)}
.ad-day h2{font:500 12px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ad-mute)}
.ad-day.is-today{border-color:var(--ad-red);box-shadow:0 0 0 1px var(--ad-red)}
.ad-class{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--c) 18%,transparent);border-inline-start:4px solid var(--c)}
.ad-class b{font:500 13.5px/1.3 var(--font-body)}
.ad-class span{font:400 12.5px/1.35 var(--font-body);color:var(--ad-mute)}
.ad-heat{display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));gap:6px;align-items:center;font:400 12px/1 var(--font-body);color:var(--ad-mute)}
.ad-heat i{display:block;aspect-ratio:1.5;border-radius:6px;background:color-mix(in srgb,var(--ad-red) calc(var(--v)*1%),var(--ad-soft));transform:scale(0)}
.is-in .ad-heat i{transform:none;transition:transform .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i)*25ms)}
.ad-roll{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ad-roll label{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--ad-line);border-radius:12px;cursor:pointer;transition:background-color .2s}
.ad-roll input{width:20px;height:20px;accent-color:var(--ad-red)}
.ad-roll input:checked+.ad-who{opacity:1}
.ad-roll label:has(input:checked){background:color-mix(in srgb,#3fa45b 10%,transparent)}
.ad-roll em{margin-inline-start:auto;font:500 12px/1 var(--font-body);font-style:normal;color:var(--ad-mute)}
/* belts kanban */
.ad-kan{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.ad-col2{display:grid;align-content:start;gap:10px;padding:14px;border:1px solid var(--ad-line);border-radius:18px;background:var(--ad-soft)}
.ad-col2>h2{display:flex;justify-content:space-between;align-items:center;font:500 14px/1.2 var(--font-body)}
.ad-col2>h2 em{min-width:24px;padding:4px 8px;border-radius:999px;background:var(--ad-ink);color:var(--ad-surface);font:500 12px/1 var(--font-body);font-style:normal;text-align:center}
.ad-kc{display:grid;gap:10px;padding:14px;border:1px solid var(--ad-line);border-radius:14px;background:var(--ad-surface)}
.ad-kc .ad-who{justify-content:space-between}
.ad-up{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:500 13px/1.3 var(--font-body)}
/* coaches, parents */
.ad-person{display:grid;gap:14px}
.ad-person header{display:flex;align-items:center;gap:12px}
.ad-person .ad-ava{width:48px;height:48px;font-size:15px}
.ad-person h2{font:500 16px/1.3 var(--font-body)}
.ad-person p{font:400 13px/1.45 var(--font-body);color:var(--ad-mute)}
.ad-kv{display:grid;gap:8px;margin:0;font:400 13.5px/1.4 var(--font-body)}
.ad-kv div{display:flex;justify-content:space-between;gap:12px}
.ad-kv dt{color:var(--ad-mute)}.ad-kv dd{margin:0;font-weight:500;text-align:end}
/* messages */
.ad-inbox{display:grid;grid-template-columns:minmax(230px,320px) minmax(0,1fr);gap:0;padding:0;overflow:hidden}
.ad-threads{display:grid;align-content:start;margin:0;padding:0;list-style:none;border-inline-end:1px solid var(--ad-line)}
.ad-thread{display:flex;gap:12px;width:100%;padding:14px;border:0;border-bottom:1px solid var(--ad-line);background:transparent;color:var(--ad-ink);text-align:start;cursor:pointer}
.ad-thread.is-on{background:color-mix(in srgb,var(--ad-red) 10%,transparent)}
.ad-thread .ad-row__t span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ad-convo{display:flex;flex-direction:column;min-height:380px}
.ad-convo__h{padding:14px 18px;border-bottom:1px solid var(--ad-line);font:500 15px/1.3 var(--font-body)}
.ad-msgs{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px;overflow-y:auto;max-height:340px}
.ad-msg{max-width:min(78%,420px);padding:11px 14px;border-radius:16px;background:var(--ad-soft);font:400 14px/1.5 var(--font-body)}
.ad-msg small{display:block;margin-top:4px;font-size:11.5px;color:var(--ad-mute)}
.ad-msg.me{align-self:flex-end;background:color-mix(in srgb,var(--ad-red) 15%,transparent)}
.ad-compose{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--ad-line)}
/* settings */
.ad-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.ad-switch{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ad-line);cursor:pointer;font:400 14.5px/1.4 var(--font-body)}
.ad-switch:last-child{border-bottom:0}
.ad-switch span{flex:1}
.ad-switch input{position:absolute;opacity:0;pointer-events:none}
.ad-switch i{position:relative;width:44px;height:26px;flex:none;border-radius:26px;background:var(--ad-line);transition:background-color .25s}
.ad-switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:inset-inline-start .25s}
.ad-switch input:checked+i{background:#3fa45b}
.ad-switch input:checked+i::after{inset-inline-start:21px}
.ad-switch input:focus-visible+i{outline:2px solid var(--ad-red);outline-offset:2px}
.ad-toast{position:fixed;inset-inline:16px;bottom:20px;z-index:3000;width:max-content;max-width:calc(100% - 32px);margin-inline:auto;padding:12px 18px;border-radius:12px;background:var(--ad-ink);color:var(--ad-surface);font:500 14px/1.4 var(--font-body);box-shadow:0 18px 40px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s}
.ad-toast.is-show{opacity:1;transform:none}
/* entrance animation */
.ad-sec.is-in .ad-card,.ad-sec.is-in .ad-day,.ad-sec.is-in .ad-col2,.ad-sec.is-in .ad-lede{animation:adUp .6s cubic-bezier(.2,.8,.2,1) both}
.ad-sec.is-in .ad-card:nth-child(2),.ad-sec.is-in .ad-day:nth-child(2),.ad-sec.is-in .ad-col2:nth-child(2){animation-delay:.07s}
.ad-sec.is-in .ad-card:nth-child(3),.ad-sec.is-in .ad-day:nth-child(3),.ad-sec.is-in .ad-col2:nth-child(3){animation-delay:.14s}
.ad-sec.is-in .ad-card:nth-child(4),.ad-sec.is-in .ad-day:nth-child(4){animation-delay:.21s}
.ad-sec.is-in .ad-card:nth-child(n+5),.ad-sec.is-in .ad-day:nth-child(n+5){animation-delay:.28s}
@keyframes adUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes adSlide{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
/* laptop and up: sticky sidebar */
@media (min-width:1024px){
 .ad{grid-template-columns:var(--sbw) minmax(0,1fr)}
 .ad-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:0;align-self:start;height:100vh;height:100dvh;padding:22px 16px 16px;background:var(--ad-surface);border-inline-end:1px solid var(--ad-line);overflow:hidden}
 .ad-brand{padding-inline:6px}
 .ad-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-inline-end:2px;scrollbar-width:thin}
 .ad-bar{padding-inline:clamp(20px,2.4vw,32px)}
 .ad-logout{display:inline-flex}
 .ad-bar .menu-toggle{display:none}
 .ad-drawer{display:none}
}
@media (min-width:1440px){.ad{--sbw:296px}.ad-main{padding:36px 40px}}
@media (max-width:1100px){.ad-wide{grid-template-columns:minmax(0,1fr)}}
/* tablet and mobile */
@media (max-width:1023px){
 .ad-bar{padding-inline:16px}
}
@media (max-width:767px){
 .ad-inbox{grid-template-columns:minmax(0,1fr)}
 .ad-threads{border-inline-end:0;border-bottom:1px solid var(--ad-line)}
 .ad-table thead{display:none}
 .ad-table,.ad-table tbody,.ad-table tr,.ad-table td{display:block;width:100%}
 .ad-table tr{margin-bottom:10px;padding:10px 14px;border:1px solid var(--ad-line);border-radius:14px;background:var(--ad-surface)}
 .ad-table td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;border:0;text-align:end}
 .ad-table td::before{content:attr(data-label);flex:none;font:500 11.5px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ad-mute);text-align:start}
 .ad-table td:first-child{padding-top:2px}
 .ad-table tbody tr:hover{background:var(--ad-surface)}
 .ad-bars{height:160px}
 .ad-bars small{font-size:11px}
 .ad-card{border-radius:16px}
 .ad-msg{max-width:88%}
}
@media (max-width:424px){
 .ad-bar{padding-inline:12px;gap:8px}
 .ad-actions{gap:6px}
 .ad-bar__title p{display:none}
 .ad-drawer__body{padding:14px}
 .ad-compose{flex-direction:column}
 .ad-donut{justify-content:center}
}
@media (max-width:374px){
 .ad-main{padding:12px}
 .ad-bars{gap:3px}
 .ad-bars small{font-size:11px}
 .ad-card{padding:14px}
}
@media (prefers-reduced-motion:reduce){
 .ad *,.ad *::before,.ad *::after{animation:none!important;transition:none!important}
}


/* =========================================================
   PROGRAMS PAGE — THE HANGING SCROLLS
   Scoped to .zd-scrolls
   ========================================================= */

.zd-scrolls {
    --sc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --sc-d: calc(0.35s + var(--i, 0) * 0.2s);

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

    padding: clamp(38px, 5vw, 72px) var(--nav-padding-inline, clamp(16px, 4vw, 58px));

    background:
        radial-gradient(ellipse at 8% 3%, color-mix(in srgb, var(--color-accent, #E53935) 10%, transparent), transparent 36%),
        var(--color-background, #FAFAF7);
    color: var(--color-text, #111111);
    font-family: var(--font-body, "Inter", sans-serif);
}

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

.zd-scrolls__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(52px, 7vw, 100px);
    width: min(1320px, 100%);
    margin-inline: auto;
}


/* ---------- Background ---------- */

.zd-scrolls__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.zd-scrolls__orb {
    position: absolute;
    aspect-ratio: 1;
    border: 1px dashed var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    border-radius: 50%;
    animation: zdScrollsSpin 90s linear infinite;
}

.zd-scrolls__orb--a { top: -12%; inset-inline-end: -14%; width: min(70vw, 760px); }
.zd-scrolls__orb--b { bottom: 4%; inset-inline-start: -16%; width: min(54vw, 560px); animation-direction: reverse; animation-duration: 120s; }


/* ---------- Shared type ---------- */

.zd-scrolls__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--zd-hero-accent-text, #C92F2C);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.5;
}

.zd-scrolls__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent, #E53935);
}

.zd-scrolls__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    color: var(--zd-hero-muted, #333333);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.5;
}

.zd-scrolls__meta > span:first-child,
.zd-scrolls__meta--accent > span { color: var(--zd-hero-accent-text, #C92F2C); }
.zd-scrolls__meta i { width: 24px; height: 1px; background: var(--color-accent, #E53935); opacity: 0.72; }

.zd-scrolls__sub-head { max-width: 62ch; margin-bottom: clamp(22px, 3vw, 38px); }

.zd-scrolls__sub-title {
    margin: 0;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.zd-scrolls__sub-text {
    margin: 14px 0 0;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.7;
}


/* ---------- Header ---------- */

.zd-scrolls__header {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.72fr);
    align-items: end;
    gap: clamp(28px, 7vw, 100px);
}

.zd-scrolls__header h2 {
    max-width: 14ch;
    margin: 0;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(40px, 5.5vw, 74px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.zd-scrolls__header h2 span { position: relative; display: inline-block; color: var(--zd-hero-accent-text, #C92F2C); }

.zd-scrolls__header h2 span::after {
    position: absolute;
    right: 0;
    bottom: -0.08em;
    left: 0;
    height: 0.11em;
    background: var(--color-accent, #E53935);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
}

.zd-scrolls__header.is-visible h2 span::after { animation: zdScrollsUnderline 0.8s 0.25s var(--sc-ease) forwards; }

.zd-scrolls:not(.is-motion-ready) .zd-scrolls__header h2 span::after { transform: scaleX(1); }

.zd-scrolls__intro {
    max-width: 46ch;
    margin: 0 0 18px;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.75;
}

.zd-scrolls__note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    border-radius: 999px;
    color: var(--color-text, #111111);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.5;
}

.zd-scrolls__pulse {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent, #E53935);
    animation: zdScrollsPulse 1.8s infinite;
}


/* ---------- Age finder ---------- */

.zd-scrolls__finder {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(20px, 4vw, 56px);
    padding: clamp(20px, 2.6vw, 34px);

    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    border-radius: clamp(18px, 2vw, 26px);
    background: var(--zd-hero-card-bg, #E9E9E4);
    box-shadow: var(--zd-sc-shadow, 0 18px 46px rgba(17, 17, 17, 0.07));
}

.zd-scrolls__finder-title {
    margin: 12px 0 18px;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.zd-scrolls__range { display: flex; align-items: center; gap: 14px; }

.zd-scrolls__range-end {
    flex: none;
    min-width: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}

.zd-scrolls__range-box { position: relative; flex: 1 1 auto; height: 48px; min-width: 0; --p: 0.3; }

.zd-scrolls__range-track {
    position: absolute;
    top: 50%;
    inset-inline: 14px;
    height: 6px;
    border-radius: 999px;
    background: var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    translate: 0 -50%;
}

.zd-scrolls__range-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--p) * 100%);
    border-radius: 999px;
    background: var(--color-accent, #E53935);
    transition: width 0.25s var(--sc-ease);
}

.zd-scrolls__range-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: pan-y;
}

.zd-scrolls__range-input:focus-visible { outline: 3px solid var(--color-accent, #E53935); outline-offset: 2px; border-radius: 999px; }

.zd-scrolls__range-input::-webkit-slider-runnable-track { height: 48px; background: transparent; }
.zd-scrolls__range-input::-moz-range-track { height: 48px; background: transparent; }

.zd-scrolls__range-input::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    margin-top: 10px;
    border: 4px solid var(--zd-hero-card-bg, #E9E9E4);
    border-radius: 50%;
    background: var(--color-accent, #E53935);
    box-shadow: 0 0 0 2px var(--color-accent, #E53935), 0 6px 14px rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.2s var(--sc-ease);
}

.zd-scrolls__range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 4px solid var(--zd-hero-card-bg, #E9E9E4);
    border-radius: 50%;
    background: var(--color-accent, #E53935);
    box-shadow: 0 0 0 2px var(--color-accent, #E53935), 0 6px 14px rgba(0, 0, 0, 0.25);
}

.zd-scrolls__range-input:active::-webkit-slider-thumb { transform: scale(1.18); }

.zd-scrolls__result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 16px;
    border: 1px dashed var(--zd-hero-ghost-border, rgba(17, 17, 17, 0.32));
    border-radius: 18px;
    background: var(--zd-hero-chip-bg, #FAFAF7);
}

.zd-scrolls__result-age {
    flex: none;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--zd-hero-btn-bg, #C92F2C);
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1;
}

.zd-scrolls__result-body { display: flex; flex: 1 1 160px; min-width: 0; flex-direction: column; gap: 3px; }

.zd-scrolls__result-body strong {
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.zd-scrolls__result-body span { color: var(--zd-hero-muted, #333333); font-size: 15px; line-height: 1.5; }

.zd-scrolls__result.is-swap .zd-scrolls__result-body { animation: zdScrollsSwap 0.5s var(--sc-ease); }

.zd-scrolls__jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid var(--zd-hero-ghost-border, rgba(17, 17, 17, 0.32));
    border-radius: 999px;
    background: transparent;
    color: var(--color-text, #111111);
    font: 600 14px/1.2 var(--font-body, "Inter", sans-serif);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.zd-scrolls__jump:hover { border-color: var(--color-accent, #E53935); transform: translateY(-2px); }
.zd-scrolls__jump:focus-visible,
.zd-scrolls__toggle:focus-visible,
.zd-scrolls__age-cell:focus-visible,
.zd-scrolls__nav-btn:focus-visible,
.zd-scrolls__btn:focus-visible,
.zd-scrolls__link:focus-visible { outline: 3px solid var(--color-accent, #E53935); outline-offset: 3px; }

.zd-scrolls__arrow { flex: none; width: 18px; height: 18px; }


/* ---------- Stage : beam + scrolls ---------- */

.zd-scrolls__stage { position: relative; display: flex; flex-direction: column; padding-top: 34px; }

.zd-scrolls__beam {
    position: absolute;
    z-index: 3;
    top: 0;
    inset-inline: 0;
    display: grid;
    place-items: center;
    height: 16px;
    border-radius: 8px;
    background: var(--zd-sc-rod, #111111);
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.18);
}

.zd-scrolls__beam::before,
.zd-scrolls__beam::after {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 18px;
    border-radius: 8px;
    background: var(--color-accent, #E53935);
    content: "";
}

.zd-scrolls__beam::before { inset-inline-start: -4px; }
.zd-scrolls__beam::after { inset-inline-end: -4px; }

.zd-scrolls__beam-sun {
    width: 34px;
    height: 17px;
    margin-top: -9px;
    border-radius: 34px 34px 0 0;
    background: var(--color-accent, #E53935);
    box-shadow: 0 0 22px var(--zd-sc-glow, rgba(229, 57, 53, 0.35));
}

.zd-scrolls__nav { display: none; order: 3; align-self: center; gap: 10px; margin-top: 14px; }

.zd-scrolls__nav-btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid var(--zd-hero-ghost-border, rgba(17, 17, 17, 0.32));
    border-radius: 50%;
    background: var(--zd-hero-chip-bg, #FAFAF7);
    color: var(--color-text, #111111);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.zd-scrolls__nav-btn:hover { border-color: var(--color-accent, #E53935); transform: translateY(-2px); }
.zd-scrolls__nav-btn[data-nav="prev"] svg { transform: scaleX(-1); }

.zd-scrolls__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(14px, 2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zd-scrolls__item { position: relative; min-width: 0; }

.zd-scrolls__item.is-nudge { animation: zdScrollsNudge 0.75s var(--sc-ease); }


/* ---------- One scroll ---------- */

.zd-scrolls__scroll {
    position: relative;
    display: flex;
    flex-direction: column;
    transform-origin: 50% -26px;
    transform: perspective(900px) rotateX(var(--zd-sc-rx, 0deg)) rotateY(var(--zd-sc-ry, 0deg));
    transition: transform 0.3s var(--sc-ease), translate 0.4s var(--sc-ease);
    animation: zdScrollsSway 7s ease-in-out infinite alternate;
    animation-delay: calc(var(--i, 0) * -2.3s);
}

.zd-scrolls__item:hover .zd-scrolls__scroll,
.zd-scrolls__item:focus-within .zd-scrolls__scroll,
.zd-scrolls__item.is-open .zd-scrolls__scroll { animation-play-state: paused; }

.zd-scrolls__item:hover .zd-scrolls__scroll { translate: 0 -6px; }

.zd-scrolls.is-offscreen .zd-scrolls__scroll { animation-play-state: paused; }

.zd-scrolls__rope {
    position: absolute;
    top: -18px;
    width: 2px;
    height: 18px;
    background: var(--zd-sc-rod, #111111);
    opacity: 0.75;
    transform-origin: top;
}

.zd-scrolls__rope--a { inset-inline-start: 22%; }
.zd-scrolls__rope--b { inset-inline-end: 22%; }

.zd-scrolls__rod {
    position: relative;
    z-index: 2;
    height: 14px;
    margin-inline: -7px;
    border-radius: 7px;
    background: var(--zd-sc-rod, #111111);
}

.zd-scrolls__rod::before,
.zd-scrolls__rod::after {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 12px;
    border-radius: 7px;
    background: var(--color-accent, #E53935);
    content: "";
}

.zd-scrolls__rod::before { inset-inline-start: -3px; }
.zd-scrolls__rod::after { inset-inline-end: -3px; }

.zd-scrolls__paper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-block: -1px;
    padding: clamp(18px, 2vw, 26px);
    padding-top: clamp(26px, 2.6vw, 34px);

    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    border-block: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--color-text, #111111) 2.2%, transparent) 3px 4px),
        var(--zd-sc-paper, #F4F2EB);
    box-shadow: var(--zd-sc-shadow, 0 22px 46px rgba(17, 17, 17, 0.14));
    transition: box-shadow 0.4s ease;
}

.zd-scrolls__item.is-match .zd-scrolls__paper,
.zd-scrolls__item.is-echo .zd-scrolls__paper {
    box-shadow:
        0 0 0 2px var(--color-accent, #E53935),
        0 0 44px var(--zd-sc-glow, rgba(229, 57, 53, 0.35)),
        var(--zd-sc-shadow, 0 22px 46px rgba(17, 17, 17, 0.14));
}

.zd-scrolls__belts {
    position: absolute;
    top: 0;
    inset-inline: 0;
    display: flex;
    height: 10px;
    overflow: hidden;
}

.zd-scrolls__belts i:first-child { flex: 1; background: var(--sc-a); }
.zd-scrolls__belts i:last-child { flex: 1; background: var(--sc-b); }
.zd-scrolls__belts::before { position: absolute; inset: 0; box-shadow: inset 0 -1px 0 rgba(17, 17, 17, 0.14); content: ""; z-index: 1; }

.zd-scrolls__belts::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
    content: "";
    translate: -130% 0;
}

.zd-scrolls__item:hover .zd-scrolls__belts::after { animation: zdScrollsShimmer 0.9s ease; }

.zd-scrolls__seal {
    position: absolute;
    z-index: 3;
    top: 18px;
    inset-inline-end: 16px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--zd-hero-btn-bg, #C92F2C);
    box-shadow: 0 6px 14px rgba(17, 17, 17, 0.25);
    rotate: var(--sc-seal-rot, -8deg);
}

.zd-scrolls__seal svg { width: 28px; height: 28px; fill: var(--zd-hero-btn-text, #FAFAF7); }

.zd-scrolls__seal::after {
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-accent, #E53935);
    border-radius: 50%;
    content: "";
    opacity: 0;
}

.zd-scrolls__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 4.5;
    overflow: hidden;
    border-radius: 999px 999px 14px 14px;
    background: var(--zd-hero-card-bg, #E9E9E4);
    box-shadow: 0 0 0 3px var(--zd-sc-paper, #F4F2EB), 0 0 0 5px var(--color-text, #111111);
}

.zd-scrolls__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zdScrollsKen 16s ease-in-out infinite alternate;
}

.zd-scrolls__age {
    position: absolute;
    inset-inline: 0;
    bottom: 12px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin-inline: auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--zd-hero-btn-bg, #C92F2C);
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1;
}

.zd-scrolls__heading { display: flex; flex-direction: column; gap: 10px; }

.zd-scrolls__name {
    margin: 0;
    color: var(--color-text, #111111);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.zd-scrolls__tagline {
    margin: 0;
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(17px, 1.25vw, 19px);
    line-height: 1.6;
}

.zd-scrolls__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.zd-scrolls__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    border-radius: 999px;
    background: var(--zd-hero-chip-bg, #FAFAF7);
    color: var(--color-text, #111111);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.zd-scrolls__dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--sc-a) 50%, var(--sc-b) 50%);
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.28);
}

.zd-scrolls__coach {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--zd-hero-border, rgba(17, 17, 17, 0.14));
}

.zd-scrolls__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sc-a) 50%, var(--sc-b) 50%);
    box-shadow: 0 0 0 2px var(--zd-sc-paper, #F4F2EB), 0 0 0 4px var(--color-text, #111111);
}

.zd-scrolls__avatar {
    color: #111111;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: 14px;
    text-shadow: 0 0 6px #FFFFFF, 0 0 2px #FFFFFF;
}

.zd-scrolls__coach-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.zd-scrolls__coach-text strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
.zd-scrolls__coach-text span { color: var(--zd-hero-muted, #333333); font-size: 13px; line-height: 1.4; }

.zd-scrolls__quote {
    margin: 0;
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--color-accent, #E53935);
    color: var(--zd-hero-muted, #333333);
    font-size: clamp(16px, 1.15vw, 18px);
    font-style: italic;
    line-height: 1.65;
}

.zd-scrolls__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1.5px solid var(--zd-hero-ghost-border, rgba(17, 17, 17, 0.32));
    border-radius: var(--radius-medium, 10px);
    background: transparent;
    color: var(--color-text, #111111);
    font: 600 15px/1.3 var(--font-body, "Inter", sans-serif);
    text-align: start;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.zd-scrolls__toggle:hover { border-color: var(--color-accent, #E53935); }
.zd-scrolls__item.is-open .zd-scrolls__toggle { border-color: var(--color-accent, #E53935); background: var(--zd-hero-chip-bg, #FAFAF7); }

.zd-scrolls__chev { flex: none; width: 20px; height: 20px; color: var(--zd-hero-accent-text, #C92F2C); transition: transform 0.4s var(--sc-ease); }
.zd-scrolls__item.is-open .zd-scrolls__chev { transform: rotate(180deg); }


/* ---------- Unfurled details ---------- */

.zd-scrolls__details {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -16px;
    visibility: hidden;
    transition: grid-template-rows 0.7s var(--sc-ease), margin-top 0.7s var(--sc-ease), visibility 0s 0.7s;
}

.zd-scrolls__item.is-open .zd-scrolls__details {
    grid-template-rows: 1fr;
    margin-top: 0;
    visibility: visible;
    transition: grid-template-rows 0.7s var(--sc-ease), margin-top 0.7s var(--sc-ease), visibility 0s;
}

.zd-scrolls__details-inner {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 22px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.zd-scrolls__item.is-open .zd-scrolls__details-inner { opacity: 1; transition-delay: 0.2s; }

.zd-scrolls__block-title {
    margin: 0 0 12px;
    color: var(--zd-hero-accent-text, #C92F2C);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.5;
}

.zd-scrolls__block-title b { color: var(--zd-hero-muted, #333333); font-weight: 700; }

.zd-scrolls__learn,
.zd-scrolls__steps,
.zd-scrolls__skills { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.zd-scrolls__learn { gap: 10px; }

.zd-scrolls__learn li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.55; }
.zd-scrolls__learn svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--zd-hero-accent-text, #C92F2C); }

.zd-scrolls__flow { display: flex; gap: 4px; height: 10px; margin-bottom: 14px; }

.zd-scrolls__flow i {
    flex: var(--w) 1 0;
    border-radius: 3px;
    background: var(--color-accent, #E53935);
    opacity: calc(0.3 + var(--k) * 0.18);
    transform-origin: left;
}

.zd-scrolls__steps { gap: 8px; }

.zd-scrolls__steps li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    font-size: 15px;
    line-height: 1.4;
}

.zd-scrolls__steps b { flex: none; font-weight: 700; }

.zd-scrolls__skills { gap: 10px; }

.zd-scrolls__skills li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.4; }

.zd-scrolls__pips { display: inline-flex; gap: 5px; }

.zd-scrolls__pip {
    width: 18px;
    height: 8px;
    border-radius: 999px;
    background: var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    transform-origin: left;
}

.zd-scrolls__pip.is-on { background: var(--color-accent, #E53935); }

.zd-scrolls__item.is-open .zd-scrolls__pip.is-on { animation: zdScrollsPop 0.5s var(--sc-ease) calc(0.5s + var(--k) * 0.08s) both; }
.zd-scrolls__item.is-open .zd-scrolls__flow i { animation: zdScrollsGrow 0.7s var(--sc-ease) calc(0.4s + var(--k) * 0.1s) both; }

.zd-scrolls__goal {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--color-accent, #E53935);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-accent, #E53935) 7%, transparent);
    font-size: 15px;
    line-height: 1.55;
}

.zd-scrolls__goal > span:first-child { flex: none; color: var(--zd-hero-accent-text, #C92F2C); font-size: 18px; line-height: 1.3; }

.zd-scrolls__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

.zd-scrolls__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: var(--radius-medium, 10px);
    background: var(--zd-hero-btn-bg, #C92F2C);
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.zd-scrolls__btn:hover { background: var(--zd-hero-btn-bg-hover, #A9231F); transform: translateY(-2px); }

.zd-scrolls__link {
    color: var(--color-text, #111111);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--color-accent, #E53935);
    text-underline-offset: 5px;
}

.zd-scrolls__rod--bottom { margin-top: -1px; }
.zd-scrolls__item.is-open .zd-scrolls__rod--bottom { animation: zdScrollsRodDrop 0.8s var(--sc-ease); }


/* ---------- Belt-road ---------- */

.zd-scrolls__road-bar {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 3px;
    padding-top: 22px;
}

.zd-scrolls__age-cell {
    position: relative;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: var(--cell);
    color: var(--cell-ink);
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.14);
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(13px, 1.5vw, 18px);
    cursor: pointer;
    transition: translate 0.35s var(--sc-ease), box-shadow 0.3s ease;
}

.zd-scrolls__age-cell:first-child { border-start-start-radius: 14px; border-end-start-radius: 14px; }
.zd-scrolls__age-cell:last-child { border-start-end-radius: 14px; border-end-end-radius: 14px; }

.zd-scrolls__age-cell::before {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    width: 24px;
    height: 12px;
    border-radius: 24px 24px 0 0;
    background: var(--color-accent, #E53935);
    box-shadow: 0 0 16px var(--zd-sc-glow, rgba(229, 57, 53, 0.35));
    content: "";
    opacity: 0;
    scale: 0.2;
    translate: -50% 8px;
    transition: opacity 0.25s ease, scale 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), translate 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.zd-scrolls__age-cell:hover { translate: 0 -4px; }

.zd-scrolls__age-cell.is-selected,
.zd-scrolls__age-cell.is-echo { translate: 0 -6px; box-shadow: inset 0 0 0 2px var(--color-text, #111111); z-index: 2; }

.zd-scrolls__age-cell.is-selected::before { opacity: 1; scale: 1; translate: -50% 0; }

.zd-scrolls__legend {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 3px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.zd-scrolls__legend-item {
    display: flex;
    grid-column: span var(--span);
    flex-direction: column;
    gap: 3px;
    padding-top: 10px;
    border-top: 2px solid var(--color-text, #111111);
    text-align: center;
}

.zd-scrolls__legend-item strong { font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.zd-scrolls__legend-item span { color: var(--zd-hero-muted, #333333); font-size: clamp(11px, 1.1vw, 14px); line-height: 1.35; overflow-wrap: anywhere; }


/* ---------- Week ---------- */

.zd-scrolls__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 14px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zd-scrolls__day {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding: 16px 14px;
    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    border-radius: 18px;
    background: var(--zd-hero-card-bg, #E9E9E4);
    transition: translate 0.35s var(--sc-ease), border-color 0.25s ease, box-shadow 0.3s ease;
}

.zd-scrolls__day-name { font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 18px; line-height: 1.1; }
.zd-scrolls__day-name abbr { text-decoration: none; }

.zd-scrolls__day-class { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.zd-scrolls__day-class .zd-scrolls__dot { margin-top: 3px; }
.zd-scrolls__day-class--rest { color: var(--zd-hero-muted, #333333); font-weight: 500; }

.zd-scrolls__day-time { color: var(--zd-hero-muted, #333333); font-size: 14px; font-weight: 600; line-height: 1.3; }

.zd-scrolls__today {
    display: none;
    position: absolute;
    top: -11px;
    inset-inline-end: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--zd-hero-btn-bg, #C92F2C);
    color: var(--zd-hero-btn-text, #FAFAF7);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.3;
}

.zd-scrolls__day.is-today { border-color: var(--color-accent, #E53935); box-shadow: 0 0 0 1px var(--color-accent, #E53935); }
.zd-scrolls__day.is-today .zd-scrolls__today { display: block; }
.zd-scrolls__day.is-focus { translate: 0 -6px; border-color: var(--color-accent, #E53935); box-shadow: var(--zd-sc-shadow, 0 18px 40px rgba(17, 17, 17, 0.12)); }
.zd-scrolls__day--rest { background: transparent; border-style: dashed; }


/* ---------- Every program ---------- */

.zd-scrolls__modules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.35vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zd-scrolls__module {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    padding: clamp(20px, 2.2vw, 30px);

    border: 1px solid var(--zd-hero-border, rgba(17, 17, 17, 0.14));
    border-radius: clamp(18px, 2vw, 26px);
    background: var(--zd-hero-card-bg, #E9E9E4);
    box-shadow: var(--zd-sc-shadow, 0 18px 46px rgba(17, 17, 17, 0.07));
    transition: transform 0.35s var(--sc-ease), border-color 0.3s ease;
}

.zd-scrolls__module::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--color-accent, #E53935);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--sc-ease);
}

.zd-scrolls__module:hover { transform: translateY(-7px); border-color: var(--color-accent, #E53935); }
.zd-scrolls__module:hover::after { transform: scaleX(1); }

.zd-scrolls__module-no {
    position: absolute;
    top: 18px;
    inset-inline-end: 22px;
    color: var(--zd-hero-muted, #333333);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.zd-scrolls__module-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid var(--color-accent, #E53935);
    border-radius: 16px;
    background: var(--zd-hero-chip-bg, #FAFAF7);
    color: var(--zd-hero-accent-text, #C92F2C);
    transition: rotate 0.5s var(--sc-ease), scale 0.5s var(--sc-ease);
}

.zd-scrolls__module:hover .zd-scrolls__module-icon { rotate: -8deg; scale: 1.08; }
.zd-scrolls__module-icon svg { width: 26px; height: 26px; }

.zd-scrolls__module-title {
    margin: 0;
    font-family: var(--font-display, "Archivo Black", sans-serif);
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.zd-scrolls__module-text { margin: 0; color: var(--zd-hero-muted, #333333); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; }


/* ---------- Closing line ---------- */

.zd-scrolls__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid var(--zd-hero-border, rgba(17, 17, 17, 0.14));
}

.zd-scrolls__bottom p { margin: 0; color: var(--zd-hero-muted, #333333); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }

.zd-scrolls__bottom a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--color-text, #111111);
    font-size: 15px;
    font-weight: 600;
    text-decoration-color: var(--color-accent, #E53935);
    text-underline-offset: 5px;
    white-space: nowrap;
}

.zd-scrolls__bottom a span { color: var(--zd-hero-accent-text, #C92F2C); transition: transform 0.2s ease; }
.zd-scrolls__bottom a:hover span { transform: translateX(4px); }
.zd-scrolls__bottom a:focus-visible { outline: 3px solid var(--color-accent, #E53935); outline-offset: 4px; }


/* ---------- Reveal + intro motion ---------- */

.zd-scrolls.is-motion-ready [data-scrolls-reveal="up"] { opacity: 0; }

.zd-scrolls [data-scrolls-reveal="up"].is-visible {
    animation: zdScrollsRevealUp 0.85s var(--sc-ease) calc(var(--d, 0) * 90ms) both;
}

.zd-scrolls.is-motion-ready [data-scrolls-reveal="beam"] { opacity: 0; }
.zd-scrolls [data-scrolls-reveal="beam"].is-visible { animation: zdScrollsBeamIn 0.8s var(--sc-ease) both; }

.zd-scrolls.is-motion-ready [data-scrolls-reveal="scroll"] .zd-scrolls__paper { clip-path: inset(0 0 100% 0); }
.zd-scrolls.is-motion-ready [data-scrolls-reveal="scroll"] .zd-scrolls__rod--top,
.zd-scrolls.is-motion-ready [data-scrolls-reveal="scroll"] .zd-scrolls__rod--bottom,
.zd-scrolls.is-motion-ready [data-scrolls-reveal="scroll"] .zd-scrolls__seal { opacity: 0; }
.zd-scrolls.is-motion-ready [data-scrolls-reveal="scroll"] .zd-scrolls__rope { transform: scaleY(0); }

.zd-scrolls [data-scrolls-reveal="scroll"].is-visible .zd-scrolls__rope { animation: zdScrollsRopeIn 0.6s var(--sc-ease) var(--sc-d) both; }
.zd-scrolls [data-scrolls-reveal="scroll"].is-visible .zd-scrolls__rod--top { animation: zdScrollsRodIn 0.6s var(--sc-ease) var(--sc-d) both; }
.zd-scrolls [data-scrolls-reveal="scroll"].is-visible .zd-scrolls__paper { animation: zdScrollsUnroll 1.2s var(--sc-ease) calc(var(--sc-d) + 0.35s) both; }
.zd-scrolls [data-scrolls-reveal="scroll"].is-visible .zd-scrolls__rod--bottom { animation: zdScrollsRodDrop 0.9s var(--sc-ease) calc(var(--sc-d) + 1.2s) both; }
.zd-scrolls [data-scrolls-reveal="scroll"].is-visible .zd-scrolls__seal { animation: zdScrollsStamp 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--sc-d) + 1.5s) both; }
.zd-scrolls [data-scrolls-reveal="scroll"].is-visible .zd-scrolls__seal::after { animation: zdScrollsRipple 0.9s ease-out calc(var(--sc-d) + 1.75s) both; }

.zd-scrolls [data-scrolls-reveal="up"].is-visible .zd-scrolls__module-icon svg * { stroke-dasharray: 1; animation: zdScrollsDraw 1.1s ease calc(0.3s + var(--d, 0) * 90ms) both; }


/* ---------- Keyframes ---------- */

@keyframes zdScrollsSpin { to { transform: rotate(360deg); } }
@keyframes zdScrollsUnderline { to { transform: scaleX(1); } }
@keyframes zdScrollsPulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(229, 57, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}
@keyframes zdScrollsRevealUp { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes zdScrollsBeamIn { from { opacity: 0; translate: 0 -36px; } to { opacity: 1; translate: 0 0; } }
@keyframes zdScrollsRopeIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes zdScrollsRodIn { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes zdScrollsUnroll {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(-30px -40px -90px -40px); }
}
@keyframes zdScrollsRodDrop {
    0% { opacity: 0; translate: 0 -26px; }
    55% { opacity: 1; translate: 0 6px; }
    78% { translate: 0 -3px; }
    100% { opacity: 1; translate: 0 0; }
}
@keyframes zdScrollsStamp {
    from { opacity: 0; scale: 2.7; rotate: calc(var(--sc-seal-rot, -8deg) * 3.25); }
    to { opacity: 1; scale: 1; rotate: var(--sc-seal-rot, -8deg); }
}
@keyframes zdScrollsRipple {
    from { opacity: 0.7; scale: 1; }
    to { opacity: 0; scale: 2.6; }
}
@keyframes zdScrollsSway { from { rotate: -0.7deg; } to { rotate: 0.7deg; } }
@keyframes zdScrollsKen { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes zdScrollsShimmer { from { translate: -130% 0; } to { translate: 130% 0; } }
@keyframes zdScrollsNudge {
    0% { translate: 0 0; }
    35% { translate: 0 -16px; }
    62% { translate: 0 3px; }
    100% { translate: 0 0; }
}
@keyframes zdScrollsSwap { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes zdScrollsPop { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes zdScrollsGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes zdScrollsDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }


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

@media (max-width: 1023px) {

    .zd-scrolls__header { grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr); gap: 30px; }
    .zd-scrolls__finder { grid-template-columns: minmax(0, 1fr); }

    .zd-scrolls__nav { display: flex; }

    .zd-scrolls__list {
        display: flex;
        gap: 20px;
        padding: 34px 6px 40px;
        margin: 0 -6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .zd-scrolls__item { flex: 0 0 min(78%, 360px); scroll-snap-align: center; }

    .zd-scrolls__stage { padding-top: 0; }
    .zd-scrolls__beam { top: 0; }

    .zd-scrolls__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .zd-scrolls__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 767px) {

    .zd-scrolls { padding-block: 52px; }
    .zd-scrolls__header { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .zd-scrolls__header h2 { font-size: clamp(36px, 9vw, 54px); }
    .zd-scrolls__intro { font-size: 18px; }

    .zd-scrolls__beam,
    .zd-scrolls__nav { display: none; }

    .zd-scrolls__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; padding: 22px 0 0; margin: 0; overflow: visible; scroll-snap-type: none; }

    .zd-scrolls__item { --sc-d: 0.1s; width: 100%; max-width: 460px; margin-inline: auto; }

    .zd-scrolls__item::before {
        position: absolute;
        top: -22px;
        inset-inline: 14%;
        height: 12px;
        border-radius: 6px;
        background: var(--zd-sc-rod, #111111);
        content: "";
    }

    .zd-scrolls__rope { top: -12px; height: 12px; }
    .zd-scrolls__scroll { transform-origin: 50% -16px; }

    .zd-scrolls__days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zd-scrolls__day:last-child:nth-child(odd) { grid-column: 1 / -1; }

    .zd-scrolls__modules { grid-template-columns: minmax(0, 1fr); }
    .zd-scrolls__module-text { font-size: 17px; }

    .zd-scrolls__bottom { align-items: flex-start; flex-direction: column; gap: 12px; }

}

@media (max-width: 424px) {

    .zd-scrolls { padding: 44px 16px; }
    .zd-scrolls__header h2 { font-size: 36px; }
    .zd-scrolls__intro { font-size: 17px; }
    .zd-scrolls__finder { padding: 18px; }
    .zd-scrolls__result { padding: 14px; }
    .zd-scrolls__jump { width: 100%; justify-content: center; }
    .zd-scrolls__age-cell { min-height: 50px; }

}

@media (max-width: 374px) {

    .zd-scrolls { padding-inline: 13px; }
    .zd-scrolls__eyebrow { font-size: 10px; }
    .zd-scrolls__header h2 { font-size: 33px; }
    .zd-scrolls__paper { padding-inline: 16px; }
    .zd-scrolls__chips li { font-size: 12px; padding: 6px 10px; }
    .zd-scrolls__legend-item strong { font-size: 11px; }
    .zd-scrolls__legend-item span { font-size: 10px; }

}

@media (min-width: 1024px) {

    .zd-scrolls__days { grid-template-columns: repeat(7, minmax(0, 1fr)); }

}

@media (hover: none) {

    .zd-scrolls__item:hover .zd-scrolls__scroll { translate: none; }

}


/* ---------- Reduced motion ---------- */

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

    .zd-scrolls *,
    .zd-scrolls *::before,
    .zd-scrolls *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}


/* =========================================================
   INSTRUCTORS HERO: exactly 75vh (laptop and larger)
   ========================================================= */
@media (min-width: 1024px) {
    .ih {
        --ih-cw: clamp(120px, calc(57.7vh - 216px), 250px);   /* card size follows screen height */
        min-height: 75vh;
        padding-top: 18px;
    }

    .ih-grid { gap: clamp(24px, 3vw, 48px); }

    .ih-title { font-size: clamp(32px, 5.2vw, 78px); }
    .ih-lead  { margin-top: 12px; font-size: clamp(14px, 2.4vh, 19px); max-width: 56ch; }
    .ih-cta   { margin-top: 16px; }
    .ih-btn   { padding: 12px 22px; font-size: 15px; }

    .ih-stats { margin-top: 18px; }
    .ih-stat  { padding: 8px 6px; }
    .ih-stat-num   { font-size: clamp(20px, 3.6vh, 32px); }
    .ih-stat-label { font-size: 13px; }

    .ih-stage    { position: relative; }
    .ih-carousel { padding-top: 28px; }
    .ih-persp    { height: calc(var(--ih-ch) + 26px); }
    .ih-wave     { top: calc(28px + var(--ih-ch) / 2); }

    /* arrows now sit on the left and right edges of the cards (no extra row) */
    .ih-ctrls {
        position: absolute;
        inset-inline: 4px;
        top: calc(28px + (var(--ih-ch) + 26px) / 2 - 22px);
        z-index: 6;
        justify-content: space-between;
        margin: 0;
        pointer-events: none;
    }
    .ih-arrow { pointer-events: auto; }

    .ih-panel { margin-top: 8px; padding: 14px 18px; }
    .ih-info  { gap: 6px; }
    .ih-name  { font-size: clamp(22px, 3.4vh, 30px); }

    .ih-ribbon { margin-top: 18px; }

    /* safety: hides them even if you skip the HTML deletion */
    .ih-dots,
    .ih-tags,
    .ih-view { display: none; }
}

/* between 1024px and 1199px wide there is not enough room for the 3 stat boxes */
@media (min-width: 1024px) and (max-width: 1199px) {
    .ih-stats { display: none; }
}

@media (max-width: 600px) {
    .ih-title { font-size: clamp(34px, 9vw, 48px); }
}

.ih-title .ih-mark {
    background: none;
    color: var(--color-accent, #E53935);
    transition: none;
}

/* Instructors page: keep section intro headings consistent and spaced. */
.ih-title,
.rk-title,
.zd-instructor-feature__copy h2,
.zd-instructors-hero__title,
.zd-coach-timeline__heading h2,
.zd-instructor-cta__title {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(38px, 5.1vw, 68px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.03;
}

.ih-title,
.rk-title,
.zd-instructors-hero__title,
.zd-coach-timeline__heading h2 {
    color: var(--color-text, #111111);
}

.ih-title .ih-mark,
.rk-title em,
.zd-instructor-feature__copy h2 span,
.zd-instructors-hero__title span,
.zd-coach-timeline__heading h2 em,
.zd-instructor-cta__title strong {
    color: var(--color-accent, #E53935);
    font-style: normal;
}

.zd-instructor-feature { margin-bottom: clamp(28px, 4vw, 56px); }

@media (max-width: 424px) {
    .ih-title,
    .rk-title,
    .zd-instructor-feature__copy h2,
    .zd-instructors-hero__title,
    .zd-coach-timeline__heading h2,
    .zd-instructor-cta__title { font-size: 36px; }
}

@media (max-width: 374px) {
    .ih-title,
    .rk-title,
    .zd-instructor-feature__copy h2,
    .zd-instructors-hero__title,
    .zd-coach-timeline__heading h2,
    .zd-instructor-cta__title { font-size: 33px; }
}

/* Instructor CTA values: keep all four labels within their mobile columns. */
@media (max-width: 1023px) {
    .zd-instructor-cta__bottom {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(4px, 1.5vw, 12px);
    }

    .zd-instructor-cta__value { min-width: 0; }
    .zd-instructor-cta__value strong {
        font-size: clamp(8px, 1.3vw, 12px);
        letter-spacing: .02em;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
}

/* Add breathing room to the three overview panels on phone sizes only. */
@media (max-width: 767px) {
    .zd-instructors-hero__card {
        padding: clamp(19px, 4vw, 24px);
        gap: 14px;
    }
}

/* Programs page: shared typography for section intro headings only. */
.pb-title,
.zd-program-difference__header h2,
.zd-scrolls__header h2,
.zd-program-dayone__copy h2,
.zd-life-framework__header h2,
.zd-belt-path__visual-copy h2,
.zd-belt-path__header h3,
.zd-program-super-cta h2 {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(38px, 5.1vw, 68px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.03;
}

.pb-title,
.zd-program-difference__header h2,
.zd-scrolls__header h2,
.zd-program-dayone__copy h2,
.zd-life-framework__header h2,
.zd-belt-path__header h3,
.zd-program-super-cta h2 {
    color: var(--color-text, #111111);
}

.pb-title .pb-mark,
.zd-program-difference__header h2 span,
.zd-scrolls__header h2 span,
.zd-program-dayone__copy h2 span,
.zd-life-framework__header h2 span,
.zd-belt-path__visual-copy h2 span,
.zd-belt-path__header h3 span,
.zd-program-super-cta h2 span {
    background: none;
    color: var(--color-accent, #E53935);
    font-style: normal;
    text-decoration: none;
}

.zd-program-difference__header h2 span::after,
.zd-scrolls__header h2 span::after { display: none; content: none; }

.pb-title .pb-mark { transition: none; }
.zd-belt-path__visual-copy h2 { color: #FAFAF7; }

@media (min-width: 641px) and (max-width: 960px) {
    .zd-program-dayone__steps::before {
        top: 36px;
        right: calc(33.333% - 35px);
        left: 24px;
    }
}

@media (max-width: 424px) {
    .pb-title,
    .zd-program-difference__header h2,
    .zd-scrolls__header h2,
    .zd-program-dayone__copy h2,
    .zd-life-framework__header h2,
    .zd-belt-path__visual-copy h2,
    .zd-belt-path__header h3,
    .zd-program-super-cta h2 { font-size: 36px; }
}

@media (max-width: 374px) {
    .pb-title,
    .zd-program-difference__header h2,
    .zd-scrolls__header h2,
    .zd-program-dayone__copy h2,
    .zd-life-framework__header h2,
    .zd-belt-path__visual-copy h2,
    .zd-belt-path__header h3,
    .zd-program-super-cta h2 { font-size: 33px; }
}

#aboutHero .zd-ah2__path-line { display: none; }
#aboutHero .zd-ah2__paint-stroke--two { display: none; }

/* About page: shared typography for section intro headings only. */
.zd-ah2__title,
.zd-mv__title,
.zd-about-proof__title,
.zd-about-hero__title,
.zd-history__title,
.zd-parent-problem__guide h2,
.zd-about-cta__title {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(38px, 5.1vw, 68px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.03;
}

.zd-ah2__title-line--accent,
.zd-mv__title .zd-mv__title-accent,
.zd-about-proof__title span,
.zd-about-hero__title .zd-about-hero__word--accent,
.zd-history__title span,
.zd-parent-problem__guide h2 span,
.zd-about-cta__title .zd-about-cta__title-line--accent {
    color: var(--color-accent, #E53935);
    font-style: normal;
}

.zd-ah2__title-line--accent::after { display: none; content: none; }
.zd-about-hero__brush { display: none; }

@media (max-width: 424px) {
    .zd-ah2__title,
    .zd-mv__title,
    .zd-about-proof__title,
    .zd-about-hero__title,
    .zd-history__title,
    .zd-parent-problem__guide h2,
    .zd-about-cta__title { font-size: 36px; }
}

@media (max-width: 374px) {
    .zd-ah2__title,
    .zd-mv__title,
    .zd-about-proof__title,
    .zd-about-hero__title,
    .zd-history__title,
    .zd-parent-problem__guide h2,
    .zd-about-cta__title { font-size: 33px; }
}

/* About page mobile and tablet layout: hero and third section only. */
@media (max-width: 1024px) {
    .zd-ah2 {
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 52px 0 58px;
    }

    .zd-ah2__inner {
        display: grid;
        width: min(100% - 36px, 820px);
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 0 0 62px;
    }

    .zd-ah2__content { width: 100%; }
    .zd-ah2__description { width: 100%; max-width: 650px; }
    .zd-ah2__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .zd-ah2__meta-divider { display: none; }
    .zd-ah2__meta-item { min-width: 0; align-items: flex-start; gap: 6px; padding-inline: 0; }
    .zd-ah2__meta-item span { font-size: clamp(9px, 1.25vw, 11px); }

    .zd-ah2__visual {
        position: relative;
        inset: auto;
        width: 100%;
        height: clamp(260px, 54vw, 440px);
        min-height: 0;
        margin-top: 8px;
    }

    .zd-ah2__image-wrap {
        width: min(100%, 520px);
        height: 100%;
        margin-inline: auto;
        transform: translate3d(0, 0, 0);
    }

    .zd-ah2__paint { top: 30%; right: -10%; width: 68%; height: 60%; }
    .zd-ah2__visual-label { top: 12%; right: 12px; font-size: 9px; }
    .zd-ah2__vertical-note { display: none; }
    .zd-ah2__number { right: 4%; bottom: 6%; font-size: clamp(38px, 8vw, 76px); }
    .zd-ah2__index { top: 14px; right: 16px; left: auto; transform: none; }
    .zd-ah2__bottom { min-height: 44px; height: auto; flex-wrap: wrap; gap: 6px; padding: 8px 16px; }
    .zd-ah2__bottom-copy { white-space: normal; }

    .zd-about-proof__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(28px, 5vw, 44px);
        padding-top: clamp(28px, 4vw, 42px);
    }

    .zd-about-proof__gallery { width: min(620px, 100%); margin-inline: auto; }
    .zd-about-proof__photo--two,
    .zd-about-proof__photo--four { transform: none; }
    .zd-about-proof__copy { width: min(680px, 100%); margin-inline: auto; }
}

@media (max-width: 767px) {
    .zd-ah2 { padding-top: 48px; }
    .zd-ah2__inner { width: min(100% - 30px, 620px); }
    .zd-ah2__title { font-size: clamp(38px, 9.5vw, 58px); line-height: 1; }
    .zd-ah2__description { margin-top: 16px; font-size: clamp(15px, 4vw, 17px); line-height: 1.6; }
    .zd-ah2__meta { gap: 8px; margin-top: 18px; }
    .zd-ah2__meta-item { flex-direction: column; }
    .zd-ah2__meta-item strong { font-size: 15px; }
    .zd-ah2__meta-item span { font-size: clamp(8px, 2.5vw, 10px); }
    .zd-ah2__actions { gap: 12px; margin-top: 20px; }
    .zd-ah2__button { min-height: 46px; padding: 11px 15px; font-size: 12px; }
    .zd-ah2__visual-label { display: none; }
    .zd-ah2__bottom-label { display: none; }
    .zd-ah2__bottom-copy { font-size: 8px; letter-spacing: .08em; }

    .zd-about-proof { padding-block: 42px; }
    .zd-about-proof__layout { gap: 30px; padding-top: 26px; }
    .zd-about-proof__gallery { gap: 10px; padding-inline: 0; }
    .zd-about-proof__lead { margin: 15px 0 20px; font-size: clamp(16px, 4vw, 18px); line-height: 1.6; }
    .zd-about-proof__feature { padding-block: 14px; }
    .zd-about-proof__feature p { font-size: clamp(15px, 3.8vw, 17px); line-height: 1.6; }
}

@media (max-width: 424px) {
    .zd-ah2 { padding-top: 42px; padding-bottom: 52px; }
    .zd-ah2__inner { width: calc(100% - 26px); padding-bottom: 56px; }
    .zd-ah2__title { font-size: clamp(34px, 10vw, 42px); }
    .zd-ah2__meta { gap: 6px; }
    .zd-ah2__meta-item span { letter-spacing: .02em; }
    .zd-ah2__actions { align-items: flex-start; }
    .zd-ah2__button--text { display: inline-flex; }
    .zd-ah2__visual { height: clamp(240px, 72vw, 320px); }
    .zd-ah2__image-wrap { width: min(100%, 360px); }
    .zd-about-proof__values { justify-content: center; gap: 9px 10px; text-align: center; }
    .zd-about-proof__title { max-width: 100%; overflow-wrap: normal; }
}

@media (max-width: 374px) {
    .zd-ah2__title { font-size: 33px; }
    .zd-ah2__meta-item { gap: 4px; }
    .zd-ah2__meta-item span { font-size: 8px; }
    .zd-ah2__actions { flex-direction: column; align-items: stretch; }
    .zd-ah2__button { width: 100%; }
}

@media (min-width: 768px) {
    .zd-history {
        padding-block: clamp(64px, 6vw, 96px);
    }

    .zd-history__header { margin-bottom: clamp(40px, 4vw, 60px); }
    .zd-history__timeline { padding-top: 0; }
    .zd-history__milestone {
        min-height: 360px;
        margin-bottom: clamp(24px, 2vw, 34px);
    }

    .zd-history__content {
        display: flex;
        min-height: 360px;
        flex-direction: column;
        justify-content: flex-start;
        padding: clamp(24px, 2.4vw, 34px);
    }

    .zd-history__principle { margin-top: auto; }
    .zd-history__now { margin-top: 0; }
}

/* About page: improve readability of the first two section descriptions. */
.zd-ah2__description,
.zd-mv__intro {
    width: min(100%, 650px);
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.65;
    text-align: start;
    text-wrap: pretty;
}

.zd-ah2__description { max-width: 610px; }

/* About page: sentence case for the first, second, and final CTA intro titles. */
.zd-ah2__title,
.zd-ah2__title-line,
.zd-mv__title,
.zd-mv__title > span,
.zd-about-cta__title,
.zd-about-cta__title-line {
    text-transform: lowercase;
}

.zd-ah2__title-line:first-child::first-letter,
.zd-mv__title > span:first-child::first-letter,
.zd-about-cta__title-line:first-child::first-letter {
    text-transform: uppercase;
}

/* Final About-only mobile/tablet layout overrides. */
@media (max-width: 1024px) {
    #aboutHero.zd-ah2 {
        height: auto;
        min-height: 0;
        max-height: none;
        padding-block: 42px 50px;
        overflow: hidden;
    }

    #aboutHero .zd-ah2__inner {
        display: grid;
        width: calc(100% - 36px);
        max-width: 820px;
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 24px;
        margin-inline: auto;
        padding: 0 0 58px;
    }

    #aboutHero .zd-ah2__content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }

    #aboutHero .zd-ah2__title,
    #aboutHero .zd-ah2__description,
    #aboutHero .zd-ah2__meta,
    #aboutHero .zd-ah2__actions {
        max-width: 100%;
    }

    #aboutHero .zd-ah2__meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #aboutHero .zd-ah2__meta-divider { display: none; }

    #aboutHero .zd-ah2__meta-item {
        min-width: 0;
        padding-inline: 0;
        align-items: flex-start;
    }

    #aboutHero .zd-ah2__visual {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 100%;
        height: clamp(250px, 48vw, 420px);
        min-height: 0;
        margin: 0;
    }

    #aboutHero .zd-ah2__image-wrap {
        width: min(100%, 520px);
        height: 100%;
        margin-inline: auto;
        transform: none;
    }

    #aboutHero .zd-ah2__paint { right: -8%; left: auto; width: 72%; }
    #aboutHero .zd-ah2__visual-label { right: 12px; left: auto; transform: none; }
    #aboutHero .zd-ah2__vertical-note { display: none; }
    #aboutHero .zd-ah2__number { right: 4%; left: auto; bottom: 5%; }
    #aboutHero .zd-ah2__index { right: 16px; left: auto; transform: none; }

    .zd-about-proof {
        overflow: hidden;
        padding-inline: clamp(18px, 4vw, 36px);
    }

    .zd-about-proof .zd-about-proof__inner,
    .zd-about-proof .zd-about-proof__layout,
    .zd-about-proof .zd-about-proof__gallery,
    .zd-about-proof .zd-about-proof__copy {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .zd-about-proof .zd-about-proof__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: clamp(26px, 5vw, 42px);
    }

    .zd-about-proof .zd-about-proof__gallery { margin-inline: auto; }

    .zd-about-proof .zd-about-proof__photo--two,
    .zd-about-proof .zd-about-proof__photo--four { transform: none; }

    .zd-about-proof .zd-about-proof__title,
    .zd-about-proof .zd-about-proof__lead,
    .zd-about-proof .zd-about-proof__feature p { overflow-wrap: anywhere; }
}

@media (max-width: 767px) {
    #aboutHero.zd-ah2 { padding-block: 38px 44px; }
    #aboutHero .zd-ah2__inner { width: calc(100% - 30px); gap: 20px; padding-bottom: 48px; }
    #aboutHero .zd-ah2__title { font-size: clamp(36px, 9vw, 58px); line-height: 1; }
    #aboutHero .zd-ah2__description { font-size: clamp(15px, 4vw, 18px); line-height: 1.6; }
    #aboutHero .zd-ah2__meta { gap: 8px; }
    #aboutHero .zd-ah2__meta-item { flex-direction: column; gap: 5px; }
    #aboutHero .zd-ah2__meta-item span { font-size: clamp(8px, 2.5vw, 10px); }
    #aboutHero .zd-ah2__actions { flex-wrap: wrap; gap: 12px; }
    #aboutHero .zd-ah2__visual { height: clamp(240px, 70vw, 340px); }
    #aboutHero .zd-ah2__visual-label,
    #aboutHero .zd-ah2__bottom-label { display: none; }
    #aboutHero .zd-ah2__bottom { height: auto; min-height: 42px; flex-wrap: wrap; gap: 6px; padding: 8px 14px; }
    #aboutHero .zd-ah2__bottom-copy { white-space: normal; font-size: 8px; }

    .zd-about-proof { padding-block: 40px; }
    .zd-about-proof .zd-about-proof__layout { gap: 26px; padding-top: 24px; }
    .zd-about-proof .zd-about-proof__gallery { gap: 10px; padding-inline: 0; }
    .zd-about-proof .zd-about-proof__lead { margin: 14px 0 20px; font-size: clamp(16px, 4vw, 18px); line-height: 1.6; }
    .zd-about-proof .zd-about-proof__feature { gap: 12px; padding-block: 14px; }
    .zd-about-proof .zd-about-proof__feature p { font-size: clamp(15px, 3.8vw, 17px); line-height: 1.6; }
}

@media (max-width: 424px) {
    #aboutHero.zd-ah2 { padding-block: 34px 40px; }
    #aboutHero .zd-ah2__inner { width: calc(100% - 26px); }
    #aboutHero .zd-ah2__title { font-size: clamp(33px, 9.5vw, 40px); }
    #aboutHero .zd-ah2__meta { gap: 6px; }
    #aboutHero .zd-ah2__meta-item span { letter-spacing: .02em; }
    #aboutHero .zd-ah2__visual { height: clamp(220px, 68vw, 300px); }
    .zd-about-proof { padding-inline: 14px; }
    .zd-about-proof .zd-about-proof__values { justify-content: center; gap: 8px 10px; text-align: center; }
    .zd-about-proof .zd-about-proof__title { max-width: 100%; }
}

@media (max-width: 374px) {
    #aboutHero .zd-ah2__title { font-size: 32px; }
    #aboutHero .zd-ah2__actions { flex-direction: column; align-items: stretch; }
    #aboutHero .zd-ah2__button { width: 100%; }
    .zd-about-proof .zd-about-proof__feature { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
}

/* Shared intro heading treatment for Home 1 and Home 2 only. */
.home-intro-heading {
    max-width: 100%;
    color: #111111 !important;
    font-family: "Archivo Black", sans-serif !important;
    font-size: clamp(38px, 5.1vw, 68px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: normal;
    line-height: 1.08;
    text-align: start;
    text-decoration: none !important;
    text-transform: none;
    text-wrap: balance;
    overflow-wrap: anywhere;
    white-space: normal;
}

.home-intro-heading span,
.home-intro-heading strong {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: normal !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    white-space: normal;
}

.home-intro-heading .home-intro-accent {
    position: relative;
    color: #E53935 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.home-intro-heading .home-intro-accent::before,
.home-intro-heading .home-intro-accent::after {
    display: none !important;
    content: none !important;
}

.home-intro-heading .home-intro-accent svg { display: none !important; }

html[data-theme="dark"] .home-intro-heading,
html.dark .home-intro-heading,
body.dark-mode .home-intro-heading {
    color: #FAFAF7 !important;
}

@media (max-width: 424px) {
    .home-intro-heading { font-size: 36px !important; }
}

@media (max-width: 374px) {
    .home-intro-heading { font-size: 33px !important; }
}

/* Index page intro heading visibility and alignment fixes. */
.zd-arena .zd-arena__head {
    width: 100%;
    align-items: center;
    text-align: center;
}

.zd-arena .zd-arena__title,
.zd-arena .zd-arena__lead {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
}

.belt-journey .belt-journey__title {
    color: #111111 !important;
    opacity: 1;
    visibility: visible;
    -webkit-text-fill-color: #111111;
}

.belt-journey .belt-journey__title .home-intro-accent {
    color: #E53935 !important;
    -webkit-text-fill-color: #E53935;
}

.zj-transform__intro .zj-transform__title {
    color: #FAFAF7 !important;
}

.zj-transform__intro .zj-transform__title .home-intro-accent {
    color: #E53935 !important;
    -webkit-text-fill-color: #E53935;
}

/* Index CTA heading contrast and alignment. */
.zd-next-level__content .zd-next-level__title.home-intro-heading {
    width: 100%;
    color: #FAFAF7 !important;
    text-align: center;
}

.zd-next-level__content .zd-next-level__title.home-intro-heading .home-intro-accent {
    color: #E53935 !important;
}

/* Keep the first line of the index confidence heading readable in light mode. */
html[data-theme="light"] .zd-confidence .zd-confidence__title.home-intro-heading,
html:not([data-theme="dark"]) .zd-confidence .zd-confidence__title.home-intro-heading {
    color: #ffffff !important;
}

/* Keep Arena spotlight content in a non-overlapping mobile flow only. */
@media (max-width: 480px) {
    .zd-arena .zd-arena__spotlight-card {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 16px;
    }

    .zd-arena .zd-arena__radar-pulse { display: none; }

    .zd-arena .zd-arena__spotlight-top {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        inset-inline-start: auto;
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        margin: 0 14px;
    }

    .zd-arena .zd-arena__spotlight-top > span {
        max-width: 100%;
        white-space: normal;
    }

    .zd-arena .zd-arena__spotlight-content {
        gap: 12px;
        padding: 16px 14px 20px;
        transform: none;
    }

    .zd-arena .zd-arena__spotlight-title {
        font-size: clamp(22px, 6.5vw, 30px);
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .zd-arena .zd-arena__spotlight-desc { max-width: 100%; }

    .zd-arena .zd-arena__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .zd-arena .zd-arena__metric-card { min-width: 0; padding: 10px; }

    .zd-arena .zd-arena__spotlight-footer {
        justify-content: flex-start;
        gap: 12px;
    }
}

@media (max-width: 360px) {
    .zd-arena .zd-arena__spotlight-top { flex-direction: column; }
    .zd-arena .zd-arena__metrics { grid-template-columns: minmax(0, 1fr); }
}

/* Index counters: keep all four values inside their cards on tablet widths. */
@media (min-width: 768px) and (max-width: 991px) {
    .pl-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(8px, 1.5vw, 14px);
    }

    .pl-stat {
        min-width: 0;
        padding-inline: 6px;
    }

    .pl-stat-num {
        font-size: clamp(32px, 6.5vw, 50px);
        white-space: nowrap;
    }

    .pl-stat-label {
        font-size: clamp(12px, 1.7vw, 14px);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
}

/* About hero redesign: isolated to #aboutHero. */
#aboutHero.zd-ah2 {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: clamp(34px, 5vw, 70px) 0 64px;
    overflow: hidden;
}

#aboutHero .zd-ah2__inner {
    width: min(1460px, calc(100% - clamp(32px, 7vw, 104px)));
    height: auto;
    min-height: clamp(540px, 72vh, 760px);
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(28px, 5vw, 84px);
    margin-inline: auto;
    padding: 0;
}

#aboutHero .zd-ah2__content {
    width: 100%;
    max-width: 700px;
    min-width: 0;
}

#aboutHero .zd-ah2__title,
#aboutHero .zd-ah2__description,
#aboutHero .zd-ah2__meta,
#aboutHero .zd-ah2__actions { max-width: 100%; }

#aboutHero .zd-ah2__visual {
    isolation: isolate;
    width: 100%;
    height: clamp(440px, 68vh, 700px);
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: clamp(24px, 3vw, 42px);
    background:
        radial-gradient(circle at 76% 22%, rgba(255, 122, 112, .65), transparent 36%),
        linear-gradient(145deg, #b91f1c 0%, #e53935 56%, #9e1917 100%);
    box-shadow: 0 24px 70px rgba(74, 14, 13, .2);
}

#aboutHero .zd-ah2__visual::before {
    position: absolute;
    top: 8%;
    inset-inline-end: 8%;
    width: min(72%, 480px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    box-shadow: inset 0 0 0 24px rgba(255, 255, 255, .045);
    content: "";
    pointer-events: none;
}

#aboutHero .zd-ah2__paint {
    display: none;
}

#aboutHero .zd-ah2__image-wrap {
    z-index: 1;
    width: min(100%, 640px);
    height: 100%;
    margin-inline: auto;
}

#aboutHero .zd-ah2__number { right: 5%; bottom: 5%; z-index: 4; }

@media (max-width: 1024px) {
    #aboutHero.zd-ah2 { padding-block: 44px 52px; }

    #aboutHero .zd-ah2__inner {
        width: min(calc(100% - 40px), 860px);
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(24px, 4vw, 38px);
    }

    #aboutHero .zd-ah2__content { max-width: 780px; }

    #aboutHero .zd-ah2__visual {
        height: clamp(300px, 54vw, 480px);
        max-width: 780px;
        margin-inline: auto;
    }

    #aboutHero .zd-ah2__paint {
        top: auto;
        right: -3%;
        bottom: 3%;
        width: 78%;
        height: 48%;
    }
}

@media (max-width: 767px) {
    #aboutHero.zd-ah2 { padding-block: 36px 42px; }
    #aboutHero .zd-ah2__inner { width: calc(100% - 32px); gap: 24px; }
    #aboutHero .zd-ah2__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #aboutHero .zd-ah2__meta-item { align-items: flex-start; }
    #aboutHero .zd-ah2__visual { height: clamp(250px, 72vw, 390px); }
    #aboutHero .zd-ah2__number { right: 5%; bottom: 4%; }
}

@media (max-width: 424px) {
    #aboutHero .zd-ah2__inner { width: calc(100% - 28px); }
    #aboutHero .zd-ah2__meta { gap: 8px; }
    #aboutHero .zd-ah2__visual { height: clamp(230px, 68vw, 300px); }
}

@media (max-width: 374px) {
    #aboutHero .zd-ah2__inner { width: calc(100% - 24px); }
    #aboutHero .zd-ah2__meta-item span { overflow-wrap: anywhere; }
}

/* About Our Story hero: tablet and phone layout only. */
@media (max-width: 1023px) {
    .zd-about-hero {
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .zd-about-hero__inner {
        display: grid;
        flex: none;
        width: min(calc(100% - 36px), 820px);
        max-width: 820px;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "story-mosaic"
            "story-copy";
        align-items: start;
        gap: clamp(22px, 4vw, 34px);
        margin-inline: auto;
        padding: clamp(32px, 5vw, 52px) 0 24px;
    }

    .zd-about-hero__mosaic,
    .zd-about-hero__copy {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .zd-about-hero__mosaic {
        grid-area: story-mosaic;
        position: relative;
        min-height: 0;
        overflow: hidden;
    }

    .zd-about-hero__copy {
        grid-area: story-copy;
        position: relative;
        inset: auto;
        transform: none;
        animation: none;
        align-self: start;
    }

    .zd-about-hero__mosaic {
        height: clamp(320px, 52vw, 460px);
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: clamp(8px, 1.5vw, 14px);
    }

    .zd-about-hero__mosaic-stack { min-width: 0; min-height: 0; height: 100%; gap: clamp(8px, 1.5vw, 14px); }
    .zd-about-hero__mosaic-card { min-width: 0; padding: clamp(10px, 2vw, 16px); }
    .zd-about-hero__card-label { overflow-wrap: anywhere; }
    .zd-about-hero__copy { gap: clamp(16px, 2.5vw, 24px); }
    .zd-about-hero__title,
    .zd-about-hero__lead,
    .zd-about-hero__stats,
    .zd-about-hero__cta,
    .zd-about-hero__ticker-wrap { width: 100%; max-width: 100%; min-width: 0; }
    .zd-about-hero__title { overflow-wrap: anywhere; }
    .zd-about-hero__word { max-width: 100%; }
    .zd-about-hero__lead { overflow-wrap: anywhere; }
    .zd-about-hero__strip { flex: none; width: 100%; }
}

@media (max-width: 767px) {
    .zd-about-hero__inner { width: calc(100% - 32px); gap: 22px; padding-top: 30px; }
    .zd-about-hero__mosaic {
        order: -1;
        height: clamp(260px, 70vw, 380px);
        gap: 8px;
    }
    .zd-about-hero__mosaic-stack { gap: 8px; }
    .zd-about-hero__mosaic-primary,
    .zd-about-hero__mosaic-tile--a,
    .zd-about-hero__mosaic-tile--b { min-width: 0; min-height: 0; }
    .zd-about-hero__mosaic-tile { flex: 1 1 0; }
    .zd-about-hero__mosaic-card { padding: 10px 12px; }
    .zd-about-hero__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding-block: 14px;
    }
    .zd-about-hero__stat {
        min-width: 0;
        flex: initial;
        padding: 0 6px;
    }
    .zd-about-hero__stat-label { font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
    .zd-about-hero__cta { gap: 10px; }
    .zd-about-hero__btn { max-width: 100%; white-space: normal; }
    .zd-about-hero__btn--ghost { display: inline-flex; }
    .zd-about-hero__ticker-wrap { max-width: 100%; }
}

@media (max-width: 424px) {
    .zd-about-hero__inner { width: calc(100% - 28px); }
    .zd-about-hero__mosaic { height: clamp(240px, 70vw, 300px); }
    .zd-about-hero__card-label { font-size: 10px; line-height: 1.3; }
    .zd-about-hero__stat-num { font-size: clamp(22px, 7vw, 30px); }
    .zd-about-hero__stat-label { font-size: 9px; letter-spacing: .02em; }
    .zd-about-hero__btn { padding: 11px 14px; font-size: 12px; }
}

@media (max-width: 374px) {
    .zd-about-hero__inner { width: calc(100% - 24px); }
    .zd-about-hero__mosaic { height: 240px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .zd-about-hero__mosaic-card { padding: 8px; }
    .zd-about-hero__card-num { font-size: 22px; }
    .zd-about-hero__card-label { font-size: 9px; }
    .zd-about-hero__cta { gap: 8px; }
}

/* Home 2 cinema: lift the intro clear of the video during its inset phase. */
#zh2CinemaSection .zh2-cinema__intro {
    top: clamp(12px, 3vh, 40px);
}

/* Home 2 cinema: keep each bento card whole inside its responsive side panel. */
#zh2CinemaSection .zh2-cinema__side {
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

#zh2CinemaSection .zh2-cinema__bento:not(.zh2-cinema__bento--action) {
    flex: 0 0 auto;
    min-width: 0;
}

@media (min-width: 768px) {
    #zh2CinemaSection .zh2-cinema__bento--action {
        flex: 1 0 auto;
        min-height: 0;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #zh2CinemaSection .zh2-cinema__side {
        right: 20px;
        width: clamp(250px, 32vw, 340px);
        height: min(calc(100svh - 120px), 660px);
        max-height: calc(100svh - 120px);
    }
}

@media (max-width: 767px) {
    #zh2CinemaSection .zh2-cinema__side {
        right: 16px;
        bottom: 12px;
        left: 16px;
        max-height: calc(58svh - 24px);
        gap: 10px;
    }

    #zh2CinemaSection .zh2-cinema__bento--media {
        display: block;
        flex-basis: 140px;
        min-height: 140px;
    }

    #zh2CinemaSection .zh2-cinema__bento--action {
        flex: 0 0 auto;
    }
}

/* Home 2: keep Parent Voices and final CTA intro headings white across themes and viewports. */
#zdTestimonials .zd-testimonials__feature-heading h2,
#zdFinalCta .zd-final-cta__title {
    color: #FAFAF7 !important;
}


/* Keep both testimonial columns in normal flow so they remain aligned together. */
#zdTestimonials .zd-testimonials__feature,
#zdTestimonials .zd-testimonials__marquee-area {
    position: relative;
    top: auto;
    align-self: stretch;
}

@media (max-width: 1023px) {
    #zdTestimonials .zd-testimonials__shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    #zdTestimonials .zd-testimonials__feature,
    #zdTestimonials .zd-testimonials__marquee-area {
        grid-column: 1;
    }

    #zdTestimonials .zd-testimonials__feature {
        min-height: auto;
    }
}

/* Simple, continuous testimonial marquee for Home 2. */
#zdTestimonials {
    --zd-simple-bg: var(--zd-t-bg, #fafaf7);
    --zd-simple-card: var(--zd-t-surface-soft, #f0f0ec);
    --zd-simple-text: var(--zd-t-text, #171717);
    --zd-simple-muted: var(--zd-t-muted, #666);
    --zd-simple-line: var(--zd-t-border, rgba(17, 17, 17, .16));
    --zd-simple-accent: var(--zd-t-red, #e53935);
    overflow: hidden;
    padding: clamp(56px, 7vw, 100px) 0;
    background: var(--zd-simple-bg);
    color: var(--zd-simple-text);
}
#zdTestimonials .zd-simple-testimonials {
    display: block;
    width: min(1320px, calc(100% - 48px));
    margin-inline: auto;
}
.zd-simple-testimonials__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
}
.zd-simple-testimonials__eyebrow {
    margin: 0 0 12px;
    color: var(--zd-simple-accent);
    font: 600 11px/1.4 "Inter", sans-serif;
    letter-spacing: .16em;
}
.zd-simple-testimonials__heading h2 {
    max-width: 780px;
    margin: 0;
    color: var(--zd-simple-text);
    font: 500 clamp(34px, 5vw, 66px)/.98 "Archivo Black", "Inter", sans-serif;
    letter-spacing: -.04em;
}
.zd-simple-testimonials__heading h2 span { color: var(--zd-simple-accent); }
.zd-simple-testimonials__intro {
    max-width: 300px;
    margin: 0 0 5px;
    color: var(--zd-simple-muted);
    font: 400 15px/1.6 "Inter", sans-serif;
}
.zd-simple-testimonials__viewport {
    overflow: hidden;
    padding: 10px 2px 24px;
    direction: ltr;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.zd-simple-testimonials__track {
    display: flex;
    width: max-content;
    gap: 20px;
    direction: ltr;
    animation: zdSimpleTestimonialMarquee 42s linear infinite;
    will-change: transform;
}
.zd-simple-testimonials__track.is-paused { animation-play-state: paused; }
.zd-simple-testimonial {
    flex: 0 0 clamp(280px, 29vw, 360px);
    overflow: hidden;
    border: 1px solid var(--zd-simple-line);
    border-radius: 14px;
    background: var(--zd-simple-card);
    color: var(--zd-simple-text);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}
.zd-simple-testimonial__image {
    position: relative;
    height: clamp(150px, 17vw, 205px);
    overflow: hidden;
    background: #222;
}
.zd-simple-testimonial__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s ease;
}
.zd-simple-testimonial:hover .zd-simple-testimonial__image img { transform: scale(1.05); }
.zd-simple-testimonial__image > span {
    position: absolute;
    inset-inline-start: 14px;
    bottom: 14px;
    padding: 7px 10px;
    border-radius: 4px;
    background: var(--zd-simple-accent);
    color: #fff;
    font: 600 9px/1 "Inter", sans-serif;
    letter-spacing: .08em;
}
.zd-simple-testimonial__body { padding: 20px 22px 22px; }
.zd-simple-testimonial__stars { margin-bottom: 11px; color: var(--zd-simple-accent); font-size: 13px; letter-spacing: .12em; }
.zd-simple-testimonial blockquote {
    min-height: 78px;
    margin: 0 0 20px;
    color: var(--zd-simple-text);
    font: 400 14px/1.65 "Inter", sans-serif;
}
.zd-simple-testimonial__author { display: flex; align-items: center; gap: 11px; }
.zd-simple-testimonial__avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--zd-simple-text);
    color: var(--zd-simple-bg);
    font: 600 10px/1 "Inter", sans-serif;
}
.zd-simple-testimonial__author strong,
.zd-simple-testimonial__author small { display: block; font-family: "Inter", sans-serif; }
.zd-simple-testimonial__author strong { color: var(--zd-simple-text); font-size: 12px; font-weight: 600; }
.zd-simple-testimonial__author small { margin-top: 4px; color: var(--zd-simple-muted); font-size: 10px; }
.zd-simple-testimonials__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--zd-simple-line);
    padding-top: 16px;
    color: var(--zd-simple-muted);
    font: 500 9px/1.4 "Inter", sans-serif;
    letter-spacing: .14em;
}
.zd-simple-testimonials__toggle {
    min-width: 82px;
    padding: 9px 14px;
    border: 1px solid var(--zd-simple-line);
    border-radius: 999px;
    background: transparent;
    color: var(--zd-simple-text);
    font: 500 11px/1 "Inter", sans-serif;
    cursor: pointer;
}
.zd-simple-testimonials__toggle:hover,
.zd-simple-testimonials__toggle:focus-visible { border-color: var(--zd-simple-accent); color: var(--zd-simple-accent); }
@keyframes zdSimpleTestimonialMarquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-50% - 10px), 0, 0); }
}
html[dir="rtl"] #zdTestimonials .zd-simple-testimonials__track,
body.rtl #zdTestimonials .zd-simple-testimonials__track {
    animation-name: zdSimpleTestimonialMarqueeRtl;
}
@keyframes zdSimpleTestimonialMarqueeRtl {
    from { transform: translate3d(calc(-50% - 10px), 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}
html[dir="rtl"] #zdTestimonials .zd-simple-testimonial,
body.rtl #zdTestimonials .zd-simple-testimonial { direction: rtl; }
html[dir="rtl"] #zdTestimonials .zd-simple-testimonial blockquote,
body.rtl #zdTestimonials .zd-simple-testimonial blockquote { direction: ltr; text-align: left; unicode-bidi: plaintext; }
html[dir="rtl"] #zdTestimonials .zd-simple-testimonial__author,
body.rtl #zdTestimonials .zd-simple-testimonial__author { flex-direction: row-reverse; }
html[dir="rtl"] #zdTestimonials .zd-simple-testimonial__author > span:last-child,
body.rtl #zdTestimonials .zd-simple-testimonial__author > span:last-child { direction: ltr; text-align: right; }
@media (max-width: 700px) {
    #zdTestimonials .zd-simple-testimonials { width: calc(100% - 32px); }
    .zd-simple-testimonials__heading { display: block; margin-bottom: 24px; }
    .zd-simple-testimonials__heading h2 { font-size: clamp(34px, 10vw, 48px); }
    .zd-simple-testimonials__intro { margin-top: 14px; }
    .zd-simple-testimonial { flex-basis: min(82vw, 330px); }
    .zd-simple-testimonial__image { height: 165px; }
    .zd-simple-testimonial__body { padding: 17px 18px 19px; }
    .zd-simple-testimonial blockquote { min-height: 90px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .zd-simple-testimonials__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .zd-simple-testimonials__track { animation: none !important; width: max-content; }
    .zd-simple-testimonial__image img { transition: none; }
}

/* Keep student faces fully in frame in testimonial cards. */
.zd-simple-testimonial__image img { object-position: center 24%; }