/* Final responsive layer for all public website pages. */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
body { min-width: 0; position: relative; }
img, svg, video { display: block; max-width: 100%; }
.container { width: min(1180px, calc(100% - clamp(30px, 5vw, 64px))); }
.nav-wrap, main, section, .container,
.split-heading > *, .feature-band > *, .club-promo-grid > *, .story-grid > *,
.page-hero-grid > *, .form-layout > *, .editorial-grid > *, .faq-layout > *,
.about-intro-grid > *, .purpose-grid > *, .about-reviews .container > * { min-width: 0; }
h1, h2, h3, p, a, button, label, strong { overflow-wrap: break-word; }
input, select, textarea, button { max-width: 100%; }
.button { text-align: center; }
.dynamic-page-art { background-image: var(--page-banner); background-position: center; background-size: cover; }
.page-hero h1,.ag-hero h1{font-size:75px;font-weight:700;line-height:.96}
.dynamic-page-art{background-size:contain;background-repeat:no-repeat}
.dynamic-plans { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 360px)); }

@media (max-width: 1180px) {
    .section { padding-block: clamp(80px, 9vw, 100px); }
    .footer-grid { gap: clamp(30px, 5vw, 60px); }
    .feature-copy { padding-inline: clamp(36px, 6vw, 72px); }
    .purpose-grid article { padding-right: 40px; }
    .purpose-grid article + article { padding-left: 40px; }
}

@media (max-width: 900px) {
    .section { padding-block: clamp(64px, 10vw, 84px); }
    .site-header { position: sticky; top: 0; }
    .site-header .site-nav { overscroll-behavior: contain; }
    .site-header .site-nav > a { flex: 0 0 auto; }

    .home-slider { height: clamp(520px, 78svh, 650px); min-height: 0; }
    .slide-copy { padding: 48px 72px 92px; }
    .slide-copy h1, .slide-copy h2 { font-size: clamp(40px, 8vw, 64px); }
    .slide-one .slide-copy h1, .dynamic-slide .slide-copy h1 { font-size: clamp(32px, 6vw, 50px); }
    .slide-copy p { font-size: clamp(22px, 4.5vw, 36px); }

    .feature-image { min-height: clamp(360px, 58vw, 520px); }
    .feature-copy { padding: 72px clamp(28px, 7vw, 60px); }
    .story-grid { gap: 32px; }
    .story-photo { min-height: clamp(360px, 65vw, 500px); }
    .story-meta { gap: 30px; }

    .page-hero { padding-top: clamp(55px, 9vw, 80px); }
    .page-hero h1,.ag-hero h1{font-size:clamp(46px,8vw,56px)}
    .page-hero-grid { gap: 38px; }
    .page-hero p { margin-bottom: 45px; }
    .page-hero-art { width: min(520px, 85%); min-height: clamp(280px, 48vw, 400px); margin-inline: auto; }

    .finder-box { gap: 35px; padding: 35px; }
    .location-grid { gap: 16px; }
    .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plans-grid .plan-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: min(100%, 560px); justify-self: center; }
    .reviews-grid { gap: 16px; }
    .reviews-grid blockquote { padding: 32px; }
    .enquiry-form { padding: 32px; }
    .faq-layout { gap: 48px; }

    .about-photo { width: min(650px, 90%); justify-self: center; }
    .about-location-grid article { min-width: 0; }
    .gallery-lightbox { padding: 56px 24px 24px; }
    .lightbox-placeholder { width: min(100%, 900px); height: min(70svh, 680px); }
    .public-modal { overflow-y: auto; align-items: start; padding-block: max(20px, 5svh); }
    .public-modal > div { max-height: 90svh; overflow-y: auto; }
}

@media (max-width: 720px) {
    .dynamic-page-art { background-image: var(--page-banner-mobile); }
    .section { padding-block: 64px; }
    .eyebrow { margin-bottom: 13px; }
    .lead { font-size: clamp(17px, 4.5vw, 20px); }
    .split-heading h2, .section h2 { font-size: clamp(36px, 10vw, 48px); }

    .slide-copy { padding: 38px 48px 86px; }
    .slide-copy a { min-width: 0; width: min(230px, 78vw); }
    .slider-arrow { width: 52px; }

    .class-copy h3 { font-size: 29px; }
    .story-grid { grid-template-columns: 1fr; }
    .story-grid blockquote { font-size: clamp(30px, 8vw, 44px); }
    .story-meta { min-height: 0; flex-direction: row; align-items: end; justify-content: space-between; }

    .page-hero h1 { font-size: clamp(43px, 12vw, 66px); }
    .page-hero p { font-size: 16px; }
    .page-hero-art { width: min(100%, 480px); }
    .info-grid { grid-template-columns: 1fr; }
    .info-card { min-height: 0; padding: 28px; }
    .mini-placeholder { margin: 24px 0; }
    .location-grid, .plans-grid, .reviews-grid { grid-template-columns: 1fr; }
    .plans-grid .plan-card:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
    .plan-card { padding: 30px; }
    .plan-toggle { max-width: 100%; }
    .plan-toggle button { min-width: 0; padding-inline: 16px; }
    .jobs-list article { align-items: flex-start; gap: 20px; }
    .jobs-list button { flex: 0 0 auto; }
    .hours-table article { grid-template-columns: 1fr; gap: 14px; }
    .hours-table h3 { grid-column: auto; }

    .about-photo { width: calc(100% - 18px); min-height: clamp(360px, 105vw, 500px); }
    .about-year { right: -8px; }
    .about-location-grid article { grid-template-columns: 30px minmax(0, 1fr) 40px; gap: 12px; }
    .about-gallery-teaser .section-top { align-items: flex-start; flex-direction: column; }
    .review-score { padding: 28px; }

    .gallery-filters { scrollbar-width: thin; }
    .gallery-lightbox { grid-template-rows: minmax(0, 1fr) auto; }
    .gallery-lightbox > button { right: 15px; top: 8px; }
    .lightbox-placeholder { height: min(68svh, 560px); }

    .schedule { overflow-x: hidden; }
    .schedule-filter { grid-template-columns: 1fr; padding: 22px; }
    .day-tabs { grid-template-columns: repeat(7, minmax(74px, 1fr)); overflow-x: auto; overscroll-behavior-inline: contain; }
    .schedule-list { padding-inline: 18px; }
    .class-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; }
    .class-row p { display: none; }
    .class-row small { grid-column: 2; }
    .class-row a, .public-schedule .class-book-button, .public-schedule .class-full { grid-column: 3; grid-row: 1 / 3; }
}

@media (max-width: 480px) {
    .container { width: calc(100% - 28px); }
    .site-header .nav-wrap { padding-inline: 14px; }
    .brand-panel { width: min(50vw, 162px); flex-basis: min(50vw, 162px); }
    .brand-panel img { max-width: 156px; }
    .site-header .site-nav { padding-inline: 14px; }

    .home-slider { height: max(480px, 72svh); }
    .slide-copy { padding: 32px 30px 82px; }
    .slide-copy h1, .slide-copy h2 { font-size: clamp(34px, 10vw, 48px); }
    .slide-one .slide-copy h1, .dynamic-slide .slide-copy h1 { font-size: clamp(27px, 7.5vw, 38px); }
    .slide-copy p { font-size: clamp(18px, 6vw, 25px); }
    .slider-arrow { width: 44px; }

    .button-row, .button-row .button, .join-grid .button { width: 100%; }
    .feature-copy { padding: 58px 20px; }
    .feature-copy h2 { font-size: clamp(36px, 11vw, 46px); }
    .feature-image { min-height: 320px; }
    .section-top { margin-bottom: 32px; }
    .story-photo { min-height: 340px; }
    .story-meta { align-items: flex-start; flex-direction: column; }
    .join-strip { padding-block: 52px; }
    .join-grid h2 { font-size: clamp(35px, 11vw, 48px); }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-brand, .footer-grid > div:last-child { grid-column: auto; }
    .site-footer { padding-top: 58px; }
    .footer-bottom { margin-top: 42px; }
    .footer-bottom div { flex-wrap: wrap; }

    .page-hero { padding-top: 48px; }
    .page-hero h1 { font-size: clamp(38px, 12vw, 52px); }
    .ag-hero h1 { font-size: clamp(38px, 12vw, 52px); }
    .page-hero p { margin: 22px 0 34px; }
    .page-hero-art { min-height: 240px; border-radius: 140px 140px 0 0; }
    .dynamic-page-art { background-image: var(--page-banner-mobile); }
    .finder-box, .enquiry-form { padding: 22px 18px; }
    .finder-box h2, .form-layout h2 { font-size: clamp(34px, 10vw, 42px); }
    .search-form .button, .enquiry-form > .button { width: 100%; }
    .plan-toggle { width: 100%; }
    .plan-toggle button { flex: 1; font-size: 13px; }
    .plan-card { padding: 26px 22px; }
    .price strong { font-size: 37px; }
    .reviews-grid blockquote { padding: 26px 22px; }
    .reviews-grid p { font-size: 20px; }
    .jobs-list article { flex-direction: column; }
    .jobs-list button { padding: 0; }
    .hours-table article { padding: 22px 18px; }
    .hours-table article div { align-items: flex-start; flex-direction: column; gap: 3px; }
    .legal-copy h2 { font-size: 24px; }

    .ag-hero { padding: 60px 0 54px; }
    .ag-hero h1 { font-size: clamp(44px, 14vw, 58px); }
    .ag-hero::before { width: 360px; height: 360px; }
    .about-intro-grid { gap: 52px; }
    .about-photo { min-height: 350px; border-radius: 180px 180px 20px 20px; }
    .about-year { width: 100px; height: 100px; }
    .purpose-grid article { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
    .about-location-grid article { padding: 22px 14px; }
    .about-location-grid h3 { font-size: 23px; }
    .teaser-grid > div { min-height: 230px; }
    .about-reviews blockquote p { font-size: clamp(27px, 8vw, 38px); }
    .gallery-grid { grid-auto-rows: 240px; }
    .gallery-lightbox { padding: 50px 10px 16px; }
    .lightbox-placeholder { width: 100%; height: min(64svh, 480px); }
    .gallery-lightbox p { margin-top: 10px; text-align: center; }

    .public-modal { padding: 12px; }
    .public-modal > div { padding: 28px 18px 22px; border-radius: 14px; }
    .public-modal h2 { padding-right: 26px; font-size: 28px; }
    .public-empty { padding: 32px 16px; }
    .toast { right: 10px; bottom: 10px; left: 10px; }
}

@media (max-width: 360px) {
    .site-header .nav-wrap { padding-inline: 10px; }
    .brand-panel { width: 140px; flex-basis: 140px; }
    .brand-panel img { max-width: 136px; transform: scale(1.02); }
    .site-header .menu-toggle { width: 40px; height: 40px; }
    .container { width: calc(100% - 22px); }
    .section { padding-block: 54px; }
    .slide-copy { padding-inline: 24px; }
    .field-pair { gap: 12px; }
    .plan-toggle button { padding-inline: 8px; font-size: 12px; }
    .about-location-grid article { grid-template-columns: 24px minmax(0, 1fr); }
    .about-location-grid article > a { grid-column: 2; }
}

/* Keep every public surface inside the visual viewport, including the
   translated mobile menu and dynamic content supplied by the admin panel. */
.site-header,
main,
main > section,
.join-strip,
.site-footer {
    width: 100%;
    max-width: 100%;
}

.site-header .nav-wrap,
.site-header .site-nav,
.feature-page-banner,
.feature-banner-inner,
.feature-banner-copy,
.feature-banner-boxes,
.page-hero,
.page-hero-grid {
    max-width: 100%;
}

@media (max-width: 900px) {
    .site-header .site-nav {
        right: auto;
        left: 0;
        width: 100%;
        max-width: 100%;
        contain: layout paint;
    }

    .feature-banner-copy,
    .feature-banner-copy h1,
    .feature-banner-copy p {
        width: 100%;
        max-width: 100%;
    }

    .feature-banner-copy h1 {
        overflow-wrap: anywhere;
    }

    /* Inner-page banners are shorter on tablets; the Home slider is unchanged. */
    .feature-page-banner,
    .ag-hero,
    .ag-hero.has-admin-banner,
    .page-hero {
        height: 460px;
        min-height: 460px;
        max-height: 460px;
    }

    .feature-banner-inner,
    .page-hero-grid {
        height: 460px;
        min-height: 460px;
        max-height: 460px;
    }

    .feature-banner-inner {
        padding-top: 34px;
        padding-bottom: 30px;
    }

    .feature-banner-copy h1 {
        font-size: clamp(40px, 7vw, 54px);
        line-height: .96;
    }

    .feature-banner-copy p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.45;
    }

    .feature-banner-boxes {
        margin-top: 22px;
        gap: 14px 0;
    }
}

@media (max-width: 620px) {
    .feature-page-banner,
    .ag-hero,
    .ag-hero.has-admin-banner,
    .page-hero {
        height: 390px;
        min-height: 390px;
        max-height: 390px;
    }

    .feature-banner-inner,
    .page-hero-grid {
        height: 390px;
        min-height: 390px;
        max-height: 390px;
    }

    .feature-page-banner {
        background-size: cover;
        background-position: center;
    }

    .feature-banner-inner {
        justify-content: center;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .feature-banner-copy {
        width: 100%;
    }

    .feature-banner-badge {
        margin-bottom: 12px;
        font-size: 8px;
        letter-spacing: .16em;
    }

    .feature-banner-copy h1 {
        font-size: clamp(30px, 9vw, 40px);
        line-height: 1;
        letter-spacing: -.035em;
    }

    .feature-banner-copy p {
        margin-top: 13px;
        font-size: 12px;
        line-height: 1.4;
    }

    .feature-banner-button {
        min-height: 40px;
        margin-top: 15px;
        padding: 8px 15px;
        font-size: 12px;
    }

    .feature-banner-boxes {
        margin-top: 16px;
        gap: 9px 0;
    }

    .feature-banner-boxes article {
        padding-inline: 10px;
    }

    .feature-banner-boxes i {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
        font-size: 21px;
    }

    .feature-banner-boxes strong {
        font-size: 8px;
    }

    .feature-banner-boxes p {
        margin-top: 3px;
        font-size: 9px;
        line-height: 1.25;
    }

    /* Fallback page heroes use their image as subtle artwork behind the copy. */
    .page-hero-grid {
        position: relative;
        display: flex;
        align-items: center;
    }

    .page-hero-grid > div:first-child {
        position: relative;
        z-index: 2;
        width: 82%;
    }

    .page-hero h1 {
        font-size: clamp(36px, 11vw, 48px);
        line-height: .98;
    }

    .page-hero p {
        margin: 17px 0 0;
        font-size: 13px;
        line-height: 1.45;
    }

    .page-hero-art {
        position: absolute;
        inset: 0 0 0 34%;
        width: auto;
        min-height: 0;
        margin: 0;
        border-radius: 0;
        opacity: .45;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .site-header .site-nav { padding-top: 6px; }
    .site-header .site-nav > a:not(.nav-cta),
    .site-header .site-nav .nav-cta { min-height: 44px; padding-block: 10px; }
    .site-header .site-nav .nav-cta { margin-top: 8px; }
    .home-slider { height: 480px; }
    .public-modal > div { max-height: calc(100svh - 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .site-nav { transition: none; }
}