/* =============================================================
   THE ZONE — 2026 refresh
   Header, homepage sections and class modal.
   Visual direction: image-led, minimal, generous spacing.
============================================================= */

:root {
    --zn-black: #000;
    --zn-ink: #0b0b0b;
    --zn-panel: #111;
    --zn-white: #fff;
    --zn-muted: rgba(255, 255, 255, 0.72);
    --zn-subtle: rgba(255, 255, 255, 0.5);
    --zn-line: rgba(255, 255, 255, 0.14);
    --zn-sand: #e9cba2;
    --zn-radius: 14px;
    --zn-gutter: clamp(16px, 2.2vw, 32px);
    --zn-section: clamp(72px, 9vw, 140px);
    --zn-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --zn-text: 'Barlow', 'Assistant', sans-serif;
    --zn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------
   HEADER
------------------------------------------------------------- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 84px;
    padding: 0 var(--zn-gutter);
    background-color: var(--zn-black);
}

.site-header__logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.site-header__logo img {
    width: 150px;
    height: auto;
}

.site-header__nav {
    flex: 1 1 auto;
    align-items: center;
    gap: clamp(20px, 2.6vw, 44px);
    padding-left: clamp(24px, 4vw, 64px);
}

.top-main-menu a.site-header__link {
    position: relative;
    font-family: var(--zn-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zn-white);
    text-decoration: none;
    padding: 6px 0;
}

.site-header__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--zn-ease);
}

.top-main-menu a.site-header__link:hover,
.top-main-menu a.site-header__link:focus-visible,
.top-main-menu a.site-header__link.is-active {
    color: var(--zn-white);
}

.site-header__link:hover::after,
.site-header__link:focus-visible::after,
.site-header__link.is-active::after {
    transform: scaleX(1);
}

.site-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.top-main-menu a.site-header__cta,
.zn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 26px;
    border: 1px solid var(--zn-white);
    border-radius: 999px;
    background: var(--zn-white);
    color: var(--zn-black);
    font-family: var(--zn-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.top-main-menu a.site-header__cta:hover,
.top-main-menu a.site-header__cta:focus-visible,
.zn-btn:hover,
.zn-btn:focus-visible {
    background: transparent;
    color: var(--zn-white);
}

.zn-btn--ghost {
    background: transparent;
    color: var(--zn-white);
}

.zn-btn--ghost:hover,
.zn-btn--ghost:focus-visible {
    background: var(--zn-white);
    color: var(--zn-black);
}

.zn-btn--dark {
    border-color: var(--zn-black);
    background: var(--zn-black);
    color: var(--zn-white);
}

.zn-btn--dark:hover,
.zn-btn--dark:focus-visible {
    background: transparent;
    color: var(--zn-black);
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.zn-btn:focus-visible {
    outline: 2px solid var(--zn-sand) !important;
    outline-offset: 3px;
}

/* Keep the fixed header beneath an open modal's backdrop */
.modal-open .top-main-menu {
    z-index: 3090;
}

@media (max-width: 991.98px) {
    .site-header {
        height: 72px;
    }

    .site-header__logo img {
        width: 118px;
    }

    /* Below 992px the burger menu carries Join Now */
    .top-main-menu a.site-header__cta {
        display: none;
    }

    #offcanvasMain {
        top: 72px;
    }
}

/* Full nav is visible from 992px, so the burger menu is mobile/tablet only */
@media (min-width: 992px) {
    .site-header .simplar-burger-menu {
        display: none;
    }
}

@media (min-width: 992px) {
    #offcanvasMain {
        top: 84px;
    }
}

/* -------------------------------------------------------------
   SHARED HOMEPAGE PRIMITIVES
------------------------------------------------------------- */
.zn-home {
    background: var(--zn-black);
    color: var(--zn-white);
    font-family: var(--zn-text);
    margin-top: -12px;
}

.zn-home h1,
.zn-home h2,
.zn-home h3 {
    letter-spacing: 0;
}

.zn-eyebrow {
    display: block;
    font-family: var(--zn-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--zn-subtle);
    margin-bottom: 18px;
}

.zn-title {
    font-family: var(--zn-display);
    font-size: clamp(36px, 4.6vw, 64px);
    font-weight: 700;
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--zn-white);
    margin: 0 0 20px;
}

.zn-lead {
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: 300;
    line-height: 1.7;
    color: var(--zn-muted);
    margin: 0;
}

.zn-wrap {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--zn-gutter);
}

.zn-section {
    padding: var(--zn-section) 0;
}

/* -------------------------------------------------------------
   1. HERO
------------------------------------------------------------- */
.zn-hero {
    padding: clamp(16px, 3vw, 48px) var(--zn-gutter) 0;
}

.zn-hero__stage {
    position: relative;
    height: clamp(460px, 64vh, 720px);
    max-width: 1680px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--zn-ink);
}

/* Three slanted panels: left / centre / right */
.zn-hero__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.zn-hero__panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    animation: zn-hero-settle 2.4s var(--zn-ease) forwards;
}

.zn-hero__panel--left {
    left: 0;
    width: 40%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}

.zn-hero__panel--centre {
    left: 32%;
    width: 40%;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

.zn-hero__panel--right {
    left: 64%;
    width: 36%;
    clip-path: polygon(22.2% 0, 100% 0, 100% 100%, 0 100%);
}

.zn-hero__panel--left img { object-position: 30% 30%; }
.zn-hero__panel--centre img { object-position: 55% 25%; animation-delay: 0.12s; }
.zn-hero__panel--right img { object-position: 60% 30%; animation-delay: 0.24s; }

.zn-hero__stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0) 75%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

.zn-hero__headline {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    column-gap: 0.25em;
    margin: 0;
    padding: 0 4%;
    font-family: var(--zn-display);
    font-size: clamp(52px, 8.4vw, 148px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: 0.005em;
    text-align: center;
    text-transform: uppercase;
    color: var(--zn-white);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}

.zn-hero__headline span {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    animation: zn-rise 1s var(--zn-ease) 0.35s forwards;
}

.zn-hero__headline .is-accent {
    color: var(--zn-sand);
    animation-delay: 0.55s;
}

@keyframes zn-hero-settle {
    to { transform: scale(1); }
}

@keyframes zn-rise {
    to { opacity: 1; transform: none; }
}

.zn-intro {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) var(--zn-gutter) 0;
    text-align: center;
}

.zn-intro p {
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 300;
    line-height: 1.75;
    color: var(--zn-muted);
    margin: 0 0 1em;
}

.zn-intro p.zn-intro__lead {
    font-family: var(--zn-display);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--zn-white);
    margin-bottom: 0.9em;
}

@media (max-width: 767.98px) {
    .zn-hero__stage {
        height: min(78vh, 620px);
        border-radius: 0;
    }

    .zn-hero {
        padding-left: 0;
        padding-right: 0;
    }

    .zn-hero__panel--left { width: 44%; clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); }
    .zn-hero__panel--centre { left: 31.7%; width: 44%; clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%); }
    .zn-hero__panel--right { left: 63.4%; width: 36.6%; clip-path: polygon(33.6% 0, 100% 0, 100% 100%, 0 100%); }

    .zn-hero__panel--left img { object-position: 38% 30%; }
    .zn-hero__panel--centre img { object-position: 24% 25%; }
    .zn-hero__panel--right img { object-position: 70% 30%; }

    .zn-hero__headline {
        flex-direction: column;
        font-size: clamp(54px, 16vw, 92px);
    }
}

/* -------------------------------------------------------------
   2. KEY OFFERINGS
------------------------------------------------------------- */
.zn-offers {
    padding: var(--zn-section) 0;
}

.zn-offers__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.zn-offer {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--zn-radius);
    overflow: hidden;
    background: var(--zn-panel);
    color: var(--zn-white);
    text-decoration: none;
    isolation: isolate;
}

.zn-offer img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--zn-ease);
}

.zn-offer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.78) 100%);
    transition: background-color 0.5s ease;
    z-index: 1;
}

.zn-offer__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 20px clamp(24px, 2.4vw, 36px);
    text-align: center;
}

.zn-offer__title {
    font-family: var(--zn-display);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.zn-offer__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--zn-muted);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s var(--zn-ease);
}

a.zn-offer:hover img,
a.zn-offer:focus-visible img {
    transform: scale(1.06);
}

a.zn-offer:hover::after,
a.zn-offer:focus-visible::after {
    background-color: rgba(0, 0, 0, 0.12);
}

a.zn-offer:hover .zn-offer__more,
a.zn-offer:focus-visible .zn-offer__more {
    opacity: 1;
    transform: none;
}

a.zn-offer:focus-visible {
    outline: 2px solid var(--zn-sand);
    outline-offset: 4px;
}

/* Touch devices: show the affordance permanently */
@media (hover: none) {
    .zn-offer__more {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .zn-offers__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .zn-offers__grid {
        grid-template-columns: 1fr;
    }

    .zn-offer {
        aspect-ratio: 5 / 4;
    }

    .zn-offer img {
        object-position: center 30%;
    }
}

/* -------------------------------------------------------------
   3. LOCATION & ENQUIRY (component: enquiry.php)
------------------------------------------------------------- */
.zn-enquiry {
    scroll-margin-top: 90px;
}

.zn-enquiry__map {
    position: relative;
    min-height: 420px;
    background: #1a1a1a;
}

.zn-enquiry__map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: invert(1) grayscale(1);
}

.zn-enquiry__panel {
    background: #f6f7f9;
    color: #141414;
}

.zn-enquiry__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px);
}

.zn-enquiry__title {
    font-size: clamp(32px, 3.6vw, 50px);
    text-align: center;
    color: #141414;
    margin-bottom: 12px;
}

.zn-enquiry__text {
    text-align: center;
    color: #444;
    margin-bottom: 28px;
}

/* -------------------------------------------------------------
   4. INSPIRING CLASSES
------------------------------------------------------------- */
.zn-classes {
    padding: var(--zn-section) 0 0;
}

.zn-classes__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.zn-classes__head .zn-lead {
    max-width: 620px;
}

.zn-classes__hint {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--zn-subtle);
    white-space: nowrap;
}

.zn-class-strip {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zn-class-strip > li {
    flex: 1 1 0;
    min-width: 0;
}

.zn-class-card {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(440px, 40vw, 680px);
    padding: 0;
    border: 0;
    background: var(--zn-panel);
    color: var(--zn-white);
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}

.zn-class-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--zn-ease), filter 0.6s ease;
    filter: brightness(0.62);
}

.zn-class-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.75) 100%);
}

.zn-class-card__title {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding: 12px 22px;
    border: 2px solid transparent;
    font-family: var(--zn-display);
    font-size: clamp(26px, 2.5vw, 40px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    transition: border-color 0.4s ease;
}

.zn-class-card__tag {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: clamp(22px, 2.4vw, 34px);
    z-index: 2;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.zn-class-card__open {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--zn-sand);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.zn-class-card:hover img,
.zn-class-card:focus-visible img {
    transform: scale(1.05);
    filter: brightness(0.8);
}

.zn-class-card:hover .zn-class-card__title,
.zn-class-card:focus-visible .zn-class-card__title {
    border-color: rgba(255, 255, 255, 0.8);
}

.zn-class-card:hover .zn-class-card__open,
.zn-class-card:focus-visible .zn-class-card__open {
    opacity: 1;
}

.zn-class-card:focus-visible {
    outline: 2px solid var(--zn-sand);
    outline-offset: -2px;
}

@media (hover: none) {
    .zn-class-card__open {
        opacity: 1;
    }
}

/* Swipeable strip on tablet / mobile */
@media (max-width: 991.98px) {
    .zn-classes__head {
        grid-template-columns: 1fr;
    }

    .zn-classes__hint {
        display: none;
    }

    .zn-class-strip {
        gap: 10px;
        padding: 0 var(--zn-gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--zn-gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .zn-class-strip::-webkit-scrollbar {
        display: none;
    }

    .zn-class-strip > li {
        flex: 0 0 42%;
        scroll-snap-align: start;
    }

    .zn-class-card {
        height: 520px;
        border-radius: var(--zn-radius);
    }
}

@media (max-width: 575.98px) {
    .zn-class-strip > li {
        flex-basis: 78%;
    }

    .zn-class-card {
        height: 440px;
    }
}

/* Class modal */
.zn-class-modal .modal-dialog {
    max-width: min(1080px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.zn-class-modal .modal-content {
    border: 0;
    border-radius: var(--zn-radius);
    background: var(--zn-ink);
    color: var(--zn-white);
    overflow: hidden;
    font-family: var(--zn-text);
}

.zn-class-modal .modal-body {
    padding: 0;
}

.zn-class-modal__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    min-height: 100%;
}

.zn-class-modal__media {
    position: relative;
    min-height: 260px;
}

.zn-class-modal__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zn-class-modal__content {
    padding: clamp(28px, 4vw, 56px);
}

.zn-class-modal__title {
    font-family: var(--zn-display);
    font-size: clamp(44px, 5vw, 72px);
    font-weight: 800;
    line-height: 0.92;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--zn-white);
}

.zn-class-modal__tagline {
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zn-sand);
    margin-bottom: 28px;
}

.zn-class-modal__content p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--zn-muted);
}

.zn-class-modal__features {
    list-style: none;
    margin: 28px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--zn-line);
    display: grid;
    gap: 16px;
}

.zn-class-modal__features li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--zn-muted);
}

.zn-class-modal__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zn-sand);
}

.zn-class-modal__features strong {
    display: block;
    font-weight: 600;
    color: var(--zn-white);
    margin-bottom: 2px;
}

.zn-class-modal__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 36px;
}

.zn-class-modal__link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zn-white);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.zn-class-modal__link:hover {
    color: var(--zn-sand);
}

.zn-class-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: var(--zn-white);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.zn-class-modal__close:hover {
    background: var(--zn-white);
    color: var(--zn-black);
}

.zn-class-modal__close:focus-visible {
    outline: 2px solid var(--zn-sand) !important;
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .zn-class-modal .modal-dialog {
        max-width: 100%;
        margin: 0;
        min-height: 100%;
    }

    .zn-class-modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    .zn-class-modal .modal-dialog-scrollable {
        height: 100%;
    }

    .zn-class-modal .modal-dialog-scrollable .modal-content {
        max-height: 100%;
    }

    .zn-class-modal__grid {
        grid-template-columns: 1fr;
    }

    .zn-class-modal__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

/* -------------------------------------------------------------
   5. COMPLETE TRAINING ENVIRONMENT
------------------------------------------------------------- */
.zn-gym {
    background: var(--zn-ink);
}

.zn-gym__head {
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vw, 64px);
    text-align: center;
}

.zn-gym__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 14px);
}

.zn-gym__tile {
    aspect-ratio: 5 / 2;
    border-radius: 10px;
    overflow: hidden;
    background: var(--zn-panel);
}

.zn-gym__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--zn-ease);
}

.zn-gym__tile:hover img {
    transform: scale(1.05);
}

.zn-gym__more {
    margin-top: clamp(32px, 4vw, 48px);
    text-align: center;
}

@media (max-width: 991.98px) {
    .zn-gym__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zn-gym__tile {
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 575.98px) {
    .zn-gym__tile {
        aspect-ratio: 1 / 1;
        border-radius: 8px;
    }
}

/* -------------------------------------------------------------
   6. REFORMER PILATES
------------------------------------------------------------- */
.zn-reformer {
    background: var(--zn-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.zn-reformer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    max-width: 1200px;
    margin: 0 auto;
}

.zn-reformer__media {
    aspect-ratio: 6 / 5;
    border-radius: var(--zn-radius);
    overflow: hidden;
}

.zn-reformer__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zn-reformer__body .zn-lead + .zn-lead {
    margin-top: 1em;
}

.zn-reformer__body .zn-btn {
    margin-top: 36px;
}

@media (max-width: 991.98px) {
    .zn-reformer__grid {
        grid-template-columns: 1fr;
    }

    .zn-reformer__media {
        aspect-ratio: 16 / 10;
    }
}

/* -------------------------------------------------------------
   7. BECOME A MEMBER
------------------------------------------------------------- */
.zn-member {
    padding: var(--zn-section) var(--zn-gutter);
}

.zn-member__card {
    position: relative;
    display: block;
    max-width: 1320px;
    height: clamp(420px, 40vw, 600px);
    margin: 0 auto;
    border-radius: var(--zn-radius);
    overflow: hidden;
    isolation: isolate;
}

.zn-member__card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 60%;
    z-index: -1;
}

.zn-member__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0) 75%);
}

.zn-member__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    padding: clamp(28px, 4.5vw, 64px);
}

.zn-member__title {
    font-family: var(--zn-text);
    font-size: clamp(44px, 6vw, 92px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--zn-white);
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 575.98px) {
    .zn-member__card {
        height: 520px;
    }

    .zn-member__card > img {
        object-position: 62% 50%;
    }

    .zn-member__body {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------
   COLLECTIVE (teaser page)
------------------------------------------------------------- */
.zn-collective__media {
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--zn-radius);
    overflow: hidden;
}

.zn-collective__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zn-collective__body {
    max-width: 860px;
    margin: clamp(40px, 5vw, 64px) auto 0;
    text-align: center;
}

.zn-collective__sign {
    margin-top: 32px;
    font-family: var(--zn-display);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------
   RESULTS PAGE (/transformations)
------------------------------------------------------------- */
.zn-results .zn-lead + .zn-lead,
.zn-classpage .zn-lead + .zn-lead,
.zn-gympage .zn-lead + .zn-lead {
    margin-top: 1em;
}

.zn-res-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
}

.zn-res-split--reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.zn-res-media {
    aspect-ratio: 4 / 5;
    border-radius: var(--zn-radius);
    overflow: hidden;
    background: var(--zn-ink);
}

.zn-res-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zn-res-media--sticky {
    position: sticky;
    top: 112px;
}

.zn-res-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}

.zn-res-link {
    display: inline-block;
    margin-top: 28px;
    color: var(--zn-white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--zn-sand);
    padding-bottom: 4px;
}

.zn-res-link:hover,
.zn-res-link:focus-visible {
    color: var(--zn-sand);
}

/* Intro */
.zn-res-intro {
    padding: clamp(48px, 7vw, 112px) 0 var(--zn-section);
}

.zn-res-intro__title {
    font-family: var(--zn-display);
    font-size: clamp(72px, 11vw, 168px);
    font-weight: 800;
    line-height: 0.85;
    text-transform: uppercase;
    color: var(--zn-white);
    margin: 0 0 24px;
}

.zn-res-intro__strap {
    font-family: var(--zn-display);
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--zn-sand);
    margin: 0 0 clamp(32px, 4vw, 56px);
}

.zn-res-intro__lead {
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--zn-white);
    margin: 0 0 1.2em;
}

.zn-res-intro__pull {
    margin: 1.6em 0;
    padding-left: 20px;
    border-left: 2px solid var(--zn-sand);
    font-family: var(--zn-display);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--zn-white);
}

.zn-res-intro__pull + .zn-lead {
    margin-top: 0;
}

/* What's included */
.zn-res-included {
    border-top: 1px solid var(--zn-line);
}

.zn-res-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.zn-res-list li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    padding: 28px 0;
    border-top: 1px solid var(--zn-line);
}

.zn-res-list li:last-child {
    border-bottom: 1px solid var(--zn-line);
}

.zn-res-list__num {
    font-family: var(--zn-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--zn-sand);
    line-height: 1.2;
}

.zn-res-list__title {
    font-family: var(--zn-display);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--zn-white);
    margin: 0 0 10px;
}

.zn-res-list p,
.zn-res-time p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--zn-muted);
    margin: 0;
}

.zn-res-list p + p,
.zn-res-time p + p {
    margin-top: 0.8em;
}

/* Session times */
.zn-res-sessions {
    background: var(--zn-ink);
}

.zn-res-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 0 40px;
}

.zn-res-time {
    padding: clamp(24px, 2.5vw, 36px);
    border: 1px solid var(--zn-line);
    border-radius: var(--zn-radius);
    background: var(--zn-panel);
}

.zn-res-time .zn-eyebrow {
    color: var(--zn-sand);
}

.zn-res-time__slots {
    margin: 0 0 20px;
}

.zn-res-time__slots div + div {
    margin-top: 14px;
}

.zn-res-time__slots dt {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zn-subtle);
}

.zn-res-time__slots dd {
    margin: 2px 0 0;
    font-family: var(--zn-display);
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--zn-white);
}

.zn-res-callout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 5vw, 96px);
    margin-top: var(--zn-section);
    padding-top: clamp(40px, 5vw, 72px);
    border-top: 1px solid var(--zn-line);
}

.zn-res-callout__title {
    font-family: var(--zn-display);
    font-size: clamp(34px, 3.8vw, 56px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--zn-white);
    margin: 0;
}

/* Membership options */
.zn-res-plans__head {
    max-width: 760px;
    margin-bottom: clamp(36px, 4vw, 56px);
}

.zn-res-plans__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zn-plan {
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 2.6vw, 40px);
    border: 1px solid var(--zn-line);
    border-radius: var(--zn-radius);
    background: var(--zn-panel);
    color: var(--zn-white);
}

.zn-plan.is-featured {
    border-color: var(--zn-white);
    background: var(--zn-white);
    color: var(--zn-black);
}

.zn-plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.zn-plan__name {
    font-family: var(--zn-display);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 700;
    text-transform: uppercase;
    color: inherit;
    margin: 0;
}

.zn-plan__star {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--zn-sand);
    color: var(--zn-black);
    font-size: 16px;
}

.zn-plan__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 24px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--zn-line);
}

.zn-plan.is-featured .zn-plan__price {
    border-color: rgba(0, 0, 0, 0.14);
}

.zn-plan__amount {
    font-family: var(--zn-display);
    font-size: clamp(56px, 5vw, 76px);
    font-weight: 800;
    line-height: 0.9;
}

.zn-plan__per {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
}

.zn-plan__intro {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.75;
    margin: 0 0 24px;
}

.zn-plan__features {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.zn-plan__features li {
    position: relative;
    padding: 9px 0 9px 30px;
    font-size: 15px;
    line-height: 1.45;
}

.zn-plan__features li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 13px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--zn-sand);
    border-bottom: 2px solid var(--zn-sand);
    transform: rotate(-45deg);
}

.zn-plan.is-featured .zn-plan__features li::before {
    border-color: var(--zn-black);
}

.zn-plan__features li.is-empty {
    display: none;
}

.zn-plan__features li.is-empty::before {
    content: none;
}

/* Desktop: share row tracks across the three cards so every tick row lines up
   (blank rows are kept so cheaper plans visibly lack the lower items). */
@media (min-width: 992px) {
    @supports (grid-template-rows: subgrid) {
        .zn-res-plans__grid {
            row-gap: 0;
        }

        .zn-res-plans__grid > .zn-plan {
            display: grid;
            /* head, intro, N feature rows, price */
            grid-row: span calc(var(--zn-plan-rows) + 3);
            grid-template-rows: subgrid;
        }

        .zn-res-plans__grid .zn-plan__features {
            display: grid;
            grid-row: span var(--zn-plan-rows);
            grid-template-rows: subgrid;
            align-content: start;
        }

        .zn-res-plans__grid .zn-plan__features li.is-empty {
            display: block;
        }

        .zn-res-plans__grid .zn-plan__intro {
            margin-bottom: 0;
        }

        .zn-res-plans__grid .zn-plan__features {
            margin-top: 24px;
        }

        .zn-res-plans__grid .zn-plan__price {
            align-self: end;
        }

    }
}

/* Class times beneath the pricing cards */
.zn-res-classtimes {
    margin-top: clamp(40px, 5vw, 64px);
    text-align: center;
}

.zn-res-classtimes__title {
    font-family: var(--zn-display);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--zn-white);
    margin: 0 0 28px;
}

.zn-res-classtimes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zn-res-classtimes__grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zn-res-classtimes__icon {
    display: block;
    height: 32px;
    width: auto;
    margin-bottom: 14px;
    font-size: 32px;
    line-height: 1;
    color: var(--zn-sand);
}

.zn-res-classtimes__name {
    font-family: var(--zn-display);
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--zn-white);
}

.zn-res-classtimes__day,
.zn-res-classtimes__time {
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zn-muted);
}

.zn-res-classtimes__day {
    margin-top: 6px;
}

@media (max-width: 575.98px) {
    .zn-res-classtimes__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.zn-res-plans__notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
    list-style: none;
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--zn-subtle);
}

.zn-res-plans__notes li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zn-res-plans__notes li::before {
    font-family: 'bootstrap-icons';
    font-size: 18px;
    line-height: 1;
    color: var(--zn-sand);
}

.zn-res-plans__notes li:nth-child(1)::before {
    content: '\f26a'; /* check-circle-fill */
}

.zn-res-plans__notes li:nth-child(2)::before {
    content: '\f622'; /* x-circle-fill */
}

/* Spaces are limited */
.zn-res-cta {
    padding: 0 0 var(--zn-section);
}

.zn-res-cta__card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    border-radius: var(--zn-radius);
    overflow: hidden;
    background: #f6f7f9;
    color: var(--zn-black);
}

.zn-res-cta__media {
    min-height: 100%;
}

.zn-res-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zn-res-cta__body {
    padding: clamp(32px, 5vw, 80px);
}

.zn-res-cta__body .zn-title {
    color: var(--zn-black);
}

.zn-res-cta__body .zn-eyebrow {
    color: rgba(0, 0, 0, 0.5);
}

.zn-res-cta__body .zn-lead {
    color: rgba(0, 0, 0, 0.72);
}

.zn-res-cta__body .zn-btn {
    border-color: var(--zn-black);
    background: var(--zn-black);
    color: var(--zn-white);
}

.zn-res-cta__body .zn-btn:hover,
.zn-res-cta__body .zn-btn:focus-visible {
    background: transparent;
    color: var(--zn-black);
}

.zn-res-help {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.zn-res-help p {
    font-family: var(--zn-display);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.zn-res-help__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.zn-res-help__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    color: var(--zn-black);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.zn-res-help__links a:hover,
.zn-res-help__links a:focus-visible {
    border-color: var(--zn-black);
    background: #fff;
}

@media (max-width: 991.98px) {
    .zn-res-split,
    .zn-res-split--reverse,
    .zn-res-callout,
    .zn-res-cta__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .zn-res-media--sticky {
        position: relative;
        top: auto;
    }

    .zn-res-media {
        aspect-ratio: 16 / 11;
    }

    /* Keep image first on the intro, after the heading elsewhere */
    .zn-res-intro .zn-res-media {
        order: -1;
    }

    .zn-res-plans__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
    }

    .zn-res-cta__media {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 575.98px) {
    .zn-res-times {
        grid-template-columns: minmax(0, 1fr);
    }

    .zn-res-media {
        aspect-ratio: 4 / 5;
    }

    .zn-res-list li {
        grid-template-columns: 40px minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------
   CLASS PAGES (/circuits, /wod, /weights, /heat, /lift,
   /sweat-and-sculpt, /hyrox) AND CLASSES HUB (/classes)
------------------------------------------------------------- */
.zn-crumbs {
    display: flex;
    gap: 10px;
    margin-bottom: clamp(24px, 3vw, 40px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--zn-subtle);
}

.zn-crumbs a {
    color: var(--zn-subtle);
    text-decoration: none;
}

.zn-crumbs a:hover,
.zn-crumbs a:focus-visible {
    color: var(--zn-white);
}

.zn-crumbs [aria-current] {
    color: var(--zn-white);
}

.zn-classpage__title {
    font-size: clamp(56px, 8.4vw, 132px);
    overflow-wrap: anywhere;
}

.zn-classpage__features {
    border-top: 1px solid var(--zn-line);
}

.zn-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.zn-feature {
    padding-top: 24px;
    border-top: 1px solid var(--zn-sand);
}

.zn-feature .zn-res-list__num {
    display: block;
    margin-bottom: 18px;
}

.zn-feature p,
.zn-res-time .zn-plan__features li {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--zn-muted);
    margin: 0;
}

.zn-classpage__gallery {
    display: grid;
    gap: 16px;
    margin-top: clamp(48px, 6vw, 96px);
}

.zn-classpage__gallery--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zn-classpage__shot {
    aspect-ratio: 21 / 9;
    border-radius: var(--zn-radius);
    overflow: hidden;
    background: var(--zn-ink);
}

.zn-classpage__gallery--2 .zn-classpage__shot {
    aspect-ratio: 4 / 5;
}

.zn-classpage__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zn-classpage__features--side .zn-wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
}

.zn-feature-grid--list {
    grid-template-columns: minmax(0, 1fr);
}

.zn-classpage__features--side .zn-classpage__gallery {
    margin-top: 0;
}

.zn-classpage__features--side .zn-classpage__shot {
    aspect-ratio: 4 / 5;
}

.zn-classpage__extra {
    padding-top: 0;
}

.zn-classpage__extra-head {
    margin-top: 0;
    margin-bottom: clamp(32px, 4vw, 56px);
}

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

.zn-extra-grid--1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
    margin-left: auto;
}

.zn-classpage__outro {
    max-width: 860px;
    margin: 28px 0 0 auto;
}

.zn-classpage__times-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: clamp(28px, 3vw, 44px);
}

.zn-classpage__times-head .zn-title {
    margin: 0;
}

.zn-classpage__times-head .zn-res-link {
    margin-top: 0;
}

.zn-times-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zn-times-grid .zn-eyebrow {
    color: var(--zn-sand);
}

.zn-res-time .zn-times-grid__slot {
    margin: 0;
    font-family: var(--zn-display);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--zn-white);
}

.zn-res-time .zn-times-grid__slot + .zn-times-grid__slot {
    margin-top: 12px;
}

.zn-times-grid__slot span {
    display: block;
    font-family: var(--zn-text);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--zn-subtle);
}

/* Image link tiles: "Explore more classes" strip and /classes grid */
.zn-class-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--zn-radius);
    overflow: hidden;
    background: var(--zn-ink);
    color: var(--zn-white);
    text-decoration: none;
}

.zn-class-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--zn-ease);
}

.zn-class-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
}

.zn-class-tile__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(20px, 2vw, 28px);
}

.zn-class-tile__title {
    font-family: var(--zn-display);
    font-size: clamp(28px, 2.4vw, 38px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.zn-class-tile__summary {
    font-size: 15px;
    line-height: 1.5;
    color: var(--zn-muted);
}

.zn-class-tile__more {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zn-sand);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s var(--zn-ease);
}

.zn-class-tile:hover img,
.zn-class-tile:focus-visible img {
    transform: scale(1.05);
}

.zn-class-tile:hover .zn-class-tile__more,
.zn-class-tile:focus-visible .zn-class-tile__more {
    opacity: 1;
    transform: none;
}

.zn-class-tile:focus-visible {
    outline: 2px solid var(--zn-sand);
    outline-offset: 3px;
}

@media (hover: none) {
    .zn-class-tile__more {
        opacity: 1;
        transform: none;
    }
}

.zn-more {
    border-top: 1px solid var(--zn-line);
}

.zn-more__strip {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0 var(--zn-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--zn-gutter);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.zn-more__strip li {
    flex: 0 0 clamp(220px, 22vw, 320px);
    scroll-snap-align: start;
}

/* Hub */
.zn-hub-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 5vw, 96px);
    align-items: end;
}

.zn-hub-intro__grid .zn-res-intro__title {
    font-size: clamp(56px, 7vw, 112px);
    margin: 0;
}

.zn-hub-intro__grid .zn-res-intro__lead {
    margin: 0;
}

.zn-hub-intro__grid .zn-lead {
    margin-top: 1em;
}

.zn-hub {
    padding-bottom: var(--zn-section);
}

.zn-classes-hub .zn-res-callout {
    margin-top: 0;
}

.zn-hub__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zn-class-tile--hub .zn-class-tile__summary {
    max-width: 34ch;
}

/* -------------------------------------------------------------
   JOIN NOW (/join-now)
------------------------------------------------------------- */
.zn-join-intro {
    padding-bottom: clamp(40px, 5vw, 72px);
}

.zn-join-intro .zn-res-intro__title {
    max-width: 20ch;
    font-size: clamp(44px, 6.4vw, 104px);
    line-height: 0.9;
    margin-bottom: clamp(20px, 2.4vw, 32px);
}

.zn-join-intro .zn-res-intro__lead {
    max-width: 52ch;
    margin: 0;
}

.zn-join-options {
    padding-bottom: var(--zn-section);
}

.zn-join__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zn-join__grid > li {
    display: flex;
}

.zn-join-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 560px;
    border-radius: var(--zn-radius);
    overflow: hidden;
    background: var(--zn-ink);
    color: var(--zn-white);
}

.zn-join-card > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--zn-ease);
}

.zn-join-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.7) 48%, rgba(0, 0, 0, 0.95) 72%);
}

.zn-join-card:hover > img {
    transform: scale(1.05);
}

.zn-join-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 340px;
    padding: clamp(20px, 2vw, 28px);
}

/* Reserve two title lines so summaries and buttons line up across the cards */
.zn-join-card__title {
    display: flex;
    align-items: flex-end;
    min-height: 2em;
    font-family: var(--zn-display);
    font-size: clamp(32px, 2.8vw, 44px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: inherit;
    margin: 0;
}

.zn-join-card__summary {
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.55;
    color: var(--zn-muted);
    margin: 0;
}

.zn-join-card__meta {
    margin: 0;
}

.zn-join-card__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.zn-join-card__actions .zn-btn {
    width: 100%;
}

/* Desktop: share row tracks so title, summary, pills and buttons align across
   all four cards whatever the copy length. */
@media (min-width: 1200px) {
    @supports (grid-template-rows: subgrid) {
        .zn-join__grid {
            /* image space, title, summary, pills, buttons */
            grid-template-rows: minmax(clamp(160px, 18vw, 300px), 1fr) auto auto auto auto;
            row-gap: 12px;
        }

        .zn-join__grid > li {
            display: grid;
            grid-row: span 5;
            grid-template-rows: subgrid;
        }

        .zn-join-card {
            display: grid;
            grid-row: 1 / -1;
            grid-template-rows: subgrid;
            min-height: 0;
            padding: clamp(20px, 2vw, 28px);
        }

        .zn-join-card__body {
            display: contents;
        }

        .zn-join-card__title {
            grid-row: 2;
        }

        .zn-join-card__summary {
            grid-row: 3;
        }

        .zn-join-card__meta {
            grid-row: 4;
            align-self: start;
        }

        .zn-join-card__actions {
            grid-row: 5;
            align-self: end;
            margin-top: 0;
        }
    }
}

@media (max-width: 1199.98px) {
    .zn-join__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .zn-join__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zn-join-card {
        min-height: 480px;
    }

    .zn-join-card__body {
        min-height: 0;
    }

    .zn-join-card__title {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zn-join-card > img {
        transition: none;
    }

    .zn-join-card:hover > img {
        transform: none;
    }
}

/* -------------------------------------------------------------
   GYM PAGE (/gym)
------------------------------------------------------------- */
.zn-gym-hero {
    padding: clamp(16px, 3vw, 48px) var(--zn-gutter) 0;
}

.zn-gym-hero__frame {
    position: relative;
    max-width: 1680px;
    height: clamp(420px, 72vh, 780px);
    margin: 0 auto;
    border-radius: var(--zn-radius);
    overflow: hidden;
    background: var(--zn-ink);
}

.zn-gym-hero__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zn-gym-hero__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.7) 100%);
}

.zn-gym-hero__title {
    position: absolute;
    left: clamp(20px, 3vw, 48px);
    bottom: clamp(12px, 2vw, 32px);
    z-index: 1;
    margin: 0;
    font-family: var(--zn-display);
    font-size: clamp(88px, 16vw, 260px);
    font-weight: 800;
    line-height: 0.82;
    text-transform: uppercase;
    color: var(--zn-white);
}

.zn-gym-intro .zn-hub-intro__grid {
    align-items: start;
}

.zn-gym-intro .zn-res-callout__title {
    margin: 0;
}

.zn-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: clamp(48px, 6vw, 88px) 0 0;
}

.zn-stats div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 20px;
    border-top: 1px solid var(--zn-line);
}

.zn-stats dd {
    margin: 0;
    font-family: var(--zn-display);
    font-size: clamp(44px, 5vw, 76px);
    font-weight: 800;
    line-height: 0.95;
    color: var(--zn-sand);
}

.zn-stats dt {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zn-muted);
}

.zn-zone-nav {
    position: sticky;
    top: 72px;
    transition: top 0.3s ease-in-out;
    z-index: 20;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--zn-line);
    border-bottom: 1px solid var(--zn-line);
}

@media (min-width: 992px) {
    .zn-zone-nav {
        top: 84px;
    }
}

.header-hidden .zn-zone-nav {
    top: 0;
}

.zn-zone-nav__inner {
    display: flex;
    gap: 8px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 12px var(--zn-gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.zn-zone-nav__inner::-webkit-scrollbar {
    display: none;
}

.zn-zone-nav a {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid var(--zn-line);
    border-radius: 999px;
    color: var(--zn-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.zn-zone-nav a:hover,
.zn-zone-nav a:focus-visible {
    border-color: var(--zn-white);
    background: var(--zn-white);
    color: var(--zn-black);
}

.zn-zone {
    scroll-margin-top: 150px;
}

.zn-zone--alt {
    background: var(--zn-ink);
}

.zn-zone__head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(20px, 5vw, 96px);
    margin-bottom: clamp(32px, 4vw, 56px);
}

.zn-zone__head .zn-res-list__num {
    display: block;
    margin-bottom: 12px;
}

.zn-zone__head .zn-title {
    margin-bottom: 12px;
}

.zn-zone__strap {
    margin: 0;
    font-family: var(--zn-display);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--zn-sand);
}

.zn-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.zn-tags li {
    padding: 8px 14px;
    border: 1px solid var(--zn-line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--zn-white);
}

.zn-zone__list {
    margin: 20px 0 0;
}

.zn-zone__list li {
    color: var(--zn-muted);
}

.zn-bento {
    display: grid;
    gap: 16px;
}

.zn-bento__item {
    position: relative;
    min-height: 0;
    border-radius: var(--zn-radius);
    overflow: hidden;
    background: var(--zn-panel);
}

.zn-bento__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--zn-ease);
}

.zn-bento__item:hover img {
    transform: scale(1.03);
}

.zn-bento--1 .zn-bento__item {
    aspect-ratio: 21 / 9;
}

.zn-bento--2 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    height: clamp(320px, 36vw, 560px);
}

.zn-bento--3 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(420px, 44vw, 660px);
}

.zn-bento--3 .zn-bento__item:first-child {
    grid-row: span 2;
}

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

.zn-bento--4 .zn-bento__item {
    aspect-ratio: 3 / 4;
}

.zn-bento--5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(440px, 46vw, 700px);
}

.zn-bento--5 .zn-bento__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 1199.98px) {
    .zn-feature-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .zn-feature-grid,
    .zn-extra-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zn-feature-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zn-hub-intro__grid,
    .zn-zone__head,
    .zn-classpage__features--side .zn-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .zn-hub__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zn-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    .zn-bento--2,
    .zn-bento--3,
    .zn-bento--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        height: auto;
    }

    .zn-bento--2 .zn-bento__item,
    .zn-bento--3 .zn-bento__item,
    .zn-bento--5 .zn-bento__item {
        aspect-ratio: 4 / 3;
    }

    .zn-bento--3 .zn-bento__item:first-child,
    .zn-bento--5 .zn-bento__item:first-child {
        grid-column: span 2;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }

    .zn-bento--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .zn-feature-grid--4,
    .zn-hub__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zn-class-tile--hub {
        aspect-ratio: 5 / 4;
    }

    .zn-classpage__gallery--2 .zn-classpage__shot {
        aspect-ratio: 3 / 4;
    }

    .zn-classpage__shot {
        aspect-ratio: 4 / 3;
    }

    .zn-bento--1 .zn-bento__item {
        aspect-ratio: 4 / 3;
    }

    .zn-bento--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .zn-more__strip li {
        flex-basis: 70%;
    }
}

/* -------------------------------------------------------------
   STUDIO TIMETABLE (components/timetable.php)
   Card colours come from each type in templates/data/timetable.php
   via --tt-bg / --tt-fg / --tt-border.
------------------------------------------------------------- */
.zn-tt {
    border-top: 1px solid var(--zn-line);
}

.zn-tt__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: clamp(28px, 3vw, 44px);
}

.zn-tt__head .zn-title {
    margin: 0;
}

.zn-tt__key {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zn-muted);
}

.zn-tt__key li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.zn-tt__swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tt-bg);
    border: 2px solid var(--tt-border);
}

.zn-tt__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto repeat(var(--tt-rows), auto);
    column-gap: 8px;
}

.zn-tt__day {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    min-width: 0;
}

.zn-tt__dayname {
    margin: 0 0 8px;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--zn-white);
    color: var(--zn-black);
    font-family: var(--zn-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.zn-tt__period {
    padding-bottom: 8px;
}

.zn-tt__period + .zn-tt__period:not(.is-empty) {
    padding-top: 16px;
}

.zn-tt__periodname {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.zn-tt__period ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zn-tt__session {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 11px;
    border: 1px solid var(--tt-border);
    border-radius: 10px;
    background: var(--tt-bg);
    color: var(--tt-fg);
}

.zn-tt__time {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.zn-tt__name {
    margin: 2px 0 3px;
    font-family: var(--zn-display);
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

a.zn-tt__name {
    align-self: flex-start;
    justify-self: start;
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-size: 0 2px;
    background-repeat: no-repeat;
    transition: background-size 0.3s var(--zn-ease);
}

a.zn-tt__name:hover,
a.zn-tt__name:focus-visible {
    background-size: 100% 2px;
}

a.zn-tt__name:focus-visible {
    outline: 2px solid var(--zn-sand);
    outline-offset: 2px;
}

.zn-timetable-page__intro {
    padding-bottom: 0;
}

.zn-timetable-page .zn-tt {
    border-top: 0;
    padding-top: clamp(40px, 5vw, 72px);
}

.zn-tt--untitled .zn-tt__head {
    justify-content: flex-start;
}

.zn-tt__coach {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}

.zn-tt__note {
    margin: 24px 0 0;
    font-size: 14px;
    color: var(--zn-subtle);
}

.zn-tt__note a {
    color: var(--zn-white);
    text-decoration: none;
    border-bottom: 1px solid var(--zn-sand);
}

.zn-tt__tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 20px;
}

.zn-tt__tabs[hidden] {
    display: none;
}

.zn-tt__tab {
    padding: 12px 0;
    border: 1px solid var(--zn-line);
    border-radius: 999px;
    background: transparent;
    color: var(--zn-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.zn-tt__tab[aria-selected="true"] {
    border-color: var(--zn-white);
    background: var(--zn-white);
    color: var(--zn-black);
}

.zn-tt__tab:focus-visible {
    outline: 2px solid var(--zn-sand);
    outline-offset: 2px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .zn-tt__dayname {
        font-size: 15px;
        padding: 10px 4px;
    }

    .zn-tt__session {
        padding: 8px 9px 9px;
    }

    .zn-tt__time {
        font-size: 11px;
    }
}

@media (max-width: 991.98px) {
    .zn-tt__grid {
        display: block;
    }

    .zn-tt__day + .zn-tt__day {
        margin-top: 32px;
    }

    .zn-tt.is-tabbed .zn-tt__day {
        display: none;
    }

    .zn-tt.is-tabbed .zn-tt__day.is-active {
        display: block;
        margin-top: 0;
    }

    .zn-tt.is-tabbed .zn-tt__dayname {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .zn-tt__period.is-empty {
        display: none;
    }

    .zn-tt__period + .zn-tt__period:not(.is-empty) {
        padding-top: 12px;
    }

    .zn-tt__periodname {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        margin: 0 0 10px;
        font-family: var(--zn-text);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--zn-subtle);
    }

    .zn-tt__session {
        display: grid;
        grid-template-columns: 9.5em minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
    }

    .zn-tt__name {
        margin: 0;
        font-size: 22px;
    }
}

@media (max-width: 420px) {
    .zn-tt__session {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 2px;
    }

    .zn-tt__time {
        grid-column: 1 / -1;
    }

    .zn-tt__tab {
        font-size: 11px;
        letter-spacing: 0.06em;
    }
}

/* -------------------------------------------------------------
   MOTION PREFERENCES
------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .zn-hero__panel img,
    .zn-hero__headline span {
        animation: none;
        transform: none;
        opacity: 1;
    }

    .zn-offer img,
    .zn-class-card img,
    .zn-class-tile img,
    .zn-bento__item img,
    .zn-gym__tile img {
        transition: none;
    }
}