@charset "UTF-8";

:root {
    color-scheme: light;
    --arena-font-family: Verdana, Geneva, sans-serif;
    --bs-font-sans-serif: var(--arena-font-family);
    --bs-body-font-family: var(--arena-font-family);
    --arena-ink: #101a2c;
    --arena-ink-soft: #233148;
    --arena-muted: #657286;
    --arena-paper: #f6f7f4;
    --arena-white: #fff;
    --arena-lime: #d3f36b;
    --arena-orange: #ff8759;
    --arena-line: #e5e8e2;
    --arena-radius: 1.2rem;
    --arena-shadow: 0 1.25rem 3rem rgb(16 26 44 / 9%);
}

html { scroll-behavior: smooth; }
body {
    background: var(--arena-paper);
    color: var(--arena-ink);
    font-family: var(--arena-font-family);
    font-size: 1rem;
    line-height: 1.55;
}
a { color: inherit; }
.skip-link {
    position: absolute;
    z-index: 2000;
    top: .5rem;
    left: .5rem;
    padding: .7rem 1rem;
    transform: translateY(-150%);
    border-radius: .5rem;
    background: var(--arena-lime);
    color: var(--arena-ink);
    font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; z-index: 20; background: var(--arena-ink); color: var(--arena-white); }
.brand-lockup { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: .7rem .7rem .7rem .2rem;
    background: var(--arena-lime);
    color: var(--arena-ink);
    font-size: .83rem;
    font-weight: 900;
    letter-spacing: -.08em;
}
.brand-name { color: var(--arena-white); font-size: .8rem; font-weight: 500; letter-spacing: .16em; }
.brand-name strong { font-weight: 900; }
.site-header .nav-link { color: rgb(255 255 255 / 78%); font-size: .91rem; font-weight: 600; }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--arena-lime); }
.preview-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 999px;
    padding: .4rem .72rem;
    color: rgb(255 255 255 / 78%);
    font-size: .72rem;
    font-weight: 700;
}
.preview-chip::before, .status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--arena-orange); }
.nav-toggle { border-color: rgb(255 255 255 / 30%); box-shadow: none !important; }
.nav-toggle:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 2px; }
.nav-toggle-icon { display: block; width: 1.5rem; height: 1.5rem; overflow: visible; }
.nav-toggle-icon-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .2s ease, opacity .16s ease; }
.hero-section { position: relative; overflow: hidden; background: var(--arena-ink); color: var(--arena-white); }
.hero-container { position: relative; z-index: 1; padding-top: clamp(3.5rem, 6vw, 5.8rem); padding-bottom: 1.3rem; }
.hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(1px); }
.hero-glow-one { top: -17rem; right: -8rem; width: 38rem; height: 38rem; background: radial-gradient(circle, rgb(211 243 107 / 13%) 0, rgb(211 243 107 / 0%) 68%); }
.hero-glow-two { bottom: -18rem; left: 24%; width: 34rem; height: 34rem; background: radial-gradient(circle, rgb(255 135 89 / 10%) 0, rgb(255 135 89 / 0%) 68%); }
.eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 .85rem; color: #647184; font-size: .69rem; font-weight: 900; letter-spacing: .16em; }
.light-eyebrow { color: rgb(255 255 255 / 65%); }
.eyebrow-line { width: 1.15rem; height: 2px; background: var(--arena-orange); }
.hero-copy h1 { max-width: 11ch; margin: 0; color: var(--arena-white); font-size: clamp(3.1rem, 6.8vw, 5.9rem); font-weight: 850; letter-spacing: -.075em; line-height: .99; }
.hero-copy h1 span { color: var(--arena-lime); }
.hero-lede { max-width: 37rem; margin: 1.35rem 0 0; color: rgb(255 255 255 / 71%); font-size: clamp(1rem, 1.35vw, 1.13rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.65rem; }
.btn-brand { border: 0; border-radius: .75rem; padding: .78rem 1.1rem; background: var(--arena-lime); color: var(--arena-ink); font-size: .91rem; font-weight: 850; box-shadow: 0 .8rem 1.8rem rgb(211 243 107 / 12%); }
.btn-brand:hover, .btn-brand:focus-visible { background: #e0ff83; color: var(--arena-ink); transform: translateY(-1px); }
.hero-text-link { color: rgb(255 255 255 / 78%); font-size: .88rem; font-weight: 650; text-decoration: none; }
.hero-text-link span { margin-left: .35rem; color: var(--arena-lime); }
.hero-text-link:hover, .hero-text-link:focus-visible { color: var(--arena-lime); text-decoration: underline; text-underline-offset: .25rem; }
.hero-proof-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.3rem; }
.hero-proof { display: flex; align-items: center; gap: .7rem; }
.proof-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgb(255 255 255 / 18%); border-radius: .6rem; color: var(--arena-lime); font-size: .66rem; font-weight: 850; }
.hero-proof strong, .hero-proof small { display: block; }
.hero-proof strong { color: var(--arena-white); font-size: .78rem; }
.hero-proof small { color: rgb(255 255 255 / 55%); font-size: .7rem; }
.hero-panel { border: 1px solid rgb(255 255 255 / 10%); border-radius: 1.2rem; padding: clamp(1.2rem, 2.5vw, 1.7rem); background: rgb(255 255 255 / 6%); box-shadow: 0 2rem 4rem rgb(0 0 0 / 15%); backdrop-filter: blur(12px); }
.hero-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; }
.panel-kicker { margin: 0 0 .3rem; color: rgb(255 255 255 / 52%); font-size: .64rem; font-weight: 850; letter-spacing: .13em; }
.hero-panel h2 { margin: 0; font-size: 1.4rem; font-weight: 750; letter-spacing: -.04em; }
.panel-ball { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--arena-orange); box-shadow: inset -.45rem -.45rem 0 rgb(0 0 0 / 10%); transform: rotate(-25deg); }
.panel-ball span { width: 1.8rem; height: 1.8rem; border-right: 1px dashed rgb(255 255 255 / 85%); border-left: 1px dashed rgb(255 255 255 / 85%); border-radius: 50%; }
.format-list { border-top: 1px solid rgb(255 255 255 / 12%); }
.format-row { display: grid; grid-template-columns: 1.3rem 2.4rem minmax(0, 1fr) 1rem; align-items: center; gap: .75rem; min-height: 4.35rem; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.format-number { color: rgb(255 255 255 / 38%); font-size: .62rem; font-weight: 800; }
.format-symbol, .facility-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .68rem; font-size: .78rem; font-weight: 900; }
.ground-symbol { background: rgb(211 243 107 / 16%); color: var(--arena-lime); }
.nets-symbol { background: rgb(255 135 89 / 16%); color: #ffad8b; }
.box-symbol { background: rgb(147 175 255 / 15%); color: #a8bcff; }
.format-copy strong, .format-copy small { display: block; }
.format-copy strong { color: var(--arena-white); font-size: .87rem; }
.format-copy small { color: rgb(255 255 255 / 54%); font-size: .72rem; }
.format-arrow { color: rgb(255 255 255 / 45%); }
.panel-footnote { display: flex; align-items: center; gap: .55rem; padding-top: 1rem; color: rgb(255 255 255 / 64%); font-size: .75rem; }
.panel-footnote-mark { color: var(--arena-lime); }
.hero-bottomline { display: flex; justify-content: space-between; margin-top: clamp(2rem, 4vw, 3.6rem); padding: .9rem 0; border-top: 1px solid rgb(255 255 255 / 12%); color: rgb(255 255 255 / 38%); font-size: .6rem; font-weight: 800; letter-spacing: .16em; }
.section-space { padding-top: clamp(3.3rem, 6vw, 5.2rem); padding-bottom: clamp(3.3rem, 6vw, 5.2rem); }
.facilities-section { background: var(--arena-paper); }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.section-title { max-width: 19ch; margin: 0; color: var(--arena-ink); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 820; letter-spacing: -.065em; line-height: 1.1; }
.section-intro { max-width: 20rem; margin: 0 0 .15rem; color: var(--arena-muted); font-size: .92rem; }
.facility-card { position: relative; min-height: 13rem; overflow: hidden; border: 1px solid var(--arena-line); border-radius: var(--arena-radius); padding: 1.25rem; background: var(--arena-white); transition: transform .2s ease, box-shadow .2s ease; }
.facility-card:hover { transform: translateY(-3px); box-shadow: var(--arena-shadow); }
.facility-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.facility-card .facility-icon { background: #f0f4e7; color: #56731a; }
.facility-card-nets .facility-icon { background: #fff0e9; color: #c75d33; }
.facility-card-box .facility-icon { background: #edf0ff; color: #5365b4; }
.facility-index { color: #7e8999; font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.facility-card h3 { margin: 0 0 .4rem; color: var(--arena-ink); font-size: 1.13rem; font-weight: 800; letter-spacing: -.03em; }
.facility-card p { max-width: 25rem; margin: 0; color: var(--arena-muted); font-size: .84rem; }
.facility-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.facility-tags span { border-radius: 999px; padding: .26rem .55rem; background: #f4f5f2; color: #687387; font-size: .66rem; font-weight: 700; }
.locations-strip { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; border: 1px solid var(--arena-line); border-radius: .95rem; padding: .8rem 1rem; background: rgb(255 255 255 / 75%); }
.locations-icon { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .65rem; background: var(--arena-ink); color: var(--arena-lime); font-size: 1.1rem; }
.locations-strip strong, .locations-strip span { display: block; }
.locations-strip strong { font-size: .8rem; font-weight: 800; }
.locations-strip div:nth-child(2) span { color: var(--arena-muted); font-size: .72rem; }
.locations-link { margin-left: auto; color: var(--arena-ink); font-size: .78rem; font-weight: 800; text-decoration: none; }
.locations-link:hover { color: #576f1c; }
.booking-section { padding-top: 0; background: var(--arena-paper); }
.booking-shell { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 1.25rem; background: var(--arena-ink); color: var(--arena-white); box-shadow: var(--arena-shadow); }
.booking-intro { padding: clamp(1.5rem, 4vw, 2.4rem); background: radial-gradient(circle at 10% 100%, rgb(211 243 107 / 12%), transparent 45%), var(--arena-ink); }
.booking-intro h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 820; letter-spacing: -.065em; line-height: 1.08; }
.booking-intro h2 span { color: var(--arena-lime); }
.booking-intro > p:not(.eyebrow) { max-width: 27rem; margin: .95rem 0 1.2rem; color: rgb(255 255 255 / 65%); font-size: .85rem; }
.guest-badge { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgb(211 243 107 / 35%); border-radius: 999px; padding: .4rem .65rem; color: var(--arena-lime); font-size: .68rem; font-weight: 800; }
.booking-steps { display: flex; flex-direction: column; justify-content: center; padding: 1rem clamp(1.35rem, 3vw, 2.2rem); background: #17243a; }
.booking-step { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.booking-step:last-child { border-bottom: 0; }
.step-number { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: .65rem; background: rgb(255 255 255 / 7%); color: var(--arena-lime); font-size: .69rem; font-weight: 850; }
.booking-step strong { display: block; color: var(--arena-white); font-size: .88rem; }
.booking-step p { margin: .22rem 0 0; color: rgb(255 255 255 / 57%); font-size: .76rem; }
.payment-note { display: flex; align-items: center; gap: .85rem; margin-top: .85rem; border: 1px solid #e5e8df; border-radius: .95rem; padding: .9rem 1rem; background: var(--arena-white); }
.payment-note-icon { display: grid; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; background: #fff0e9; color: #b64e29; font-size: 1.1rem; font-weight: 800; }
.payment-note strong { display: block; color: var(--arena-ink); font-size: .8rem; font-weight: 850; }
.payment-note p { max-width: 45rem; margin: .18rem 0 0; color: var(--arena-muted); font-size: .72rem; }
.no-gateway-pill { flex: 0 0 auto; margin-left: auto; border-radius: 999px; padding: .33rem .55rem; background: #f1f2ef; color: #556172; font-size: .64rem; font-weight: 800; }
.closing-section { padding: .8rem 0 3rem; background: var(--arena-paper); }
.closing-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; border-top: 1px solid var(--arena-line); padding-top: 1.6rem; }
.closing-inner .eyebrow { margin-bottom: .55rem; }
.closing-inner h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.95rem); font-weight: 820; letter-spacing: -.06em; line-height: 1.14; }
.closing-inner h2 span { color: #778294; }
.closing-aside { display: flex; max-width: 19rem; align-items: flex-start; gap: .55rem; color: var(--arena-muted); font-size: .74rem; }
.status-dot { flex: 0 0 auto; margin-top: .35rem; }
.site-footer { background: var(--arena-ink); color: var(--arena-white); }
.footer-inner { display: flex; min-height: 5.2rem; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-brand .brand-mark { width: 2rem; height: 2rem; font-size: .7rem; }
.footer-brand .brand-name { font-size: .68rem; }
.footer-note, .copyright { margin: 0; color: rgb(255 255 255 / 50%); font-size: .68rem; }

@media (max-width: 991.98px) {
    .site-header .navbar-collapse { padding-bottom: .5rem; }
    .site-header .navbar-nav { align-items: flex-start !important; }
    .hero-container { padding-top: 3.3rem; }
    .hero-copy h1 { max-width: 13ch; }
    .hero-panel { max-width: 38rem; }
}
@media (max-width: 767.98px) {
    .section-heading-row { display: block; }
    .section-intro { margin-top: .75rem; }
    .booking-shell { grid-template-columns: 1fr; }
    .booking-steps { padding-top: .5rem; padding-bottom: .8rem; }
    .payment-note { align-items: flex-start; flex-wrap: wrap; }
    .no-gateway-pill { margin-left: 3.1rem; }
    .closing-inner { display: block; }
    .closing-aside { margin-top: 1rem; }
    .footer-inner { flex-wrap: wrap; justify-content: flex-start; padding-top: 1rem; padding-bottom: 1rem; }
    .footer-note { flex-basis: calc(100% - 1rem); order: 3; }
    .copyright { margin-left: auto; }
}
@media (max-width: 575.98px) {
    .hero-container { padding-top: 2.7rem; }
    .hero-copy h1 { font-size: clamp(3rem, 14vw, 4.25rem); }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: .85rem; }
    .hero-proof-row { gap: 1rem; margin-top: 1.8rem; }
    .hero-proof { flex: 1 1 9rem; }
    .hero-bottomline { font-size: .52rem; letter-spacing: .1em; }
    .locations-strip { align-items: flex-start; }
    .locations-link { align-self: center; white-space: nowrap; }
    .facility-card { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Compact Phase 3 discovery, quote, guest verification, and booking-management flow. */
.booking-tool {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1rem, 2.5vw, 1.7rem);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgb(16 26 44 / 8%);
}
.booking-tool-heading, .availability-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.booking-tool-heading h3 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 1.8rem); font-weight: 850; letter-spacing: -.045em; }
.booking-tool-heading .eyebrow { margin-bottom: .45rem; }
.booking-tool-subtitle { margin: .35rem 0 1rem; color: var(--arena-muted); font-size: .85rem; }
.booking-tool-step { flex: 0 0 auto; color: var(--arena-ink); font-size: .8rem; font-weight: 900; }
.booking-tool-step span { color: #a4adba; }
.booking-tool .form-label { margin-bottom: .3rem; color: #344257; font-size: .74rem; font-weight: 800; }
.booking-tool .form-control, .booking-tool .form-select { min-height: 2.65rem; border-color: #dce1e8; border-radius: .6rem; font-size: .86rem; }
.booking-tool .form-control:focus, .booking-tool .form-select:focus { border-color: #98ad57; box-shadow: 0 0 0 .2rem rgb(211 243 107 / 28%); }
.booking-tool .btn { min-height: 2.65rem; border-radius: .65rem; padding-inline: .95rem; font-size: .84rem; font-weight: 800; }
.booking-tool .btn:disabled { opacity: .6; }
.optional-label { margin-left: .25rem; color: #7a8797; font-weight: 600; }
.booking-message { min-height: 1.25rem; margin: .7rem 0 0; color: #4d5c70; font-size: .79rem; }
.booking-message[hidden] { display: none; }
.booking-message[data-kind="error"] { color: #a52a2a; }
.booking-message[data-kind="success"] { color: #376b24; }
.availability-panel { margin-top: .55rem; padding: .9rem; border: 1px solid #e5e9ef; border-radius: .8rem; background: #fbfcfa; }
.availability-panel[hidden], .booking-tool [hidden] { display: none !important; }
.availability-panel-heading { align-items: center; margin-bottom: .7rem; }
.availability-panel-heading > div { display: flex; flex-direction: column; gap: .05rem; }
.availability-label { display: block; color: #66748a; font-size: .63rem; font-weight: 900; letter-spacing: .13em; }
.availability-panel-heading strong { font-size: .87rem; }
.timezone-label { color: #6f7d91; font-size: .73rem; font-weight: 700; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.1rem, 1fr)); gap: .45rem; }
.slot-choice { display: flex; min-height: 3.35rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; border: 1px solid #dfe5dd; border-radius: .6rem; padding: .45rem .6rem; background: #fff; color: var(--arena-ink); text-align: left; }
.slot-choice strong { font-size: .78rem; }
.slot-choice span { color: #647286; font-size: .67rem; }
.slot-choice:not(:disabled):hover, .slot-choice[aria-pressed="true"] { border-color: #829c35; background: #eff7dc; }
.slot-choice:disabled { border-color: #eceff2; background: #f3f4f5; color: #9aa3af; cursor: not-allowed; }
.slot-choice:disabled span { color: #9aa3af; }
.slot-choice:focus-visible { outline: 2px solid #879f3b; outline-offset: 2px; }
.quote-form { margin-top: .75rem; }
.quote-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1rem; margin-top: .75rem; border: 1px solid #dce7c7; border-radius: .8rem; padding: .9rem 1rem; background: #f4f9e8; }
.quote-card > div:first-child { display: flex; flex-direction: column; gap: .15rem; }
.quote-card [data-quote-total] { color: #26351a; font-size: 1.25rem; font-weight: 900; }
.quote-card > p { grid-column: 1 / -1; margin: 0; color: #4c5a43; font-size: .78rem; font-weight: 700; }
.quote-terms { grid-column: 1 / -1; display: grid; gap: .3rem; color: #536047; font-size: .7rem; }
.quote-card > .btn { grid-column: 1 / -1; justify-self: start; }
.guest-flow, .manage-flow { margin-top: .95rem; border: 1px solid #e3e8ef; border-radius: .8rem; padding: .9rem; background: #fbfcff; }
.guest-flow-heading { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .65rem; }
.flow-index { display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; place-items: center; border-radius: .55rem; background: var(--arena-ink); color: var(--arena-lime); font-size: .68rem; font-weight: 900; }
.guest-flow-heading h4 { margin: 0; font-size: .93rem; font-weight: 850; }
.guest-flow-heading p { margin: .12rem 0 0; color: #6b788b; font-size: .74rem; }
.booking-result { display: flex; align-items: center; gap: .7rem; margin-top: .85rem; border-radius: .8rem; padding: .85rem; background: #edf6df; }
.result-check { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #d4edac; color: #355224; font-weight: 900; }
.booking-result h4 { margin: .05rem 0; font-size: .92rem; font-weight: 850; }
.booking-result p { margin: 0; overflow-wrap: anywhere; color: #526047; font-size: .73rem; }
.managed-booking { margin-top: .8rem; border-top: 1px solid #e2e7ed; padding-top: .75rem; }
.managed-booking h5 { margin-bottom: .25rem; font-size: .87rem; font-weight: 850; }
.managed-booking p, .managed-booking li { color: #4e5d72; font-size: .75rem; }
.managed-booking p { margin-bottom: .25rem; }
.managed-booking ul { margin: .35rem 0 .5rem; padding-left: 1.2rem; }
@media (max-width: 575.98px) {
    .booking-tool { margin-top: 1.2rem; padding: .9rem; }
    .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-card { grid-template-columns: 1fr; }
    .quote-card > .btn { width: 100%; }
    .booking-tool .btn { width: 100%; }
}