/* Power MMA public site.
   Colors come from /theme.css (admin-configurable):
   --color-primary (near-black), --color-secondary (red), --color-accent (orange),
   --color-text (body grey), --color-white (background).
   Type: Kanit (display), Roboto (body), Roboto Slab (quotes). */

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

:root {
    --font-display: "Kanit", "Arial Narrow", Arial, sans-serif;
    --font-body: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
    --font-serif: "Roboto Slab", Georgia, serif;
    --container: 72rem;
    --radius: 6px;
    --ink: var(--color-primary);
    --surface-alt: color-mix(in srgb, var(--color-white) 94%, var(--color-primary));
    --line: color-mix(in srgb, var(--color-white) 85%, var(--color-primary));
    /* Hover on light surfaces: a darker shade of the link color; on dark surfaces: a lighter one (both keep 4.5:1 or better). */
    --link-hover: color-mix(in srgb, var(--color-secondary) 72%, #000);
    --on-dark-hover: color-mix(in srgb, var(--color-secondary) 45%, #f55);
    /* Focus ring: an outline plus a halo of the opposite tone, so it shows on light and dark backgrounds (3:1 or better). */
    --focus-a: #111; --focus-b: #fff;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }   /* the sticky header never covers a focused element */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-secondary); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus-a); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-b); }
.site-header, .site-footer, .hero, .cta-banner, .carousel { --focus-a: #fff; --focus-b: #111; }
main:focus { outline: none; box-shadow: none; }

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.1;
    margin: 0 0 .5em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
}
h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.container.narrow { max-width: 48rem; }
.muted { font-size: .95em; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-white); padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    padding: .8rem 1.6rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.2;
    transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--color-secondary); color: var(--color-white); }
.btn-primary:hover { background: var(--link-hover); color: var(--color-white); }
.btn-outline { border-color: var(--color-secondary); color: var(--color-secondary); background: transparent; }
.btn-outline:hover { background: var(--color-secondary); color: var(--color-white); }
.btn-outline-light { border-color: var(--color-white); color: var(--color-white); background: transparent; }
.btn-outline-light:hover { background: var(--color-white); color: var(--color-primary); }
.btn-dark { background: var(--color-primary); color: var(--color-white); }
.btn-dark:hover { background: var(--color-white); color: var(--color-primary); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.center-row { text-align: center; margin-top: 2rem; }

/* --- Header / nav ---------------------------------------------------------- */
.preview-bar { background: var(--color-accent); color: var(--color-primary); text-align: center; padding: .5rem 1rem; font-weight: 500; }
.preview-bar a { color: var(--color-primary); font-weight: 700; }

.site-header { background: var(--color-primary); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding-top: .35rem; padding-bottom: .35rem; }
.brand { color: var(--color-white); text-decoration: none; margin-right: auto; display: flex; align-items: center; }
.brand-logo { height: var(--logo-height, 52px); width: auto; max-width: 70vw; object-fit: contain; display: block; }
.brand-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.nav-list { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a {
    color: var(--color-white); text-decoration: none; font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; padding: .75rem .65rem; display: block;
}
.nav-item > a:hover, .nav-item.is-active > a { color: var(--on-dark-hover); text-decoration: underline; text-underline-offset: .35rem; text-decoration-thickness: 2px; }
.submenu-toggle {
    background: none; border: 0; color: var(--color-white); cursor: pointer; padding: 0; margin-left: -.4rem;
    min-width: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center;   /* a target of at least 24px */
}
.submenu-toggle::after { content: ""; display: block; width: .45rem; height: .45rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.submenu {
    list-style: none; margin: 0; padding: .5rem 0; position: absolute; top: 100%; left: 0; min-width: 15rem;
    background: var(--color-primary); border-top: 3px solid var(--color-secondary);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.submenu a { display: block; color: var(--color-white); text-decoration: none; padding: .5rem 1.1rem; font-size: .95rem; }
.submenu a:hover, .submenu a[aria-current] { background: var(--color-secondary); color: var(--color-white); }
.nav-item.has-children:hover > .submenu,
.nav-item.has-children:focus-within > .submenu,
.nav-item.has-children.is-open > .submenu { opacity: 1; visibility: visible; transform: none; }

.nav-toggle { display: none; background: none; border: 0; width: 2.75rem; height: 2.75rem; cursor: pointer; position: relative; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
    display: block; width: 1.6rem; height: 2px; background: var(--color-white); position: absolute; left: .6rem; content: "";
}
.nav-toggle-bar { top: 50%; }
.nav-toggle-bar::before { top: -.5rem; left: 0; }
.nav-toggle-bar::after { top: .5rem; left: 0; }

@media (max-width: 60rem) {
    .nav-toggle { display: block; }
    .site-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: var(--color-primary); flex-direction: column; align-items: stretch; padding: .5rem 1.25rem 1.25rem;
        max-height: calc(100vh - 4.5rem); overflow-y: auto;
    }
    .site-nav.is-open { display: flex; }
    .nav-list { flex-direction: column; }
    .nav-item { flex-wrap: wrap; }
    .nav-item > a { flex: 1; }
    .submenu { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; width: 100%; border-top: 0; padding-left: 1rem; }
    .nav-item.has-children:hover > .submenu { display: none; }
    .nav-item.has-children.is-open > .submenu { display: block; }
    .header-cta { text-align: center; margin-top: .5rem; }
}

/* --- Blocks: shared ----------------------------------------------------------- */
.block { padding: 4.5rem 0; }
.section-title { text-align: center; }
/* Image carousel: a scroll-snap row that works without JavaScript; carousel.js adds arrows, autoplay and the loop. */
.carousel-wrap { position: relative; }
.carousel-track { --cols: 1; --gap: 1rem; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; position: relative; padding-bottom: .5rem; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.carousel-track:focus-visible { outline-offset: 3px; }
.carousel-slide { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; margin: 0; scroll-snap-align: start; }
.carousel-slide img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.carousel-link { display: block; }
.carousel-slide figcaption { font-size: .9rem; padding-top: .45rem; }
.carousel-track.aspect-wide img { aspect-ratio: 16 / 9; }
.carousel-track.aspect-square img { aspect-ratio: 1; }
.carousel-track.aspect-portrait img { aspect-ratio: 3 / 4; }
.carousel-track.text-left figcaption { text-align: left; }
.carousel-track.text-center figcaption { text-align: center; }
.carousel-track.text-right figcaption { text-align: right; }
@media (min-width: 40rem) { .carousel-track.cols-2, .carousel-track.cols-3, .carousel-track.cols-4, .carousel-track.cols-5 { --cols: 2; } }
@media (min-width: 60rem) {
    .carousel-track.cols-3 { --cols: 3; }
    .carousel-track.cols-4 { --cols: 4; }
    .carousel-track.cols-5 { --cols: 5; }
}
.carousel.is-enhanced .carousel-track { scrollbar-width: none; }
.carousel.is-enhanced .carousel-track::-webkit-scrollbar { display: none; }
.carousel-btn { position: absolute; top: calc(50% - .25rem); transform: translateY(-50%); z-index: 2; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: var(--color-white); font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.carousel-btn:hover, .carousel-btn:focus-visible { background: rgba(0, 0, 0, .85); }
.carousel-prev { left: .6rem; }
.carousel-next { right: .6rem; }
.carousel-pause { position: absolute; right: .6rem; bottom: 1.1rem; z-index: 2; padding: .3rem .8rem; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; background: rgba(0, 0, 0, .6); color: var(--color-white); font: inherit; font-size: .8rem; cursor: pointer; }
.carousel-pause:hover, .carousel-pause:focus-visible { background: rgba(0, 0, 0, .85); }
/* Divider line */
.block.divider { padding: 1.75rem 0; }
.block.divider-space-small { padding: .6rem 0; }
.block.divider-space-large { padding: 3.5rem 0; }
.divider-line { border: 0; border-top: 1px solid var(--block-color, var(--line)); margin: 0 auto; width: 100%; height: 0; }
.divider-medium .divider-line { border-top-width: 3px; }
.divider-thick .divider-line { border-top-width: 6px; }
.divider-dashed .divider-line { border-top-style: dashed; }
.divider-dotted .divider-line { border-top-style: dotted; }
.divider-w-wide .divider-line { width: 75%; }
.divider-w-medium .divider-line { width: 50%; }
.divider-w-short .divider-line { width: 25%; }
.divider-a-left .divider-line { margin-left: 0; margin-right: auto; }
.divider-a-right .divider-line { margin-left: auto; margin-right: 0; }
.section-intro { text-align: center; max-width: 44rem; margin: 0 auto 2.5rem; }
/* A heading with no intro: keep the items off the heading. */
.section-title + :not(.section-intro):not(.prose) { margin-top: 2.5rem; }
.prose { max-width: 44rem; }
.container.narrow .prose { max-width: none; }
.prose ul, .prose ol, .price-desc ul, .price-desc ol, .faq-answer ul, .faq-answer ol, .instructor-bio ul, .instructor-bio ol { padding-left: 1.25rem; }
.prose h3, .prose h4, .faq-answer h3, .faq-answer h4, .price-desc h3, .price-desc h4, .instructor-bio h3, .instructor-bio h4 { margin: 1.4rem 0 .5rem; }
.prose h3, .faq-answer h3, .price-desc h3, .instructor-bio h3 { font-size: 1.35rem; }
.prose h4, .faq-answer h4, .price-desc h4, .instructor-bio h4 { font-size: 1.1rem; }
.prose a, .faq-answer a, .price-desc a, .instructor-bio a { text-decoration: underline; }
/* Rich text inside short fields (hero subheading, feature text, card text, quotes, CTA text). */
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt p { margin: 0 0 .6rem; }
.rt ul, .rt ol { padding-left: 1.25rem; margin: 0 0 .6rem; }
.rt h3, .rt h4 { margin: .8rem 0 .3rem; font-size: 1.1rem; }
.rt a { text-decoration: underline; }
.text-block h2 { text-align: left; }
.page-title-wrap { padding-top: 3rem; }

/* Hero */
.hero { position: relative; background: var(--color-primary); color: var(--color-white); overflow: hidden; }
.hero-tall { min-height: min(80vh, 44rem); display: flex; align-items: center; }
.hero-compact { padding: 5rem 0 4rem; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 100%); }
.hero:not(.has-image) .hero-overlay { background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--color-secondary) 35%, transparent), transparent 55%); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay-medium .hero-overlay { background: linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .28) 100%); }
.hero-overlay-light .hero-overlay { background: linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .12) 100%); }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-inner { position: relative; }
.hero-title { color: var(--color-white); max-width: 48rem; }
.hero-title::after { content: ""; display: block; width: 4.5rem; height: 5px; background: var(--color-secondary); margin-top: 1.1rem; }
.hero-sub { font-size: 1.2rem; max-width: 40rem; margin: 0 0 1em; color: rgba(255, 255, 255, .88); }

/* Split */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split-right .split-media { order: 2; }
.split-media img { border-radius: var(--radius); width: 100%; }
.split h2 { text-align: left; }
@media (max-width: 48rem) { .split-grid { grid-template-columns: 1fr; } .split-right .split-media { order: 0; } }

/* Features */
.feature { padding: 1.75rem 1.5rem; border-radius: var(--radius); background: var(--surface-alt); border-top: 4px solid var(--color-secondary); }
.feature-mark { display: block; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-secondary); margin-bottom: 1rem; position: relative; }
.feature-mark::after { content: ""; position: absolute; left: .78rem; top: .5rem; width: .5rem; height: 1rem; border: solid var(--color-white); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.feature-icon, .feature-mark-img { display: flex; align-items: center; justify-content: center; }
.feature-icon::after, .feature-mark-img::after { content: none; }
.feature-icon { color: var(--color-white); font-size: 1.1rem; }
.feature-mark-img { width: auto; height: 3.25rem; border-radius: 0; background: none; justify-content: flex-start; }
.feature-mark-img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.grid.text-center .feature-mark-img { justify-content: center; }
.grid.text-right .feature-mark-img { justify-content: flex-end; }
.features-dark { background: var(--color-primary); }
.features-dark h2, .features-dark .feature-title { color: var(--color-white); }
.features-dark .section-intro, .features-dark .feature-text { color: rgba(255, 255, 255, .78); }
.features-dark .feature { background: rgba(255, 255, 255, .06); }

/* --- Shared item grid ---------------------------------------------------------------------------------------
   Used by cards, features, photos, plans, testimonials and instructors. Fixed columns (cols-N) so a short last row
   can be placed left / center / right (items-*), and the text inside each item aligned (text-*).
   Columns: 1 on phones, up to 2 on tablets, N on large screens. */
.grid { --cols: 1; --gap: 1.5rem; display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: flex-start; }
.grid > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; box-sizing: border-box; }
.grid.items-center { justify-content: center; }
.grid.items-right { justify-content: flex-end; }
@media (min-width: 40rem) { .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5, .grid.cols-6 { --cols: 2; } }
@media (min-width: 60rem) {
    .grid.cols-3 { --cols: 3; }
    .grid.cols-4 { --cols: 4; }
    .grid.cols-5 { --cols: 5; }
    .grid.cols-6 { --cols: 6; }
}
.grid.text-left > * { text-align: left; }
.grid.text-center > * { text-align: center; }
.grid.text-right > * { text-align: right; }
.grid.text-center .feature-mark { margin-left: auto; margin-right: auto; }
.grid.text-right .feature-mark { margin-left: auto; }

/* Heading + intro alignment (center is the default look). */
.heading-left .section-title, .heading-left .section-intro { text-align: left; }
.heading-left .section-intro { margin-left: 0; margin-right: auto; }
.heading-right .section-title, .heading-right .section-intro { text-align: right; }
.heading-right .section-intro { margin-left: auto; margin-right: 0; }

/* Running-text alignment for text sections and the hero. */
.text-block.text-center h2, .text-block.text-center .prose { text-align: center; }
.text-block.text-right h2, .text-block.text-right .prose { text-align: right; }
.hero-text-center .hero-inner { text-align: center; }
.hero-text-center .hero-title, .hero-text-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-text-center .hero-title::after { margin-left: auto; margin-right: auto; }
.hero-text-center .btn-row { justify-content: center; }
.hero-text-right .hero-inner { text-align: right; }
.hero-text-right .hero-title, .hero-text-right .hero-sub { margin-left: auto; }
.hero-text-right .hero-title::after { margin-left: auto; }
.hero-text-right .btn-row { justify-content: flex-end; }

/* Focus point of a cropped photo (see Focus): fp-<x/10>-<y/10> sets object-position. Center needs no class. */
.fp-0-0 { object-position: 0% 0%; } .fp-0-1 { object-position: 0% 10%; } .fp-0-2 { object-position: 0% 20%; } .fp-0-3 { object-position: 0% 30%; } .fp-0-4 { object-position: 0% 40%; } .fp-0-5 { object-position: 0% 50%; } .fp-0-6 { object-position: 0% 60%; } .fp-0-7 { object-position: 0% 70%; } .fp-0-8 { object-position: 0% 80%; } .fp-0-9 { object-position: 0% 90%; } .fp-0-10 { object-position: 0% 100%; }
.fp-1-0 { object-position: 10% 0%; } .fp-1-1 { object-position: 10% 10%; } .fp-1-2 { object-position: 10% 20%; } .fp-1-3 { object-position: 10% 30%; } .fp-1-4 { object-position: 10% 40%; } .fp-1-5 { object-position: 10% 50%; } .fp-1-6 { object-position: 10% 60%; } .fp-1-7 { object-position: 10% 70%; } .fp-1-8 { object-position: 10% 80%; } .fp-1-9 { object-position: 10% 90%; } .fp-1-10 { object-position: 10% 100%; }
.fp-2-0 { object-position: 20% 0%; } .fp-2-1 { object-position: 20% 10%; } .fp-2-2 { object-position: 20% 20%; } .fp-2-3 { object-position: 20% 30%; } .fp-2-4 { object-position: 20% 40%; } .fp-2-5 { object-position: 20% 50%; } .fp-2-6 { object-position: 20% 60%; } .fp-2-7 { object-position: 20% 70%; } .fp-2-8 { object-position: 20% 80%; } .fp-2-9 { object-position: 20% 90%; } .fp-2-10 { object-position: 20% 100%; }
.fp-3-0 { object-position: 30% 0%; } .fp-3-1 { object-position: 30% 10%; } .fp-3-2 { object-position: 30% 20%; } .fp-3-3 { object-position: 30% 30%; } .fp-3-4 { object-position: 30% 40%; } .fp-3-5 { object-position: 30% 50%; } .fp-3-6 { object-position: 30% 60%; } .fp-3-7 { object-position: 30% 70%; } .fp-3-8 { object-position: 30% 80%; } .fp-3-9 { object-position: 30% 90%; } .fp-3-10 { object-position: 30% 100%; }
.fp-4-0 { object-position: 40% 0%; } .fp-4-1 { object-position: 40% 10%; } .fp-4-2 { object-position: 40% 20%; } .fp-4-3 { object-position: 40% 30%; } .fp-4-4 { object-position: 40% 40%; } .fp-4-5 { object-position: 40% 50%; } .fp-4-6 { object-position: 40% 60%; } .fp-4-7 { object-position: 40% 70%; } .fp-4-8 { object-position: 40% 80%; } .fp-4-9 { object-position: 40% 90%; } .fp-4-10 { object-position: 40% 100%; }
.fp-5-0 { object-position: 50% 0%; } .fp-5-1 { object-position: 50% 10%; } .fp-5-2 { object-position: 50% 20%; } .fp-5-3 { object-position: 50% 30%; } .fp-5-4 { object-position: 50% 40%; } .fp-5-6 { object-position: 50% 60%; } .fp-5-7 { object-position: 50% 70%; } .fp-5-8 { object-position: 50% 80%; } .fp-5-9 { object-position: 50% 90%; } .fp-5-10 { object-position: 50% 100%; }
.fp-6-0 { object-position: 60% 0%; } .fp-6-1 { object-position: 60% 10%; } .fp-6-2 { object-position: 60% 20%; } .fp-6-3 { object-position: 60% 30%; } .fp-6-4 { object-position: 60% 40%; } .fp-6-5 { object-position: 60% 50%; } .fp-6-6 { object-position: 60% 60%; } .fp-6-7 { object-position: 60% 70%; } .fp-6-8 { object-position: 60% 80%; } .fp-6-9 { object-position: 60% 90%; } .fp-6-10 { object-position: 60% 100%; }
.fp-7-0 { object-position: 70% 0%; } .fp-7-1 { object-position: 70% 10%; } .fp-7-2 { object-position: 70% 20%; } .fp-7-3 { object-position: 70% 30%; } .fp-7-4 { object-position: 70% 40%; } .fp-7-5 { object-position: 70% 50%; } .fp-7-6 { object-position: 70% 60%; } .fp-7-7 { object-position: 70% 70%; } .fp-7-8 { object-position: 70% 80%; } .fp-7-9 { object-position: 70% 90%; } .fp-7-10 { object-position: 70% 100%; }
.fp-8-0 { object-position: 80% 0%; } .fp-8-1 { object-position: 80% 10%; } .fp-8-2 { object-position: 80% 20%; } .fp-8-3 { object-position: 80% 30%; } .fp-8-4 { object-position: 80% 40%; } .fp-8-5 { object-position: 80% 50%; } .fp-8-6 { object-position: 80% 60%; } .fp-8-7 { object-position: 80% 70%; } .fp-8-8 { object-position: 80% 80%; } .fp-8-9 { object-position: 80% 90%; } .fp-8-10 { object-position: 80% 100%; }
.fp-9-0 { object-position: 90% 0%; } .fp-9-1 { object-position: 90% 10%; } .fp-9-2 { object-position: 90% 20%; } .fp-9-3 { object-position: 90% 30%; } .fp-9-4 { object-position: 90% 40%; } .fp-9-5 { object-position: 90% 50%; } .fp-9-6 { object-position: 90% 60%; } .fp-9-7 { object-position: 90% 70%; } .fp-9-8 { object-position: 90% 80%; } .fp-9-9 { object-position: 90% 90%; } .fp-9-10 { object-position: 90% 100%; }
.fp-10-0 { object-position: 100% 0%; } .fp-10-1 { object-position: 100% 10%; } .fp-10-2 { object-position: 100% 20%; } .fp-10-3 { object-position: 100% 30%; } .fp-10-4 { object-position: 100% 40%; } .fp-10-5 { object-position: 100% 50%; } .fp-10-6 { object-position: 100% 60%; } .fp-10-7 { object-position: 100% 70%; } .fp-10-8 { object-position: 100% 80%; } .fp-10-9 { object-position: 100% 90%; } .fp-10-10 { object-position: 100% 100%; }
/* Program cards */
.programs { background: var(--surface-alt); }
.program-card {
    display: flex; flex-direction: column; background: var(--color-white); border-radius: var(--radius);
    overflow: hidden; text-decoration: none; color: var(--color-text); box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    transition: transform .15s, box-shadow .15s;
}
.program-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); color: var(--color-text); }
.card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-img-empty { display: block; background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-secondary))); }
.program-card-body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.program-card-title { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; color: var(--ink); font-weight: 600; line-height: 1.15; }
.program-card-label { font-weight: 700; color: var(--color-secondary); font-size: .9rem; }
.program-card-more { margin-top: auto; padding-top: .5rem; font-family: var(--font-display); text-transform: uppercase; font-size: .9rem; color: var(--color-secondary); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .program-card, .program-card:hover { transition: none; transform: none; } }

/* Instructors */
.instructor-grid { --gap: 2rem; }
.instructor { text-align: center; }
.instructor-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.instructor-photo-empty { display: block; background: var(--surface-alt); }
.instructor h3 { margin-bottom: .2rem; }
.instructor-title { color: var(--color-secondary); font-weight: 700; margin-bottom: .6rem; }
/* Smaller instructors (assistants): a narrower photo, aligned like the text, and smaller type. */
.instr-size-medium .instructor-photo, .instr-size-small .instructor-photo { display: block; }
.instr-size-medium .instructor-photo { max-width: 13rem; }
.instr-size-small .instructor-photo { max-width: 8.5rem; margin-bottom: .75rem; }
.grid.text-center .instructor-photo { margin-left: auto; margin-right: auto; }
.grid.text-right .instructor-photo { margin-left: auto; }
.instr-size-medium .instructor h3 { font-size: 1.15rem; }
.instr-size-small .instructor h3 { font-size: 1rem; }
.instr-size-medium .instructor-title, .instr-size-medium .instructor-bio { font-size: .95rem; }
.instr-size-small .instructor-title, .instr-size-small .instructor-bio { font-size: .85rem; }

/* Schedule */
.sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.25rem; }
.sched-day { background: var(--surface-alt); border-radius: var(--radius); padding: 1.25rem; }
.sched-day h3 { border-bottom: 3px solid var(--color-secondary); padding-bottom: .5rem; }
.sched-day ul { list-style: none; margin: 0; padding: 0; }
.sched-day li { padding: .6rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.sched-day li:last-child { border-bottom: 0; }
.sched-time { font-weight: 700; color: var(--ink); font-size: .95rem; }
.sched-meta { font-size: .9rem; }
.schedule-empty { text-align: center; opacity: .8; }

/* Pricing */
.price-card { border: 2px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; }
.price-card:hover { border-color: var(--color-secondary); }
.price { margin: .25rem 0 1rem; }
.price-amount { font-family: var(--font-display); font-size: 2.5rem; color: var(--ink); font-weight: 700; }
.price-desc { flex: 1; }

/* Testimonials */
.testimonials { background: var(--surface-alt); }
.testimonial { margin: 0; background: var(--color-white); border-left: 5px solid var(--color-secondary); padding: 1.5rem; border-radius: var(--radius); }
.testimonial blockquote { margin: 0 0 .75rem; font-family: var(--font-serif); color: var(--ink); }
.testimonial figcaption { font-weight: 700; color: var(--color-secondary); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 700; color: var(--ink); list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: .25rem; top: .75rem; font-size: 1.6rem; color: var(--color-secondary); line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding-bottom: 1rem; }

/* CTA banner */
.cta-banner { background: var(--block-bg_color, var(--color-secondary)); color: var(--block-text_color, var(--color-white)); padding: 3.5rem 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-title { color: inherit; margin-bottom: .25rem; }
.cta-banner p { margin: 0; color: inherit; opacity: .92; }
.cta-text p + p { margin-top: .5rem; }
.cta-text a { color: inherit; }
/* Button: its own colors win; else it inverts the banner colors (when both are set); else the default dark button. */
.cta-banner .btn-dark { background: var(--block-button_color, var(--color-primary)); color: var(--block-button_text_color, var(--color-white)); border-color: var(--block-button_color, transparent); }
.cta-banner .btn-dark:hover { background: var(--block-button_text_color, var(--color-white)); color: var(--block-button_color, var(--color-primary)); }
.cta-custom .btn-dark { background: var(--block-button_color, var(--block-text_color)); color: var(--block-button_text_color, var(--block-bg_color)); border-color: var(--block-button_color, var(--block-text_color)); }
.cta-custom .btn-dark:hover { background: var(--block-button_text_color, var(--block-bg_color)); color: var(--block-button_color, var(--block-text_color)); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; }
.contact-grid-single { grid-template-columns: 1fr; max-width: 40rem; margin: 0 auto; }
@media (max-width: 48rem) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form .field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.contact-form label { font-weight: 500; color: var(--ink); }
.contact-form input, .contact-form textarea {
    font: inherit; padding: .75rem .85rem; border: 2px solid var(--line); border-radius: var(--radius);
    background: var(--color-white); color: var(--ink); width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-secondary); }   /* the focus ring comes from :focus-visible */
.contact-info h3 { font-size: 1rem; margin: 1.25rem 0 .25rem; color: var(--color-secondary); }
.contact-info h3:first-child { margin-top: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.25rem; }
.notice ul { margin: 0; padding-left: 1.1rem; }
.notice-ok { background: #E7F6EC; color: #14532D; border-left: 5px solid #16A34A; }
.notice-error { background: #FDECEC; color: #7F1D1D; border-left: 5px solid #DC2626; }
.map { margin-top: 2.5rem; }
.map iframe { width: 100%; height: 22rem; border: 0; border-radius: var(--radius); }
.map iframe:focus, .map iframe:focus-visible { outline: 3px solid var(--focus-a); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-b); }

/* Gallery */
.gallery-grid { --gap: .75rem; --cols: 2; }
/* Photos are smaller: 2 per row on phones, up to 3 on tablets, the chosen number on large screens. */
.gallery-grid.cols-1 { --cols: 1; }
@media (min-width: 48rem) { .gallery-grid.cols-3, .gallery-grid.cols-4, .gallery-grid.cols-5, .gallery-grid.cols-6 { --cols: 3; } }
@media (min-width: 60rem) {
    .gallery-grid.cols-4 { --cols: 4; }
    .gallery-grid.cols-5 { --cols: 5; }
    .gallery-grid.cols-6 { --cols: 6; }
}
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery-grid figcaption { font-size: .9rem; padding-top: .35rem; }

/* --- Footer ----------------------------------------------------------------- */
.site-footer { background: var(--color-primary); color: rgba(255, 255, 255, .78); padding: 3.5rem 0 1.5rem; font-size: .95rem; }
.site-footer a { color: var(--color-white); text-decoration: none; }
.site-footer a:hover { color: var(--color-white); text-decoration: underline; }
.footer-bottom a { text-decoration: underline; margin-left: 1rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr; gap: 2rem; }
@media (max-width: 48rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; color: var(--color-white); margin-bottom: .5rem; }
.footer-heading { font-family: var(--font-display); text-transform: uppercase; color: var(--color-white); letter-spacing: .05em; margin-bottom: .75rem; }
.footer-muted { opacity: .75; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .35rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .85rem; opacity: .75; }

/* --- Section options: Image + text, schedule, FAQ, CTA banner, contact form (defaults match the original look) ---- */
@media (min-width: 48.01rem) {
    .split-img-small.split-left .split-grid, .split-img-large.split-right .split-grid { grid-template-columns: 1fr 2fr; }
    .split-img-large.split-left .split-grid, .split-img-small.split-right .split-grid { grid-template-columns: 2fr 1fr; }
    .contact-grid.contact-info-left:not(.contact-grid-single) { grid-template-columns: 2fr 3fr; }
    .contact-info-left > .contact-info { order: -1; }
}
.split-v-top .split-grid { align-items: start; }
.split-v-bottom .split-grid { align-items: end; }
.split-text-center .split-body, .split-text-center .split-body h2 { text-align: center; }
.split-text-right .split-body, .split-text-right .split-body h2 { text-align: right; }

.schedule.text-center .sched-day { text-align: center; }
.schedule.text-right .sched-day { text-align: right; }
@media (min-width: 64rem) {
    .sched-cols-1 .sched-grid { grid-template-columns: repeat(1, 1fr); }
    .sched-cols-2 .sched-grid { grid-template-columns: repeat(2, 1fr); }
    .sched-cols-3 .sched-grid { grid-template-columns: repeat(3, 1fr); }
    .sched-cols-4 .sched-grid { grid-template-columns: repeat(4, 1fr); }
    .sched-cols-5 .sched-grid { grid-template-columns: repeat(5, 1fr); }
    .sched-cols-6 .sched-grid { grid-template-columns: repeat(6, 1fr); }
    .sched-cols-7 .sched-grid { grid-template-columns: repeat(7, 1fr); }
}

.container.faq-w-medium { max-width: 64rem; }


.contact-info-below .contact-info { margin-top: 1rem; }
.contact-grid.contact-info-below { grid-template-columns: 1fr; max-width: 40rem; margin: 0 auto; }

/* --- Section backgrounds: color and image come from per-block custom properties (see SiteRenderer::blockCss) ------ */
/* Custom properties inherit, so every section and container resets them: a container's color or image never reaches the sections inside it.
   (A block's own #block-<id> rule is more specific and sets its own values.) */
.block, .cbox { --block-bg_color: initial; --block-bg_image: initial; --block-text_color: initial; --block-button_color: initial; --block-button_text_color: initial; --block-color: initial; --block-max_width: initial; }
.has-bg { position: relative; background-color: var(--block-bg_color, transparent); background-image: var(--block-bg_image, none); background-size: cover; background-position: center; }
.has-bg > .container { position: relative; }
.bg-overlay-light::before, .bg-overlay-medium::before, .bg-overlay-dark::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.bg-overlay-medium::before { background: rgba(0, 0, 0, .45); }
.bg-overlay-dark::before { background: rgba(0, 0, 0, .7); }
/* Light text tone: only the section's own text turns light, never the text inside white cards. */
.bg-tone-light .section-title, .bg-tone-light .section-intro, .bg-tone-light .prose, .bg-tone-light .prose :is(h3, h4, a),
.bg-tone-light .split-body, .bg-tone-light .split-body :is(h2, h3, h4, a), .bg-tone-light .faq-item summary, .bg-tone-light .faq-answer,
.bg-tone-light .faq-answer :is(h3, h4, a), .bg-tone-light .contact-info, .bg-tone-light .contact-form label, .bg-tone-light .schedule-empty,
.bg-tone-light .gallery-grid figcaption, .bg-tone-light .carousel-slide figcaption { color: var(--color-white); }

/* Corner rounding: a section overrides --radius for its own photos, cards and buttons. */
.radius-none { --radius: 0; }
.radius-small { --radius: 3px; }
.radius-medium { --radius: 12px; }
.radius-large { --radius: 24px; }

/* --- Container: a box around other sections; its maximum width is a per-block custom property --------------------- */
.cbox { width: 100%; max-width: var(--block-max_width, none); margin: 0 auto; }
.cbox-align-left { margin-left: 0; margin-right: auto; }
.cbox-align-right { margin-left: auto; margin-right: 0; }
.cbox-pad-small { padding: 1.5rem 0; }
.cbox-pad-medium { padding: 3rem 0; }
.cbox-pad-large { padding: 5rem 0; }
.cbox-r-small { border-radius: 6px; overflow: hidden; --cbox-r: 6px; }
.cbox-r-medium { border-radius: 16px; overflow: hidden; --cbox-r: 16px; }
.cbox-r-large { border-radius: 32px; overflow: hidden; --cbox-r: 32px; }
/* Sections placed directly in a rounded container round their own box too, so a banner shows rounded corners even when the container has padding and no background. */
.cbox-r-small > .cbox-inner > .block, .cbox-r-medium > .cbox-inner > .block, .cbox-r-large > .cbox-inner > .block { border-radius: var(--cbox-r); overflow: hidden; }
.has-bg > .cbox-inner { position: relative; }

/* --- Call-to-action banner: where the button sits, text order and sizes, button size and style, spacing ------------ */
.cta-copy { flex: 1 1 20rem; display: flex; flex-direction: column; gap: .35rem; text-align: left; }
.cta-title { margin: 0; }
.cta-order-text .cta-copy { flex-direction: column-reverse; }
.cta-text-center .cta-copy { text-align: center; }
.cta-text-right .cta-copy { text-align: right; }
.cta-btn-left .cta-inner { flex-direction: row-reverse; }
.cta-btn-top .cta-inner, .cta-btn-bottom .cta-inner { flex-direction: column; align-items: stretch; }
.cta-btn-top .cta-inner { flex-direction: column-reverse; }
.cta-btn-top .cta-copy, .cta-btn-bottom .cta-copy { flex: 0 0 auto; }
.cta-btn-align-left .cta-action { align-self: flex-start; }
.cta-btn-align-center .cta-action { align-self: center; }
.cta-btn-align-right .cta-action { align-self: flex-end; }
.cta-btn-right .cta-action, .cta-btn-left .cta-action { align-self: center; }
.cta-h-sm .cta-title { font-size: 1.35rem; }
.cta-h-lg .cta-title { font-size: 3rem; }
.cta-h-xl .cta-title { font-size: 4rem; }
.cta-t-sm .cta-text { font-size: .9rem; }
.cta-t-lg .cta-text { font-size: 1.3rem; }
.cta-b-sm .btn { padding: .45rem 1rem; font-size: .85rem; }
.cta-b-lg .btn { padding: 1.05rem 2.4rem; font-size: 1.15rem; }
.cta-pad-none { padding: 0; }
.cta-pad-small { padding: 1.75rem 0; }
.cta-pad-large { padding: 5.5rem 0; }
/* Button styles (custom button colors still win, as for the dark button above). */
.cta-banner .btn-primary { background: var(--block-button_color, var(--color-secondary)); color: var(--block-button_text_color, var(--color-white)); border-color: var(--block-button_color, var(--color-secondary)); }
.btn-light { background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); }
.btn-light:hover { background: transparent; color: var(--color-white); }
.cta-banner .btn-light { background: var(--block-button_color, var(--color-white)); color: var(--block-button_text_color, var(--color-primary)); border-color: var(--block-button_color, var(--color-white)); }
.btn-outline-cta { background: transparent; color: inherit; border-color: currentColor; }
.btn-outline-cta:hover { opacity: .8; }
.cta-banner .btn-outline-cta { background: transparent; color: var(--block-button_text_color, inherit); border-color: var(--block-button_color, currentColor); }
/* "Just the text and button": no colored strip; the page's own text color unless one is chosen. */
.cta-plain { background: var(--block-bg_color, transparent); color: var(--block-text_color, var(--color-text)); }
.cta-plain .cta-title { color: var(--block-text_color, var(--ink)); }

/* Plain legal document (privacy policy, accessibility statement): headings and paragraphs in a narrow column, nothing decorative. */
.page-title-legal { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1rem 0; }
.page-title-legal .page-title { font: 700 1.9rem/1.25 var(--font-body, "Roboto", Arial, sans-serif); text-transform: none; letter-spacing: 0; color: #111; margin: 0; }
.block.legal { background: #fff; padding: 0; }
.legal-doc { max-width: 46rem; margin: 0 auto; padding: 0 1rem; text-align: left; color: #111; font-size: 1rem; line-height: 1.65; }
.legal-title { font: 700 1.3rem/1.3 var(--font-body, "Roboto", Arial, sans-serif); text-transform: none; letter-spacing: 0; color: #111; margin: 1.75rem 0 .5rem; text-align: left; }
.legal-body h3, .legal-body h4 { font: 700 1.05rem/1.4 var(--font-body, "Roboto", Arial, sans-serif); text-transform: none; letter-spacing: 0; color: #111; margin: 1.1rem 0 .35rem; }
.legal-body p, .legal-body li { margin: 0 0 .85rem; color: #111; }
.legal-body ul, .legal-body ol { margin: 0 0 .85rem; padding-left: 1.5rem; }
.legal-body a { color: #0B4FA8; text-decoration: underline; }
.block.legal:last-of-type .legal-doc { padding-bottom: 3rem; }
.form-hint { font-size: .9rem; margin: .25rem 0 .6rem; color: var(--color-text); }
.form-hint a { text-decoration: underline; }

/* Hero background video: a pause control (WCAG 2.2.2), added by site.js. */
.hero-pause { position: absolute; right: 1.25rem; bottom: 1rem; z-index: 3; min-height: 2.25rem; padding: .35rem .9rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.hero-pause:hover { background: #000; }
/* Contact form: required marker, field errors and the error summary */
.req { color: inherit; font-weight: 400; }
.form-note { font-size: .95rem; margin: 0 0 1rem; }
.field-error { margin: 0; font-size: .95rem; font-weight: 500; color: #8A1212; }
.field-error::before { content: "Error: "; font-weight: 700; }
.contact-form [aria-invalid="true"] { border-color: #B91C1C; }
.notice a { color: inherit; text-decoration: underline; }
.notice:focus { outline: 3px solid var(--focus-a); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-b); }