/* ==========================================================================
   style.css
   Master stylesheet — By The Book Baseball
   ========================================================================== */

/* ============================================================================
   HOME PAGE (page-home.php)
   Note: the "Shared / utility" classes below (eyebrow rows, section headings,
   buttons, etc.) are reused by other page templates, including About.
   ============================================================================ */

/* -- Marquee ------------------------------------------------------------- */
#mq-track {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    width: max-content;
}

.mq-item {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1;
    color: #F8FAFC;
    flex-shrink: 0;
}

.mq-dot {
    color: #00B74F;
}

/* -- Shared / utility ------------------------------------------------------ */
.eyebrow-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eyebrow-dash {
    width: 28px;
    height: 2px;
    background: #00B74F;
}

.eyebrow-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    color: #00B74F;
}

/* -- Shared heading base --------------------------------------------------- */
.section-heading,
.about-heading,
.contact-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(48px, 4.8vw, 76px);
    line-height: .95;
    color: #F8FAFC;
}

.section-heading   { margin: 20px 0 0; }
.about-heading     { margin: 22px 0 0; }
.contact-heading   { margin: 20px 0 0; font-size: clamp(48px, 4.8vw, 72px); }

.section-heading--accent {
    color: #00B74F;
}

/* -- Shared lede/body base ------------------------------------------------- */
.section-lede,
.memberships-lede,
.camps-lede,
.contact-lede,
.tour-cta-text,
.hero-lead,
.about-copy,
.bc-body-text {
    font-size: 16px;
    line-height: 1.7;
    color: #94A3B8;
    text-wrap: pretty;
}

.section-lede    { margin: 0;       max-width: 360px; font-size: 15px; }
.memberships-lede{ margin: 26px 0 0; }
.camps-lede      { margin: 0;       max-width: 420px; }
.contact-lede    { margin: 26px 0 0; font-size: 15px; }
.tour-cta-text   { margin: 16px 0 0; max-width: 500px; }
.hero-lead       { margin: 24px 0 0; max-width: 520px; font-size: 20px; line-height: 1.65; }
.hero-lead--home { margin-top: 32px; }
.about-copy      { margin: 30px 0 0; line-height: 1.75; }
.bc-body-text    { margin: 0 0 18px; line-height: 1.75; }

.section-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
}

.btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #F8FAFC;
    text-decoration: none;
}

.btn--solid {
    background: #00B74F;
    color: #050D17;
    padding: 18px 34px;
}

.btn--outline {
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 16px 40px;
    text-align: center;
}

.btn--block {
    display: block;
    text-align: center;
    padding: 18px 24px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    touch-action: none;
}

.hero-img {
    position: absolute;
    left: 0;
    right: 0;
    top: -8%;
    bottom: -8%;
    z-index: 0;
    transition: none;
}

.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 13, 23, .95) 0%, rgba(5, 13, 23, .62) 40%, rgba(5, 13, 23, .22) 65%, rgba(5, 13, 23, .04) 100%);
}

.hero-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24vh;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 13, 23, 0), #050D17);
}

.hero-content {
    position: absolute;
    left: 64px;
    z-index: 2;
    transform: translateY(-20px);
    max-width: 650px;
}


.hero-title {
    margin: 24px 0 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(48px, 6.8vw, 104px);
    line-height: .92;
    letter-spacing: .005em;
    color: #F8FAFC;
}

.hero-title-line-mask {
    display: block;
    overflow: hidden;
}

.hero-title-line {
    display: block;
}

.hero-title-line--accent {
    color: #00B74F;
}


.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
}

.hero-thumbs {
    position: absolute;
    right: 64px;
    bottom: 130px;
    z-index: 5;
    display: flex;
    gap: 24px;
}

.hero-thumb {
    position: relative;
    width: 150px;
    height: 90px;
    cursor: pointer;
    border: 2px solid rgba(0, 183, 79, .3);
    overflow: hidden;
    transition: border-color .3s, transform .3s;
    background: #0A1626;
}

.hero-thumb.is-active {
    border-color: #F8FAFC;
}

.hero-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
    transition: opacity .3s;
}

.hero-thumb.is-active .hero-thumb-img {
    opacity: 1;
}

.hero-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 13, 23, .45);
    transition: background .3s;
}

.hero-thumb.is-active .hero-thumb-overlay {
    background: rgba(5, 13, 23, 0);
}

.hero-thumb-label-wrap {
    position: absolute;
    left: 12px;
    bottom: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-thumb-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #94A3B8;
    letter-spacing: .08em;
    transition: color .3s;
    text-align: center;
}

.hero-thumb.is-active .hero-thumb-label {
    color: #F8FAFC;
}

[data-hero-dots] {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    z-index: 5;
    align-items: center;
    gap: 12px;
}

[data-dot] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(248, 250, 252, .3);
    cursor: pointer;
    transition: background .3s, transform .3s;
}

[data-dot][data-active="1"] {
    background: #00B74F;
    transform: scale(1.4);
}

.marquee-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    overflow: hidden;
    padding: 24px 0;
    border-top: 1px solid rgba(0, 183, 79, .14);
    background: rgba(3, 9, 17, .78);
    backdrop-filter: blur(8px);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-section {
    background: #07101D;
    border-top: 1px solid rgba(0, 183, 79, .12);
    padding: 80px 0 80px;
    box-sizing: border-box;
}

.services-header {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.services-below {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 64px;
    margin-top: 32px;
}

.services-nav {
    display: flex;
    gap: 12px;
}

.services-nav .ov-icon-btn {
    position: static;
}

.services-nav-btn--disabled {
    opacity: .3;
    pointer-events: none;
}

.services-swiper {
    margin-top: 46px;
    padding-left: 64px !important;
    padding-top: 10px !important;
    overflow: visible !important;
}

.services-swiper .swiper-wrapper {
    align-items: stretch;
}

.services-swiper .swiper-slide {
    width: 400px;
    height: 380px;
    flex-shrink: 0;
}

.services-swiper-pagination {
    position: static !important;
    display: flex !important;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    bottom: auto;
    left: auto;
    transform: none !important;
}

.services-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(248, 250, 252, .3);
    opacity: 1;
    border-radius: 0;
    transition: background .3s, transform .3s;
}

.services-swiper-pagination .swiper-pagination-bullet-active {
    background: #00B74F;
    transform: scale(1.4);
}

.svc-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(248, 250, 252, .1);
    box-sizing: border-box;
    background: #0A1626;
    cursor: pointer;
}

.svc-card.is-last {
    border-color: rgba(248, 250, 252, .22);
    background: #0B2240;
}

.svc-card-img {
    position: absolute;
    top: 0;
    left: -8%;
    width: 116%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    transition: filter .5s;
}

.svc-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 13, 23, 0) 0%, rgba(5, 13, 23, 0) 48%, rgba(5, 13, 23, 1) 68%, rgba(5, 13, 23, .9) 100%);
    pointer-events: none;
}

.svc-card-body {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.svc-card-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 72px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(124, 199, 255, .75);
}

.svc-card.is-last .svc-card-num {
    -webkit-text-stroke: 1px rgba(124, 199, 255, .9);
}

.svc-card-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 1;
    color: #F8FAFC;
}

.svc-card-desc {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #C7D3E0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   MEMBERSHIPS
   ========================================================================== */
.memberships-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 160px 64px;
    box-sizing: border-box;
}

.memberships-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}


.memberships-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 64px;
    align-items: stretch;
}

.mb-card {
    position: relative;
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    box-sizing: border-box;
    transition: transform .3s;
}

.mb-card-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    background: #00B74F;
    color: #050D17;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    padding: 8px 14px;
}

.mb-card-tier {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;
    color: #94A3B8;
}

.mb-card-title {
    margin: 14px 0 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 52px;
    line-height: 1;
    color: #F8FAFC;
}

.mb-card-tagline {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94A3B8;
    min-height: 2.6em;
    text-wrap: pretty;
}

.mb-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 18px;
}

.mb-card-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 58px;
    line-height: 1;
    color: #F8FAFC;
}

.mb-card-price-period {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #94A3B8;
}

.mb-card-divider {
    width: 36px;
    height: 2px;
    background: #00B74F;
    margin: 24px 0;
}

.mb-card-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.mb-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #F8FAFC;
}

.mb-card-features li .material-icons {
    font-size: 16px;
    color: #00B74F;
    flex-shrink: 0;
    margin-top: 1px;
}

.mb-card-cta {
    display: block;
    margin-top: 32px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
}

.mb-card-cta--featured {
    color: #050D17;
    background: #00B74F;
    text-align: center;
    padding: 16px 24px;
}

.mb-card-cta--standard {
    color: #F8FAFC;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 15px 24px;
}

/* ==========================================================================
   MEMBERSHIPS — HOMEPAGE SUMMARY SECTION
   ========================================================================== */

/* Two-pathway row */
.mb-home-pathways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 64px;
    align-items: stretch;
}

.mb-home-pathway {
    position: relative;
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: transform .3s;
}

.mb-home-pathway--featured {
    border-color: rgba(0, 183, 79, .3);
}

.mb-home-pathway-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mb-home-pathway-range {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: #00B74F;
    white-space: nowrap;
}

.mb-home-pathway-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #94A3B8;
    margin: 0 0 24px;
    text-wrap: pretty;
}

.mb-home-pathway-features {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.mb-home-pathway-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #F8FAFC;
}

.mb-home-pathway-features li .material-icons {
    font-size: 16px;
    color: #00B74F;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Secondary callout strip */
.mb-home-callouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.mb-home-callout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid rgba(248, 250, 252, .08);
    background: rgba(10, 22, 38, .5);
    padding: 28px 32px;
    box-sizing: border-box;
}

.mb-home-callout-icon {
    font-size: 28px;
    color: #00B74F;
    flex-shrink: 0;
    margin-top: 2px;
}

.mb-home-callout-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #F8FAFC;
    margin: 0 0 6px;
}

.mb-home-callout-desc {
    font-size: 13px;
    line-height: 1.65;
    color: #94A3B8;
    margin: 0;
    flex-grow: 1;
    text-wrap: pretty;
}

.mb-home-callout-link {
    display: block;
    margin-top: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #00B74F;
    text-decoration: none;
    white-space: nowrap;
    align-self: flex-end;
    flex-shrink: 0;
}

.mb-home-callout-link:hover { text-decoration: underline; }

/* Footer row */
.mb-home-footer {
    margin-top: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.mb-home-footer-note {
    font-size: 14px;
    color: #94A3B8;
    margin: 0;
}

.mb-home-footer-note a {
    color: #F8FAFC;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   CAMPS & CLINICS / EVENTS
   ========================================================================== */
.camps-section {
    border-top: 1px solid rgba(0, 183, 79, .12);
    background: #050D17;
}

.camps-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 140px 64px;
    box-sizing: border-box;
}

.camps-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}


.events-list {
    margin-top: 72px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.events-empty {
    padding: 48px;
    text-align: center;
    border: 1px solid rgba(0, 183, 79, .12);
}

.events-empty p {
    color: #94A3B8;
    font-size: 16px;
    margin: 0;
}

.events-cta {
    margin-top: 48px;
    text-align: center;
}

/* ==========================================================================
   QUOTE BREAKER
   ========================================================================== */
.quote-section {
    position: relative;
    height: 92vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.quote-img-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    bottom: -12%;
}

.quote-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}

.quote-scrim-h {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 13, 23, .78) 0%, rgba(5, 13, 23, .38) 48%, rgba(5, 13, 23, .06) 100%);
}

.quote-scrim-v {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #050D17 0%, rgba(5, 13, 23, 0) 16%, rgba(5, 13, 23, 0) 84%, #07101D 100%);
}

.quote-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
}

.quote-mark {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 96px;
    line-height: .6;
    color: #00B74F;
}

.quote-text {
    margin: 12px 0 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(44px, 5.2vw, 84px);
    line-height: .98;
    color: #F8FAFC;
    max-width: 700px;
}

.quote-text-accent {
    color: #00B74F;
}

.quote-attribution {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
    color: #00B74F;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 160px 64px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 80px;
    align-items: center;
}

.about-copy + .about-copy {
    margin-top: 20px;
}

.about-link {
    display: inline-block;
    margin-top: 36px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    padding-bottom: 6px;
}

.about-media {
    position: relative;
}

.about-media img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.about-media-badge {
    position: absolute;
    left: -1px;
    bottom: -1px;
    background: #00B74F;
    color: #050D17;
    padding: 18px 24px;
    pointer-events: none;
}

.about-media-badge span {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    line-height: 1;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-section {
    border-top: 1px solid rgba(0, 183, 79, .12);
    background: #07101D;
}

.contact-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding: 140px 64px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 72px;
    align-items: start;
}


.contact-details {
    display: flex;
    flex-direction: column;
    margin-top: 36px;
    border-top: 1px solid rgba(248, 250, 252, .1);
}

.contact-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid rgba(248, 250, 252, .1);
}

.contact-detail-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    color: #94A3B8;
}

.contact-detail-value {
    font-size: 15px;
    font-weight: 600;
    color: #F8FAFC;
    text-align: right;
}

.contact-detail-link {
    font-size: 15px;
    color: #F8FAFC;
    text-decoration: none;
}

.contact-form {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    box-sizing: border-box;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field--full {
    grid-column: span 2;
}

.form-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: #94A3B8;
}

.form-input,
.form-textarea {
    background: #07101D;
    border: 1px solid rgba(248, 250, 252, .18);
    color: #F8FAFC;
    padding: 14px 16px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.form-textarea {
    line-height: 1.6;
    resize: vertical;
}

.form-services-wrap {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Fixes a gap left by the earlier home-page refactor: this wrapper's
   inline style also carried display/flex-direction/gap/margin-top,
   which got collapsed into .form-field--full (grid-column only). */
.form-services-wrap--home {
    margin-top: 10px;
}

.form-services-wrap--contact {
    margin-top: 8px;
}

.form-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-top: 12px;
}

.form-services-grid--tight {
    gap: 14px 24px;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.form-checkbox-input {
    display: none;
}

.svc-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1px solid #5A6B7E;
    background: rgba(10, 22, 38, 0.5);
    color: #050D17;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    border-radius: 2px;
}

.svc-check.is-checked {
    background: #00B74F;
    border: 2px solid #00B74F;
}

.form-checkbox-text {
    font-size: 14px;
    font-weight: 500;
    color: #94A3B8;
    transition: color .2s;
}

.form-checkbox-text.is-checked {
    color: #F8FAFC;
}

.form-submit-row {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.form-submit-btn {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #050D17;
    background: #00B74F;
    border: none;
    padding: 17px 36px;
    cursor: pointer;
}

.form-sent-msg {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: #00B74F;
}

/* ==========================================================================
   SERVICE DETAIL OVERLAY
   ========================================================================== */
#svc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
}

#ov-bg {
    position: absolute;
    inset: 0;
    background: rgba(3, 9, 17, .7);
    opacity: 0;
    cursor: pointer;
}

#ov-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    background: #0A1626;
    box-sizing: border-box;
    opacity: 0;
}

#ov-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    overflow: hidden;
}

#ov-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ov-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 13, 23, .95) 0%, rgba(5, 13, 23, .62) 44%, rgba(5, 13, 23, .08) 100%);
}

.ov-icon-btn {
    position: absolute;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(248, 250, 252, .35);
    background: rgba(5, 13, 23, .55);
    color: #F8FAFC;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ov-close {
    top: 28px;
    right: 28px;
    transition: border-color .25s;
}

#ov-back {
    position: absolute;
    top: 28px;
    left: 64px;
    z-index: 2;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    color: #8A9BAD;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

#ov-nav {
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
}

#ov-nav .ov-icon-btn {
    position: static;
}

#ov-counter {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #C7D3E0;
    min-width: 64px;
    text-align: center;
}

.ov-body {
    position: relative;
    z-index: 1;
    min-height: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#ov-num-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    color: #00B74F;
}

#ov-title {
    margin: 20px 0 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(56px, 6.4vw, 104px);
    line-height: .94;
    color: #F8FAFC;
    max-width: 760px;
    text-transform: uppercase;
}

#ov-desc {
    margin: 28px 0 0;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.7;
    color: #C7D3E0;
    text-wrap: pretty;
}

#ov-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
}

.ov-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #F8FAFC;
}

.ov-point .material-icons {
    font-size: 16px;
    color: #00B74F;
    flex-shrink: 0;
    margin-top: 2px;
}

[data-ov-btns] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
}

#ov-book {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #050D17;
    background: #00B74F;
    border: none;
    padding: 17px 32px;
    cursor: pointer;
}

/* ==========================================================================
   DROPDOWN NAV
   ========================================================================== */
[data-dropdown] {
    position: relative;
}

[data-dropdown-menu] {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 8px 0;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s;
    z-index: 100;
    pointer-events: none;
}

[data-dropdown]:hover [data-dropdown-menu] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

[data-dropdown-item] {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #94A3B8;
    text-decoration: none;
    transition: background .2s, color .2s;
}

[data-dropdown-item]:hover {
    background: rgba(0, 183, 79, .12);
    color: #F8FAFC;
}

input::placeholder,
textarea::placeholder {
    color: rgba(148, 163, 184, .5);
}

/* ============================================================================
   ABOUT PAGE (page-about.php)
   ============================================================================ */

/* -- Shared container / heading helpers not already in page-home.css ----- */
.about-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 96px 64px;
    box-sizing: border-box;
}

.section-heading-sm {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 4.4vw, 68px);
    line-height: .95;
    color: #F8FAFC;
}

/* Reused eyebrow row with the extra bottom margin used throughout this page */
.eyebrow-row--mb {
    margin-bottom: 20px;
}

.eyebrow-row--mb-md {
    margin-bottom: 24px;
}

.eyebrow-row--mb-lg {
    margin-bottom: 28px;
}

.eyebrow-row--center {
    justify-content: center;
}

/* ==========================================================================
   HERO BANNER
   ========================================================================== */
.about-hero {
    position: relative;
    min-height: max(60vh, 460px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.about-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    display: block;
}

.about-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 13, 23, .95) 0%, rgba(5, 13, 23, .55) 50%, rgba(5, 13, 23, .06) 100%);
    pointer-events: none;
}

.about-hero-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, #050D17);
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 64px;
    box-sizing: border-box;
}

.hero-title--page {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(52px, 6.4vw, 96px);
    line-height: .93;
    color: #F8FAFC;
}


/* ==========================================================================
   TEAM
   ========================================================================== */
.team-section {
    background: #07101D;
    border-top: 1px solid rgba(0, 183, 79, .12);
    border-bottom: 1px solid rgba(0, 183, 79, .12);
}

.team-heading-wrap {
    text-align: center;
    margin-bottom: 64px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.staff-card {
    background: #0A1626;
    border: 1px solid rgba(0, 183, 79, .14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color .3s;
}

.staff-card-photo {
    position: relative;
    height: 300px;
    overflow: hidden;
    flex-shrink: 0;
}


.staff-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--img-pos, 50% 50%);
    display: block;
}

.staff-card-photo-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0A1626 0%, transparent 60%);
}

.staff-card-caption {
    position: absolute;
    left: 28px;
    bottom: 28px;
}

.staff-card-name {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: #F8FAFC;
    line-height: 1;
}

.staff-card-job {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #00B74F;
    margin-top: 5px;
}

.staff-card-body {
    padding: 26px 28px 32px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.staff-card-bio {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #94A3B8;
    text-wrap: pretty;
    flex-grow: 1;
}

.staff-card-cta {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 10px 16px;
    align-self: flex-start;
    margin-top: 20px;
}

/* ==========================================================================
   COACHES
   ========================================================================== */
.coaches-section {
    background: #050D17;
    border-top: 1px solid rgba(0, 183, 79, .12);
}

.coaches-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 64px;
}

.coaches-lede {
    margin: 0;
    max-width: 380px;
    font-size: 15px;
    line-height: 1.7;
    color: #94A3B8;
    text-wrap: pretty;
}

.coaches-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.coaches-empty {
    color: #94A3B8;
    font-size: 16px;
}

.coach-row {
    display: grid;
    grid-template-columns: 280px 1fr auto;
    gap: 0;
    min-height: 200px;
    background: #0A1626;
    border: 1px solid rgba(0, 183, 79, .12);
    text-decoration: none;
    color: inherit;
    transition: border-color .3s;
    overflow: hidden;
    align-items: stretch;
}

.coach-row-photo {
    position: relative;
    overflow: hidden;
}

.coach-row-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--img-pos, 50% 50%);
    display: block;
    transition: transform .5s ease;
}

.coach-row-photo-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, #0A1626 100%);
}

.coach-row-content {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coach-row-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px;
    color: #F8FAFC;
    line-height: 1;
    letter-spacing: .02em;
}

.coach-row-job {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #00B74F;
    margin: 6px 0 14px;
}

.coach-row-bio {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: #94A3B8;
    text-wrap: pretty;
    max-width: 600px;
}

.coach-row-cta {
    display: flex;
    align-items: center;
    padding: 0 36px;
    border-left: 1px solid rgba(0, 183, 79, .1);
    flex-shrink: 0;
}

.coach-row-cta-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #00B74F;
    white-space: nowrap;
}

/* ============================================================================
   CONTACT PAGE (page-contact.php)
   Reuses: .eyebrow-row, .eyebrow-row--mb, .eyebrow-dash, .eyebrow-label,
   .section-heading--accent, .about-hero-scrim, .about-hero-fade-bottom,
   .about-hero-content, .hero-title--page, .hero-lead, .hero-lead--wide, .contact-grid,
   .contact-details*, .contact-form, .form-field*, .form-input, .form-textarea,
   .form-services-grid, .form-services-wrap, .form-checkbox-*, .svc-check,
   .form-submit-*, .form-sent-msg
   ============================================================================ */
.contact-hero {
    position: relative;
    min-height: max(52vh, 400px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.contact-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    display: block;
}

.hero-lead--wide {
    max-width: 560px;
}

.contact-grid--page {
    padding: 80px 64px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(248, 250, 252, .1);
}

.contact-info-block {
    padding: 20px 0;
    border-bottom: 1px solid rgba(248, 250, 252, .1);
}

.contact-info-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    color: #94A3B8;
    margin-bottom: 12px;
}

.contact-hours-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-hours-row {
    display: flex;
    justify-content: space-between;
}

.contact-hours-day {
    font-size: 14px;
    color: #F8FAFC;
    font-weight: 500;
}

.contact-hours-time {
    font-size: 14px;
    color: #94A3B8;
}


.contact-directions-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #00B74F;
    text-decoration: none;
}

/* ============================================================================
   SERVICES ARCHIVE PAGE (archive-services.php)
   Reuses: .contact-hero, .about-hero-scrim, .about-hero-fade-bottom,
   .about-hero-content, .eyebrow-row, .eyebrow-dash, .eyebrow-label,
   .hero-title--page, .section-heading--accent, .hero-lead, .hero-lead--narrow,
   .staff-card-cta, .btn, .btn--solid

   Note: cards here use .service-card (not .svc-card) — .svc-card is already
   used by the homepage's horizontal-scroll service cards with an entirely
   different layout, so this page needs its own class to avoid a collision.
   ============================================================================ */
.services-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
    display: block;
}

.hero-lead--narrow {
    max-width: 480px;
}

.eyebrow-row--mb-sm {
    margin-bottom: 16px;
}

.services-archive-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 96px 64px 56px;
    box-sizing: border-box;
}

.services-archive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.service-card {
    background: #0A1626;
    border: 1px solid rgba(0, 183, 79, .14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .3s;
    text-decoration: none;
}

.service-card-photo {
    position: relative;
    height: 260px;
    overflow: hidden;
    flex-shrink: 0;
}

.service-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-card-photo-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 13, 23, .08) 0%, rgba(5, 13, 23, .55) 100%);
    pointer-events: none;
}

.service-card-num {
    position: absolute;
    top: 14px;
    left: 18px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(124, 199, 255, .5);
}

.service-card-rate {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(5, 13, 23, .92);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #F8FAFC;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 4px 10px;
}

.service-card-body {
    padding: 24px 26px 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-card-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #F8FAFC;
    letter-spacing: .02em;
}

.service-card-desc {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: #94A3B8;
}

.service-card-points {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-grow: 1;
}

.service-card-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #C7D3E0;
}

.service-card-points li .material-icons {
    font-size: 15px;
    color: #00B74F;
    flex-shrink: 0;
    margin-top: 1px;
}

.cta-section {
    background: #07101D;
    border-top: 1px solid rgba(0, 183, 79, .12);
}

.cta-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 72px 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cta-heading {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 4vw, 60px);
    line-height: .95;
    color: #F8FAFC;
}

.btn--cta {
    padding: 18px 36px;
    flex-shrink: 0;
}

.btn--bordered {
    border: 1px solid rgba(255, 255, 255, .25);
}

/* ============================================================================
   MEMBERSHIP ARCHIVE PAGE (archive-membership.php)
   Reuses: .contact-hero, .about-hero-img, .about-hero-scrim,
   .about-hero-fade-bottom, .about-hero-content, .eyebrow-row, .eyebrow-dash,
   .eyebrow-label, .hero-title--page, .section-heading--accent,
   .hero-lead, .hero-lead--narrow, .services-archive-section, .mb-card*,
   .cta-section, .cta-heading, .btn, .btn--solid, .btn--cta
   ============================================================================ */
.membership-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.comparison-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 64px;
    box-sizing: border-box;
}

.comparison-heading {
    margin-bottom: 40px;
}

.comparison-table-wrap {
    overflow-x: auto;
}

.comparison-table {
    border-collapse: collapse;
    width: 100%;
}

.comparison-th {
    padding: 16px 20px;
    border-bottom: 2px solid rgba(0, 183, 79, .2);
    background: #0A1626;
}

.comparison-th--label {
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .22em;
    color: #94A3B8;
}

.comparison-th--tier {
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    color: #F8FAFC;
}

.comparison-th--featured {
    color: #00B74F;
    border-bottom: 2px solid #00B74F;
    background: #0B2240;
}

.comparison-tr {
    border-bottom: 1px solid rgba(0, 183, 79, .08);
}

.comparison-td {
    padding: 14px 20px;
    background: #080F1C;
}

.comparison-td--feature {
    font-size: 13px;
    font-weight: 600;
    color: #C7D3E0;
}

.comparison-td--value {
    text-align: center;
    font-size: 13px;
    color: #94A3B8;
}

.comparison-td--featured {
    text-align: center;
    font-size: 13px;
    color: #F8FAFC;
    font-weight: 600;
    background: #09182A;
}

.tour-cta-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(0, 183, 79, .08);
}

.tour-cta-heading {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 4vw, 58px);
    line-height: .95;
    color: #F8FAFC;
}


.tour-cta-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ============================================================================
   MEMBERSHIPS PAGE (page-memberships.php)
   ============================================================================ */

/* -- Sticky subnav --------------------------------------------------------- */
.mb-subnav {
    position: sticky;
    top: 80px; /* site-nav height */
    z-index: 80;
    background: #050D17;
    border-bottom: 1px solid rgba(0, 183, 79, .14);
    overflow-x: auto;
    scrollbar-width: none;
}
.mb-subnav::-webkit-scrollbar { display: none; }

.mb-subnav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 64px;
    white-space: nowrap;
}

.mb-subnav-link {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #94A3B8;
    text-decoration: none;
    padding: 16px 20px;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}

.mb-subnav-link:hover {
    color: #F8FAFC;
}

.mb-subnav-link--active {
    color: #00B74F;
    border-bottom-color: #00B74F;
}

/* -- Section shells -------------------------------------------------------- */
.mb-section {
    background: #050D17;
    border-top: 1px solid rgba(0, 183, 79, .08);
}

.mb-section--alt {
    background: #07101D;
}

.mb-section-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 72px 64px;
    box-sizing: border-box;
}

.mb-section-header {
    max-width: 760px;
    margin-bottom: 48px;
}

/* -- Non-member rate cards ------------------------------------------------- */
.mb-nonmember-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 340px));
    gap: 24px;
}

.mb-rate-card {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 40px 36px;
    box-sizing: border-box;
}

.mb-rate-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    color: #94A3B8;
    margin-bottom: 18px;
}

.mb-rate-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mb-rate-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 64px;
    line-height: 1;
    color: #F8FAFC;
}

.mb-rate-period {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #94A3B8;
}

/* -- Info callout ---------------------------------------------------------- */
.mb-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(0, 183, 79, .07);
    border: 1px solid rgba(0, 183, 79, .2);
    padding: 20px 24px;
    margin-bottom: 48px;
    box-sizing: border-box;
}

.mb-callout-icon {
    font-size: 20px;
    color: #00B74F;
    flex-shrink: 0;
    margin-top: 1px;
}

.mb-callout p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #CBD5E1;
}

.mb-callout p strong {
    color: #F8FAFC;
}

/* -- Card feature list: inline group label --------------------------------- */
.mb-card-features li.mb-feat--group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    color: #00B74F;
    text-transform: uppercase;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 183, 79, .15);
    list-style: none;
}
.mb-card-features li.mb-feat--group-label:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

/* -- Card feature list: inherited item (dimmed "everything above") --------- */
.mb-card-features li.mb-feat--inherits {
    color: #64748B;
    font-weight: 500;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(248, 250, 252, .07);
    margin-bottom: 2px;
}
.mb-card-features li.mb-feat--inherits .material-icons {
    color: #334155;
}

/* -- Tier card grids ------------------------------------------------------- */
.mb-tier-grid {
    display: grid;
    gap: 24px;
    align-items: stretch;
}

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

/* -- HitTrax League layout ------------------------------------------------- */
.mb-league-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.mb-league-addon {
    grid-column: 1 / -1;
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 40px 36px;
    box-sizing: border-box;
}

.mb-league-format,
.mb-league-pricing {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 40px 36px;
    box-sizing: border-box;
}

.mb-league-subhead {
    margin: 0 0 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: .06em;
    color: #F8FAFC;
}

.mb-league-addon-tag {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: #00B74F;
    background: rgba(0, 183, 79, .1);
    padding: 4px 10px;
    vertical-align: middle;
    margin-left: 10px;
}

.mb-league-list {
    margin-bottom: 0;
}

.mb-league-table {
    margin-bottom: 0;
}

.mb-league-discounts {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(248, 250, 252, .08);
}

.mb-league-discount-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #CBD5E1;
}

.mb-league-discount-item .material-icons {
    font-size: 18px;
    color: #00B74F;
    flex-shrink: 0;
    margin-top: 1px;
}

.mb-league-discount-item strong {
    color: #F8FAFC;
}

.mb-league-derby-prices {
    display: flex;
    gap: 32px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(248, 250, 252, .08);
}

.mb-derby-price-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mb-derby-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: #94A3B8;
}

.mb-derby-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    line-height: 1;
    color: #F8FAFC;
}

/* -- Policies -------------------------------------------------------------- */
.mb-policies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mb-policy-block {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 40px 36px;
    box-sizing: border-box;
}

.mb-policy-title {
    margin: 0 0 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: .06em;
    color: #00B74F;
}

.mb-policy-list {
    margin: 0 0 16px;
    padding: 0 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mb-policy-list li {
    font-size: 14px;
    line-height: 1.65;
    color: #CBD5E1;
}

.mb-policy-text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: #CBD5E1;
}

.mb-policy-text:last-child {
    margin-bottom: 0;
}

.mb-policy-note {
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: #64748B;
    border-top: 1px solid rgba(248, 250, 252, .08);
    padding-top: 16px;
    margin-top: 16px;
}

/* -- Responsive (memberships page) ---------------------------------------- */
@media (max-width: 1100px) {
    .mb-policies-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mb-policies-grid .mb-policy-block:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .mb-subnav-inner {
        padding: 0 24px;
        justify-content: flex-start; /* allow scroll on small screens */
    }
    .mb-section-inner {
        padding: 72px 24px;
    }
    .mb-tier-grid--4,
    .mb-tier-grid--2,
    .mb-league-wrap,
    .mb-policies-grid {
        grid-template-columns: 1fr;
    }
    .mb-league-addon {
        grid-column: auto;
    }
    .mb-nonmember-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   EVENTS ARCHIVE PAGE (archive-events.php)
   Reuses: .contact-hero, .about-hero-scrim, .about-hero-fade-bottom,
   .about-hero-content, .eyebrow-row, .eyebrow-row--mb, .eyebrow-dash,
   .eyebrow-label, .hero-title--page, .section-heading--accent,
   .hero-lead, .hero-lead--narrow, .events-empty (+ its `p` descendant)

   No new responsive rules needed: this page's hero reuses .contact-hero, so
   the existing ".contact-hero .about-hero-content" 768px rule already covers
   its mobile padding. The events list itself doesn't need a grid breakpoint
   since it's a single-column flex stack at every width.
   ============================================================================ */
.events-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}

.events-archive-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 96px 64px 48px;
    box-sizing: border-box;
}

.events-archive-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.events-empty--lg {
    padding: 64px;
}

@media (max-width: 768px) {
    .events-archive-section {
        padding: 64px 24px;
    }

    .events-archive-list {
        gap: 24px;
    }

    .event-card {
        grid-template-columns: 1fr !important;
        padding: 28px 24px !important;
        gap: 20px !important;
    }

    .event-card-btn {
        align-self: flex-start;
    }
}

/* ============================================================================
   BATTLE CATS PAGE (page-battle-cats.php)
   This page is intentionally self-contained: it has its own CSS custom
   properties and a distinct "bc-" component namespace (originally authored
   directly in the page's own <style> block). Rather than force it into the
   site's generic class names, that separation is preserved here — new
   classes for this page keep the "bc-" prefix throughout.

   Fixed from the original: the placeholder rule included a bare `select`
   selector that would have dimmed the text of every <select> on the page
   (and, now that this is a shared stylesheet, every <select> site-wide).
   That's dropped; .bc-input already sets its own text color.
   ============================================================================ */
:root {
    --bc-green: #00B74F;
    --bc-green-dim: #009940;
    --bc-dark: #050D17;
    --bc-card: #0A1626;
    --bc-border: rgba(0, 183, 79, .15);
    --bc-blue: #00B74F;
}

.bc-accent {
    color: var(--bc-green);
}

.bc-check {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.bc-check::before {
    content: '\2713';
    font-size: 15px;
    font-weight: 700;
    color: var(--bc-green);
    flex-shrink: 0;
    margin-top: 2px;
}

.bc-check-text--values {
    font-size: 15px;
    color: #C7D3E0;
}

.bc-check-text--benefits {
    font-size: 14px;
    font-weight: 400;
    color: #F8FAFC;
}

.bc-age-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: .08em;
    color: #050D17;
    background: var(--bc-green);
    border: none;
    padding: 12px 0;
    text-decoration: none;
    cursor: pointer;
}

.bc-age-btn--sm {
    width: 100%;
    font-size: 13px;
    letter-spacing: .1em;
    padding: 13px 0;
}

/* BC section labels alias the shared eyebrow system */

select option {
    background: #0A1626;
    color: #F8FAFC;
}

.bc-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bc-field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: #94A3B8;
}

.bc-field--full {
    grid-column: 1 / -1;
}

.bc-field-divider {
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--bc-green);
    border-bottom: 1px solid rgba(0, 183, 79, .2);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.bc-optional-tag {
    font-size: 10px;
    color: #8A9BAD;
}

.bc-input {
    background: #07101D;
    border: 1px solid rgba(248, 250, 252, .18);
    color: #F8FAFC;
    padding: 13px 16px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.bc-input:focus {
    border-color: rgba(248, 250, 252, .55);
}

.bc-input--select {
    cursor: pointer;
}

.bc-option-placeholder {
    color: rgba(148, 163, 184, .5);
}

.bc-radio-group,
.bc-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.bc-radio-opt,
.bc-check-opt {
    position: relative;
}

.bc-radio-opt input,
.bc-check-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bc-radio-opt label,
.bc-check-opt label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #94A3B8;
    border: 1px solid rgba(0, 183, 79, .22);
    background: #07101D;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: .04em;
}

.bc-radio-opt input:checked + label,
.bc-check-opt input:checked + label {
    background: rgba(0, 183, 79, .12);
    border-color: var(--bc-green);
    color: #F8FAFC;
}

.bc-radio-opt label::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #5A6B7E;
    flex-shrink: 0;
    transition: border-color .2s, background .2s;
}

.bc-radio-opt input:checked + label::before {
    border-color: var(--bc-green);
    background: var(--bc-green);
}

.bc-check-opt label::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid #5A6B7E;
    flex-shrink: 0;
    transition: border-color .2s, background .2s;
    border-radius: 2px;
}

.bc-check-opt input:checked + label::before {
    border-color: var(--bc-green);
    background: var(--bc-green);
}


/* -- Hero -------------------------------------------------------------- */
.bc-hero {
    position: relative;
    min-height: max(58vh, 440px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bc-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}

.bc-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 13, 23, .97) 0%, rgba(5, 13, 23, .7) 50%, rgba(5, 13, 23, .2) 100%);
    pointer-events: none;
}

.bc-hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, #050D17);
    pointer-events: none;
}

.bc-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 64px;
    box-sizing: border-box;
}


/* -- Shared layout / headings -------------------------------------------- */
.bc-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 100px 64px;
    box-sizing: border-box;
}

.bc-two-col {
    display: grid;
    align-items: start;
}

.bc-two-col--about {
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
}

.bc-two-col--register {
    grid-template-columns: .55fr 1.45fr;
    gap: 64px;
}

.bc-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bc-heading {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    line-height: .95;
    color: #F8FAFC;
}

.bc-heading--about {
    font-size: clamp(42px, 4.2vw, 68px);
    margin-bottom: 24px;
}

.bc-heading--section {
    font-size: clamp(42px, 4.5vw, 72px);
}

.bc-heading--section-mb {
    margin-bottom: 16px;
}

.bc-heading-wrap--center {
    text-align: center;
    margin-bottom: 64px;
}

.bc-body-text--last {
    margin: 0;
}

/* -- About section -------------------------------------------------------- */
.bc-about {
    background: #07101D;
    border-top: 1px solid rgba(0, 183, 79, .1);
}

.bc-mvv-list {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bc-mvv-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.bc-mvv-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: rgba(0, 183, 79, .1);
    border: 1px solid rgba(0, 183, 79, .25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bc-mvv-icon .material-icons {
    font-size: 20px;
    color: var(--bc-green);
}

.bc-mvv-title {
    margin: 0 0 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--bc-green);
    letter-spacing: .06em;
}

.bc-mvv-title--values {
    margin-bottom: 10px;
}

.bc-mvv-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #94A3B8;
}

.bc-mvv-values-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bc-panel {
    background: #0A1626;
    border: 1px solid rgba(0, 183, 79, .2);
    padding: 40px;
}

.bc-panel--spaced {
    margin-top: 32px;
}

.bc-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* -- What sets us apart ---------------------------------------------------- */
.bc-section-alt {
    background: #050D17;
    border-top: 1px solid rgba(0, 183, 79, .1);
    border-bottom: 1px solid rgba(0, 183, 79, .1);
}

.bc-diff-card {
    background: #0A1626;
    border: 1px solid rgba(0, 183, 79, .14);
    padding: 36px 32px;
    transition: border-color .3s;
}

.bc-diff-icon {
    margin-bottom: 16px;
}

.bc-diff-icon .material-icons {
    font-size: 28px;
    color: var(--bc-green);
}

.bc-diff-title {
    margin: 0 0 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--bc-green);
    letter-spacing: .06em;
}

.bc-diff-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94A3B8;
}

/* -- Teams / age groups ---------------------------------------------------- */
.bc-teams-section {
    background: #07101D;
}

.bc-teams-header {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 56px;
}

.bc-teams-intro {
    margin: 0;
    max-width: 400px;
    font-size: 15px;
    line-height: 1.7;
    color: #94A3B8;
    text-wrap: pretty;
}

.bc-age-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.bc-age-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(0, 183, 79, .2);
    overflow: hidden;
}

.bc-age-card-label {
    background: rgba(0, 183, 79, .06);
    padding: 20px 12px 16px;
    text-align: center;
}

.bc-age-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 42px;
    line-height: 1;
    color: #F8FAFC;
}

.bc-teams-footnote {
    margin: 24px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #8A9BAD;
    text-align: center;
}

/* -- Jersey branding section ------------------------------------------------ */
.bc-jersey-section {
    position: relative;
    height: 480px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.bc-jersey-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.bc-jersey-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 13, 23, .92) 0%, rgba(5, 13, 23, .6) 50%, rgba(5, 13, 23, .1) 100%);
}

.bc-jersey-content {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
}

.bc-jersey-text {
    margin: 16px 0 0;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.7;
    color: #94A3B8;
    text-wrap: pretty;
}

/* -- Registration section --------------------------------------------------- */
.bc-register-section {
    background: #050D17;
    border-top: 1px solid rgba(0, 183, 79, .12);
}

.bc-register-intro {
    margin: 0 auto;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.85;
    color: #94A3B8;
}

.bc-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(248, 250, 252, .1);
}

.bc-info-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: baseline;
    gap: 0 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 183, 79, .12);
}

.bc-info-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    color: #94A3B8;
}

.bc-info-label--spaced {
    align-self: start;
    padding-top: 2px;
}

.bc-info-value {
    font-size: 15px;
    color: #F8FAFC;
}

.bc-info-value--lg {
    font-size: 16px;
    font-weight: 600;
}

.bc-info-link {
    font-size: 14px;
    color: var(--bc-green);
    text-decoration: none;
}

.bc-social-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bc-social-handle {
    font-size: 14px;
    color: #F8FAFC;
}

.bc-info-cta-wrap {
    padding: 24px 0;
}

.bc-notice {
    background: rgba(0, 183, 79, .06);
    border: 1px solid rgba(0, 183, 79, .2);
    padding: 16px 20px;
    margin-bottom: 32px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.bc-notice-checkbox {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--bc-green);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.bc-notice-label {
    font-size: 13px;
    line-height: 1.75;
    color: #94A3B8;
    cursor: pointer;
}

.bc-notice-label strong {
    color: #F8FAFC;
}

.bc-form {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 48px;
    box-sizing: border-box;
}

.bc-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.bc-submit-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.bc-form-sent-msg {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--bc-green);
}

/* ============================================================================
   SINGLE STAFF PAGE (single-staff.php)
   Reuses: .contact-hero, .about-hero-scrim, .about-hero-fade-bottom,
   .about-hero-content, .eyebrow-row, .eyebrow-row--mb, .eyebrow-row--mb-md,
   .eyebrow-row--mb-lg, .eyebrow-dash, .eyebrow-label,
   .btn, .btn--solid, .btn--block

   The hero photo's object-position is dynamic per staff member (from a PHP
   lookup, not a binary state), so it's set via a CSS custom property
   (--img-pos) on the element rather than a full inline style — same pattern
   used on the About page's staff cards and coach rows.
   ============================================================================ */
.staff-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--img-pos, 50% 50%);
    display: block;
}

.staff-hero-back-wrap {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    z-index: 3;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
}

.staff-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    color: #8A9BAD;
    text-decoration: none;
}

.staff-back-arrow {
    font-size: 14px;
    line-height: 1;
}

.hero-title--post {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(44px, 5.6vw, 88px);
    line-height: .93;
    color: #F8FAFC;
    max-width: 820px;
}

.staff-body-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 64px 120px;
    box-sizing: border-box;
}

.staff-body-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 72px;
    align-items: start;
}

.staff-bio-text {
    font-size: 17px;
    line-height: 1.78;
    color: #C7D3E0;
    text-wrap: pretty;
}

.staff-bio-text a {
    color: #F8FAFC;
}

.staff-edu-block {
    margin-top: 48px;
}

.staff-edu-text {
    font-size: 16px;
    line-height: 1.78;
    color: #C7D3E0;
    text-wrap: pretty;
}

.staff-card-sticky {
    position: sticky;
    top: 100px;
}

.staff-profile-card {
    background: #0A1626;
    border: 1px solid rgba(0, 183, 79, .22);
    padding: 40px 36px;
    box-sizing: border-box;
}

.staff-card-label-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.staff-card-label-dash {
    width: 22px;
    height: 2px;
    background: #00B74F;
}

.staff-card-label-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    color: #94A3B8;
}

.staff-info-grid {
    padding: 14px 0;
    border-top: 1px solid rgba(0, 183, 79, .12);
    border-bottom: 1px solid rgba(0, 183, 79, .12);
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 12px;
    column-gap: 24px;
    align-items: baseline;
    margin-bottom: 20px;
}

.staff-info-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: #8A9BAD;
}

.staff-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #F8FAFC;
}

/* ============================================================================
   GLOBAL CHROME — Header & Footer (header.php / footer.php)
   ============================================================================ */
.btbb-wrap {
    background: #050D17;
    color: #F8FAFC;
    font-family: Montserrat, sans-serif;
    -webkit-font-smoothing: antialiased;
    max-width: 100%;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #00B74F;
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 110;
}

/* -- Top bar ---------------------------------------------------------------- */
.top-bar {
    position: relative;
    z-index: 60;
    background: #030911;
    border-bottom: 1px solid rgba(0, 183, 79, .08);
    padding: 8px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-bar-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.top-bar-latest {
    font-size: 10px;
    font-weight: 700;
    color: #00B74F;
    letter-spacing: .12em;
    margin-right: 12px;
    flex-shrink: 0;
}

.top-bar-ann {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    clip-path: inset(-20px 0 -20px 0);
}

.top-bar-ann-text {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #F8FAFC;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-bar-ann-cta {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #00B74F;
    text-decoration: none;
    border: 1px solid rgba(0, 183, 79, .4);
    padding: 3px 9px;
    white-space: nowrap;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    margin-left: 24px;
}

.top-bar-hours {
    font-size: 11px;
    font-weight: 500;
    color: #94A3B8;
    letter-spacing: .02em;
    white-space: nowrap;
}

.top-bar-divider {
    width: 1px;
    height: 12px;
    background: rgba(148, 163, 184, .3);
    flex-shrink: 0;
}

.top-bar-nav {
    display: flex;
    gap: 24px;
}

.top-bar-link {
    font-size: 11px;
    font-weight: 600;
    color: #F8FAFC;
    text-decoration: none;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.top-bar-link--active {
    font-weight: 700;
    color: #00B74F;
}

/* -- Main nav --------------------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 48px;
    background: rgba(6, 12, 24, .97);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(0, 183, 79, .12);
    border-top: 1px solid rgba(0, 183, 79, .12);
    box-sizing: border-box;
}

.site-nav--transparent {
    background: rgba(8, 16, 28, 0.38);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #F8FAFC;
}

.nav-logo-img {
    height: 48px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-logo-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: .06em;
    line-height: 1;
    color: #F8FAFC;
}

.nav-logo-name--accent {
    color: #00B74F;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-book-btn {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #050D17;
    text-decoration: none;
    background: #00B74F;
    padding: 12px 22px;
}

/* -- Nav walker links ------------------------------------------------------- */
.nav-link {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #F8FAFC;
    text-decoration: none;
    padding: 8px 14px;
}

.nav-link--active {
    font-weight: 700;
    color: #00B74F;
}

.nav-link-underline {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: #00B74F;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}

.nav-link--active .nav-link-underline {
    transform: scaleX(1);
}

.nav-link:hover .nav-link-underline {
    transform: scaleX(1);
}

/* -- Burger / mobile menu --------------------------------------------------- */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: rgba(5, 13, 23, .4);
    border: 1px solid rgba(248, 250, 252, .3);
    cursor: pointer;
    padding: 11px;
    box-sizing: border-box;
}

.burger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: #F8FAFC;
}

.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 10, 18, .97);
    backdrop-filter: blur(18px);
    flex-direction: column;
    justify-content: center;
    padding: 0 40px;
    box-sizing: border-box;
    opacity: 0;
}

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

.mobile-nav-link {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 46px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #F8FAFC;
    text-decoration: none;
}

.mobile-nav-link--active {
    color: #00B74F;
}

.mobile-book-btn {
    margin-top: 44px;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #050D17;
    text-decoration: none;
    background: #00B74F;
    padding: 17px 32px;
}

.mobile-footer {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 183, 79, .14);
}

.mobile-hours-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #00B74F;
    margin-bottom: 12px;
}

.mobile-hours-text {
    font-size: 13px;
    font-weight: 500;
    color: #94A3B8;
    line-height: 1.8;
}

.mobile-social-links {
    display: flex;
    gap: 24px;
    margin-top: 18px;
}

.mobile-social-link {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #F8FAFC;
    text-decoration: none;
    text-transform: uppercase;
}

.mobile-social-link--active {
    color: #00B74F;
}

/* -- Footer ----------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid rgba(0, 183, 79, .14);
    background: #030911;
    color: #8A9BAD;
    overflow: hidden;
}

.footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 64px 48px;
    box-sizing: border-box;
}

.footer-wordmark {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 6.4vw, 104px);
    line-height: .92;
    color: #F8FAFC;
    text-align: center;
}

.footer-wordmark-accent {
    color: #00B74F;
}

.footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 183, 79, .12);
    flex-wrap: wrap;
}

.footer-logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.footer-logo-img {
    height: 36px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.footer-logo-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: .06em;
    line-height: 1;
    color: #F8FAFC;
}

.footer-logo-name--accent {
    color: #00B74F;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-social-link {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #94A3B8;
    text-decoration: none;
    display: inline-block;
    min-width: 90px;
    text-align: center;
}

.footer-copyright-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.footer-copyright {
    font-size: 12px;
    color: #8A9BAD;
}

.footer-address {
    font-style: normal;
    font-size: 11px;
    color: #8A9BAD;
}

.footer-address-link {
    color: #8A9BAD;
    text-decoration: none;
}

.footer-address-link:hover {
    color: #F8FAFC;
}

/* ── Skip link (accessibility) ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 12px;
    z-index: 9999;
    padding: 8px 16px;
    background: #00B74F;
    color: #050D17;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.15s;
}
.skip-link:focus {
    top: 0;
}

/* ============================================================================
   EVENT CARD (template-parts/event-card.php)
   ============================================================================ */
.event-card {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 36px 44px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: transform .3s, border-color .3s;
}

.event-card:hover {
    border-color: rgba(248, 250, 252, .28);
    transform: translateY(-3px);
}

.ev-card-body {
    display: flex;
    flex-direction: column;
}

.ev-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ev-card-badge {
    color: #F8FAFC;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 4px 10px;
    border-radius: 2px;
    text-transform: uppercase;
}

.ev-card-date {
    font-size: 13px;
    font-weight: 600;
    color: #00B74F;
    letter-spacing: .04em;
}

.ev-card-title {
    margin: 0 0 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #F8FAFC;
    letter-spacing: .02em;
}

.ev-card-price {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #94A3B8;
    letter-spacing: .04em;
}

.ev-card-excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #94A3B8;
    max-width: 700px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ev-card-cta {
    display: inline-block;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #050D17;
    background: #00B74F;
    padding: 16px 32px;
    white-space: nowrap;
}

.ev-card-cta--full {
    color: #F8FAFC;
    background: #475569;
}

/* -- Hover states for chrome/card/button elements --------------------------- */
.btn--solid:hover,
.nav-book-btn:hover,
.mobile-book-btn:hover,
.ev-card-cta:not(.ev-card-cta--full):hover,
.form-submit-btn:hover,
.mb-card-cta--featured:hover,
.bc-age-btn:hover,
#ov-book:hover { filter: brightness(.82); }

.top-bar-ann-cta:hover {
    background-color: rgba(248, 250, 252, .07);
    border-color: rgba(248, 250, 252, .45);
    color: #F8FAFC;
}

.staff-back-link:hover { color: #B0BDC8; }
.footer-social-link:hover { color: #F8FAFC; }
.ev-completed-link:hover { color: #F8FAFC; }

/* ============================================================================
   SINGLE COACHES PAGE (single-coaches.php)
   Reuses: .contact-hero, .staff-hero-img, .about-hero-scrim,
   .about-hero-fade-bottom, .staff-hero-back-wrap, .staff-back-link,
   .staff-back-arrow, .about-hero-content, .eyebrow-row, .eyebrow-row--mb,
   .eyebrow-row--mb-md, .eyebrow-row--mb-lg, .eyebrow-dash, .eyebrow-label,
   .hero-title--post, .staff-body-section, .staff-body-grid,
   .staff-bio-text, .staff-edu-block, .staff-edu-text, .staff-card-sticky,
   .staff-profile-card, .staff-card-label-row, .staff-card-label-dash,
   .staff-card-label-text, .staff-info-grid, .staff-info-label,
   .staff-info-value, .btn, .btn--solid, .btn--block
   ============================================================================ */
.coach-hero-job {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #00B74F;
}

/* ============================================================================
   SINGLE SERVICES PAGE (single-services.php)
   Reuses: .contact-hero, .staff-hero-img, .about-hero-scrim,
   .about-hero-fade-bottom, .staff-hero-back-wrap, .staff-back-link,
   .staff-back-arrow, .about-hero-content, .eyebrow-row, .eyebrow-row--mb,
   .eyebrow-row--mb-md, .eyebrow-row--mb-lg, .eyebrow-dash, .eyebrow-label,
   .hero-title--post, .staff-body-section, .staff-body-grid,
   .staff-bio-text, .staff-edu-block, .staff-card-sticky, .staff-profile-card,
   .staff-card-label-row, .staff-card-label-dash, .staff-card-label-text,
   .btn, .btn--solid, .btn--block
   ============================================================================ */
.sv-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(0, 183, 79, .12);
}

.sv-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 183, 79, .12);
    font-size: 15px;
    font-weight: 600;
    color: #F8FAFC;
}

.sv-feature-icon {
    font-size: 18px !important;
    color: #00B74F;
    flex-shrink: 0;
    margin-top: 1px;
}

.sv-pricing-grid {
    padding: 14px 0;
    border-top: 1px solid rgba(0, 183, 79, .12);
    border-bottom: 1px solid rgba(0, 183, 79, .12);
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 14px;
    column-gap: 20px;
    align-items: baseline;
    margin-bottom: 24px;
}

.sv-pricing-label {
    font-size: 13px;
    font-weight: 500;
    color: #94A3B8;
    line-height: 1.4;
}

.sv-pricing-value {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    text-align: right;
    white-space: nowrap;
}

/* ============================================================================
   SINGLE EVENTS PAGE (single-events.php)
   Reuses: .contact-hero, .staff-hero-img, .about-hero-scrim,
   .about-hero-fade-bottom, .staff-hero-back-wrap, .staff-back-link,
   .staff-back-arrow, .about-hero-content, .eyebrow-row, .eyebrow-row--mb,
   .eyebrow-dash, .eyebrow-label, .hero-title--post, .staff-body-section,
   .staff-body-grid, .staff-bio-text, .staff-card-sticky, .staff-profile-card,
   .staff-card-label-row, .staff-card-label-dash, .staff-card-label-text,
   .staff-info-grid, .staff-info-label, .staff-info-value,
   .btn, .btn--solid, .btn--outline, .btn--block
   ============================================================================ */
.ev-meta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ev-status-badge {
    color: #F8FAFC;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 6px 12px;
    border-radius: 2px;
}

.ev-date-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #00B74F;
    letter-spacing: .04em;
}

.ev-completed-notice {
    margin-top: 40px;
    padding: 24px 32px;
    background: #0A1626;
    border: 1px solid rgba(71, 85, 105, .4);
    display: flex;
    align-items: center;
    gap: 16px;
}

.ev-completed-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #475569;
}

.ev-completed-link {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #00B74F;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 183, 79, .4);
    padding-bottom: 2px;
}

.btn--ev-full {
    background: #475569;
    cursor: not-allowed;
    opacity: .7;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ── 980px — two-column grids collapse to single column ── */
@media (max-width: 980px) {
    /* Generic data-attribute grids */
    [data-rsp-grid] { grid-template-columns: 1fr !important; }
    [data-rsp-grid] > * { grid-column: auto !important; }
    [data-rsp-pad]  { padding-left: 24px !important; padding-right: 24px !important; }
    [data-rsp-gal]  { grid-auto-rows: 240px !important; }
    [data-rsp-gal] > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    [data-stagger]  { grid-template-columns: 1fr 1fr !important; }

    /* Specific page grids */
    .contact-grid--page { grid-template-columns: 1fr !important; }
    .services-archive-grid { grid-template-columns: 1fr !important; }
    .services-archive-grid > * { grid-column: auto !important; }
    .bc-two-col   { grid-template-columns: 1fr !important; }
    .bc-three-col { grid-template-columns: 1fr 1fr !important; }

    /* Membership homepage callouts */
    .mb-home-callout { flex-wrap: wrap; }
    .mb-home-callout-link { align-self: auto; }
}

/* ── 920px — nav collapses, single-page grids, hero adjustments ── */
@media (max-width: 920px) {
    /* Nav */
    [data-hero-thumbs] { display: none !important; }
    [data-hero-dots]   { display: flex !important; }

    /* Overlay */
    [data-ov-btns] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
    [data-ov-btns] > * { width: 100% !important; text-align: center !important; margin: 0 !important; }
    #svc-overlay { z-index: 80 !important; }

    /* Single-page data-attribute grids */
    [data-st-grid] { grid-template-columns: 1fr !important; }
    [data-st-pad]  { padding-left: 24px !important; padding-right: 24px !important; }
    [data-co-grid] { grid-template-columns: 1fr !important; }
    [data-co-pad]  { padding-left: 24px !important; padding-right: 24px !important; }
    [data-sv-grid] { grid-template-columns: 1fr !important; }
    [data-sv-pad]  { padding-left: 24px !important; padding-right: 24px !important; }
    [data-ev-grid] { grid-template-columns: 1fr !important; }
    [data-ev-pad]  { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ── 768px — padding reduction, remaining grid collapses ── */
@media (max-width: 768px) {
    /* Hero — mobile: size to content, no forced full-screen height */
    .hero { min-height: 0 !important; display: block !important; }
    .hero-img { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }
    .hero-scrim, .hero-fade-bottom { position: absolute !important; }
    .hero-content {
        position: relative !important;
        left: auto !important; right: auto !important;
        max-width: 100% !important;
        padding: 96px 24px 24px !important;
        transform: none !important;
        z-index: 2;
    }
    [data-hero-dots] {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        justify-content: center;
        padding: 20px 0 0 !important;
        z-index: 2;
    }
    /* Marquee flows below dots, not overlapping */
    .marquee-bar {
        position: relative !important;
        bottom: auto !important;
        margin-top: 20px;
    }

    /* Services swiper on mobile */
    .services-section { padding-top: 64px !important; padding-bottom: 64px !important; }
    .services-swiper { padding-left: 24px !important; }
    .services-swiper .swiper-slide { width: 85vw !important; height: 300px !important; }
    .services-header { padding-left: 24px !important; padding-right: 24px !important; }
    .services-below { padding: 0 24px !important; justify-content: center !important; }

    /* Memberships */
    .memberships-section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
    .mb-home-pathways,
    .mb-home-callouts { grid-template-columns: 1fr !important; }
    .mb-home-footer { flex-direction: column; align-items: flex-start; gap: 20px; }

    /* Camps & Clinics */
    .camps-inner { padding: 64px 24px !important; }

    /* Quote */
    .quote-content { padding-left: 24px !important; padding-right: 24px !important; }

    /* About */
    .about-section { padding-top: 64px !important; padding-bottom: 64px !important; }
    .about-media img { height: 320px !important; }

    /* Contact — homepage grid */
    .contact-grid {
        grid-template-columns: 1fr !important;
        padding: 64px 24px !important;
        gap: 48px !important;
    }
    .contact-form {
        padding: 28px !important;
        grid-template-columns: 1fr !important;
    }

    /* Contact page */
    .contact-hero .about-hero-content { padding-left: 24px !important; padding-right: 24px !important; }
    .contact-grid--page .contact-form  { padding: 28px !important; grid-template-columns: 1fr !important; }

    /* Overlay back button */
    #ov-back { left: 24px !important; }

    /* Overlay card — scrollable on mobile */
    #ov-card {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* img + scrim + close + back stay visually fixed at top */
    #ov-img-wrap { position: fixed !important; top: 0; left: 0; right: 0; height: 50vw; min-height: 220px; max-height: 300px; }
    .ov-scrim {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        height: 50vw; min-height: 220px; max-height: 300px;
        background: linear-gradient(180deg, rgba(5,13,23,.55) 0%, rgba(10,22,38,0) 45%, rgba(10,22,38,.85) 80%, #0A1626 100%) !important;
    }
    #ov-close { position: fixed !important; }
    #ov-back  { position: fixed !important; }
    .ov-body {
        margin-top: calc(50vw) !important;
        min-height: calc(50vw) !important;
        padding: 32px 24px 32px !important;
        justify-content: flex-start !important;
        background: #0A1626;
        position: relative !important;
        z-index: 3 !important;
        flex: 1 0 auto;
        order: 1;
    }
    /* Nav prev/next after content */
    #ov-nav {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        order: 2;
        padding: 20px 24px 40px !important;
        background: #0A1626;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    #ov-counter { display: flex; align-items: center; line-height: 1; }

    /* Tour CTA (memberships page) */
    .tour-cta-section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 64px !important; padding-bottom: 64px !important; }

    /* Memberships comparison */
    .membership-archive-grid { grid-template-columns: 1fr !important; }
    .comparison-inner { padding-left: 24px !important; padding-right: 24px !important; }
    .comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* CTA strip */
    .cta-inner { padding-left: 24px !important; padding-right: 24px !important; }

    /* Boot camp */
    .bc-three-col { grid-template-columns: 1fr !important; }
    .bc-age-grid  { grid-template-columns: repeat(3, 1fr) !important; }
    [data-bc-pad] { padding-left: 24px !important; padding-right: 24px !important; }
    .bc-container { padding-top: 64px !important; padding-bottom: 64px !important; }

    /* Staff / coaches hero */
    .staff-hero-back-wrap { padding-left: 24px !important; padding-right: 24px !important; }
    .about-hero-content,
    .about-container { padding-left: 24px !important; padding-right: 24px !important; }

    /* Footer */
    .footer-inner { padding: 60px 24px 36px !important; }

    /* Archive section padding */
    .services-archive-section { padding: 64px 24px !important; }

    /* About page staff/coaches sections */
    .about-container { padding-top: 64px !important; padding-bottom: 64px !important; }

    /* Staff/coaches single page body */
    .staff-body-section { padding: 64px 24px !important; }

    /* Coaches section */
    .coaches-section { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* ── 640px — single-column stagger, event card details ── */
@media (max-width: 640px) {
    [data-stagger]  { grid-template-columns: 1fr !important; }
    [data-stagger] > * { grid-column: auto !important; }
    [data-ev-meta]  { flex-direction: column !important; gap: 10px !important; }

    /* Event card on mobile: go full vertical */
    .event-card { grid-template-columns: 1fr !important; gap: 20px !important; padding: 24px !important; }
    .ev-card-cta { display: block; text-align: center; }

    /* Footer stack */
    [data-footer-meta] { flex-direction: column !important; align-items: center !important; text-align: center !important; }
    [data-footer-meta] > div:first-child { flex: unset !important; justify-content: center !important; }
    [data-footer-meta] > div:last-child  { flex: unset !important; justify-content: center !important; }
}

/* ============================================================================
   GRAVITY FORMS — BTBB Theme Overrides
   Modern markup (markupVersion 2 / Orbital). Dark card, uppercase labels,
   dark inputs, green accent, pill-toggle checkboxes/radios, full error handling.
   Field widths are set per-field in the GF admin (Full / Half / etc.).
   ============================================================================ */

/* -- Reset GF Orbital theme variables that would otherwise override us ----- */
.gform_wrapper.gravity-theme {
    --gf-color-bg: transparent;
    --gf-ctrl-bg: #07101D;
    --gf-ctrl-border-color: rgba(248, 250, 252, .18);
    --gf-ctrl-border-color-focus: rgba(248, 250, 252, .55);
    --gf-ctrl-color: #F8FAFC;
    --gf-font-size-base: 14px;
    --gf-label-color: #94A3B8;
    --gf-sub-label-color: #64748B;
    --gf-color-primary: #00B74F;
}

/* -- Outer wrapper card ----------------------------------------------------- */
.gform_wrapper {
    margin: 0 !important;
    max-width: 100% !important;
    background: #0A1626 !important;
    border: 1px solid rgba(248, 250, 252, .1) !important;
    padding: 48px !important;
    box-sizing: border-box !important;
}

.gform_wrapper form {
    margin: 0 !important;
}

/* -- Fields list: 12-col grid matching GF's native span system ------------- */
/* GF sets span-12/6/4/3 per field; we define the base grid to match. */
.gform_wrapper .gform_fields {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Strip default GF field padding/margin */
.gform_wrapper .gfield {
    margin: 0 !important;
    padding: 0 !important;
    grid-column: span 12; /* default: full width */
}

/* Explicit span rules — mirror GF admin field-size options */
.gform_wrapper .gfield--width-full    { grid-column: span 12 !important; }
.gform_wrapper .gfield--width-half    { grid-column: span 6  !important; }
.gform_wrapper .gfield--width-third   { grid-column: span 4  !important; }
.gform_wrapper .gfield--width-quarter { grid-column: span 3  !important; }
.gfield_html,
.gsection { grid-column: span 12 !important; }

/* -- Labels ---------------------------------------------------------------- */
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_label.gform-field-label {
    font-family: Montserrat, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: #94A3B8 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

/* Required indicator — sentence case, tight to the label */
.gform_wrapper .gfield_required {
    color: #00B74F !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: none !important;
    padding-left: 4px !important;
    vertical-align: baseline !important;
}

/* -- Text / email / tel / date inputs -------------------------------------- */
.gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']),
.gform_wrapper textarea {
    background: #07101D !important;
    border: 1px solid rgba(248, 250, 252, .18) !important;
    color: #F8FAFC !important;
    padding: 14px 16px !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 14px !important;
    outline: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color .2s !important;
}

.gform_wrapper textarea {
    line-height: 1.6 !important;
    resize: vertical !important;
    min-height: 80px !important;
    max-height: 160px !important;
}

.gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']):focus,
.gform_wrapper textarea:focus {
    border-color: rgba(248, 250, 252, .55) !important;
    box-shadow: none !important;
}

/* -- Placeholders ---------------------------------------------------------- */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: rgba(148, 163, 184, .5) !important;
}

/* -- Select dropdowns ------------------------------------------------------ */
.gform_wrapper select {
    background: #07101D !important;
    border: 1px solid rgba(248, 250, 252, .18) !important;
    color: #F8FAFC !important;
    padding: 14px 16px !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 14px !important;
    outline: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border-radius: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    cursor: pointer !important;
    transition: border-color .2s;
}

.gform_wrapper select:focus {
    border-color: rgba(248, 250, 252, .55) !important;
    box-shadow: none !important;
}

.gform_wrapper select option {
    background: #0A1626;
    color: #F8FAFC;
}

/* -- ginput_container: strip default margin -------------------------------- */
.gform_wrapper .ginput_container {
    margin: 0 !important;
}

/* -- Checkboxes — plain 2-col grid, no pill styling ----------------------- */
.gform_wrapper .gfield_checkbox {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 16px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

.gform_wrapper .gfield_checkbox .gchoice {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Show native checkbox — reset any GF hiding */
.gform_wrapper .gfield_checkbox .gfield-choice-input {
    position: static !important;
    opacity: 1 !important;
    width: 15px !important;
    height: 15px !important;
    pointer-events: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    accent-color: #00B74F !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 10px 0 0 !important;
}

/* Plain label — no border, no background */
.gform_wrapper .gfield_checkbox .gchoice .gform-field-label,
.gform_wrapper .gfield_checkbox .gchoice label {
    display: inline !important;
    align-items: unset !important;
    gap: 0 !important;
    padding: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
    color: #94A3B8 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    transition: color .15s !important;
    margin: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
}

.gform_wrapper .gfield_checkbox .gchoice .gform-field-label::before,
.gform_wrapper .gfield_checkbox .gchoice label::before {
    display: none !important;
}

.gform_wrapper .gfield_checkbox .gfield-choice-input:checked + .gform-field-label,
.gform_wrapper .gfield_checkbox .gfield-choice-input:checked + label {
    color: #F8FAFC !important;
    background: none !important;
    border: none !important;
}

/* -- Radios — same plain style as checkboxes, circular shape -------------- */
.gform_wrapper .gfield_radio {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 16px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

.gform_wrapper .gfield_radio .gchoice {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Show native radio */
.gform_wrapper .gfield_radio .gfield-choice-input {
    position: static !important;
    opacity: 1 !important;
    width: 15px !important;
    height: 15px !important;
    pointer-events: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    accent-color: #00B74F !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 10px 0 0 !important;
}

/* Plain label — no border, no background */
.gform_wrapper .gfield_radio .gchoice .gform-field-label,
.gform_wrapper .gfield_radio .gchoice label {
    display: inline !important;
    padding: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
    color: #94A3B8 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    transition: color .15s !important;
    margin: 0 !important;
    width: auto !important;
}

.gform_wrapper .gfield_radio .gchoice .gform-field-label::before,
.gform_wrapper .gfield_radio .gchoice label::before {
    display: none !important;
}

.gform_wrapper .gfield_radio .gfield-choice-input:checked + .gform-field-label,
.gform_wrapper .gfield_radio .gfield-choice-input:checked + label {
    color: #F8FAFC !important;
    background: none !important;
    border: none !important;
}

/* Focus ring */
.gform_wrapper .gfield-choice-input:focus-visible + .gform-field-label,
.gform_wrapper .gfield-choice-input:focus-visible + label {
    outline: 2px solid #00B74F !important;
    outline-offset: 2px !important;
}

/* -- Field descriptions ---------------------------------------------------- */
.gform_wrapper .gfield_description {
    font-size: 12px !important;
    color: #64748B !important;
    margin-top: 6px !important;
    line-height: 1.6 !important;
    font-family: Montserrat, sans-serif !important;
    padding: 0 !important;
}

/* -- Submit button --------------------------------------------------------- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
    grid-column: 1 / -1 !important;
    padding: 0 !important;
    margin-top: 8px !important;
    border: none !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
    font-family: Montserrat, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    color: #050D17 !important;
    background: #00B74F !important;
    border: none !important;
    padding: 17px 36px !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    transition: filter .2s !important;
    width: auto !important;
    display: inline-block !important;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
    filter: brightness(.82) !important;
}

/* -- Validation error banner ----------------------------------------------- */
.gform_wrapper .gform_validation_errors {
    background: rgba(239, 68, 68, .08) !important;
    border: 1px solid rgba(239, 68, 68, .35) !important;
    border-radius: 0 !important;
    padding: 16px 20px !important;
    margin-bottom: 28px !important;
    grid-column: 1 / -1 !important;
}

.gform_wrapper .gform_validation_errors > h2 {
    font-family: Montserrat, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    color: #F87171 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    text-transform: uppercase !important;
}

.gform_wrapper .gform_validation_errors > ol {
    margin: 8px 0 0 !important;
    padding-left: 18px !important;
}

.gform_wrapper .gform_validation_errors > ol li {
    font-size: 13px !important;
    color: #FDA4AF !important;
    font-family: Montserrat, sans-serif !important;
    margin-bottom: 4px !important;
}

.gform_wrapper .gform_validation_errors > ol a {
    color: #FDA4AF !important;
    text-decoration: underline !important;
}

/* -- Per-field error state ------------------------------------------------- */
.gform_wrapper .gfield_error {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.gform_wrapper .gfield_error input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']),
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-color: rgba(239, 68, 68, .6) !important;
}

.gform_wrapper .gfield_error input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']):focus,
.gform_wrapper .gfield_error textarea:focus,
.gform_wrapper .gfield_error select:focus {
    border-color: rgba(239, 68, 68, .85) !important;
}

.gform_wrapper .gfield_error .gfield_label {
    color: #F87171 !important;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    font-family: Montserrat, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #F87171 !important;
    padding: 0 !important;
    margin-top: 6px !important;
    border: none !important;
    background: none !important;
}

/* -- Confirmation message -------------------------------------------------- */
.gform_confirmation_wrapper,
.gform_confirmation_message {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #00B74F;
    padding: 20px 0;
    text-align: left;
}

/* -- Required legend ------------------------------------------------------- */
.gform_wrapper .gform_required_legend {
    font-family: Montserrat, sans-serif !important;
    font-size: 12px !important;
    color: #64748B !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    border: none !important;
    background: none !important;
    grid-column: 1 / -1 !important;
}

/* -- Spinner --------------------------------------------------------------- */
.gform_wrapper .gform_ajax_spinner {
    filter: invert(1) brightness(.7) sepia(1) hue-rotate(75deg) saturate(4);
    margin-left: 12px;
}

/* ============================================================================
   EMAIL SIGNATURE GENERATOR  (page-email-signature.php)
   ============================================================================ */

.sig-gen-section {
    background: #07101D;
    padding: 72px 0 80px;
}

.sig-gen-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.sig-gen-panel-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    color: #94A3B8;
    margin: 0 0 20px;
}

/* Form panel */
.sig-gen-form-panel {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 40px;
}

.sig-gen-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}

.sig-gen-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sig-gen-label {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: #94A3B8;
    text-transform: uppercase;
}

.sig-gen-input {
    background: #07101D;
    border: 1px solid rgba(248, 250, 252, .18);
    color: #F8FAFC;
    padding: 13px 16px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    transition: border-color .2s;
}

.sig-gen-input:focus {
    border-color: rgba(0, 183, 79, .6);
}

.sig-gen-input::placeholder {
    color: rgba(148, 163, 184, .45);
}

.sig-gen-copy-btn {
    width: 100%;
    justify-content: center;
    font-size: 13px;
    letter-spacing: .14em;
}

.sig-gen-copy-note {
    margin: 10px 0 0;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    min-height: 18px;
    text-align: center;
}

/* Preview panel */
.sig-gen-preview-panel {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .1);
    padding: 40px;
}

.sig-gen-preview-frame {
    background: #FFFFFF;
    padding: 28px 24px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.sig-gen-preview-hint {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    color: #5A6B7E;
    line-height: 1.55;
    margin: 0;
}

/* How to use */
.sig-gen-how-section {
    background: #050D17;
    padding: 64px 0 80px;
    border-top: 1px solid rgba(248, 250, 252, .07);
}

.sig-gen-how-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.sig-gen-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 4px;
}

.sig-gen-how-card {
    background: #0A1626;
    border: 1px solid rgba(248, 250, 252, .08);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sig-gen-how-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    color: #00B74F;
    line-height: 1;
}

.sig-gen-how-title {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: .04em;
}

.sig-gen-how-desc {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.65;
    margin: 0;
}

.sig-gen-how-desc strong {
    color: #C7D3E0;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
    .sig-gen-wrap {
        grid-template-columns: 1fr;
    }
    .sig-gen-how-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .sig-gen-form-panel,
    .sig-gen-preview-panel {
        padding: 28px 20px;
    }
    .sig-gen-how-card {
        padding: 24px 20px;
    }
}

/* ============================================================================
   GRAVITY FORMS — RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .gform_wrapper {
        padding: 28px !important;
    }
    .gform_wrapper .gform_fields {
        grid-template-columns: 1fr !important;
    }
    .gform_wrapper .gfield,
    .gform_wrapper .gfield--width-full,
    .gform_wrapper .gfield--width-half,
    .gform_wrapper .gfield--width-third,
    .gform_wrapper .gfield--width-quarter,
    .gfield_html,
    .gsection {
        grid-column: 1 / -1 !important;
    }
    .gform_wrapper .gfield_checkbox {
        grid-template-columns: 1fr !important;
    }
}