/* Greystone Pickleball Club theme layer.
   Loaded after theme.css so these rules win on equal specificity.

   Implements the Greystone style guide (source: greystonepickleball.com, 2026-09-17):
   dark theme, 4px grid, pill buttons, flat surfaces, Lato 700 headings,
   Lato 16px body at 1.7 line-height.

   Base variables in theme.css are remapped to the guide:
     --dark-blue -> #123656 (surface)   --blue / --navy-blue -> #0d1b2e (elevated)
     --yellow    -> #e29b36 (primary)   --white -> #ffffff (text) */

:root {
  /* Style guide roles */
  --color-primary: #e29b36;
  --color-primary-hover: #c5872f;
  --color-accent: #0d1b2e;
  --color-surface: #123656;
  --color-elevated: #0d1b2e;
  --color-text: #ffffff;
  --color-muted: #949494;
  --color-border: #d9d9d9;
  --color-light: #f2ede3;
  /* Gold is too light to read on the cream surface, so text and icons on light use these deeper shades:
     #9c6a1c is 4.0:1 against cream (large text and icons), #7d5314 is 5.7:1 (small text). */
  --color-primary-on-light: #9c6a1c;
  --color-primary-text-on-light: #7d5314;
  --color-focus-ring: #e29b36;

  /* Spacing scale (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-12: 48px;

  /* Radius vocabulary */
  --radius-card: 12px;
  --radius-field: 8px;
  --radius-button: 100em;

  /* Type scale: 60 / 48 / 45 / 21 / 16 */
  --font-size-h1: clamp(2.5rem, 1.75rem + 2.5vw, 3.75rem);
  --font-size-h2: clamp(2rem, 1.5rem + 1.75vw, 3rem);
  --font-size-h3: clamp(1.75rem, 1.4rem + 1.4vw, 2.81rem);
  --font-size-lead: 1.3125rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --line-height-body: 1.7;
}

/* ---------- Metric-matched fallback fonts ---------- */
/* Local fonts sized to Lato and Playfair Display, so text laid out before the
   web fonts arrive occupies the same lines and the swap does not shift the
   page. Values computed from the font files (frequency-weighted x-width,
   hhea ascent and descent). */
@font-face {
  font-family: "Lato Fallback";
  font-weight: 400;
  src: local("Arial");
  size-adjust: 98.09%;
  ascent-override: 100.62%;
  descent-override: 21.72%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Lato Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 92.79%;
  ascent-override: 106.37%;
  descent-override: 22.95%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Playfair Fallback";
  font-weight: 800;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 90.27%;
  ascent-override: 119.87%;
  descent-override: 27.81%;
  line-gap-override: 0%;
}

/* ---------- Layout safety net ---------- */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

/* clip, where supported, hides sideways overflow without turning body into a
   scroll container, which would stop position: sticky from working. */
body {
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: Lato, "Lato Fallback", sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Full-bleed side-padding wrapper: never capped, so the inner containers
   below can center themselves inside it at any viewport width. */
.padding-global,
.padding-global-alt {
  width: 100%;
  max-width: none;
  padding-left: 5%;
  padding-right: 5%;
}

/* Shared content containers: capped and centered. .container-large-2 had no
   cap of its own, so it now matches .container-large. */
.container-large,
.container-large-2,
.container-medium,
.container-small,
.nav_container {
  margin-left: auto;
  margin-right: auto;
}

.container-large,
.container-large-2 {
  max-width: 80rem;
}

/* ---------- Typography ---------- */
h1, .heading-style-h1, .heading-style-h1-2 {
  font-family: Lato, "Lato Fallback", sans-serif;
  font-weight: 700;
  font-size: var(--font-size-h1);
  line-height: 1;
  letter-spacing: 0;
}

h2, .h2, .heading-style-h2, .heading-style-h2-2, .heading-style-h2-4, .heading-style-h2-5,
.heading-style-h2-6, .centered-h2, .center-align-header, .title-11, .title-13 {
  font-family: Lato, "Lato Fallback", sans-serif;
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: 1.2;
  letter-spacing: 0;
}

.heading-style-h3, .h3.bigger {
  font-family: Lato, "Lato Fallback", sans-serif;
  font-weight: 700;
  font-size: var(--font-size-h3);
  line-height: 1;
}

p,
.text-size-medium, .text-size-medium-2, .text-size-medium-3, .text-size-medium-5,
.text-size-medium-6, .text-size-medium-7, .text-size-medium-2.twenty-push, .copy-9, .rte p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

.text-size-large {
  font-size: var(--font-size-lead);
  line-height: 1.5;
}

/* Muted secondary text */
.footer_credit-text,
.footer_legal-link,
.copy-7,
.copy-8,
.label-2,
.form_field-label,
.ui-form-label,
.footer_link-column p,
.membership_content-top > .margin-bottom > .text-align-center > div:last-child,
.checkbox-field {
  color: var(--color-muted);
}

.copy-7 {
  font-weight: 400;
}

/* Links */
.text-style-link,
.text-style-link.blue,
.rte a,
.rich-text-block a,
.footer_link:hover,
.footer_legal-link:hover {
  color: var(--color-primary);
}

/* Uppercase labels get a little tracking. */
.nav_link,
.nav-dropdown_dropdown-toggle,
.nav-dropdown_dropdown-link,
.button {
  letter-spacing: 0.04em;
}

/* ---------- Buttons (pill, primary gold) ---------- */
/* The guide specifies white text on gold. That pair fails WCAG AA (2.4:1), so
   button labels use the accent navy #0d1b2e (7.2:1) instead. */
.button,
.ui-button,
.button.nav,
.button.white,
.button.transparent {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-button);
  color: var(--color-accent);
  font-weight: 700;
  padding: var(--space-3) var(--space-6);
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button:hover,
.ui-button:hover,
.button.nav:hover,
.button.white:hover,
.button.transparent:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-accent);
}

/* Secondary: outlined, muted */
.button.is-alternate {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.button.is-alternate:hover {
  background-color: var(--color-elevated);
  border-color: var(--color-text);
  color: var(--color-text);
}

.button.nav {
  white-space: nowrap;
}

/* ---------- Navigation ---------- */
.nav_component {
  background-color: rgba(18, 54, 86, 0.85);
  border-color: var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media screen and (min-width: 992px) {
  .nav_container {
    grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
  }

  .nav_button-wrapper {
    justify-content: flex-end;
  }
}

.nav_link:hover,
.nav_link.is-current,
.nav-dropdown_dropdown-toggle.is-current .label-12,
.nav-dropdown_dropdown-link:hover,
.nav-dropdown_dropdown-link.is-current {
  color: var(--color-primary);
}

.nav-dropdown_dropdown-list.is-open {
  background-color: var(--color-elevated);
  border-color: var(--color-border);
  border-radius: var(--radius-card);
}

.nav_menu.is-page-height-tablet {
  border-color: var(--color-border);
}

.nav-dropdown_dropdown-toggle .dropdown-chevron {
  transition: transform 0.2s ease;
}

.nav-dropdown_dropdown-toggle.is-open .dropdown-chevron {
  transform: rotate(180deg);
}

/* ---------- Cards and elevated containers ---------- */
/* Former white panels become elevated dark cards with white text. */
.white-bg-style,
.white-box,
.membership_plan,
.tab-cards_tabs,
.tab-cards_card,
.team_component,
.box-21-alt,
.section_cta-plain,
.program-card,
.program-grid_item,
.footer_component,
.contact-form_form-block,
.opening-times,
.rates_feature.top,
.rates_feature-2.top,
.hero_component,
.the-new-slim-hero,
.the-new-slim-hero-copy,
.cta-card-wrap {
  background-color: var(--color-elevated);
  color: var(--color-text);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.hero_component,
.hero_component.rounded,
.the-new-slim-hero,
.image-wrapper-16-9.rounded,
.tab-cards_card,
.program-card {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.hero_component.rounded.non-mobile {
  background-color: transparent;
}

.program-card {
  border: 1px solid rgba(217, 217, 217, 0.25);
}

.white-bg-style h2, .white-bg-style h3, .white-bg-style p, .white-bg-style div,
.white-box h2, .white-box h3, .white-box h4, .white-box p,
.membership_plan div, .membership_plan .heading-style-h6,
.tab-cards_tabs h3, .tab-cards_card h3, .tab-cards_card p,
.box-21-alt h4, .box-21-alt p {
  color: var(--color-text);
}

.rates_feature,
.rates_feature-2 {
  border-bottom: 1px solid rgba(217, 217, 217, 0.25);
}

.rates_feature.top,
.rates_feature-2.top,
.rates_feature.top.blue,
.rates_feature-2.top.dark {
  background-color: var(--color-primary);
  color: var(--color-accent);
  border-radius: var(--radius-field);
}

.rates_feature.top .label-2,
.rates_feature-2.top .label-2 {
  color: var(--color-accent);
  font-weight: 700;
}

.pricing-header,
.price,
.heading-style-h6.b-lue,
.label-10 {
  color: var(--color-primary);
}

.membership_icon-wrapper {
  color: var(--color-primary);
}

.tab-cards_tab-link {
  border-radius: var(--radius-button);
  color: var(--color-muted);
}

.tab-cards_tab-link.is-current {
  background-color: var(--color-primary);
  color: var(--color-accent);
}

.tab-cards_tab-link.is-current h3 {
  color: var(--color-accent);
}

.blue-bg,
.text-align-center.blue-bg {
  background-color: transparent;
}

/* ---------- Forms ---------- */
.form_input,
.text-field,
.ui-input,
.ui-select {
  background-color: var(--color-elevated);
  border: 1px solid rgba(217, 217, 217, 0.4);
  border-radius: var(--radius-field);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  box-shadow: none;
}

.form_input:focus,
.text-field:focus,
.ui-input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.form_input::placeholder,
.text-field::placeholder {
  color: var(--color-muted);
}

.ui-checkbox-input--inputType-custom {
  border-color: var(--color-border);
  border-radius: var(--space-1);
}

.ui-checkbox-input--inputType-custom.is-redirected-checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.ui-checkbox-input--inputType-custom.is-redirected-focus {
  box-shadow: none;
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- Dividers and footer ---------- */
.divider-horizontal {
  height: 1px;
  background-color: rgba(217, 217, 217, 0.25);
}

.footer_component {
  border-radius: 0;
  border-top: 1px solid rgba(217, 217, 217, 0.25);
}

.footer_link,
.footer_legal-link,
.footer_social-link {
  color: var(--color-text);
}

.footer_social-link:hover {
  color: var(--color-primary);
}

/* ---------- Flat: no shadows anywhere ---------- */
.ui-slider-nav.ui-shadow > div,
.carousel_component,
.new-slider,
.image-effect-wrap,
.feature_component,
.logo-row_component {
  box-shadow: none;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Focus visibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- Logo (brand wordmark) ---------- */
/* Logo is already the white artwork, so no color filter is needed. */
.nav_logo.site-logo,
.footer_logo.site-logo {
  height: auto;
  aspect-ratio: 577 / 143;
  object-fit: contain;
}

/* Vertical centering: the brand link becomes a flex box so the image is centered
   by the box itself, not by inline baseline math. Overrides the wide-screen
   theme rule that stretches grid items and the 5px bottom padding on the image. */
.nav_container {
  align-items: center;
}

.nav_logo-link.ui-nav-brand {
  float: none;
  display: flex;
  align-items: center;
  align-self: center;
  height: auto;
  padding: 0;
  margin: 0;
  line-height: 0;
}

.nav_logo.site-logo {
  display: block;
  padding: 0;
  margin: 0;
}

.nav_logo.site-logo {
  width: clamp(6.5rem, 5rem + 6vw, 11.25rem);
  max-width: clamp(6.5rem, 5rem + 6vw, 11.25rem);
}

.footer_logo.site-logo {
  width: clamp(6rem, 4rem + 10vw, 15rem);
  max-width: clamp(6rem, 4rem + 10vw, 15rem);
}
@media screen and (max-width: 479px) {
  .nav_logo.site-logo {
    width: clamp(5.5rem, 4rem + 14vw, 8rem);
    max-width: clamp(5.5rem, 4rem + 14vw, 8rem);
  }

  .button,
  .ui-button {
    padding: var(--space-2) var(--space-4);
  }
}

/* ---------- Reduced motion ---------- */@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Placeholder copy awaiting client content ---------- */
.lorem {
  color: #ff5a5a;
  font-weight: 700;
}

.footer_tagline {
  max-width: 28rem;
  margin-top: var(--space-4);
  color: var(--color-muted);
}

.hero-content .text-size-large {
  max-width: 40rem;
}

/* ---------- Facility photo block (replaces the old photo carousel) ---------- */
.facility-section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.facility-photo {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 7;
}

.facility-photo_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Section layouts that left empty columns ---------- */
/* Club info: text column plus map column, side by side on desktop. */
.contact-info_component {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
}

.contact-info_map-wrapper,
.contact-info_map-wrapper .embed-9,
.contact-info_map-wrapper iframe {
  width: 100%;
  min-height: 24rem;
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  .contact-info_component {
    grid-template-columns: 1fr;
  }
}

/* Rates card: the Webflow template reserved a second column for an image that
   no longer exists. Tables now share the full card width. */
.rates_component {
  grid-template-columns: 1fr;
}

.grid-72 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}

.rates_feature {
  grid-template-columns: 1fr auto;
}

.price {
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .grid-72 {
    grid-template-columns: 1fr;
  }
}

/* Membership: two plans side by side. */
.membership_plans {
  grid-template-columns: repeat(2, minmax(0, 28rem));
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .membership_plans {
    grid-template-columns: minmax(0, 28rem);
  }
}

/* Slim hero photo fills its frame. */
.private-events-hero-wr picture,
.private-events-hero-wr .img-15 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.private-events-hero-wr .img-15.none {
  display: block;
}

/* Photo cards keep their frame. */
.tab-cards_image,
.image-wrapper_image-2,
.feature_image-alt,
.image-wrapper-16-9.rounded img,
.image-wrapper-4-3-alt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Hero legibility ---------- */
/* Client photo is bright at the bottom where the copy sits. Darken the lower
   half so white text and the outlined button stay readable. */
.hero_background-image-wrapper-alt {
  background-image: linear-gradient(180deg, rgba(13, 27, 46, 0.1) 25%, rgba(13, 27, 46, 0.85) 100%);
}

.hoe-page-hero-text-wrap {
  position: relative;
  z-index: 2;
}

/* Private events inquiry card: stack copy, buttons, then photo. */
.grid-76 {
  grid-template-columns: 1fr;
}

.grid-76 .embed-11 {
  order: -1;
}

/* Scrim: strong at the bottom where copy and buttons sit, light at the top. */
.hero_background-image-wrapper-alt {
  z-index: 1;
  background-image:
    linear-gradient(180deg, rgba(13, 27, 46, 0.25) 0%, rgba(13, 27, 46, 0.15) 35%, rgba(13, 27, 46, 0.88) 100%),
    linear-gradient(90deg, rgba(13, 27, 46, 0.45) 0%, rgba(13, 27, 46, 0) 60%);
}

.hoe-page-hero-text-wrap {
  z-index: 2;
}

/* ---------- Site footer ---------- */
.site-footer {
  background-color: var(--color-elevated);
  color: var(--color-text);
  border-top: 1px solid rgba(217, 217, 217, 0.12);
  padding-top: calc(var(--space-12) + var(--space-6));
  padding-bottom: var(--space-6);
}

/* Newsletter band: its own row above the link columns, closed by one rule. */
.site-footer_news {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 3fr);
  gap: var(--space-6) var(--space-12);
  align-items: center;
  padding-bottom: calc(var(--space-12) + var(--space-6));
  margin-bottom: calc(var(--space-12) + var(--space-6));
  border-top: 0;
  border-bottom: 1px solid rgba(217, 217, 217, 0.12);
}

.site-footer_news-copy .site-footer_heading {
  margin-bottom: var(--space-2);
}

.site-footer_news-copy .site-footer_fine {
  margin-top: 0;
  max-width: 28rem;
}

.site-footer_news-form {
  justify-self: end;
  width: 100%;
  max-width: 30rem;
}

.site-footer_news-form .site-footer_form {
  max-width: none;
}

.site-footer_hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-footer_done {
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--color-text);
}

.site-footer_done[hidden],
.site-footer_note[hidden],
.site-footer_form[hidden],
.contact_form[hidden] {
  display: none;
}

.site-footer_note {
  color: #f2b8b5;
}

.site-footer_input[aria-invalid="true"] {
  border-color: #f2b8b5;
}

.site-footer_top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-12) var(--space-6);
  padding-bottom: var(--space-12);
}

.site-footer_crest {
  width: 7rem;
  height: auto;
  display: block;
}

.site-footer_lead {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.site-footer_form {
  display: flex;
  gap: var(--space-2);
  max-width: 24rem;
  margin: 0;
}

.site-footer_input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(217, 217, 217, 0.35);
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font: inherit;
}

.site-footer_input::placeholder {
  color: var(--color-muted);
}

.site-footer_input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(226, 155, 54, 0.3);
}

.site-footer_submit {
  flex: 0 0 auto;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.site-footer_submit:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.site-footer_submit:active {
  transform: scale(0.98);
}

.site-footer_note {
  margin-top: var(--space-3);
  padding: 0;
  background: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-align: left;
}

.site-footer_note a,
.site-footer_fine a,
.site-footer_address a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer_fine {
  margin: var(--space-3) 0 0;
  max-width: 24rem;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-muted);
}

.site-footer_address {
  margin-top: var(--space-6);
  font-style: normal;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-muted);
}

.site-footer_heading {
  margin: 0 0 var(--space-4);
  font-family: Lato, "Lato Fallback", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

.site-footer_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.site-footer_list a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.site-footer_list a:hover {
  color: var(--color-primary);
}

.site-footer_social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.site-footer_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(217, 217, 217, 0.3);
  color: var(--color-text);
  transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.site-footer_social a:hover .site-footer_icon {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.site-footer_bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(217, 217, 217, 0.12);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.site-footer_copy {
  margin: 0;
}

.site-footer_dot {
  margin: 0 var(--space-1);
}

/* Copyright and credit read as one line where there is room. On phones the
   credit drops to its own line and the separator dot goes away. */
.site-footer_credit {
  display: inline;
}
@media screen and (max-width: 639px) {
  .site-footer_dot {
    display: none;
  }
  .site-footer_credit {
    display: block;
    margin-top: var(--space-1);
  }
}

.site-footer_legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-6);
}

.site-footer_legal a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer_legal a:hover {
  color: var(--color-primary);
}
@media screen and (max-width: 991px) {
  .site-footer_top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
  }
  .site-footer_brand {
    grid-column: 1 / -1;
  }
  .site-footer_news {
    grid-template-columns: 1fr;
    padding-bottom: var(--space-12);
    margin-bottom: var(--space-12);
  }
  .site-footer_news-form {
    justify-self: start;
  }
}
@media screen and (max-width: 767px) {
  .site-footer_top {
    grid-template-columns: 1fr;
  }
  .site-footer_form {
    flex-direction: column;
  }
  .site-footer_submit {
    width: 100%;
  }
  .site-footer_bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Programs list ("ways to play") ---------- */
.ways {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.ways_grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-12);
  align-items: start;
}

.ways_list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(217, 217, 217, 0.18);
}

.ways_row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(217, 217, 217, 0.18);
}

.ways_tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-field);
  background: var(--color-elevated);
  border: 1px solid rgba(217, 217, 217, 0.14);
  color: var(--color-primary);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1), color 280ms ease;
}

.ways_title {
  margin: 0 0 var(--space-1);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ways_copy {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-muted);
}

.ways_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.ways_link:hover {
  color: var(--color-text);
}

.ways_arrow {
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.ways_link:hover .ways_arrow {
  transform: translateX(3px);
}

.ways_media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-elevated);
}

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

.ways_badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ways_badges li {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-button);
  background: rgba(13, 27, 46, 0.85);
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media screen and (min-width: 992px) {
  /* Portrait photo keeps its full frame and follows the list while scrolling. */
  .ways_media {
    aspect-ratio: 3 / 4;
    align-self: start;
    position: sticky;
    top: 6rem;
  }
}
@media screen and (max-width: 991px) {
  .ways_grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .ways_media {
    order: -1;
    aspect-ratio: 4 / 5;
    max-width: 32rem;
    width: 100%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 479px) {
  .ways_row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-3);
  }
  .ways_tile {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Amenities card photo (client image, paddle and balls at the net). */
.contact-us-image {
  background-image: image-set(url("../images/amenities-1280.webp") type("image/webp"), url("../images/amenities-1280.jpg") type("image/jpeg"));
  background-position: 50% 40%;
  background-size: cover;
}

/* Amenities card on small screens: solid scrim behind the copy so it reads over the photo. */@media screen and (max-width: 991px) {
  .got-questions-content-box {
    background-color: rgba(13, 27, 46, 0.88);
    border-radius: var(--radius-card);
    padding: var(--space-6);
  }
}

/* ---------- Programs list on the light surface ---------- */
.ways {
  background-color: var(--color-light);
  color: var(--color-accent);
}

.ways_heading,
.ways_title {
  color: var(--color-accent);
}

.ways_copy {
  color: rgba(13, 27, 46, 0.68);
}

.ways_list,
.ways_row {
  border-color: rgba(13, 27, 46, 0.14);
}

.ways_tile {
  background: #ffffff;
  border-color: rgba(13, 27, 46, 0.12);
  color: var(--color-accent);
}

.ways_link {
  color: var(--color-accent);
}

.ways_link .ways_arrow {
  color: var(--color-primary);
}

.ways_link:hover {
  color: var(--color-primary-hover);
}

.ways_media {
  background: rgba(13, 27, 46, 0.06);
}

/* ---------- Location ---------- */
.location {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.location_top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-12);
  align-items: start;
  margin-bottom: var(--space-12);
}

.location_heading {
  margin: 0;
  font-size: var(--font-size-h2);
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
}

.location_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.location_item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.location_icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-top: 1px;
}

.location_label {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
}

.location_value {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.location_value a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.location_value a:hover {
  color: var(--color-primary);
}

.location_map {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(217, 217, 217, 0.18);
  background: var(--color-elevated);
  aspect-ratio: 3 / 1;
}

.location_map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (max-width: 991px) {
  .location_top {
    grid-template-columns: 1fr;
  }
  .location_map {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Membership tiers ---------- */
.tiers {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.tiers_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-card);
}

.tiers_table {
  width: 100%;
  min-width: 52rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--color-elevated);
  border: 1px solid rgba(217, 217, 217, 0.14);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: var(--font-size-sm);
}

.tiers_table th,
.tiers_table td {
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid rgba(217, 217, 217, 0.12);
  border-left: 1px solid rgba(217, 217, 217, 0.12);
  vertical-align: middle;
  text-align: center;
  line-height: 1.5;
}

.tiers_table thead th,
.tiers_table thead td {
  border-top: 0;
}

.tiers_table th:first-child,
.tiers_table td:first-child {
  border-left: 0;
}

.tiers_corner {
  width: 30%;
  background: transparent;
}

.tiers_table thead .tiers_corner {
  background: transparent;
}

.tiers_table thead th {
  vertical-align: top;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.tiers_table thead th > span {
  display: block;
}

.tiers_label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.tiers_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.tiers_price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.tiers_price small {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: 2px;
}

.tiers_desc {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-muted);
  margin-bottom: var(--space-5);
  min-height: 3.6em;
}

.tiers_badge {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 2px var(--space-3);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tiers_cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  border: 1px solid rgba(217, 217, 217, 0.35);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.tiers_cta:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tiers_table .is-best {
  background: rgba(226, 155, 54, 0.08);
}

.tiers_table thead .is-best {
  box-shadow: inset 0 3px 0 var(--color-primary);
}

.is-best .tiers_cta {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-accent);
}

.is-best .tiers_cta:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-accent);
}

.tiers_feature {
  text-align: left;
  font-weight: 400;
}

.tiers_feature-name {
  display: block;
  font-weight: 700;
  color: var(--color-text);
}

.tiers_feature-note {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.tiers_table td small {
  display: block;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.tiers_check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
}

.tiers_no {
  color: var(--color-muted);
}

.tiers_table tfoot td {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.tiers_hint {
  display: none;
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  text-align: center;
}

/* Phones: the comparison re-flows into a three-column grid that fits the
   screen. Plan headers (label, price, button) stick under the nav while the
   features scroll; each feature title spans the full width with its three
   values beneath, so the columns always line up with the plan above. */@media screen and (max-width: 767px) {
  .tiers_hint,
  .tiers_table tfoot,
  .tiers_corner,
  .tiers_desc {
    display: none;
  }

  .tiers_scroll {
    overflow: visible;
    contain: none;
    max-width: none;
    border-radius: var(--radius-card);
  }

  .tiers_table,
  .tiers_table thead,
  .tiers_table tbody {
    display: block;
    width: 100%;
  }

  .tiers_table {
    min-width: 0;
    overflow: visible;
    clip-path: inset(0 round var(--radius-card));
    font-size: 0.8125rem;
  }

  .tiers_table thead tr,
  .tiers_table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tiers_table thead {
    position: sticky;
    top: 4.75rem;
    z-index: 2;
    background: var(--color-elevated);
    box-shadow: 0 1px 0 rgba(217, 217, 217, 0.12);
  }

  .tiers_table thead th {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) var(--space-2);
    border-top: 0;
  }

  .tiers_table thead th:first-of-type {
    border-left: 0;
  }

  .tiers_table thead th > span {
    display: block;
  }

  .tiers_table thead th > .tiers_desc {
    display: none;
  }

  /* Paint the strip between the floating nav pill and the stuck header so
     rows do not scroll through it. At rest the strip sits over the section's
     own navy and is invisible. */
  .tiers_table thead::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 4.75rem;
    background: var(--color-surface);
  }

  .tiers_badge {
    order: -1;
    margin: 0 0 2px;
    padding: 1px var(--space-2);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
  }

  .tiers_label {
    margin: 0;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }

  /* Full plan names stay for screen readers; the label above identifies the
     column visually. */
  .tiers_title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tiers_price {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.1;
  }

  .tiers_price small {
    display: block;
    margin: 2px 0 0;
    font-size: 0.6875rem;
  }

  .tiers_table thead .tiers_cta {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    justify-content: center;
    width: 100%;
  }

  .tiers_table thead .tiers_ext {
    display: none;
  }

  .tiers_table tbody th.tiers_feature {
    grid-column: 1 / -1;
    display: block;
    padding: var(--space-3) var(--space-4) var(--space-1);
    border-left: 0;
    border-top: 1px solid rgba(217, 217, 217, 0.12);
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
  }

  .tiers_table tbody tr:first-child th.tiers_feature {
    border-top: 0;
  }

  .tiers_feature-name {
    font-size: 0.875rem;
  }

  .tiers_feature-note {
    font-size: 0.75rem;
  }

  .tiers_table tbody td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--space-2) var(--space-2) var(--space-3);
    border-top: 0;
    font-weight: 700;
    color: var(--color-text);
  }

  .tiers_table tbody td:nth-child(2) {
    border-left: 0;
  }

  .tiers_table td small {
    font-weight: 400;
  }

  .tiers_check {
    width: 1.375rem;
    height: 1.375rem;
  }
}

/* ---------- Find us ---------- */
.findus {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.findus_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-12);
  align-items: stretch;
}

.findus_cards {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.findus_card,
.findus_hours {
  background: var(--color-elevated);
  border: 1px solid rgba(217, 217, 217, 0.14);
  border-radius: var(--radius-card);
}

.findus_card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
}

.findus_tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(226, 155, 54, 0.12);
  color: var(--color-primary);
}

.findus_label {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.findus_value {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.findus_value a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.findus_value a:hover {
  color: var(--color-primary);
}

.findus_hours {
  padding: var(--space-5) var(--space-5) var(--space-3);
  margin-bottom: var(--space-6);
}

.findus_hours-title {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.findus_hours-list {
  margin: 0;
}

.findus_hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(217, 217, 217, 0.12);
  font-size: var(--font-size-sm);
}

.findus_hours-row dt {
  color: rgba(255, 255, 255, 0.82);
}

.findus_hours-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
}

.findus_cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.findus_cta svg {
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.findus_cta:hover {
  background: var(--color-primary-hover);
}

.findus_cta:hover svg {
  transform: translateX(4px);
}

.findus_cta:active {
  transform: scale(0.98);
}

.findus_map {
  position: relative;
  min-height: 32rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(217, 217, 217, 0.14);
  background-color: var(--color-elevated);
  background-image:
    linear-gradient(rgba(217, 217, 217, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 217, 217, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

.findus_map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.findus_map-pin .findus_tile {
  width: 3.5rem;
  height: 3.5rem;
}

.findus_map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.findus_map.is-loaded .findus_map-frame {
  opacity: 1;
}

.findus_map.is-loaded .findus_map-placeholder {
  opacity: 0;
  pointer-events: none;
}

.findus_badge {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-field);
  background: var(--color-primary);
  color: var(--color-accent);
  text-decoration: none;
  z-index: 1;
}

.findus_badge-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.findus_badge-place {
  font-weight: 700;
}
@media screen and (max-width: 991px) {
  .findus_grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .findus_map {
    min-height: 22rem;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Find us on the light surface ---------- */
.findus {
  background-color: var(--color-light);
  color: var(--color-accent);
}

.findus_card,
.findus_hours {
  background: #ffffff;
  border-color: rgba(13, 27, 46, 0.1);
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.06);
}

.findus_tile {
  background: rgba(226, 155, 54, 0.16);
  color: var(--color-primary-on-light);
}

.findus_label {
  color: rgba(13, 27, 46, 0.62);
}

.findus_value,
.findus_hours-row dd {
  color: var(--color-accent);
}

.findus_value a:hover {
  color: var(--color-primary-on-light);
}

.findus_hours-row {
  border-top-color: rgba(13, 27, 46, 0.1);
}

.findus_hours-row dt {
  color: rgba(13, 27, 46, 0.78);
}

.findus_map {
  border-color: rgba(13, 27, 46, 0.1);
  background-color: #e6e0d4;
  background-image:
    linear-gradient(rgba(13, 27, 46, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 27, 46, 0.06) 1px, transparent 1px);
}

.findus_map-placeholder {
  color: rgba(13, 27, 46, 0.62);
}

/* Same deeper gold for the programs list, which also sits on the cream surface. */

.ways_link .ways_arrow {
  color: var(--color-primary-on-light);
}

.ways_link:hover {
  color: var(--color-primary-on-light);
}

/* ---------- Section heading component ---------- */
/* One pattern for every section title site-wide. Default colors are for the
   cream surface; add .is-on-dark on navy/blue sections, .is-center to center. */
.section-head {
  max-width: 44rem;
  margin: 0 0 var(--space-6);
}

.section-head.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head_eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary-text-on-light);
}

.section-head_title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.section-head_accent {
  color: var(--color-primary-on-light);
}

.section-head_lead {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: rgba(13, 27, 46, 0.78);
}

.section-head.is-on-dark .section-head_eyebrow,
.section-head.is-on-dark .section-head_accent {
  color: var(--color-primary);
}

.section-head.is-on-dark .section-head_title {
  color: var(--color-text);
}

.section-head.is-on-dark .section-head_lead {
  color: rgba(255, 255, 255, 0.82);
}

/* Narrow screens: drop the forced break so long lines wrap naturally instead of
   producing a three-line stack. The accent phrase keeps its color either way. */@media screen and (max-width: 479px) {
  .section-head_title br {
    display: none;
  }
  .section-head_title {
    font-size: 2.25rem;
  }
}

/* Section-specific spacing around the component. */
.facility-section .section-head {
  margin-bottom: var(--space-12);
}

.tiers .section-head {
  margin-bottom: var(--space-12);
}

.findus .section-head {
  max-width: 30rem;
}

.hero_card-content .section-head,
.the-new-slim-hero .section-head {
  margin-bottom: 0;
}

/* Constrained columns (CTA photo cards, two-column feature blocks, inquiry
   card): the full display size cannot fit two lines, so step down one size
   and let the copy wrap naturally instead of forcing the break. */
.hero_card-content .section-head_title,
.feature_content-right .section-head_title,
.grid-76 .section-head_title,
.top-align-grid .section-head_title {
  font-size: clamp(2rem, 1.25rem + 1.6vw, 2.75rem);
}

.grid-76 .section-head_title br {
  display: none;
}

.site-footer_heart {
  display: inline-block;
  vertical-align: -1px;
  color: var(--color-primary);
}

.site-footer_copy a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer_copy a:hover {
  color: var(--color-primary);
}

/* ---------- Facilities ---------- */
.facilities {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.facilities .section-head {
  margin-bottom: var(--space-12);
}

.facilities_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.facilities_media {
  position: sticky;
  top: 6rem;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-elevated);
}

.facilities_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
}

.facilities_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.facilities_item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(217, 217, 217, 0.14);
}

.facilities_item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.facilities_icon {
  margin-top: 0.125rem;
  background: #ffffff;
  color: var(--color-accent);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1), color 280ms ease;
}

/* Shared icon-mask utility: recolors a raster glyph to currentColor so it
   always matches the section's icon color (gold on dark, on-light overrides
   included) regardless of the source asset's own coloring. */
.icon-glyph {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ways_tile .icon-glyph {
  width: 22px;
  height: 22px;
}

/* Icon tile hover: hovering the row lifts and highlights its icon tile with a
   soft gold glow and a color shift from ink to the brand gold. Scoped to
   real pointer-hover devices so touch never gets a stuck hover state. */@media (hover: hover) and (pointer: fine) {
  .facilities_item:hover .facilities_icon,
  .ways_row:hover .ways_tile {
    transform: scale(1.08);
    color: var(--color-primary);
    box-shadow: 0 0 0 6px rgba(226, 155, 54, 0.16), 0 6px 16px rgba(226, 155, 54, 0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .facilities_icon,
  .ways_tile {
    transition: color 200ms ease;
  }
  .facilities_item:hover .facilities_icon,
  .ways_row:hover .ways_tile {
    transform: none;
    box-shadow: none;
  }
}

.icon-glyph--shop {
  -webkit-mask-image: url("../images/Icons/icons8-shop-50-4.png");
  mask-image: url("../images/Icons/icons8-shop-50-4.png");
}

.icon-glyph--podcast {
  -webkit-mask-image: url("../images/Icons/icons8-podcast-50-3.png");
  mask-image: url("../images/Icons/icons8-podcast-50-3.png");
}

.icon-glyph--bar {
  -webkit-mask-image: url("../images/Icons/icons8-bar-counter-50.png");
  mask-image: url("../images/Icons/icons8-bar-counter-50.png");
}

.icon-glyph--calendar-book {
  -webkit-mask-image: url("../images/Icons/icons8-events-50-3.png");
  mask-image: url("../images/Icons/icons8-events-50-3.png");
}

.icon-glyph--calendar-event {
  -webkit-mask-image: url("../images/Icons/icons8-events-50-2.png");
  mask-image: url("../images/Icons/icons8-events-50-2.png");
}

.icon-glyph--trophy {
  -webkit-mask-image: url("../images/Icons/icons8-trophy-50-2.png");
  mask-image: url("../images/Icons/icons8-trophy-50-2.png");
}

.facilities_title {
  margin: 0 0 var(--space-1);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.facilities_copy {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.facilities_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.facilities_link .ways_arrow {
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.facilities_link:hover {
  color: var(--color-text);
}

.facilities_link:hover .ways_arrow {
  transform: translateX(3px);
}
@media screen and (max-width: 991px) {
  .facilities_grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .facilities_media {
    position: static;
    aspect-ratio: 16 / 10;
  }
}
@media screen and (max-width: 479px) {
  .facilities_item {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--space-3);
  }
}

/* ---------- Full-bleed home hero ---------- */
/* Video fills the whole first viewport, edge to edge, with the fixed nav
   floating over it. Copy keeps the container's side padding. */
.section_hero {
  border: 0;
  padding-top: 0;
}

.section_hero > .padding-global {
  padding-left: 0;
  padding-right: 0;
}

.section_hero .hero_component,
.section_hero .hero_component.rounded,
.section_hero .hero_component.rounded.non-mobile,
.section_hero .all-roundeded {
  border-radius: 0;
}


/* Mobile browsers size the layout viewport from any scrollable overflow, so the
   wide plan table was zooming the whole page out to 751px on phones. Painting
   containment keeps its overflow inside the scroller. */
.tiers_scroll {
  contain: paint;
  max-width: 100vw;
}

/* ---------- Private events page ---------- */
.pe_text {
  margin: 0 0 var(--space-4);
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.82);
}

.pe_split,
.pe_inquiry {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.pe_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.pe_media {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-elevated);
}

.pe_media--tall {
  aspect-ratio: 4 / 5;
}

.pe_media .pe_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

.pe_grid--flip .pe_media {
  order: 2;
}

.pe_copy .section-head {
  margin-bottom: var(--space-5);
}

.pe_copy .button {
  margin-top: var(--space-2);
}

.pe_facts {
  margin: 0 0 var(--space-5);
  padding: 0 0 0 1.25rem;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.82);
  display: grid;
  gap: var(--space-2);
}

/* Light surfaces */
.is-light {
  background-color: var(--color-light);
  color: var(--color-accent);
}

.is-light .pe_text,
.is-light .pe_facts {
  color: rgba(13, 27, 46, 0.8);
}

.is-light .pe_text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pe_note {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  max-width: 34rem;
  border-radius: var(--radius-field);
  background: rgba(13, 27, 46, 0.06);
  color: rgba(13, 27, 46, 0.85);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* Form */
.pe_grid--form {
  align-items: start;
}

.pe_form {
  margin: 0;
}

.pe_fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-4);
}

.pe_field {
  display: grid;
  gap: var(--space-2);
}

.pe_field--full {
  margin-top: var(--space-4);
}

.pe_label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-accent);
}

.pe_req {
  color: var(--color-primary-on-light);
}

.pe_control {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(13, 27, 46, 0.2);
  border-radius: var(--radius-field);
  background: #ffffff;
  color: var(--color-accent);
  font: inherit;
  line-height: 1.4;
  transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.pe_control:focus {
  outline: none;
  border-color: var(--color-primary-on-light);
  box-shadow: 0 0 0 3px rgba(226, 155, 54, 0.3);
}

select.pe_control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230d1b2e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m3.5 6 4.5 4.5L12.5 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: 2.75rem;
}

textarea.pe_control {
  resize: vertical;
  min-height: 7rem;
}

.pe_submit {
  margin-top: var(--space-6);
}

.pe_form-msg {
  display: none;
  margin-top: var(--space-4);
  padding: 0;
  background: none;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  text-align: left;
}

.pe_form-msg a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media screen and (max-width: 991px) {
  .pe_grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .pe_grid--flip .pe_media {
    order: -1;
  }
  .pe_media--tall {
    aspect-ratio: 4 / 3;
  }
}
@media screen and (max-width: 639px) {
  .pe_fields {
    grid-template-columns: 1fr;
  }
}

/* Private events: half-width copy columns take the stepped-down heading size,
   and buttons size to their label instead of stretching the column. */
.pe_copy .section-head_title {
  font-size: clamp(2rem, 1.25rem + 1.6vw, 2.75rem);
}

.pe_copy .button,
.pe_submit {
  display: inline-flex;
  width: auto;
}

/* ---------- Programs page: card grid ---------- */
/* Cream section, centered section-head, three-column card grid (two on
   tablet, one on phones). Each card: gold rule across the top, icon, short
   dash, title, copy, detail list, and a pill button pinned to the bottom so
   every button in a row shares a baseline. A ghosted numeral sits behind the
   copy. Cards carry no photos: the only image slot on this page is the hero. */
.programs {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.programs .section-head {
  margin-bottom: var(--space-5);
}

.programs_facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-12);
  padding: 0;
  list-style: none;
}

.programs_facts li {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-button);
  border: 1px solid rgba(13, 27, 46, 0.14);
  background: #ffffff;
  color: var(--color-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.programs_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-12) var(--space-6) var(--space-6);
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.1);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.06);
  overflow: hidden;
  scroll-margin-top: 7rem;
}

/* Gold rule across the top edge, drawn inside the card and clipped by its
   overflow so the corners stay clean instead of the border tapering. */
.pcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-primary);
}

.pcard_num {
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);
  font-size: 9rem;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: rgba(226, 155, 54, 0.12);
  user-select: none;
  pointer-events: none;
}

.pcard_body {
  position: relative;
  flex: 1 1 auto;
}

.pcard_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: rgba(226, 155, 54, 0.12);
  color: var(--color-primary-on-light);
}

.pcard_icon .icon-glyph {
  width: 22px;
  height: 22px;
}

.pcard_dash {
  display: block;
  width: 1.5rem;
  height: 2px;
  margin-bottom: var(--space-3);
  background: var(--color-primary);
}

.pcard_title {
  margin: 0 0 var(--space-3);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.pcard_lead {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: rgba(13, 27, 46, 0.8);
}

.pcard_subhead {
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text-on-light);
}

.pcard_list {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.pcard_list li {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(13, 27, 46, 0.72);
}

.pcard_list strong {
  color: var(--color-accent);
}

.pcard_list a {
  font-weight: 700;
  color: var(--color-primary-text-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.pcard_list a:hover {
  color: var(--color-accent);
}

.pcard_actions {
  position: relative;
  margin-top: auto;
  padding-top: var(--space-2);
}

.pcard_actions .button {
  display: inline-flex;
  width: auto;
}

.pcard_note {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(13, 27, 46, 0.68);
}

.pcard_note a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Icons8 outline glyphs for the six programs (same set as the home page). */
.icon-glyph--paddles {
  -webkit-mask-image: url("../images/Icons/icons8-pickleball-50-6.png");
  mask-image: url("../images/Icons/icons8-pickleball-50-6.png");
}

.icon-glyph--player {
  -webkit-mask-image: url("../images/Icons/icons8-pickleball-50.png");
  mask-image: url("../images/Icons/icons8-pickleball-50.png");
}

.icon-glyph--paddles-ball {
  -webkit-mask-image: url("../images/Icons/icons8-pickleball-50-2.png");
  mask-image: url("../images/Icons/icons8-pickleball-50-2.png");
}

.icon-glyph--paddle-ball {
  -webkit-mask-image: url("../images/Icons/icons8-pickleball-50-7.png");
  mask-image: url("../images/Icons/icons8-pickleball-50-7.png");
}
@media screen and (max-width: 991px) {
  .programs_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}
@media screen and (max-width: 639px) {
  .programs_grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .pcard {
    padding: var(--space-12) var(--space-5) var(--space-5);
  }
  .pcard_num {
    font-size: 7rem;
  }
  .programs_facts {
    margin-bottom: var(--space-6);
  }
}

/* Arrival tips: apply to every program, so they sit under the grid as one
   compact three-up strip instead of padding out a single card. */
.programs_tips {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(13, 27, 46, 0.14);
}

.programs_tips-title {
  margin: 0 0 var(--space-4);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text-on-light);
}

.programs_tips-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.programs_tips-list li {
  display: grid;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(13, 27, 46, 0.72);
}

.programs_tips-list strong {
  font-size: var(--font-size-base);
  color: var(--color-accent);
}
@media screen and (max-width: 991px) {
  .programs_tips-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 639px) {
  .programs_tips-list {
    grid-template-columns: 1fr;
  }
  .programs_tips {
    margin-top: var(--space-6);
  }
}

/* ---------- Eat & Drink: menu accordion ---------- */
/* Native details/summary cards. The summary carries the scannable facts
   (category, one-line blurb, item count, price range). The panel holds the
   full list. One column so an open card never leaves a hole beside it. */
.menu {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  scroll-margin-top: 6rem;
}

.menu .section-head {
  margin-bottom: var(--space-6);
}

.menu_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 56rem;
}

.menu_card {
  min-width: 0;
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.1);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.06);
  scroll-margin-top: 6rem;
}

.menu_summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-card);
  color: var(--color-accent);
}

.menu_summary::-webkit-details-marker {
  display: none;
}

.menu_summary::marker {
  content: "";
}

.menu_summary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.menu_summary-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.menu_kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text-on-light);
}

.menu_title {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.menu_blurb {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(13, 27, 46, 0.72);
}

.menu_meta {
  margin-top: var(--space-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 27, 46, 0.55);
}

.menu_chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(226, 155, 54, 0.14);
  color: var(--color-primary-on-light);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.2s ease;
}

.menu_card[open] .menu_chevron {
  transform: rotate(180deg);
}

.menu_summary:hover .menu_chevron {
  background: rgba(226, 155, 54, 0.26);
}

.menu_panel {
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid rgba(13, 27, 46, 0.08);
}

.menu_card[open] .menu_panel {
  animation: menu-reveal 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes menu-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.menu_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu_item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(13, 27, 46, 0.08);
}

.menu_item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.menu_item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.menu_name {
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.3;
}

.menu_price {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-primary-text-on-light);
  white-space: nowrap;
}

.menu_desc {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(13, 27, 46, 0.72);
}

.menu_tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.menu_tag {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-field);
  border: 1px solid rgba(13, 27, 46, 0.16);
  background: rgba(13, 27, 46, 0.04);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(13, 27, 46, 0.78);
  text-decoration: none;
}

.menu_tag.is-diet {
  border-color: rgba(226, 155, 54, 0.5);
  background: rgba(226, 155, 54, 0.12);
  color: var(--color-primary-text-on-light);
}

.menu_tags .menu_tag abbr[title],

@media (prefers-reduced-motion: reduce) {
  .menu_chevron,
  .menu_card[open] .menu_panel {
    transition: none;
    animation: none;
  }
}

@media screen and (max-width: 767px) {
  .menu_summary {
    padding: var(--space-4) var(--space-5);
  }
  .menu_panel {
    padding: 0 var(--space-5) var(--space-5);
  }
}

/* ---------- Private events: four-step plan ---------- */
/* Reuses the menu accordion card. Numbers are earned here: the order is the
   process. Perfect-for list sits beside the steps on desktop, below on phones. */
.pev_plan {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  scroll-margin-top: 6rem;
}

.pev_plan .section-head {
  margin-bottom: var(--space-6);
}

.pev_layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: var(--space-6) var(--space-12);
  align-items: start;
}

.pev_steps {
  max-width: none;
}

.pev_step .menu_summary {
  align-items: center;
}

.pev_step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 1.0625rem;
  font-weight: 900;
}

.pev_step .menu_summary-text {
  flex: 1 1 auto;
}

.pev_list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.pev_list li {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(13, 27, 46, 0.72);
}

.pev_list strong {
  color: var(--color-accent);
}

.pev_list a {
  font-weight: 700;
  color: var(--color-primary-text-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pev_list a:hover {
  color: var(--color-accent);
}

.pev_side {
  position: sticky;
  top: 6rem;
  padding: var(--space-5) var(--space-6);
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.1);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.06);
}

.pev_side-title {
  margin: 0 0 var(--space-3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text-on-light);
}

.pev_tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.pev_tags li {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-button);
  border: 1px solid rgba(13, 27, 46, 0.14);
  background: rgba(13, 27, 46, 0.03);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pev_side-note {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(13, 27, 46, 0.68);
}

@media screen and (max-width: 991px) {
  .pev_layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .pev_side {
    position: static;
  }
}

/* ---------- Private events: venue band ---------- */
/* Two-part composition. Top row: heading and copy on the left, a quiet
   divided list of what is on site on the right. Below: an asymmetric mosaic,
   one tall feature frame beside two stacked frames, each with a caption row
   underneath so the labels align rather than float. */
.pev {
  padding-top: clamp(4rem, 3rem + 3vw, 6rem);
  padding-bottom: clamp(4rem, 3rem + 3vw, 6rem);
}

.pev_top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6) clamp(3rem, 6vw, 6rem);
  align-items: start;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.pev_top .section-head {
  margin-bottom: 0;
}

.pev_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.pev_facts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(217, 217, 217, 0.18);
}

.pev_fact {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(217, 217, 217, 0.18);
}

.pev_fact-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(226, 155, 54, 0.12);
  color: var(--color-primary);
}

.pev_fact-tile .icon-glyph {
  width: 20px;
  height: 20px;
}

.pev_fact-body {
  display: grid;
  gap: 2px;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.pev_fact-body strong {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.pev_mosaic {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pev_shot figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.pev_shot--feature {
  grid-row: 1 / span 2;
}

.pev_frame {
  flex: 1 1 auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-elevated);
}

.pev_shot--feature .pev_frame {
  aspect-ratio: auto;
}

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

.pev_cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  text-align: left;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-muted);
}

.pev_cap strong {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}
@media screen and (max-width: 991px) {
  .pev_top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}
@media screen and (max-width: 767px) {
  /* Phones: one wide feature frame, then the two smaller frames side by
     side, so the mosaic keeps its rhythm instead of stacking three alike. */
  .pev_mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: var(--space-4);
  }
  .pev_shot--feature {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .pev_shot--feature .pev_frame {
    aspect-ratio: 4 / 3;
  }
  .pev_frame {
    aspect-ratio: 1 / 1;
  }
  .pev_cap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* Slim hero copy card: the theme pins it bottom-left with padding only on
   the top and right, so desktop headings started at the viewport edge. Give
   the card even inner padding on desktop; smaller screens keep the theme's. */@media screen and (min-width: 992px) {
  .the-new-slim-hero .hero_card-content {
    padding: var(--space-6) var(--space-12) var(--space-12) var(--space-12);
  }
  .the-new-slim-hero .box-14 {
    padding-right: 0;
  }
}

/* ---------- Cross-device audit fixes ---------- */
/* Long URLs and unbroken strings (policy pages) wrap instead of overflowing. */
body {
  overflow-wrap: break-word;
}

/* Lightbox uses the dynamic viewport unit where supported so iOS Safari's
   toolbar does not hide the bottom edge. base.css keeps the 100vh fallback. */
.ui-lightbox-content,
.ui-lightbox-view,
.ui-lightbox-view:before {
  height: 100dvh;
}


/* Touch targets on phones and tablets: small text links get a 44px tall hit
   area through padding pulled back with negative margin, so the visual
   layout does not move. Buttons in the pricing table get a 44px minimum. */@media screen and (max-width: 991px) {
  .site-footer_list a,
  .site-footer_legal a,
  .ways_link,
  .facilities_link,
  .pcard_list a,
  .pev_list a,
  .menu_list a,
  .pcard_note a,
  .tiers_cta {
    min-height: 44px;
  }
  /* Social links keep their flex layout so the icon and label stay spaced. */
  .site-footer_social a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }
}

/* ---------- Mobile header, menu panel, and hero fixes ---------- */
/* Header pill: fixed 1rem gutters instead of 95% so it never kisses the
   viewport edge, tighter inner grid so logo, burger, and button always fit. */@media screen and (max-width: 991px) {
  .nav_component {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 4px 4px 4px 12px;
  }

  .nav_container {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-column-gap: 8px;
    width: 100%;
  }

  .nav_button-wrapper {
    grid-column-gap: 6px;
    min-width: 0;
  }

  .nav_menu-button {
    width: 44px;
    flex: 0 0 auto;
  }

  .button.nav {
    font-size: 11px;
    padding: 10px 16px;
    letter-spacing: 0.03em;
  }

  /* Menu panel: sized to its links, fully bordered and rounded, scrolls
     inside itself only if the viewport is shorter than the list. */
  .nav_menu.is-page-height-tablet {
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    justify-content: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    padding: 1.5rem 1rem;
    background-color: var(--color-surface);
    box-shadow: 0 12px 32px rgba(13, 27, 46, 0.35);
    transition: none;
  }

  /* Programs sub-links stay visible inside the panel so the mobile menu
     mirrors the desktop structure without a second tap. */
  .nav_menu .nav-dropdown_component {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .nav_menu .nav-dropdown_dropdown-toggle {
    pointer-events: none;
  }

  .nav_menu .nav-dropdown_dropdown-toggle .dropdown-chevron {
    display: none;
  }

  .nav_menu .nav-dropdown_dropdown-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: static;
    border: 0;
    padding: 0 0 var(--space-3);
    background: transparent;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .nav_menu .nav-dropdown_dropdown-link {
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82);
  }

  .nav_menu .nav-dropdown_dropdown-link.is-current,
  .nav_menu .nav-dropdown_dropdown-link:hover {
    color: var(--color-primary);
  }
}
@media screen and (max-width: 479px) {
  .nav_logo.site-logo {
    max-width: 110px;
  }
  .button.nav {
    padding: 10px 12px;
  }
}
@media screen and (max-width: 359px) {
  .nav_logo.site-logo {
    max-width: 92px;
  }
  .button.nav {
    font-size: 10px;
    padding: 9px 10px;
  }
  .nav_menu-button {
    width: 36px;
  }
}


/* Slim hero (Programs, Eat & Drink, Pricing, Private Events): on phones the
   copy card leaves absolute positioning and flows inside the box, so the box
   grows with the copy instead of clipping it, and the top padding clears the
   fixed header. The photo layer stays absolute behind it. */@media screen and (max-width: 767px) {
  .the-new-slim-hero {
    height: auto;
    min-height: 24rem;
    justify-content: center;
    padding: 6.5rem 0 2.5rem;
  }
  .the-new-slim-hero .hero_card-content {
    position: relative;
    inset: auto;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 1.25rem;
    background: transparent;
  }
  .the-new-slim-hero .box-14 {
    padding: 0;
  }
}

/* ---------- Homepage polish (critique 2026-09-17) ---------- */
/* Hours label sits on a white card, so it takes the on-light gold that the
   rest of the cream sections already use. 2.3:1 became 5.7:1. */
.findus_hours-title {
  color: var(--color-primary-text-on-light);
}

/* Map card: grid items default to min-width auto, which let the iframe's
   intrinsic size push the card 99px past a phone viewport. */
.findus_grid > * {
  min-width: 0;
}

.findus_map {
  width: 100%;
  max-width: 100%;
}

.findus_map-frame {
  width: 100%;
  height: 100%;
}

/* Facilities rows are facts now, not actions: tighter bottom spacing where
   the arrow link used to sit. */
.facilities_copy {
  margin-bottom: 0;
}

/* ---------- Full-bleed hero edges ---------- */
/* Every layer inside a full-bleed hero runs square to the section boundary.
   The theme rounds the photo layer (45px), the wrapper (35px), the box (12px)
   and draws a 1px border on the photo, which left slivers of a second navy
   showing at the corners where the section meets the footer. The footer's
   own hairline is the deliberate break between the two surfaces. */
.section_hero .the-new-slim-hero,
.section_hero .hero_background-image-wrapper,
.section_hero .social-bg,
.section_hero .private-events-hero-wr,
.section_hero .private-events-hero-wr .img-15 {
  border-radius: 0;
}

.section_hero .social-bg {
  inset: 0;
  width: 100%;
  height: 100%;
}

.section_hero .private-events-hero-wr .img-15 {
  border: 0;
}

/* The curve.svg corner pieces only made sense with the rounded card; with
   square edges they show as stray squares at the card corners. */
.section_hero .img-2,
.section_hero .img-2-alt {
  display: none;
}

/* Programs "Getting started": the photo layer is a real <img> (AVIF with WebP
   fallback, lazy) instead of the theme's CSS background. Same layer box as
   .social-bg; the focal point sits on the courts and net so the crop holds
   from the 60vh desktop box to the taller phone box. */
.section_hero img.social-bg.is-start,
.section_hero img.social-bg.is-plans {
  display: block;
  background: none;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Pricing "Not sure which plan fits?": crowd photo, faces fill the frame, so
   the crop centres. Source is only 960px wide; it is soft on 2x desktops. */
.section_hero img.social-bg.is-plans {
  object-position: 50% 50%;
}

/* Stacked layouts put the copy over the crowd; the theme's 46% overlay is not
   enough on that many faces, so this section's overlay is heavier. */
@media screen and (max-width: 991px) {
  .section_hero.is-plans .image-overlay-layer.hide-desktop {
    background-color: rgb(13 27 46 / 0.8);
  }
}

/* ---------- Facilities: columns share one height on desktop ---------- */
/* The photo stretches to the list's height and the five rows share the
   leftover space evenly. First row hugs the top edge, last row hugs the
   bottom edge, so the photo's edges line up with the first title and the
   last description at any desktop width. Phones and tablets keep the
   stacked layout with the photo at its own aspect ratio. */@media screen and (min-width: 992px) {
  .facilities_grid {
    align-items: stretch;
  }

  .facilities_media {
    position: static;
    height: 100%;
    aspect-ratio: auto;
  }

  .facilities_media picture {
    display: block;
    height: 100%;
  }

  .facilities_img {
    object-position: 50% 50%;
  }

  .facilities_list {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
  }

  .facilities_item {
    flex: 1 1 0;
    align-content: center;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .facilities_item:first-child {
    align-content: start;
    padding-top: 0;
  }

  .facilities_item:last-child {
    align-content: end;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .facilities_title {
    margin-top: 0;
    line-height: 1.1;
  }

  .facilities_icon {
    margin-top: 0;
  }
}

/* ---------- Programs list: columns share one height on desktop ---------- */
/* The section head is its own full-width row, so the photo aligns with the
   list, not the heading. The photo column is a fixed 24rem so at list height
   its box stays near the photo's native 3:4 and the caption baked into the
   image survives the cover crop. Rows share leftover height evenly; first
   hugs the top edge, last hugs the bottom edge. Below 1200px the section
   stacks, since a narrower photo column would clip the caption. */
.ways_grid > .section-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
@media screen and (min-width: 1200px) {
  .ways_grid {
    grid-template-columns: minmax(0, 1fr) 24rem;
    align-items: stretch;
    row-gap: var(--space-6);
  }

  .ways_content {
    display: flex;
    flex-direction: column;
  }

  .ways_list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-top: 0;
  }

  .ways_row {
    flex: 1 1 0;
    align-content: center;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .ways_row:first-child {
    align-content: start;
    padding-top: 0;
  }

  .ways_row:last-child {
    align-content: end;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .ways_title {
    margin-top: 0;
    line-height: 1.1;
  }

  .ways_media {
    position: relative;
    top: auto;
    height: 100%;
    aspect-ratio: auto;
  }

  .ways_media picture {
    display: block;
    height: 100%;
  }

  .ways_img {
    object-position: 50% 50%;
  }
}
@media screen and (max-width: 1199px) {
  /* Stacked order: heading, photo, then the list. */
  .ways_grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .ways_grid > .section-head {
    order: -2;
  }
  .ways_media {
    order: -1;
    position: relative;
    top: auto;
    aspect-ratio: 4 / 5;
    max-width: 32rem;
    width: 100%;
    margin: 0 auto;
  }
}


/* ---------- Private events: "Perfect for" as a band under the steps ---------- */
/* The side card left a tall empty column beside the collapsed accordion.
   It now runs full width beneath the steps: label and note on the left,
   the nine occasion pills in an even three-by-three grid on the right. */
.pev_layout {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.pev_steps {
  max-width: none;
}

.pev_side {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-12);
  align-items: start;
  padding: var(--space-4) var(--space-5);
}

.pev_side-title {
  margin-bottom: var(--space-2);
}

.pev_side-note {
  margin: 0;
}

.pev_tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.pev_tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-3);
  text-align: center;
  line-height: 1.3;
}

@media screen and (min-width: 992px) {
  /* Ten pills in two even rows of five. Below this they sit two per row. */
  .pev_tags {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1300px) {
  /* Label and note on the left, the pill grid on the right. */
  .pev_side {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
  .pev_tags {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

/* ---------- Private events: four steps, accordion plus sticky panel ---------- */
/* Tokens for this block. Steps are separated by one sand rule, not boxed.
   Gold appears only on the active step number and the CTA. */
.steps {
  --st-cream: #F2ECE1;
  --st-ink: #0E2238;
  --st-ink-soft: rgba(14, 34, 56, 0.75);
  --st-gold: #C98B2E;
  --st-rule: rgba(201, 184, 150, 0.4);
  --st-header: 6.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: var(--space-6);
  color: var(--st-ink);
}

.step {
  border-top: 1px solid var(--st-rule);
}

.step:last-of-type {
  border-bottom: 1px solid var(--st-rule);
}

.step_h {
  margin: 0;
  font-size: inherit;
}

.step_btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  color: var(--st-ink);
  cursor: pointer;
}

.step_btn:focus-visible {
  outline: 2px solid var(--st-gold);
  outline-offset: 2px;
}

.step_num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--st-rule);
  font-size: 1rem;
  font-weight: 700;
  color: var(--st-ink-soft);
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.step_title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--st-ink-soft);
  transition: color 200ms ease-out;
}

.step_chev {
  flex: 0 0 auto;
  color: var(--st-ink-soft);
  transition: transform 200ms ease-out;
}

.step.is-open .step_num {
  background: var(--st-gold);
  border-color: var(--st-gold);
  color: var(--st-ink);
}

.step.is-open .step_title {
  font-weight: 900;
  color: var(--st-ink);
}

.step.is-open .step_chev {
  transform: rotate(180deg);
}

/* Height animates through grid rows, 0fr to 1fr. */
.step_body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 150ms ease-out;
}

.step.is-open .step_body {
  grid-template-rows: 1fr;
  transition-duration: 225ms;
}

.step_body-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s 150ms;
}

.step.is-open .step_body-inner {
  visibility: visible;
  transition-delay: 0s;
}

.step_lead {
  margin: 0 0 16px;
  max-width: 34em;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--st-ink-soft);
}

.step_list {
  list-style: none;
  margin: 0;
  padding: 0 0 24px;
  display: grid;
  gap: 12px;
}

.step_list li {
  max-width: 34em;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--st-ink-soft);
}

.step_list strong {
  color: var(--st-ink);
}

.step_list a {
  font-weight: 700;
  color: var(--st-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.step_slot:empty {
  display: none;
}

.step_slot .panel {
  padding-bottom: 24px;
}

/* ---------- Panel ---------- */
.steps_aside {
  display: none;
}

.panel {
  display: grid;
  gap: 16px;
}

.panel_media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(14, 34, 56, 0.06);
}

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

.panel_title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--st-gold);
}

.panel_facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.panel_facts li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--st-ink-soft);
}

.panel_facts strong {
  display: block;
  color: var(--st-ink);
}

.panel_facts a {
  font-weight: 700;
  color: var(--st-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fact_icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--st-gold);
}

.panel_cta {
  justify-self: start;
  display: inline-flex;
  width: auto;
}

@media screen and (min-width: 1024px) {
  .steps {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
  }

  .step {
    grid-column: 1;
  }

  .steps_aside {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    position: sticky;
    top: calc(var(--st-header) + 32px);
  }

  .steps_aside .panel {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 200ms ease-out;
  }

  .steps_aside .panel.is-active {
    opacity: 1;
  }

  .steps_aside .panel[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step_body,
  .step_num,
  .step_title,
  .step_chev,
  .steps_aside .panel {
    transition: none !important;
  }
}

/* ---------- Page hero (shared by Eat & Drink and Contact) ---------- */
/* Full-bleed photo, night blue overlay, text bottom-left. Needs Playfair Display
   loaded on the page. */
.mhero {
  --m-gold: #C98B2E;
  --m-serif: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --m-sans: Lato, "Lato Fallback", sans-serif;
  position: relative;
  display: flex;
  align-items: flex-end;
  /* min-height, never a fixed height: with align-items: flex-end a fixed
     height let tall copy overflow upward under the fixed header. */
  min-height: 24rem;
  min-height: max(24rem, 56vh);
  min-height: max(24rem, 56svh);
  height: auto;
  padding-top: 7rem;
  padding-bottom: 48px;
  color: #fff;
  overflow: hidden;
}

.mhero_media,
.mhero_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.mhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 34, 56, 0.62);
}

.mhero_inner {
  position: relative;
  z-index: 1;
}

.mhero_eyebrow {
  margin: 0 0 16px;
  font-family: var(--m-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m-gold);
}

.mhero_title {
  margin: 0 0 16px;
  font-family: var(--m-serif);
  text-transform: none;
  font-size: clamp(3rem, 2.25rem + 3vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
}

.mhero_sub {
  margin: 0 0 16px;
  max-width: 34em;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.mhero_hours {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.mhero_hours a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mhero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Focal point per photo so the crop holds at the shared height. The fixed nav
   covers the top ~80px of every hero, so each vertical value keeps the
   subject (faces, sign, lamps, merch) below that band at desktop widths. */
.mhero_img.is-home { object-position: 50% 12%; }     /* players' heads */
.mhero_img.is-faq { object-position: 50% 12%; }      /* same photo as home */
.mhero_img.is-programs { object-position: 68% 15%; } /* hand and paddle grip */
.mhero_img.is-events { object-position: 45% 5%; }    /* bar, pendant lights, courts */
.mhero_img.is-pricing { object-position: 50% 8%; }   /* hats and framed prints */
.mhero_img.is-grill { object-position: 50% 15%; }    /* dining room and lamps */
.mhero_img.is-contact { object-position: 50% 45%; }  /* building sign */

@media screen and (max-width: 767px) {
  .mhero {
    height: auto;
    min-height: 0;
    padding-top: 6.5rem;
    padding-bottom: 32px;
  }
  .mhero_hours span[aria-hidden] {
    display: none;
  }
  .mhero_hours {
    display: grid;
    gap: 2px;
  }
  .mhero_actions .button {
    width: 100%;
    text-align: center;
  }
}

/* ---------- Home hero (.mhero.is-home) ---------- */
/* Editorial variant of the shared hero: copy on the left, players on the
   right, a stats row under the CTAs, and a gradient scrim instead of the flat
   overlay. Everything is scoped to .is-home so the other page heroes keep the
   shared treatment.

   The photo (home-hero-solo) is shot with the players on the right and the
   wall on the left, so it needs no mirroring or zoom on desktop. --hero-flip,
   --hero-zoom and --hero-origin remain available to move the crop. */
.mhero.is-home {
  --hero-navy: 14 34 56;      /* overlay navy, same as the shared hero */
  --hero-surface: 18 54 86;   /* --color-surface, the section below */
  --hero-gold: var(--color-primary);
  --hero-rule: rgba(255, 255, 255, 0.22);
  --hero-flip: 1;
  --hero-zoom: 1;
  --hero-origin: 50% 50%;
  --hero-stop-1: 40%;
  --hero-stop-2: 70%;
  --hero-end-alpha: 0.1;
  align-items: center;
  min-height: max(38rem, 90vh);
  min-height: max(38rem, 90svh);
  padding-top: 8rem;          /* fixed nav ends ~83px down */
  padding-bottom: 5rem;
}

.mhero.is-home .mhero_img {
  object-position: 50% 20%;
  transform: scale(calc(var(--hero-zoom) * var(--hero-flip)), var(--hero-zoom));
  transform-origin: var(--hero-origin);
}

/* Left-to-right scrim for the copy, plus a bottom fade into the surface navy
   so the hero blends into the section below. */
.mhero.is-home::after {
  background:
    linear-gradient(180deg, rgb(var(--hero-surface) / 0) 50%, rgb(var(--hero-surface) / 0.6) 78%, rgb(var(--hero-surface) / 1) 100%),
    linear-gradient(90deg, rgb(var(--hero-navy) / 0.92) 0%, rgb(var(--hero-navy) / 0.75) var(--hero-stop-1), rgb(var(--hero-navy) / 0.25) var(--hero-stop-2), rgb(var(--hero-navy) / var(--hero-end-alpha)) 100%);
}

.mhero.is-home .mhero_eyebrow {
  margin-bottom: 20px;
  color: var(--hero-gold);
}

.mhero_eyebrow-dot {
  margin: 0 0.4em;
  opacity: 0.7;
}

.mhero.is-home .mhero_title {
  margin-bottom: 24px;
  max-width: 8em;
  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
  line-height: 1;
}

/* Each sentence is an inline-block, so the headline only breaks between
   sentences: two lines on desktop, one sentence per line on tablets and
   phones. The desktop size tracks the viewport so the first line always ends
   short of the nearer player, whose position scales with the photo. */
.mhero_title-part {
  display: inline-block;
}

.mhero.is-home .mhero_sub {
  margin-bottom: 0;
  max-width: 60ch;
  font-size: 1.125rem;
  line-height: 1.6;
}

.mhero.is-home .mhero_actions {
  margin-top: 32px;
}

.mhero.is-home .mhero_actions .button {
  min-height: 48px;
  align-items: center;
  justify-content: center;
}

/* Stats row: hairline above, hairlines between items. */
.mhero_stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 16px;
  margin: 40px 0 0;
  padding: 28px 0 0;
  list-style: none;
  border-top: 1px solid var(--hero-rule);
}

.mhero_stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 28px;
  border-left: 1px solid var(--hero-rule);
}

.mhero_stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.mhero_stat-num {
  font-family: var(--m-serif);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--hero-gold);
}

.mhero_stat-num.is-text {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  line-height: 1.15;
}

.mhero_stat-label {
  font-family: var(--m-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* Entrance: each block rises in turn, eyebrow first, stats last. */
@keyframes mhero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mhero.is-home .mhero_eyebrow,
.mhero.is-home .mhero_title,
.mhero.is-home .mhero_sub,
.mhero.is-home .mhero_actions,
.mhero.is-home .mhero_stats {
  animation: mhero-rise 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.mhero.is-home .mhero_title { animation-delay: 80ms; }
.mhero.is-home .mhero_sub { animation-delay: 160ms; }
.mhero.is-home .mhero_actions { animation-delay: 240ms; }
.mhero.is-home .mhero_stats { animation-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .mhero.is-home .mhero_eyebrow,
  .mhero.is-home .mhero_title,
  .mhero.is-home .mhero_sub,
  .mhero.is-home .mhero_actions,
  .mhero.is-home .mhero_stats {
    animation: none;
  }
}

/* Wide screens: enlarge and mirror so both players fill the right half,
   clear of the two-line headline. */
@media screen and (min-width: 1200px) {
  .mhero.is-home {
    --hero-zoom: 1;
    --hero-origin: 50% 50%;
  }
  .mhero.is-home .mhero_title {
    max-width: 10em;
    font-size: clamp(2.5rem, 5.3vw, 4.75rem);
  }
}

/* Tablets: the portrait crop only has room for one player, so it frames the
   dark-shirted one right of the copy, and the scrim stays darker for longer. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .mhero.is-home {
    --hero-stop-1: 70%;
    --hero-stop-2: 100%;
    --hero-end-alpha: 0.35;
  }
  .mhero.is-home .mhero_img {
    object-position: 72% 20%;
  }
}

/* Below the desktop breakpoint the four stats do not fit one row: 2x2 grid. */
@media screen and (max-width: 991px) {
  .mhero_stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 0;
    margin-top: 32px;
    padding-top: 24px;
  }
  .mhero_stat {
    padding: 0 16px;
  }
  .mhero_stat:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .mhero_stat:nth-child(even) {
    padding-right: 0;
  }
}

/* Phones: photo band at the top with the players' heads, then a top-to-bottom
   scrim that is near-solid where the copy sits. The stats become a 2x2 grid. */
@media screen and (max-width: 767px) {
  .mhero.is-home {
    --hero-zoom: 1.08;
    --hero-origin: 50% 90%;
    min-height: 0;
    padding-top: clamp(15rem, 34vh, 19rem);
    padding-bottom: 3.5rem;
  }
  .mhero.is-home .mhero_img {
    object-position: 71% 50%;
  }
  .mhero.is-home::after {
    background: linear-gradient(180deg, rgb(var(--hero-navy) / 0.12) 0%, rgb(var(--hero-navy) / 0.3) 20%, rgb(var(--hero-navy) / 0.9) 29%, rgb(var(--hero-navy) / 0.94) 70%, rgb(var(--hero-surface) / 1) 100%);
  }
  .mhero.is-home .mhero_title {
    max-width: none;
  }
}

/* ---------- Contact page ---------- */
/* Hero reuses .mhero. Form section reuses .pe_form controls. Cards reuse the
   .pcard surface (white, hairline border, gold top rule). Only brand tokens. */
.contact,
.about,
.values {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.contact_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-12);
  align-items: stretch;
}

.contact_info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact_info .section-head {
  margin-bottom: var(--space-5);
}

.contact_cards {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.contact .section-head_lead a,
.contact_fineprint a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact_card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.1);
  border-radius: var(--radius-card);
}

.contact_card .findus_tile {
  color: var(--color-primary-on-light);
}

.contact_label {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text-on-light);
}

.contact_value {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

.contact_value a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.contact_value a:hover {
  color: var(--color-primary-on-light);
}

.contact_hours {
  margin: 0;
  display: grid;
  gap: 2px;
}

.contact_hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 22rem;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.contact_hours dt {
  color: rgba(13, 27, 46, 0.7);
}

.contact_hours dd {
  margin: 0;
  font-weight: 700;
  color: var(--color-accent);
  text-align: right;
}

/* Map fills whatever height the form column leaves. */
.contact_info .findus_map {
  flex: 1 1 auto;
  min-height: 14rem;
}

/* The form is the conversion element: white card on the cream surface,
   larger controls, and a message box that grows to fill the column. */
.contact_form-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-12);
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.1);
  border-radius: var(--radius-card);
}

.contact_form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.contact_form .pe_fields {
  gap: var(--space-5) var(--space-5);
}

.contact_form .pe_field {
  align-content: start;
}

.contact_form .pe_field--full {
  margin-top: var(--space-5);
  flex: 1 1 auto;
  grid-template-rows: auto 1fr auto;
}

.contact_form .pe_label {
  font-size: var(--font-size-base);
}

.contact_form .pe_control {
  min-height: 56px;
  font-size: 1.0625rem;
}

.contact_form textarea.pe_control {
  min-height: 9rem;
  height: 100%;
}

.contact_form .pe_submit {
  align-self: start;
}

.contact_form .pe_control[aria-invalid="true"] {
  border-color: #b3261e;
}

.field_error {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #b3261e;
}

.field_error[hidden] {
  display: none;
}

.contact_status {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-field);
  background: rgba(13, 27, 46, 0.06);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.contact_status.is-error {
  background: rgba(179, 38, 30, 0.08);
  color: #8c1d16;
}

.contact_status a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact_status[hidden] {
  display: none;
}

/* Honeypot: off screen for people, present for bots. */
.contact_hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact_fineprint {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(13, 27, 46, 0.7);
}

.contact_submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.contact_done {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-12) var(--space-6);
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.1);
  border-radius: var(--radius-card);
}

.contact_done[hidden] {
  display: none;
}

.contact_done-title {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.contact_done-text {
  margin: 0;
  max-width: 34rem;
  line-height: var(--line-height-body);
  color: rgba(13, 27, 46, 0.8);
}

/* About */
.about {
  background: var(--color-surface);
  color: var(--color-text);
}

.about_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  align-items: start;
}

.about_subhead {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.about_text {
  margin: 0;
  font-size: var(--font-size-lead);
  line-height: 1.5;
  color: var(--color-text);
}

.about_text + .about_text {
  margin-top: var(--space-4);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: rgba(255, 255, 255, 0.82);
}

.about_facts {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.about_facts li {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(226, 155, 54, 0.4);
}

.about_facts strong {
  display: block;
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.about_facts span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.72);
}

/* Core values: six cards, three by two, then two by three, then one column.
   Every breakpoint divides six evenly so no row is left short. */
.values_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.value_card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-6);
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.1);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.value_card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-primary);
}

.value_num {
  display: block;
  margin-bottom: var(--space-4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-primary-text-on-light);
}

.value_title {
  margin: 0 0 var(--space-3);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.value_text {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: rgba(13, 27, 46, 0.78);
}

@media screen and (max-width: 991px) {
  .contact_grid,
  .about_grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .contact_info .findus_map {
    flex: 0 0 auto;
    height: 20rem;
    min-height: 0;
  }

  .contact_form-wrap {
    padding: var(--space-6);
  }

  .contact_form textarea.pe_control {
    height: auto;
  }

  .values_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media screen and (max-width: 599px) {
  .values_grid,
  .about_facts {
    grid-template-columns: 1fr;
  }

  .contact_form .pe_fields {
    grid-template-columns: 1fr;
  }

  .contact_done {
    padding: var(--space-6);
  }
}

/* ---------- FAQ page ---------- */
/* Narrow reading column, grouped accordions on the existing .menu_card surface,
   chevron from .menu_chevron. Panels animate through grid rows in 200ms. */
.faq {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.faq_wrap {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-12);
}

.faq_group-title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary-text-on-light);
  border-bottom: 1px solid rgba(13, 27, 46, 0.1);
}

.faq_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.faq_h {
  margin: 0;
  font-size: inherit;
}

.faq_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--color-accent);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq_btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.faq_q {
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.4;
}

.faq_btn .menu_chevron {
  transition: transform 200ms ease-out, background-color 200ms ease-out;
}

.faq_item.is-open .menu_chevron {
  transform: rotate(180deg);
}

.faq_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease-out;
}

.faq_item.is-open .faq_panel {
  grid-template-rows: 1fr;
}

.faq_panel-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s 200ms;
}

.faq_item.is-open .faq_panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

.faq_panel-inner p {
  margin: 0;
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: rgba(13, 27, 46, 0.78);
}

.faq_panel-inner p + p {
  margin-top: calc(-1 * var(--space-2));
}

.faq_panel-inner a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Unverified answers stay loud until the club supplies the copy. */
.faq_placeholder {
  color: #b3261e;
  font-style: italic;
}

.faq_cta {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  background: var(--color-surface);
  color: var(--color-text);
}

.faq_cta .section-head {
  margin-bottom: var(--space-6);
}

.faq_cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

@media screen and (max-width: 599px) {
  .faq_btn {
    padding: var(--space-4) var(--space-5);
  }

  .faq_panel-inner p {
    padding: 0 var(--space-5) var(--space-4);
  }

  .faq_cta-actions .button {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq_btn .menu_chevron,
  .faq_panel,
  .faq_panel-inner {
    transition: none !important;
  }
}

/* ---------- Membership tiers, light variant (Pricing page) ---------- */
/* Cream section, white table card with the same hairline and shadow as the
   other light cards. Gold stays on prices, badge, checks, and the best plan. */
.tiers.is-light {
  background-color: var(--color-light);
  color: var(--color-accent);
}

.tiers.is-light .tiers_table {
  background: #ffffff;
  border-color: rgba(13, 27, 46, 0.1);
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.06);
}

.tiers.is-light .tiers_table th,
.tiers.is-light .tiers_table td {
  border-color: rgba(13, 27, 46, 0.1);
  color: var(--color-accent);
}

.tiers.is-light .tiers_label,
.tiers.is-light .tiers_price small,
.tiers.is-light .tiers_desc,
.tiers.is-light .tiers_feature-note,
.tiers.is-light .tiers_table td small,
.tiers.is-light .tiers_no,
.tiers.is-light .tiers_hint {
  color: rgba(13, 27, 46, 0.7);
}

.tiers.is-light .tiers_title,
.tiers.is-light .tiers_feature-name {
  color: var(--color-accent);
}

.tiers.is-light .tiers_price {
  color: var(--color-primary-text-on-light);
}

.tiers.is-light .tiers_cta {
  border-color: rgba(13, 27, 46, 0.3);
  color: var(--color-accent);
}

.tiers.is-light .tiers_cta:hover {
  border-color: var(--color-primary-on-light);
  color: var(--color-primary-text-on-light);
}

.tiers.is-light .tiers_table .is-best {
  background: rgba(226, 155, 54, 0.1);
}

.tiers.is-light .is-best .tiers_cta,
.tiers.is-light .is-best .tiers_cta:hover {
  color: var(--color-accent);
}

@media screen and (max-width: 767px) {
  .tiers.is-light .tiers_table thead {
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(13, 27, 46, 0.1);
  }

  .tiers.is-light .tiers_table thead::before {
    background: var(--color-light);
  }

  .tiers.is-light .tiers_table tbody th.tiers_feature {
    border-top-color: rgba(13, 27, 46, 0.1);
    background: rgba(13, 27, 46, 0.03);
  }

  .tiers.is-light .tiers_table tbody td {
    color: var(--color-accent);
  }
}