@font-face {
    font-family: "Classica-Book";
    src: url("../fonts/Classica-Book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Classica-Bold";
    src: url("../fonts/Classica-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Metropolis-Regular";
    src: url("../fonts/Metropolis-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   FOUNDATION — design tokens
   Mobile-first. Legacy --color-* / --font-size-* names below are kept as
   aliases so the existing 800 lines of component CSS keep working unchanged.
   ========================================================================== */

:root {
    /* --- Palette ------------------------------------------------------- */
    --c-forest: #233030;
    --c-forest-800: #1b2525;
    --c-forest-600: #2e3d3d;
    --c-teal: #415e60;
    --c-teal-700: #354d4f;
    --c-teal-300: #6d8a8b;
    --c-sand: #e0d7cf;
    --c-sand-dim: #b9aea4;
    --c-brass: #c2a878;
    --c-brass-bright: #d8bd8a;
    --c-white: #ffffff;

    /* --- Semantic roles ------------------------------------------------ */
    --bg-base: var(--c-forest);
    --bg-raised: var(--c-forest-600);
    --bg-accent: var(--c-teal);
    --fg-default: var(--c-sand);
    --fg-muted: var(--c-sand-dim);
    --fg-inverse: var(--c-forest);
    --border-subtle: rgba(224, 215, 207, 0.16);
    --border-strong: rgba(224, 215, 207, 0.34);
    --focus-ring: var(--c-brass-bright);

    /* --- Type ramp (fluid, mobile-first) -------------------------------- */
    --step-xs: 0.78rem;
    --step-sm: 0.875rem;
    --step-md: 1rem;
    --step-lg: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
    --step-xl: clamp(1.375rem, 1.18rem + 0.95vw, 2rem);
    --step-2xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.9rem);
    --step-3xl: clamp(1.95rem, 1.45rem + 2.6vw, 4rem);

    --leading-tight: 1.12;
    --leading-snug: 1.3;
    --leading-normal: 1.65;

    --tracking-tight: 0.01em;
    --tracking-normal: 0.02em;
    --tracking-wide: 0.14em;
    --tracking-widest: 0.26em;

    --font-heading: "Classica-Book", Georgia, serif;
    --font-heading-bold: "Classica-Bold", Georgia, serif;
    --font-body: "Metropolis-Regular", system-ui, sans-serif;

    /* --- Space scale (4px base) ----------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --section-y: clamp(3rem, 2rem + 5vw, 7rem);
    --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

    /* --- Surface ---------------------------------------------------------*/
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.6);

    /* --- Motion ---------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;
    --dur-base: 260ms;
    --dur-slow: 620ms;

    /* --- Layout ---------------------------------------------------------- */
    --header-h: 68px;
    --tapsize: 44px;

    /* --- Legacy aliases (do not remove; older rules depend on these) ----- */
    --color-primary-dark: var(--c-forest);
    --color-primary-light: var(--c-teal);
    --text-color-dark: var(--c-forest);
    --text-color-light: #e0e0e0;
    --text-color-light-2: var(--c-sand);
    --font-size-title: var(--step-2xl);
    --font-size-bodyLarger2x: var(--step-xl);
    --font-size-bodyLarger: var(--step-lg);
    --font-size-medium: var(--step-lg);
    --font-size-body: var(--step-md);
    --font-size-small: var(--step-sm);
    --font-size-smaller: var(--step-xs);
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
    margin: 0;
    background-color: var(--bg-base);
    color: var(--fg-default);
    font-family: var(--font-body);
    font-size: var(--step-md);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--sp-4);
}

p {
    margin: 0 0 var(--sp-4);
    max-width: 68ch;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--dur-fast) var(--ease-out);
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Legacy: many older rules assume img fills its container. */
.swiper img,
.card img,
#main-home img,
#news img {
    width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Respect the OS setting. Also the safety net for the reveal system below:
   if JS never runs, content must still be visible. */
@media (prefers-reduced-motion: reduce) {

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

/* ==========================================================================
   SCROLL REVEAL — replaces WOW.js
   Content is visible by default; only opts into hiding once JS confirms it
   can animate. A dead script can no longer leave a blank section.
   ========================================================================== */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

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

    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

.desktop-w {
    width: 50%;
}

.typing {
    width: 70ch;
    text-wrap: nowrap;
    overflow: hidden;
    animation: typing 3s steps(70) infinite alternate-reverse;
}

@keyframes typing {
    from {
        width: 0ch;
    }
}

/* OVERLAY */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.85;
    z-index: 9999;
    display: block;
}

.overlay-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 3rem;
    z-index: 10000;
}

/* OVERLAY */

/* Text */
.title {
    font-size: var(--font-size-title);
    font-weight: bold;
    font-family: var(--font-heading);
}

.subtitle {
    font-size: var(--font-size-small);
    font-family: var(--font-heading);
}

.text {
    font-size: var(--font-size-body);
}

.text.small {
    font-size: var(--font-size-smaller);
}

.text.medium {
    font-size: var(--font-size-medium);
}

.text.large {
    font-size: var(--font-size-bodyLarger);
    font-family: "Classica-Bold", sans-serif;
}

.text.large2x {
    font-size: var(--font-size-bodyLarger2x);
    font-family: "Classica-Bold", sans-serif;
}

.bold {
    font-weight: bold;
}

.text-light {
    color: var(--text-color-light);
}

.text-dark {
    color: var(--color-primary-dark);
}

.text-red {
    color: red;
}

.justified {
    text-align: justify;
    text-justify: inter-word;
}

/* Text */

/* Button */
.button-main {
    background-color: var(--color-primary-light);
    color: var(--text-color-light-2);
    padding: 1rem 1.5rem;
    display: inline-block;
    margin-top: 1rem;
}

.button-main:hover {
    background-color: var(--text-color-light);
    color: var(--color-primary-light);
    border: 1px solid var(--color-primary-light);
}

/* Button */

/* Navbar */
.navbar {
    background-color: var(--color-primary-dark);
}

.nav-item a {
    font-family: "Classica-Bold", sans-serif;
    color: var(--text-color-light-2) !important;
}

.nav-item a:hover {
    color: var(--color-primary-light) !important;
}

.dropdown-menu {
    background-color: var(--color-primary-dark);
}

.dropdown-item:hover {
    color: var(--color-primary-light) !important;
}

.nav-logo {
    width: 15rem;
}

.navbar-nav {
    display: flex;
    gap: 1.5rem;
}

.dropdown:hover .dropdown-menu {
    font-weight: bold;
    display: block;
}

.dropdown-menu {
    margin-top: 0;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/* Navbar */

/* Floating Button */

/* One rule, not two. This was a legacy block plus a later override that
   switched most of it back off, so the values that actually applied were
   split across 1400 lines. */
.whatsapp-float {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 52px;
    height: 52px;
    bottom: 18px;
    right: 18px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    box-shadow: var(--shadow-md);
    z-index: 100;
    transition: transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

/* A ring pinging outward, rather than moving the button itself: the tap
   target stays exactly where a thumb left it and nothing reflows. The hold
   at the end of the cycle is the gap between pings, so it reads as an
   occasional nudge instead of a strobe next to the copy. */
.whatsapp-float::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background-color: #25d366;
    /* Not --ease-out. That curve is tuned for snappy UI transitions and
       throws the ring to full size in the first fifth of the cycle, which
       reads as a flicker. This one expands it evenly. */
    animation: kvPing 3.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: scale(1.06);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}

/* Already engaged, so stop asking for attention. */
.whatsapp-float:hover::before,
.whatsapp-float:focus-visible::before {
    animation-play-state: paused;
}

@keyframes kvPing {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    65%,
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* Floating Button */

/* Main Home */

#main-home {
    background-color: var(--color-primary-light);
}

.fitnessSwiper .swiper-slide img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Main Home */

/* Fitness Home */

#fitness-home {
    background-color: var(--color-primary-light);
}

.mark-logo {
    width: 10rem;
}

.title-logo {
    width: 30rem;
}

#bannerVideo {
    width: 25%;
    height: auto;
}

.swiper {
    width: 100%;
}

.swiper-pagination {
    position: unset !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: var(--text-color-light-2);
    border: 1px solid var(--color-primary-dark);
    width: 12px;
    height: 12px;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: var(--color-primary-dark);
    border: 1px solid var(--text-color-light-2);
}

.spaces img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Tabs */

.tabs {
    margin-bottom: 2rem;
    text-align: center;
}

.tab {
    padding: 0 1rem;
    cursor: pointer;
    background-color: transparent;
    opacity: 0.5;
    border: none;
}

.tab:hover {
    /* font-size: larger; */
    color: var(--color-primary-dark);
}

.tab.active {
    opacity: 1;
    /* font-weight: 500; */
    /* font-size: larger; */
    font-family: "Classica-Bold", sans-serif;
}

.grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.grid .grid-item {
    /* width: 100%; */
    position: relative;
    overflow: hidden;
    /* width: calc(50% - 8px); */
}

/* Tabs */

/* Schedule */

.schedule-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 1rem 5rem;
}

#scheduleInfo {
    padding: 0 16rem;
}

.schedule-card {
    padding: 2rem 2rem;
    background-color: var(--color-primary-dark);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .text.large {
        letter-spacing: 1px !important;
    }
}

.schedule-card .coach {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 10px;
}

.circle {
    width: 44px;
    /* Adjust size as needed */
    height: 44px;
    /* Adjust size as needed */
    border-radius: 50%;
    overflow: hidden;
    margin-left: 1rem;
    cursor: pointer;
}

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

/* Schedule */

/* Pricing */
.membership .swiper-slide {
    display: flex;
    flex-direction: column;
}

.membership .swiper-slide .schedule-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--color-primary-dark);
    border-radius: 4px;
    padding: 0 40px 50px;
    margin-top: 66px;
    position: relative;
    z-index: 0;
    height: 90%;
}

.pricing-card_icon {
    display: inline-block;
    height: 141px;
    width: 134px;
    line-height: 134px;
    transform: translateY(-66px);
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: -46px;
}

.pricing-card_icon:before,
.pricing-card_icon:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    background: transparent;
    width: 141px;
    height: 134px;
    z-index: -1;
    transform: skewX(-11deg);
    border-radius: 4px;
}

.pricing-card_icon:after {
    background: var(--text-color-light-2);
    width: 115px;
    height: 110px;
    top: 11px;
    left: 13px;
}

.pricing-card_icon img {
    transition: 0.4s;
}

.pricing-card_title {
    transition: 0.4s;
}

.pricing-card_price {
    border-bottom: 1px solid var(--text-color-light-2);
    padding-bottom: 2rem;
    transition: 0.4s;
}

.pricing-card_content {}

.checklist ul {
    padding-left: 0;
    list-style: none;
    text-align: left;
    margin-bottom: 0;
}

.pricing-card .checklist {
    margin-bottom: 35px;
}

.pricing-card .checklist li {
    font-size: 16px;
    color: var(--text-color-dark);
    font-weight: 400;
}

.pricing-card .checklist li:not(:last-child) {
    margin-bottom: 7px;
}

.pricing-card .checklist li i,
.pricing-card .checklist li svg {
    color: var(--color-primary-dark);
}

.pricing-card.pricing-card_active,
.pricing-card:hover {
    background: var(--text-color-light-2);
}

.pricing-card.pricing-card_active .pricing-card_icon:before,
.pricing-card:hover .pricing-card_icon:before {
    background: var(--color-primary-light);
}

.pricing-card.pricing-card_active .pricing-card_icon:after,
.pricing-card:hover .pricing-card_icon:after {
    background: var(--color-primary-dark);
}

.pricing-card.pricing-card_active .pricing-card_icon img,
.pricing-card:hover .pricing-card_icon .icon1 {
    transform: rotateY(180deg);
}

.pricing-card.pricing-card_active .pricing-card_icon img,
.pricing-card:hover .pricing-card_icon .icon2 {
    transform: rotateY(180deg);
}

.pricing-card.pricing-card_active .pricing-card_icon img,
.pricing-card:hover .pricing-card_icon .icon3 {
    transform: rotateY(180deg);
}

.pricing-card.pricing-card_active .pricing-card_price,
.pricing-card:hover .pricing-card_price {
    border-color: var(--color-primary-dark);
}

.pricing-card.pricing-card_active .text,
.pricing-card:hover .text {
    color: var(--color-primary-dark);
}

.pricing-card.pricing-card_active .text,
.pricing-card:hover .subtitle {
    color: var(--color-primary-dark);
}

.pricing-card.pricing-card_active .checklist li i,
.pricing-card:hover .checklist li i {
    color: var(--color-primary-dark) !important;
}

.btn {
    position: relative;
    z-index: 2;
    vertical-align: middle;
    display: inline-block;
    border: none;
    text-align: center;
    background-color: transparent;
    color: var(--text-color-light-2);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 18.5px 35px 20.5px;
}

.btn::before {
    position: absolute;
    content: "";
    left: 3px;
    top: 0;
    width: 97%;
    height: 100%;
    background: var(--color-primary-light);
    border: none;
    z-index: -1;
    transition: 0.4s;
    border-radius: 10px;
    transform: skewX(-10deg);
}

.btn:focus,
.btn:hover,
.btn:active {
    color: var(--text-color-light-2);
    box-shadow: none;
}

.btn:focus:before,
.btn:hover:before,
.btn:active:before {
    background: var(--black-color);
    width: 97%;
    transform: skewX(10deg);
}

.btn.style2:hover {
    color: var(--text-color-light-2);
}

.schedule-card>.btn.style2:hover {
    color: var(--color-primary-dark);
}

.btn.style2:hover:before {
    background-color: var(--color-primary-dark);
}

.schedule-card>.btn.style2:hover:before {
    background-color: var(--text-color-light-2);
}

/* Pricing */

/* Coaches */

/* .coaches-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 1rem;
} */

.coaches-container {
    /* padding: 1rem 8rem; */
}

/* .coaches-card {
    padding: 2rem 2rem;
    background-color: var(--color-primary-dark);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} */
.coaches-card {
    width: 75%;
    height: 7rem;
    padding: 1rem 1rem;
    background-color: var(--color-primary-dark);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.coach-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    /* margin-left: 1rem; */
}

.arrow {
    border: solid var(--text-color-light-2);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    margin-right: 5px;
}

.right {
    transform: rotate(-45deg);
}

.btn-conteiner {
    display: flex;
    justify-content: center;
    --color-text: var(--text-color-light-2);
    --color-background: var(--color-primary-light);
    --color-outline: #e0d7cf80;
    --color-shadow: #00000080;
}

.btn-content {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--color-text);
    background: var(--color-background);
    transition: 1s;
    box-shadow: 0 0 0.2em 0 var(--color-background);
}

.btn-content:hover,
.btn-content:focus {
    transition: 0.5s;
    -webkit-animation: btn-content 1s;
    animation: btn-content 1s;
    outline: 0.1em solid transparent;
    outline-offset: 0.2em;
    box-shadow: 0 0 0.4em 0 var(--color-background);
}

.btn-content .icon-arrow {
    transition: 0.5s;
    margin-right: 0px;
    transform: scale(0.6);
}

.btn-content:hover .icon-arrow {
    transition: 0.5s;
    margin-right: 15px;
}

.icon-arrow {
    /* width: 20px; */
    margin-left: 15px;
    position: relative;
    /* top: 6%; */
}

/* SVG */
#arrow-icon-one {
    transition: 0.4s;
    transform: translateX(-60%);
}

#arrow-icon-two {
    transition: 0.5s;
    transform: translateX(-30%);
}

.btn-content:hover #arrow-icon-three {
    animation: color_anim 1s infinite 0.2s;
}

.btn-content:hover #arrow-icon-one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
}

.btn-content:hover #arrow-icon-two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */
@keyframes color_anim {
    0% {
        fill: white;
    }

    50% {
        fill: var(--color-background);
    }

    100% {
        fill: var(--text-color-light-2);
    }
}

/* Button animations */
@-webkit-keyframes btn-content {
    0% {
        outline: 0.2em solid var(--color-background);
        outline-offset: 0;
    }
}

@keyframes btn-content {
    0% {
        outline: 0.2em solid var(--color-background);
        outline-offset: 0;
    }
}

/* Coaches */

/* Fitness Home */

/* Space Detail */

#space-detail {
    background-color: var(--color-primary-light);
}

/* Space Detail */

/* Coach Detail */

#coach-detail {
    background-color: var(--color-primary-light);
}

/* Coach Detail */

/* News */

#news {
    background-color: var(--color-primary-light);
}

.newsSwiper img {
    width: 50%;
    border: 6px solid var(--color-primary-dark);
}

#newsImage {
    width: 30%;
}

/* News */

/* Footer */

#footer {
    background-color: var(--color-primary-dark);
}

.footer-logo {
    width: 12rem;
}

/* Footer */
/* ==========================================================================
   ==========================================================================
   KV COMPONENTS — 2026 revamp
   Mobile-first. Base rules target phones; min-width queries scale up.
   Namespaced .kv-* so nothing here collides with the legacy rules above.
   ==========================================================================
   ========================================================================== */

.kv-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --- Section shell ------------------------------------------------------ */

.kv-section {
    padding-block: var(--section-y);
    background-color: var(--bg-base);
}

.kv-section--raised {
    background-color: var(--bg-accent);
}

.kv-section__head {
    max-width: 46rem;
    margin-bottom: var(--sp-6);
}

/* A caveat under a section head. Quieter than the lede, because it
   qualifies what is below rather than introducing it. */
.kv-note {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

.kv-note i {
    color: var(--c-brass);
}

.kv-note a {
    color: var(--c-sand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kv-note a:hover,
.kv-note a:focus-visible {
    color: var(--fg-default);
}

.kv-section__title {
    font-family: var(--font-heading-bold);
    font-size: var(--step-2xl);
    margin: 0 0 var(--sp-3);
}

.kv-section__lede {
    font-size: var(--step-lg);
    color: var(--fg-muted);
    margin: 0;
}

.kv-section__foot {
    margin: var(--sp-6) 0 0;
}

.kv-eyebrow {
    font-family: var(--font-body);
    font-size: var(--step-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--c-brass);
    margin: 0 0 var(--sp-3);
}

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

.kv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tapsize);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--step-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

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

.kv-btn--primary {
    background-color: var(--c-sand);
    color: var(--c-forest);
    border-color: var(--c-sand);
}

.kv-btn--primary:hover {
    background-color: var(--c-brass-bright);
    border-color: var(--c-brass-bright);
    color: var(--c-forest);
}

.kv-btn--outline {
    background-color: transparent;
    color: var(--fg-default);
    border-color: var(--border-strong);
}

.kv-btn--outline:hover {
    border-color: var(--c-sand);
    background-color: rgba(224, 215, 207, 0.08);
}

.kv-btn--ghost {
    background-color: rgba(35, 48, 48, 0.4);
    color: var(--fg-default);
    border-color: var(--border-strong);
    backdrop-filter: blur(6px);
}

.kv-btn--ghost:hover {
    background-color: rgba(35, 48, 48, 0.7);
    border-color: var(--c-sand);
}

.kv-btn--block {
    width: 100%;
    margin-top: auto;
}

.kv-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--step-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--c-brass-bright);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.kv-link i {
    transition: transform var(--dur-fast) var(--ease-out);
}

.kv-link:hover {
    color: var(--c-sand);
    border-bottom-color: currentColor;
}

.kv-link:hover i {
    transform: translateX(3px);
}

/* --- Hero --------------------------------------------------------------- */

.kv-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Full viewport on a phone, less the sticky nav above it. The nav sits in
       normal flow, so a plain 100svh makes the hero overhang the fold by the
       height of the nav and takes the scroll arrow with it.

       svh, not vh: vh is the tallest the viewport ever gets, so while the
       browser chrome is showing, vh would push the arrow off screen too. */
    min-height: calc(100svh - var(--header-h));
    /* Top padding is deliberately small. The copy is bottom-aligned, so on a
       tall phone this space is never used and the value is invisible; on a
       short one (an SE at 667) it is the headroom that stops the copy pushing
       the hero past the fold and taking the scroll arrow with it. The bottom
       value stays generous because that is the arrow's bed. */
    padding: var(--sp-5) 0 var(--sp-9);
    overflow: hidden;
    background-color: var(--c-forest-800);
    isolation: isolate;
}

.kv-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Weighted to the bottom, where the copy sits, and nearly clear at the top so
   the jungle through the window survives. The photo is already a dark interior
   lit through bright glass, so it needs far less help than a bright one would:
   an even wash turns the whole hero black. */
.kv-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top,
            rgba(20, 28, 28, 0.94) 0%,
            rgba(20, 28, 28, 0.86) 28%,
            rgba(20, 28, 28, 0.64) 52%,
            rgba(20, 28, 28, 0.34) 74%,
            rgba(20, 28, 28, 0.24) 100%);
}

.kv-hero__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.kv-hero__title {
    font-family: var(--font-heading-bold);
    font-size: var(--step-3xl);
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
}

.kv-hero__lede {
    font-size: var(--step-lg);
    color: var(--fg-muted);
    max-width: 34rem;
    margin: 0 0 var(--sp-6);
}

.kv-hero__actions,
.kv-pagehead__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.kv-hero__meta {
    margin: var(--sp-5) 0 0;
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

.kv-hero__meta strong {
    color: var(--fg-default);
}

/* On a full-viewport hero this is the only thing telling a phone user there
   is more below, so it gets a ring to stand off the photo rather than being
   a bare chevron lost against the greenery. */
.kv-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--sp-4);
    translate: -50% 0;
    width: var(--tapsize);
    height: var(--tapsize);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(224, 215, 207, 0.32);
    background: rgba(27, 37, 37, 0.3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--fg-default);
    font-size: 0.875rem;
    animation: kvNudge 2.6s var(--ease-out) infinite;
    transition: border-color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out);
}

.kv-hero__scroll:hover,
.kv-hero__scroll:focus-visible {
    border-color: rgba(224, 215, 207, 0.7);
    background: rgba(27, 37, 37, 0.55);
}

/* Below this the copy alone is taller than the viewport, so the hero cannot
   fill the screen and the arrow would sit under the fold. Nothing is lost:
   a hero that is already cut off announces the scroll by itself. Landscape
   phones land here too. */
@media (max-height: 640px) {
    .kv-hero__scroll {
        display: none;
    }
}

/* The ring drifts down and dims on the way, so it reads as "keep going"
   rather than as a button twitching in place. */
@keyframes kvNudge {

    0% {
        transform: translateY(0);
        opacity: 0.75;
    }

    45% {
        transform: translateY(8px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 0.75;
    }
}

/* --- Quick facts -------------------------------------------------------- */

.kv-facts {
    background-color: var(--c-forest-600);
    border-block: 1px solid var(--border-subtle);
    padding-block: var(--sp-5);
}

.kv-facts__grid {
    display: grid;
    gap: var(--sp-4);
}

.kv-fact {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

.kv-fact i {
    color: var(--c-brass);
    font-size: 1.1em;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.kv-fact strong {
    color: var(--fg-default);
    font-weight: 600;
}

/* --- Why ---------------------------------------------------------------- */

.kv-why__grid {
    display: grid;
    gap: var(--sp-4);
}

.kv-why__card {
    padding: var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--c-forest-600);
}

.kv-why__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-pill);
    background-color: rgba(194, 168, 120, 0.14);
    color: var(--c-brass-bright);
}

.kv-why__title {
    font-family: var(--font-heading-bold);
    font-size: var(--step-lg);
    margin: 0 0 var(--sp-2);
}

.kv-why__body {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--step-sm);
}

/* --- Spaces ------------------------------------------------------------- */

.kv-spaces__grid {
    display: grid;
    gap: var(--sp-5);
}

.kv-space {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--c-forest);
    box-shadow: var(--shadow-md);
}

.kv-space__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--c-forest-800);
}

.kv-space__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.kv-space:hover .kv-space__media img {
    transform: scale(1.04);
}

.kv-space__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-5);
}

.kv-space__title {
    font-family: var(--font-heading-bold);
    font-size: var(--step-lg);
    letter-spacing: var(--tracking-wide);
    margin: 0;
}

.kv-space__desc {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--step-sm);
}

/* --- Plans -------------------------------------------------------------- */

.kv-plans__grid {
    display: grid;
    gap: var(--sp-4);
}

.kv-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--c-forest-600);
}

.kv-plan--featured {
    border-color: var(--c-brass);
    background-color: var(--c-teal-700);
    box-shadow: var(--shadow-md);
}

.kv-plan__badge {
    position: absolute;
    top: 0;
    left: var(--sp-5);
    translate: 0 -50%;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    background-color: var(--c-brass);
    color: var(--c-forest);
    font-size: var(--step-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.kv-plan__name {
    font-family: var(--font-heading-bold);
    font-size: var(--step-lg);
    margin: 0;
}

.kv-plan__price {
    font-family: var(--font-heading-bold);
    font-size: var(--step-xl);
    color: var(--c-brass-bright);
    margin: 0;
    line-height: 1;
}

.kv-price-was {
    font-size: var(--step-sm);
    color: var(--fg-muted);
    margin-right: var(--sp-2);
}

.kv-plan__note,
.kv-plan__perks {
    margin: 0;
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

.kv-plan__perks {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.kv-plan__perks li {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
}

.kv-plan__perks i {
    color: var(--c-brass);
    font-size: 0.8em;
    margin-top: 0.45em;
    flex-shrink: 0;
}

.kv-plan .kv-btn {
    margin-top: var(--sp-4);
}

/* --- Visit -------------------------------------------------------------- */

.kv-visit__grid {
    display: grid;
    gap: var(--sp-6);
}

.kv-visit__steps {
    margin: var(--sp-5) 0 var(--sp-6);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-5);
}

.kv-visit__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-4);
    align-items: start;
}

/* Numbered rather than bulleted because these are a sequence, and the ring
   gives the column a spine to line up against. */
.kv-visit__num {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(194, 168, 120, 0.4);
    color: var(--c-brass);
    font-family: var(--font-heading-bold);
    font-size: var(--step-sm);
    line-height: 1;
}

.kv-visit__steptitle {
    margin: 0 0 var(--sp-1);
    font-family: var(--font-heading-bold);
    font-size: var(--step-md);
    color: var(--fg-default);
}

.kv-visit__step p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--step-sm);
}

.kv-visit__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.kv-visit__map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    min-height: 260px;
    background-color: var(--c-forest-600);
}

.kv-visit__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    border: 0;
    filter: grayscale(0.35) contrast(1.05);
}

/* ==========================================================================
   Scale up
   ========================================================================== */

@media (min-width: 576px) {
    .kv-hero__actions,
    .kv-pagehead__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .kv-visit__actions {
        flex-direction: row;
    }

    .kv-plans__grid {
        gap: var(--sp-5);
    }

}

@media (min-width: 768px) {
    .kv-facts__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-5);
    }

    .kv-why__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-5);
    }

    .kv-spaces__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kv-plans__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .kv-section__head {
        margin-bottom: var(--sp-7);
    }

}

@media (min-width: 992px) {
    /* Desktop stops just short of the fold on purpose: a sliver of the next
       section is its own invitation to scroll. A phone has no room for that
       trick, which is why the arrow exists. */
    .kv-hero {
        min-height: 92svh;
    }

    .kv-visit__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-7);
        align-items: start;
    }

    .kv-visit__map,
    .kv-visit__map iframe {
        min-height: 420px;
    }

}

/* --- Nav ---------------------------------------------------------------- */

.kv-skip {
    position: absolute;
    left: var(--sp-4);
    top: -100px;
    z-index: 1100;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--c-sand);
    color: var(--c-forest);
    border-radius: var(--radius-md);
    font-size: var(--step-sm);
    transition: top var(--dur-fast) var(--ease-out);
}

.kv-skip:focus {
    top: var(--sp-3);
}

.kv-nav {
    background-color: rgba(35, 48, 48, 0.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    padding-block: var(--sp-2);
    transition: background-color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        padding var(--dur-base) var(--ease-out);
}

.kv-nav.is-scrolled {
    background-color: rgba(27, 37, 37, 0.96);
    border-bottom-color: var(--border-subtle);
    padding-block: var(--sp-1);
}

.kv-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.kv-nav__brand {
    display: block;
    flex-shrink: 0;
}

.kv-nav__brand .nav-logo {
    width: clamp(9rem, 32vw, 15rem);
    height: auto;
}

.kv-nav__right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.kv-nav__cta {
    padding-inline: var(--sp-4);
    font-size: var(--step-xs);
    white-space: nowrap;
}

.kv-nav__cta-label {
    display: none;
}

.kv-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tapsize);
    height: var(--tapsize);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--fg-default);
    font-size: 1.15rem;
}

.kv-nav__toggle:focus {
    box-shadow: none;
}

.kv-nav__menu {
    flex-basis: 100%;
}

.kv-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--sp-3) 0 var(--sp-2);
    margin: 0;
    list-style: none;
}

.kv-nav__link {
    display: block;
    padding: var(--sp-3) 0;
    font-family: var(--font-heading-bold);
    font-size: var(--step-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-default);
    border-bottom: 1px solid var(--border-subtle);
}

.kv-nav__link:hover {
    color: var(--c-brass-bright);
}

@media (min-width: 576px) {
    .kv-nav__cta-label {
        display: inline;
    }

    .kv-nav__cta-label--short {
        display: none;
    }
}

@media (min-width: 992px) {
    .kv-nav__inner {
        flex-wrap: nowrap;
    }

    .kv-nav__menu {
        flex-basis: auto;
        order: 2;
    }

    .kv-nav__right {
        order: 3;
    }

    .kv-nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-5);
        padding: 0;
    }

    .kv-nav__link {
        padding: var(--sp-2) 0;
        border-bottom: 1px solid transparent;
    }

    .kv-nav__link:hover {
        border-bottom-color: var(--c-brass);
    }

    .kv-nav__toggle {
        display: none;
    }
}

/* Line break that only applies once there is room for it. */
.kv-br-lg {
    display: none;
}

@media (min-width: 992px) {
    .kv-br-lg {
        display: inline;
    }
}

/* Hero copy is tighter on a phone; the lede should not out-shout the CTA. */
.kv-hero__lede {
    font-size: var(--step-md);
}

@media (min-width: 768px) {
    .kv-hero__lede {
        font-size: var(--step-lg);
    }
}

/* Hero media is now a <picture>, not a <video>. */
.kv-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kv-section__head--center {
    margin-inline: auto;
    text-align: center;
}

/* --- Tour video --------------------------------------------------------- */

.kv-tour__frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    background-color: var(--c-forest-800);
    /* The tour clip is shot vertical (1080x1920). Matching the frame to the
       footage is what stops object-fit: cover from throwing away most of it.
       The width cap keeps a 9:16 block from running the full container width
       on desktop, where it would tower over every other section. */
    aspect-ratio: 9 / 16;
    max-width: 360px;
    margin-inline: auto;
}

.kv-tour__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Headline lines: inline (with a real space between) on phones, stacked on
   desktop. Using spans rather than a hidden <br> — a display:none <br> also
   removes the whitespace, which ran the two sentences together. */
.kv-hero__line {
    display: inline;
}

@media (min-width: 992px) {
    .kv-hero__line {
        display: block;
    }
}

.kv-hero__lede {
    color: var(--c-sand);
    opacity: 0.92;
}

.kv-hero__title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* Eyebrow sits over the brightest part of the hero image on wide screens. */
.kv-hero .kv-eyebrow {
    color: var(--c-brass-bright);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.kv-hero__meta {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* Eyebrow can land on a bright part of the photo; a plain shadow is not
   enough, so give it its own soft plate. */
.kv-hero .kv-eyebrow {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    margin-left: calc(var(--sp-3) * -1);
    border-radius: var(--radius-sm);
    background-color: rgba(20, 28, 28, 0.55);
    backdrop-filter: blur(4px);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   FITNESS PAGE
   ========================================================================== */

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

.kv-pagehead {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 52svh;
    padding-block: var(--sp-8) var(--sp-6);
    overflow: hidden;
    background-color: var(--c-forest-800);
    isolation: isolate;
}

.kv-pagehead__media,
.kv-pagehead__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.kv-pagehead__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
            rgba(20, 28, 28, 0.97) 0%,
            rgba(20, 28, 28, 0.86) 40%,
            rgba(20, 28, 28, 0.55) 100%);
}

.kv-pagehead__title {
    font-family: var(--font-heading-bold);
    font-size: var(--step-2xl);
    margin: 0 0 var(--sp-3);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.kv-pagehead__lede {
    font-size: var(--step-md);
    color: var(--fg-muted);
    margin: 0 0 var(--sp-5);
}

.kv-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.kv-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background-color: rgba(20, 28, 28, 0.5);
    backdrop-filter: blur(6px);
    font-size: var(--step-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.kv-jump a:hover {
    border-color: var(--c-sand);
    color: var(--c-brass-bright);
}

/* --- Feature rows (spaces) ---------------------------------------------- */

.kv-feature__list {
    display: grid;
    gap: var(--sp-7);
}

.kv-feature {
    display: grid;
    gap: var(--sp-5);
    align-items: center;
}

.kv-feature__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--c-forest-600);
    box-shadow: var(--shadow-md);
}

.kv-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kv-feature__title {
    font-family: var(--font-heading-bold);
    font-size: var(--step-xl);
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--sp-3);
}

.kv-feature__text {
    color: var(--fg-muted);
    font-size: var(--step-sm);
    margin-bottom: var(--sp-5);
}

.kv-feature__text br + br {
    line-height: var(--sp-4);
}

/* --- Tabs (shared by schedule and passes) ------------------------------- */

.kv-days__tabs,
.kv-plans__tabs {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
    -webkit-overflow-scrolling: touch;
}

.kv-days__tabs::-webkit-scrollbar,
.kv-plans__tabs::-webkit-scrollbar {
    display: none;
}

.kv-days__tab,
.kv-plans__tab {
    flex: 0 0 auto;
    min-height: var(--tapsize);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--fg-muted);
    font-family: var(--font-heading-bold);
    font-size: var(--step-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.kv-days__tab:hover,
.kv-plans__tab:hover {
    color: var(--fg-default);
    border-color: var(--border-strong);
}

.kv-days__tab[aria-selected="true"],
.kv-plans__tab[aria-selected="true"] {
    background-color: var(--c-sand);
    border-color: var(--c-sand);
    color: var(--c-forest);
}

.kv-days__long {
    display: none;
}

@media (min-width: 576px) {
    .kv-days__long {
        display: inline;
    }

    .kv-days__short {
        display: none;
    }
}

/* --- Class list --------------------------------------------------------- */

.kv-classes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.kv-class {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--c-forest);
}

.kv-class__when {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.kv-class__time {
    font-family: var(--font-heading-bold);
    font-size: var(--step-lg);
    color: var(--c-brass-bright);
}

.kv-class__until {
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

.kv-class__name {
    font-family: var(--font-heading-bold);
    font-size: var(--step-lg);
    margin: 0 0 var(--sp-2);
}

.kv-class__desc {
    margin: 0 0 var(--sp-3);
    color: var(--fg-muted);
    font-size: var(--step-sm);
}

.kv-class__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

.kv-tag {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    background-color: rgba(194, 168, 120, 0.16);
    color: var(--c-brass-bright);
    font-size: var(--step-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.kv-class__coach {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

.kv-class__coach img {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    border: 1px solid var(--border-strong);
}

/* --- Plans -------------------------------------------------------------- */

.kv-plans__blurb {
    margin: 0 0 var(--sp-5);
    color: var(--fg-muted);
    font-size: var(--step-sm);
}

/* --- Coaches grid ------------------------------------------------------- */

/* --- Empty state -------------------------------------------------------- */

.kv-empty {
    padding: var(--sp-7) var(--sp-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
}

.kv-empty p {
    margin: 0 auto var(--sp-4);
    color: var(--fg-muted);
}

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

.kv-cta {
    background-color: var(--c-forest-800);
    padding-block: var(--section-y);
    border-top: 1px solid var(--border-subtle);
}

.kv-cta__inner {
    text-align: center;
}

.kv-cta__title {
    font-family: var(--font-heading-bold);
    font-size: var(--step-2xl);
    margin: 0 0 var(--sp-3);
}

.kv-cta__text {
    margin: 0 auto var(--sp-5);
    color: var(--fg-muted);
}

/* ==========================================================================
   Scale up
   ========================================================================== */

@media (min-width: 768px) {
    .kv-class {
        grid-template-columns: 150px 1fr;
        gap: var(--sp-5);
        align-items: start;
    }

    .kv-class__when {
        flex-direction: column;
        gap: 0;
    }

    .kv-pagehead__lede {
        font-size: var(--step-lg);
    }
}

@media (min-width: 992px) {
    .kv-feature {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-7);
    }

    /* Alternate the image side down the list so it does not read as a table. */
    .kv-feature:nth-child(even) .kv-feature__media {
        order: 2;
    }

    .kv-pagehead {
        min-height: 60svh;
    }
}

/* ==========================================================================
   COACH CARDS — revised
   Name and classes sit inside the frame on a scrim rather than below it, so
   the row reads as a set of portraits instead of a spreadsheet of faces.
   ========================================================================== */

/* Scrim: strong enough to carry small text over a busy photo. */

/* --- Monogram fallback --------------------------------------------------- */

/* Class list must not push the name off the card. Two lines, then ellipsis. */

/* Two portraits per row is tight on a phone; a taller frame gives the face
   room above the caption. */

@media (min-width: 768px) {
}

/* ==========================================================================
   COACHES
   Nine coaches divide by three, not two. A two-up grid stranded one card
   alone on the last row, and five-up on desktop stranded four.
   Phones get a horizontal snap rail, desktop a 3x3 grid that nine fits
   exactly. Same markup, same overlaid caption, different flow direction.
   ========================================================================== */

.kv-coachgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

/* --- Phone: horizontal snap rail ---------------------------------------
   Nine rows of list cost about 920px of scroll for what is supporting
   content sitting above the closing CTA. A rail collapses that to one
   screen, keeps the portraits big enough to read a face, and does not
   care that nine is an awkward number.
   ------------------------------------------------------------------------ */

.kv-coachgrid {
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    gap: var(--sp-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the screen edge, but snap flush with the container gutter. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--sp-2);
}

.kv-coachgrid::-webkit-scrollbar {
    display: none;
}

.kv-coachcard {
    position: relative;
    scroll-snap-align: start;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.kv-coachcard__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--c-forest-600);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    isolation: isolate;
}

.kv-coachcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Shot against different walls; a touch of desaturation unifies them. */
    filter: saturate(0.9) contrast(1.04);
    transition: transform var(--dur-slow) var(--ease-out),
        filter var(--dur-base) var(--ease-out);
}

.kv-coachcard__photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 68%;
    background: linear-gradient(to top,
            rgba(20, 28, 28, 0.94) 0%,
            rgba(20, 28, 28, 0.7) 40%,
            rgba(20, 28, 28, 0) 100%);
    pointer-events: none;
}

.kv-coachcard__caption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    min-width: 0;
    padding: var(--sp-4) var(--sp-3);
}

.kv-coachcard__name {
    font-family: var(--font-heading-bold);
    font-size: var(--step-md);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 0;
}

.kv-coachcard__teaches {
    margin: var(--sp-1) 0 0;
    font-size: var(--step-xs);
    line-height: 1.35;
    color: var(--c-brass-bright);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kv-coachcard__more {
    color: var(--fg-muted);
}

.kv-railhint {
    margin: var(--sp-3) 0 0;
    font-size: var(--step-xs);
    color: var(--fg-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* --- Monogram, for coaches with no photo on file ------------------------- */

.kv-coachcard--monogram .kv-coachcard__photo {
    display: grid;
    place-items: center;
    background: radial-gradient(120% 100% at 50% 15%, var(--c-teal-700) 0%, var(--c-forest) 74%);
    border-color: var(--border-strong);
}

.kv-coachcard__initials {
    font-family: var(--font-heading-bold);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--c-brass);
    opacity: 0.9;
}

/* --- 768+ : 3x3 portrait grid -------------------------------------------- */

@media (min-width: 768px) {
    .kv-coachgrid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-5);
    }

    .kv-coachgrid {
        grid-auto-flow: row;
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        padding-bottom: 0;
    }

    .kv-railhint {
        display: none;
    }

    .kv-coachcard__photo {
        aspect-ratio: 3 / 4;
        border-radius: var(--radius-lg);
    }

    /* Caption moves onto the image so the row reads as portraits. */
    .kv-coachcard__caption {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 1;
        padding: var(--sp-4);
    }

    .kv-coachcard__photo::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 68%;
        background: linear-gradient(to top,
                rgba(20, 28, 28, 0.94) 0%,
                rgba(20, 28, 28, 0.7) 40%,
                rgba(20, 28, 28, 0) 100%);
        pointer-events: none;
    }

    .kv-coachcard--monogram .kv-coachcard__photo::after {
        height: 52%;
        background: linear-gradient(to top,
                rgba(20, 28, 28, 0.9) 0%,
                rgba(20, 28, 28, 0) 100%);
    }

    .kv-coachcard__initials {
        font-size: 3.25rem;
        transform: translateY(-14%);
    }

    .kv-coachcard__teaches {
        font-size: var(--step-xs);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .kv-coachcard:hover .kv-coachcard__photo img {
        transform: scale(1.05);
        filter: saturate(1) contrast(1.04);
    }
}

/* --- Screen-reader-only -------------------------------------------------- */

.kv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Coach zoom trigger -------------------------------------------------- */

.kv-coachcard__zoom {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: var(--radius-lg);
}

.kv-coachcard__zoomicon {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background-color: rgba(20, 28, 28, 0.6);
    backdrop-filter: blur(6px);
    color: var(--c-sand);
    font-size: 0.75rem;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

/* Touch has no hover, so the affordance has to be visible by default there. */
@media (hover: none) {
    .kv-coachcard__zoomicon {
        opacity: 0.85;
        transform: none;
    }
}

.kv-coachcard__zoom:hover .kv-coachcard__zoomicon,
.kv-coachcard__zoom:focus-visible .kv-coachcard__zoomicon {
    opacity: 1;
    transform: none;
}

.kv-coachcard__zoom:hover ~ .kv-coachcard__photo img {
    transform: scale(1.05);
}

/* --- Lightbox ------------------------------------------------------------ */

.kv-lightbox {
    width: min(92vw, 620px);
    max-height: 90svh;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--c-forest);
    color: var(--fg-default);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.kv-lightbox::backdrop {
    background-color: rgba(12, 18, 18, 0.82);
    backdrop-filter: blur(3px);
}

.kv-lightbox__figure {
    margin: 0;
    display: grid;
}

.kv-lightbox__figure img {
    width: 100%;
    max-height: 68svh;
    object-fit: cover;
    display: block;
    background-color: var(--c-forest-800);
}

.kv-lightbox__caption {
    padding: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
}

.kv-lightbox__name {
    font-family: var(--font-heading-bold);
    font-size: var(--step-lg);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 0;
}

.kv-lightbox__teaches {
    margin: var(--sp-2) 0 0;
    font-size: var(--step-sm);
    color: var(--c-brass-bright);
}

.kv-lightbox__close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--tapsize);
    height: var(--tapsize);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background-color: rgba(20, 28, 28, 0.7);
    backdrop-filter: blur(6px);
    color: var(--c-sand);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.kv-lightbox__close:hover {
    background-color: var(--c-forest-800);
    border-color: var(--c-sand);
}

/* ==========================================================================
   SPACE DETAIL / NEWS / FOOTER
   ========================================================================== */

.kv-pagehead--compact {
    min-height: 40svh;
}

.kv-pagehead .kv-eyebrow a:hover {
    color: var(--c-sand);
    text-decoration: underline;
}

.kv-feature__subtitle {
    margin: 0 0 var(--sp-4);
    color: var(--c-brass-bright);
    font-size: var(--step-sm);
    letter-spacing: var(--tracking-normal);
}

.kv-feature__para {
    margin: 0 0 var(--sp-4);
    color: var(--fg-muted);
    font-size: var(--step-sm);
}

.kv-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.kv-points li {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    color: var(--fg-muted);
    font-size: var(--step-sm);
}

.kv-points i {
    color: var(--c-brass);
    font-size: 0.8em;
    margin-top: 0.45em;
    flex-shrink: 0;
}

.kv-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    align-items: center;
}

@media (min-width: 576px) {
    .kv-cta__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* --- News grid ----------------------------------------------------------- */

.kv-newsgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}

.kv-newscard__btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--c-forest-600);
    cursor: zoom-in;
    aspect-ratio: 4 / 5;
}

.kv-newscard__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.kv-newscard__btn:hover img {
    transform: scale(1.04);
}

.kv-newscard__zoom {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background-color: rgba(20, 28, 28, 0.6);
    backdrop-filter: blur(6px);
    color: var(--c-sand);
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}

@media (hover: none) {
    .kv-newscard__zoom {
        opacity: 0.85;
    }
}

.kv-newscard__btn:hover .kv-newscard__zoom,
.kv-newscard__btn:focus-visible .kv-newscard__zoom {
    opacity: 1;
}

/* News posts are portrait flyers, so the lightbox lets them run tall. */
.kv-lightbox--news .kv-lightbox__figure img {
    max-height: 88svh;
    object-fit: contain;
}

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

.kv-footer {
    background-color: var(--c-forest-800);
    border-top: 1px solid var(--border-subtle);
    padding-block: var(--sp-7) var(--sp-5);
}

.kv-footer__grid {
    display: grid;
    gap: var(--sp-6);
}

.kv-footer__logo {
    width: clamp(7rem, 30vw, 10rem);
    height: auto;
}

.kv-footer__heading {
    font-family: var(--font-body);
    font-size: var(--step-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--c-brass);
    margin: 0 0 var(--sp-3);
}

.kv-footer__text {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--step-sm);
}

.kv-footer__text a:hover,
.kv-footer__list a:hover {
    color: var(--c-sand);
    text-decoration: underline;
}

.kv-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

.kv-footer__list li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.kv-footer__list i {
    color: var(--c-brass);
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.kv-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-7);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--step-xs);
    color: var(--fg-muted);
}

.kv-footer__bottom p {
    margin: 0;
}

.kv-footer__bottom a:hover {
    color: var(--c-sand);
    text-decoration: underline;
}

@media (min-width: 576px) {
    .kv-newsgrid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-4);
    }
}

@media (min-width: 768px) {
    .kv-footer__grid {
        grid-template-columns: 1.2fr 1fr 1.4fr 1.2fr;
        gap: var(--sp-5);
    }

    .kv-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (min-width: 992px) {
    .kv-newsgrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   HYROX — Training Club partnership
   Its own surface on purpose. HYROX is black and yellow, the site is forest
   and sand; blending them makes the partner logo read as a styling accident.
   A near-black band says "different brand" before anyone reads a word.
   Mobile-first, like everything above.
   ========================================================================== */

.kv-hyrox {
    --hyrox-yellow: #ffe500;
    --hyrox-black: #0d0f0f;
    background-color: var(--hyrox-black);
    color: var(--fg-default);
}

.kv-hyrox.kv-section--raised {
    background-color: #141717;
}

.kv-hyrox .kv-eyebrow,
.kv-hyrox .kv-note i {
    color: var(--hyrox-yellow);
}

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

.kv-hyrox__head {
    background-color: var(--hyrox-black);
}

/* Darker than the standard scrim: race photography is busy, and the Training
   Club lockup is fine white linework that disappears over a bright frame. */
.kv-hyrox__scrim {
    background: linear-gradient(180deg,
            rgba(13, 15, 15, 0.35) 0%,
            rgba(13, 15, 15, 0.72) 55%,
            rgba(13, 15, 15, 0.93) 100%);
}

/* On its own plate rather than straight onto the photograph. Half the lockup
   is hollow linework, and over a bright race frame the "TRAINING CLUB" half
   simply vanishes — which reads as a broken image, not a partnership. */
.kv-hyrox__badge {
    display: block;
    width: min(230px, 62vw);
    height: auto;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background-color: rgba(13, 15, 15, 0.72);
    border: 1px solid rgba(255, 229, 0, 0.3);
    border-radius: var(--radius-md);
    box-sizing: content-box;
}

/* --- What it is -------------------------------------------------------- */

.kv-hyrox__intro {
    max-width: 62ch;
}

.kv-hyrox__intro p {
    margin-bottom: var(--sp-4);
    line-height: var(--leading-normal);
}

.kv-hyrox__stats {
    display: grid;
    gap: var(--sp-4);
    margin: var(--sp-6) 0 0;
    padding: 0;
    list-style: none;
}

.kv-hyrox__stats li {
    padding-left: var(--sp-4);
    border-left: 2px solid var(--hyrox-yellow);
}

.kv-hyrox__stats strong {
    display: block;
    font-family: var(--font-heading-bold);
    font-size: var(--step-xl);
    line-height: var(--leading-tight);
    color: var(--c-white);
}

.kv-hyrox__stats span {
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

/* --- The eight stations ------------------------------------------------ */

.kv-hyrox__grid {
    display: grid;
    gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kv-hyrox__station {
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.kv-hyrox__media {
    position: relative;
    aspect-ratio: 4 / 3;
}

.kv-hyrox__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The running order is the whole point of the format, so the number is a
   first-class label rather than a bullet the browser happens to draw. */
.kv-hyrox__num {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-heading-bold);
    font-size: var(--step-md);
    color: var(--hyrox-black);
    background-color: var(--hyrox-yellow);
    border-radius: var(--radius-pill);
}

.kv-hyrox__body {
    padding: var(--sp-4);
}

.kv-hyrox__name {
    margin: 0;
    font-family: var(--font-heading-bold);
    font-size: var(--step-lg);
    color: var(--c-white);
}

.kv-hyrox__spec {
    margin: var(--sp-1) 0 var(--sp-3);
    font-size: var(--step-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--hyrox-yellow);
}

.kv-hyrox__desc {
    margin: 0;
    font-size: var(--step-sm);
    line-height: var(--leading-normal);
    color: var(--fg-muted);
}

.kv-hyrox__caveat {
    margin-top: var(--sp-6);
    padding: var(--sp-4);
    background-color: rgba(255, 229, 0, 0.06);
    border: 1px solid rgba(255, 229, 0, 0.22);
    border-radius: var(--radius-md);
}

.kv-hyrox__caveat a {
    color: var(--hyrox-yellow);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Training here ----------------------------------------------------- */

.kv-hyrox__ways {
    display: grid;
    gap: var(--sp-5);
}

.kv-hyrox__way {
    padding: var(--sp-5);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.kv-hyrox__way p {
    line-height: var(--leading-normal);
    color: var(--fg-muted);
}

.kv-hyrox__way a:not(.kv-btn) {
    color: var(--hyrox-yellow);
}

.kv-hyrox__waytitle {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
    font-family: var(--font-heading-bold);
    font-size: var(--step-lg);
    color: var(--c-white);
}

.kv-hyrox__waytitle i {
    color: var(--hyrox-yellow);
}

.kv-hyrox__classes {
    margin: var(--sp-4) 0;
    padding: 0;
    list-style: none;
}

.kv-hyrox__classes li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-1) var(--sp-4);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-subtle);
}

.kv-hyrox__day {
    grid-row: 1;
    font-weight: 600;
    color: var(--c-white);
}

.kv-hyrox__time {
    grid-row: 1;
    font-size: var(--step-sm);
    color: var(--hyrox-yellow);
}

.kv-hyrox__class {
    grid-column: 1 / -1;
    font-size: var(--step-sm);
    color: var(--fg-muted);
}

.kv-hyrox__class small {
    font-size: var(--step-xs);
}

.kv-hyrox__hours {
    margin-bottom: 0;
    font-size: var(--step-sm);
}

/* ==========================================================================
   HYROX teaser — shared band on the home and fitness pages
   ========================================================================== */

.kv-hyroxteaser {
    --hyrox-yellow: #ffe500;
    padding-block: var(--section-y);
    background-color: #0d0f0f;
    border-block: 1px solid var(--border-subtle);
}

.kv-hyroxteaser__inner {
    display: grid;
    gap: var(--sp-5);
    align-items: center;
}

.kv-hyroxteaser__badge {
    width: min(200px, 55vw);
    height: auto;
    margin-bottom: var(--sp-4);
}

.kv-hyroxteaser__title {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-heading-bold);
    font-size: var(--step-2xl);
    line-height: var(--leading-tight);
    color: var(--c-white);
}

.kv-hyroxteaser__text {
    margin: 0 0 var(--sp-5);
    max-width: 48ch;
    line-height: var(--leading-normal);
    color: var(--fg-muted);
}

.kv-hyroxteaser__media img {
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.kv-btn--hyrox {
    color: #0d0f0f;
    background-color: var(--hyrox-yellow);
    border-color: var(--hyrox-yellow);
}

.kv-btn--hyrox:hover,
.kv-btn--hyrox:focus-visible {
    color: #0d0f0f;
    background-color: #fff04d;
    border-color: #fff04d;
}

/* Nav: the word, not a symbol. A coloured dot beside a menu item already means
   "unread" everywhere else, so it read as a notification rather than a new
   page. Blade stops rendering this after kanana.hyrox.new_badge_until. */
.kv-nav__new {
    display: inline-block;
    padding: 2px var(--sp-2);
    margin-left: var(--sp-2);
    vertical-align: middle;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: #0d0f0f;
    background-color: #ffe500;
    border-radius: var(--radius-pill);
}

@media (min-width: 700px) {
    .kv-hyrox__stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .kv-hyrox__stats li {
        padding-left: var(--sp-3);
    }

    .kv-hyrox__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kv-hyrox__ways {
        grid-template-columns: repeat(2, 1fr);
    }

    .kv-hyroxteaser__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--sp-7);
    }
}

@media (min-width: 1024px) {
    .kv-hyrox__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .kv-hyrox__badge {
        width: 280px;
    }
}

/* ==========================================================================
   Padel
   ========================================================================== */

.kv-padel__intro {
    max-width: 62ch;
}

.kv-padel__intro p {
    margin-bottom: var(--sp-4);
    line-height: var(--leading-normal);
}

.kv-padel__ways {
    display: grid;
    gap: var(--sp-4);
}

/* A trailing link or button inside a why-card, as the padel cards use. The
   home page's own why-cards stop at the paragraph, so this is additive. */
.kv-why__card > .kv-link,
.kv-why__card > .kv-btn {
    margin-top: var(--sp-4);
}

/* --- Padel teaser — home page band, same shape as the HYROX teaser but in
   the site's own colours rather than the HYROX black and yellow. --- */

.kv-padelteaser {
    padding-block: var(--section-y);
    background-color: var(--bg-base);
}

.kv-padelteaser__inner {
    display: grid;
    gap: var(--sp-5);
    align-items: center;
}

.kv-padelteaser__title {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-heading-bold);
    font-size: var(--step-2xl);
    line-height: var(--leading-tight);
}

.kv-padelteaser__text {
    margin: 0 0 var(--sp-5);
    max-width: 48ch;
    line-height: var(--leading-normal);
    color: var(--fg-muted);
}

.kv-padelteaser__media img {
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

@media (min-width: 700px) {
    .kv-padel__ways {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-5);
    }

    .kv-padelteaser__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--sp-7);
    }
}