/* ELEVENO Pickleball — home page
   Implemented from "Eleveno Home.dc.html" (Claude Design).
   Desktop rendering matches the design artboard at >=1240px;
   breakpoints below that are additions, since the source has none. */

/* ---------- tokens ---------- */
:root{
  --navy:#0E2350;
  --navy-deep:#0A1A3A;
  --navy-mid:#132C6B;
  --blue:#1D3F94;
  --blue-soft:#8CBADF;
  --gold:#F5B70E;
  --green:#A6B62F;
  --cream:#F5F0E4;
  /* The light page surface. Split from --cream on purpose: --cream is also the
     text colour on every navy band, so the two cannot share a token.
     A tint of --blue-soft rather than --blue-soft itself: at full strength the
     muted body grey lands at 3.23:1, under the 4.5 it needs. This holds 5.26:1
     and still gives the white cards a ground to sit on, which pure white did
     not. */
  --surface:#DCEAF6;
  --ink:#14161C;
  --ink-soft:#2c2f38;
  --ink-mute:#5a5c66;
  --on-navy:#DCE3F0;
  --on-navy-mute:#9FB0CE;
  --on-navy-faint:#7688A6;
  --rule:#ffffff1a;
  --shell:1240px;
  --pad:32px;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --heavy:'Archivo Black','Archivo',Impact,sans-serif;
  --script:'Yellowtail','Brush Script MT',cursive;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--navy);font-family:var(--body);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
/* height:auto is essential: every img carries width/height attributes for layout
   stability, and without this the attribute height wins over the CSS width and
   the image is squashed. */
img{max-width:100%;height:auto}
/* Form controls do not inherit typography: a <button>, <input>, <select> or
   <textarea> falls back to the browser's own UI font unless told otherwise.
   That is why the guest stepper's + and - were setting in Arial. Family only —
   inheriting size too would resize every control that relies on the UA default. */
button,input,select,textarea{font-family:inherit}
/* The UA rule for [hidden] is display:none at author-origin-beating-strength
   ONLY until an author sets display. .est__nav{display:flex} silently unhid
   itself that way — the wizard's buttons showed up with JavaScript off. */
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.page{width:100%;background:var(--surface);overflow:hidden}
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:4px;color:var(--blue)}
.eyebrow--gold{color:var(--gold);letter-spacing:3px}
.section-head{text-align:center}
.section-head h2{font-family:var(--display);letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-top:6px}

/* ---------- animations ---------- */
@keyframes elv-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--display);letter-spacing:1px;text-transform:uppercase;font-size:18px;padding:16px 32px;border-radius:8px}
.btn--gold{background:var(--gold);color:var(--navy)}
/* background:transparent is not redundant. These two set only a border and a
   colour, which is fine on an <a> — but on a <button> the UA paints its own
   buttonface grey underneath, and the Back button was pale blue on #efefef at
   1.12:1. A "ghost" button has to say it is transparent. */
.btn--ghost{background:transparent;border:2px solid var(--cream);color:var(--cream)}
.btn--navy{background:var(--navy);color:var(--cream);font-size:16px;padding:14px 30px}
.pill{display:inline-block;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px;padding:14px 26px;border-radius:999px}
.pill--gold{background:var(--gold);color:var(--navy)}
.pill--ghost{border:2px solid var(--cream);color:var(--cream)}
/* Was a row of bordered pills. People kept trying to click them — a pill with
   a border and title case is a button, whatever the element underneath. These
   are just things you can add, so they read as a list now. */
.addons{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;row-gap:2px}
.addons li{font-size:15.5px;font-weight:600;color:var(--on-navy)}
.addons li:not(:last-child)::after{content:"\00B7";margin:0 11px;color:var(--on-navy-faint)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--navy);border-bottom:1px solid var(--rule)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:16px;padding-bottom:16px}
.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__logo img{height:40px;width:auto;display:block}
.nav__links{display:flex;gap:30px;align-items:center;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--on-navy);flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.nav__end{display:flex;align-items:center;gap:30px}
.nav__cta{background:var(--gold);color:var(--navy);padding:12px 22px;border-radius:999px;white-space:nowrap}
/* The menu button is mobile-only. The checkbox stays in the DOM at every width
   so the :checked sibling selectors below have something to hang off. */
.nav__toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.nav__burger{display:none}

/* ---------- hero ---------- */
/* Split, not full-bleed. The photo is a 4:5 portrait; stretched across a 2.18:1
   band it survived as a 37% slice of its own height with the jerseys clipped off
   the bottom. In its own column it runs full height and keeps both faces.
   Absolutely placed rather than a grid track so .hero__inner keeps the site's
   shell centring — the copy stays on the same left gutter as every other
   section. */
.hero{position:relative;min-height:660px;display:flex;align-items:center;
  overflow:hidden;background:var(--navy)}
/* Mirrored on request, so the taller of the two lands on the right. Done with
   a transform rather than a flipped file: no re-encode, and og:image still
   points at the unmirrored original, so the share card keeps ELEVENO readable. */
.hero__photo{position:absolute;top:0;right:0;bottom:0;width:44%;
  background-image:image-set(url('/.netlify/images?url=/assets/hero-team.jpg&w=640') 1x, url('/.netlify/images?url=/assets/hero-team.jpg&w=1280') 2x);background-size:cover;background-position:center 22%;
  transform:scaleX(-1)}
/* feathers the photo into the navy so the two do not meet on a hard vertical
   seam down the middle of the page */
/* 270deg, not 90: the parent is mirrored, so a gradient authored dark-on-the-
   right is what actually paints dark on the left, against the copy. */
.hero__photo::after{content:'';position:absolute;inset:-1px;
  background:linear-gradient(270deg,var(--navy) 0%,rgba(14,35,80,.55) 16%,rgba(14,35,80,.06) 48%,rgba(14,35,80,0) 100%)}
.hero__inner{position:relative;z-index:1;padding-top:64px;padding-bottom:120px}
@media (max-width:960px){
  /* Five links plus a CTA cannot fit one narrow row. A scroller hid the last
     ones behind an invisible edge, so they collapse behind a menu button
     instead and the sticky bar stays one row tall.

     960px, not the 860px the rest of the mobile layout uses: the links start
     wrapping to a second row at 935px, and a two-row sticky header is the
     thing this block exists to prevent. The nav therefore gets its own
     breakpoint rather than sharing the general one. */
  .nav__inner{flex-wrap:wrap;justify-content:space-between;gap:0;
    padding-top:10px;padding-bottom:10px}
  .nav__end{order:2;gap:6px}
  .nav__cta{padding:13px 16px;font-size:12px}
  .nav__burger{display:flex;order:2;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-10px;cursor:pointer}
  .nav__burger span,.nav__burger span::before,.nav__burger span::after{
    display:block;width:22px;height:2px;background:var(--on-navy);border-radius:2px;
    transition:transform .2s ease,opacity .2s ease,top .2s ease}
  .nav__burger span{position:relative}
  .nav__burger span::before,.nav__burger span::after{content:'';position:absolute;left:0}
  .nav__burger span::before{top:-7px}
  .nav__burger span::after{top:7px}
  .nav__toggle:checked ~ .nav__end .nav__burger span{background:transparent}
  .nav__toggle:checked ~ .nav__end .nav__burger span::before{top:0;transform:rotate(45deg)}
  .nav__toggle:checked ~ .nav__end .nav__burger span::after{top:0;transform:rotate(-45deg)}
  .nav__toggle:focus-visible ~ .nav__end .nav__burger{outline:2px solid var(--gold);outline-offset:-4px;border-radius:8px}
  /* Collapsed state uses max-height rather than display:none so opening animates
     and the links stay in the accessibility tree order. */
  .nav__links{order:3;width:100%;margin-left:0;display:block;
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease}
  .nav__toggle:checked ~ .nav__links{max-height:70vh;overflow-y:auto;visibility:visible}
  .nav__links a{display:block;padding:15px 0;border-top:1px solid var(--rule);line-height:1.2}
  .nav__links a[aria-current="page"]{color:var(--gold)}
}

@media (max-width:860px){
  /* Photo above the copy rather than beside it. Positioned high in the frame
     because the faces sit in the top 10-45% of a 4:5 portrait. */
  .hero{display:block;min-height:0}
  .hero__photo{position:relative;width:100%;height:min(54vh,400px);background-position:center 16%}
  .hero__photo::after{background:linear-gradient(180deg,rgba(14,35,80,0) 44%,rgba(14,35,80,.92) 100%)}
  .hero__inner{padding-top:28px;padding-bottom:116px}
  .hero__copy{max-width:none}
}
.hero__copy{max-width:560px;color:var(--cream)}
.hero__eyebrow{font-family:var(--mono);font-size:14px;letter-spacing:4px;color:var(--gold);margin-bottom:18px}
.hero h1{font-family:var(--display);font-size:clamp(52px,9vw,104px);line-height:.86;letter-spacing:.5px;text-transform:uppercase}
.hero h1 span{color:var(--gold)}
.hero__lead{font-size:20px;line-height:1.5;font-weight:600;margin:26px 0 32px;max-width:520px;color:var(--on-navy)}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.hero__stats{position:absolute;bottom:0;left:0;right:0;background:var(--navy-deep);border-top:1px solid #ffffff14}
.hero__stats .shell{padding-top:18px;padding-bottom:18px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:14px 36px;color:var(--cream)}
/* Number over label. Set inline, a 30px display figure beside an 11px mono
   label reads as mismatched however exactly they share a baseline — the eye
   compares their centres, not their feet. Stacking removes the comparison. */
.hero__stats p{display:flex;flex-direction:column;gap:3px}
.stat__n{font-family:var(--display);font-size:34px;line-height:.9;letter-spacing:.5px}
.stat__n--gold{color:var(--gold)}
.stat__n--blue{color:var(--blue-soft)}
.stat__n--green{color:var(--green)}
.stat__l{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;line-height:1.2;color:var(--on-navy-mute)}

/* ---------- google reviews ---------- */
.reviews{background:var(--surface);padding:80px 0}
.reviews__lead{max-width:620px;margin:14px auto 0;text-align:center;font-size:17px;
  line-height:1.55;color:var(--ink-mute)}
/* A rail rather than a grid: it holds any number of reviews without reflowing
   the section, and the part-visible next card is what says "there are more". */
/* The strip runs edge to edge, outside .shell, so cards enter and leave the
   screen rather than a boxed column. */
.reviews__viewport{overflow:hidden;margin-top:38px;padding:4px 0 10px}
.reviews__track{display:flex;width:max-content;animation:elv-reviews 250s linear infinite}
.reviews__track:focus-within,.reviews__track.is-paused{animation-play-state:paused}
/* hover-pause only where there is a real pointer: on a touch screen a tap can
   leave a sticky :hover that would fight the tap-to-pause toggle */
@media (hover:hover){.reviews__track:hover{animation-play-state:paused}}
.reviews__set{list-style:none;display:flex;gap:20px;padding-right:20px}
@keyframes elv-reviews{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.review{flex:0 0 clamp(268px,80vw,360px);height:370px;
  background:#fff;border:2px solid var(--navy);border-radius:18px;padding:24px 22px;
  display:flex;flex-direction:column;gap:12px}
.review__head{display:flex;align-items:center;gap:12px}
.review__avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:var(--navy);
  font-family:var(--display);font-size:20px;line-height:1}
.review__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.review__name{font-weight:800;font-size:15px;color:var(--navy)}
.review__when{font-family:var(--mono);font-size:12px;color:var(--ink-mute)}
.review__stars{color:var(--gold);font-size:17px;letter-spacing:3px;line-height:1}
.review__text{font-size:15px;line-height:1.6;color:var(--ink-soft)}
.review__text p+p{margin-top:10px}
/* One 700-character review would otherwise set the height of every card in the
   strip. Cards are a fixed height and the quote fills whatever room is left;
   the full text stays in the DOM for screen readers, and the section links to
   the Google listing for the rest. The fade appears only on cards that really
   are clipped — is-clipped is set by reviews.js — because a fade pinned to the
   bottom of every card washes out the last line of quotes that fit fine. */
.review__textwrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.review__textwrap.is-clipped::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44px;
  background:linear-gradient(to bottom,#ffffff00,#fff)}
/* Hover pauses the strip on a mouse; on a touch screen there is nothing to
   discover the tap-to-pause without saying so. */
.reviews__hint{display:none}
@media (hover:none){
  .reviews__hint{display:block;text-align:center;font-family:var(--mono);
    font-size:12px;letter-spacing:1px;color:var(--ink-mute);margin-top:2px}
}
.reviews__more{text-align:center;margin-top:8px}
.reviews__more a{font-family:var(--display);font-size:17px;letter-spacing:1px;
  color:var(--blue);text-transform:uppercase}

/* ---------- marquee ---------- */
.marquee{background:var(--gold);overflow:hidden;padding:13px 0;border-bottom:3px solid var(--navy)}
.marquee__track{display:flex;width:max-content;white-space:nowrap;animation:elv-mq 110s linear infinite;
  font-family:var(--display);font-size:22px;letter-spacing:1px;color:var(--navy);text-transform:uppercase}
.marquee__half{display:flex;flex:0 0 auto}
.marquee__track span{padding:0 22px}
.marquee__dot{color:var(--blue)}

/* ---------- now playing ---------- */
.playing{background:var(--surface);padding:80px 0;position:relative;overflow:hidden}
.playing .shell{position:relative}
.playing__mark{position:absolute;top:18px;right:-34px;width:190px;opacity:.16;transform:rotate(8deg);pointer-events:none}
/* The eyebrow IS the heading now — there is no display-type title above the
   rows any more, so it carries the section's name for the outline as well as
   its look. Styled here rather than reusing .section-head, which would set it
   in Anton at 64px and take a specificity fight to undo. */
.playing .section-head{margin-bottom:36px}
.playing .section-head h2{font-size:clamp(38px,6vw,64px)}
.playing__head{text-align:center;margin-bottom:34px}
/* Bigger than an eyebrow, because it is not one any more — it is the section's
   only heading. Bold, and the tracking scales down as the size goes up: 4px of
   letter-spacing that reads as delicate at 13px reads as stretched at 22px, and
   would push the line past the gutter on a phone. */
.playing__h{font-family:var(--mono);font-size:clamp(16px,2.3vw,26px);font-weight:700;
  letter-spacing:clamp(1.6px,.26vw,3.4px);text-transform:uppercase;color:var(--blue)}

/* The home page's strip sits on navy so it reads as its own band between two
   light sections. The calendar page keeps the light treatment: its filter chips
   and 26 rows are all drawn for a pale ground. */
/* A colour change already separates two sections, so both paying full padding
   just doubles the gap: 80px of pale under the venue card plus 80px of navy
   above this heading put 160px of nothing between them, and the same again
   below. The band keeps enough to breathe; its neighbours pull in where they
   meet it. */
.playing--navy{background:var(--navy);padding:46px 0 50px}
.spaces:has(+ .playing--navy){padding-bottom:52px}
.playing--navy + .memb{padding-top:52px}
.playing--navy .playing__h{color:var(--gold)}
.playing--navy .playing__mark{opacity:.09}
.playing--navy .sched{border-top-color:#ffffff4d}
.playing--navy .sched__row{border-bottom-color:#ffffff2e}
.playing--navy .sched__row:last-child{border-bottom-color:#ffffff4d}
.playing--navy .sched__what{color:var(--cream)}
/* 150px wrapped the compound schedules onto two lines, same as the calendar */
.playing--navy .sched__when{color:var(--blue-soft)}
/* the blue button disappears against navy; gold is the site's call-to-action
   on dark anyway */
.playing--navy .sched__cta{background:var(--gold);color:var(--navy)}
.playing--navy .playing__more a{color:var(--gold)}
.playing--navy .sched__row--empty .sched__what{color:var(--on-navy-mute)}
/* ---------- calendar: filter chips + grouped programme ---------- */
/* Ships hidden and is revealed by the script, so with no JavaScript every
   panel is simply visible rather than a dead row of buttons. */
.calfilter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.calchip{font-family:var(--display);font-size:14px;letter-spacing:1px;text-transform:uppercase;
  background:transparent;color:var(--navy);border:2px solid #0e235033;border-radius:999px;
  padding:9px 17px;cursor:pointer}
.calchip span{font-family:var(--mono);font-size:11px;color:var(--ink-mute);margin-left:5px}
.calchip:hover{border-color:var(--navy)}
.calchip.is-on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.calchip.is-on span{color:var(--gold)}
.calgroup + .calgroup{margin-top:38px}
.calgroup__h{font-family:var(--display);font-size:22px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px}
/* 26 rows at the home page's display size is a wall of type; the calendar's own
   rows step down so a whole category fits on a screen. */
.calgroup .sched__what{font-size:clamp(19px,2.2vw,25px)}
.calgroup .sched__row{padding:15px 4px}
/* 150px wrapped "MON · 8:00–10:00 AM" onto two lines */

.sched{border-top:3px solid var(--navy)}
.sched__row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 4px;border-bottom:2px dashed #0e235055}
.sched__row:last-child{border-bottom:3px solid var(--navy)}
.sched__row--empty{justify-content:center;padding:34px 4px}
.sched__row--empty .sched__what{flex:0 1 auto;text-align:center;font-family:var(--body);font-size:17px;font-weight:600;text-transform:none;color:var(--ink-mute)}
.sched__row--feature{background:#fff9e8}
.sched__when{font-family:var(--mono);font-size:15px;color:var(--blue);width:292px;flex:0 0 292px}
.sched__what{font-family:var(--display);font-size:clamp(24px,3.2vw,34px);text-transform:uppercase;color:var(--navy);flex:1}
.sched__what span{color:var(--gold)}
.sched__cta{font-family:var(--display);font-size:15px;letter-spacing:1px;background:var(--blue);color:#fff;padding:10px 20px;border-radius:6px;white-space:nowrap;flex:0 0 auto}
.sched__cta--gold{background:var(--gold);color:var(--navy)}
.playing__more{text-align:center;margin-top:26px}
.playing__more a{font-family:var(--display);font-size:17px;letter-spacing:1px;color:var(--blue);text-transform:uppercase}

/* ---------- eat & drink ---------- */
.eat{display:grid;grid-template-columns:1fr 1fr;background:var(--navy);color:var(--cream)}
.eat__img{min-height:520px;background-image:image-set(url('/.netlify/images?url=/assets/social-beers.jpg&w=1200') 1x, url('/.netlify/images?url=/assets/social-beers.jpg&w=2400') 2x);background-size:cover;background-position:center;background-color:var(--navy-deep)}
.eat__body{padding:72px 56px;display:flex;flex-direction:column;justify-content:center}
.eat__body h2{font-family:var(--display);font-size:clamp(40px,6vw,62px);line-height:.9;text-transform:uppercase}
.eat__body h2 span{color:var(--blue-soft)}
.eat__lead{font-size:17px;line-height:1.6;font-weight:600;color:var(--on-navy);margin:24px 0 30px;max-width:420px}
.eat__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- our spaces ---------- */
.spaces{background:var(--surface);padding:80px 0}
.spaces .section-head{margin-bottom:38px}
.spaces .section-head h2{font-size:clamp(38px,5.6vw,60px)}
.spaces__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
/* Out of season there is one space, not two. Without this the lone card sits
   half-width against the left edge of a two-column track. */
.spaces__grid:has(.space:only-child){grid-template-columns:minmax(0,620px);justify-content:center}
.space{background:#fff;border:3px solid var(--navy);border-radius:20px;overflow:hidden;box-shadow:0 16px 40px rgba(14,35,80,.12)}
.space__img{position:relative;height:280px;background-size:cover;background-color:var(--navy-deep)}
.space__img--indoor{background-image:image-set(url('/.netlify/images?url=/assets/courts-flag.jpg&w=1000') 1x, url('/.netlify/images?url=/assets/courts-flag.jpg&w=2000') 2x);background-position:center}
.space__img--outdoor{background-image:image-set(url('/.netlify/images?url=/assets/community-champs.jpg&w=1500') 1x, url('/.netlify/images?url=/assets/community-champs.jpg&w=2400') 2x);background-position:center 25%}
.space__badge{position:absolute;top:16px;left:16px;font-family:var(--display);font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:8px 16px;border-radius:999px;border:2px solid var(--navy);color:var(--navy)}
.space__badge--gold{background:var(--gold)}
.space__badge--green{background:var(--green)}
.space__body{padding:30px 30px 34px}
.space__body h3{font-family:var(--display);font-size:34px;text-transform:uppercase;color:var(--navy);letter-spacing:.5px}
.space__meta{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--blue);margin-top:8px}
.space__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:22px}
.space__list li{display:flex;gap:8px;font-weight:600;font-size:15px;color:var(--ink-soft)}
.space__list li::before{content:"\2713";font-weight:900}
.space__list--gold li::before{color:var(--gold)}
.space__list--green li::before{color:var(--green)}

/* ---------- pricing ---------- */
/* Used to sit directly under .spaces and share one cream block with it, so it
   carried no top padding. It follows .memb now and has to stand on its own. */
.pricing{background:var(--surface);padding:72px 0 80px}
.pricing .section-head{margin-bottom:30px}
.pricing .section-head h2{font-size:clamp(34px,4.8vw,52px)}
.pricing__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.price{background:#fff;border:2px solid var(--navy);border-radius:16px;padding:24px}
.price--dark{background:var(--navy)}
.price__n{font-family:var(--display);font-size:32px;color:var(--blue)}
.price__n--green{color:var(--green)}
.price__n--gold{color:var(--gold)}
.price__t{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--navy);margin-top:4px}
.price--dark .price__t{color:var(--cream)}
.price__m{font-family:var(--mono);font-size:11px;color:var(--ink-mute);margin-top:8px}
.price--dark .price__m{color:var(--on-navy-mute)}
.pricing__cta{text-align:center;margin-top:26px}

/* ---------- private events ---------- */
.events{background:var(--navy-deep);color:var(--cream);padding:84px 0;position:relative;overflow:hidden}
.events__mark{position:absolute;bottom:-34px;left:-40px;width:210px;opacity:.30;transform:rotate(-18deg);pointer-events:none}
.events .shell{position:relative}
.events__head{text-align:center;margin-bottom:14px}
.events__head h2{font-family:var(--display);font-size:clamp(36px,5.6vw,60px);letter-spacing:1px;text-transform:uppercase;margin-top:6px}
.events__sub{font-size:18px;font-weight:600;color:var(--blue-soft);margin-top:8px}
.events__note{max-width:720px;margin:0 auto 40px;text-align:center;font-size:14px;line-height:1.6;font-weight:500;color:var(--on-navy-mute)}
.events__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.pkg{background:var(--navy);border:1px solid var(--rule);border-radius:18px;padding:30px 26px}
.pkg--feature{background:var(--navy-mid);border:2px solid var(--gold);position:relative;box-shadow:0 20px 44px rgba(0,0,0,.3)}
.pkg__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--navy);font-family:var(--display);font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap}
.pkg h3{font-family:var(--display);font-size:28px;text-transform:uppercase;color:var(--cream)}
.pkg--feature h3{color:#fff}
/* margin-bottom drops to 0 — .pkg__pp now carries the gap to the description */
.pkg__rates{display:flex;gap:22px;margin:18px 0 0}
/* The prices are the loudest thing on the card, and "$50 / 2 HOURS" reads as a
   flat rate for the group unless something says otherwise. */
.pkg__pp{font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold);margin:11px 0 16px}
.pkg--feature .pkg__pp{color:var(--gold)}
.pkg__rate{font-family:var(--display);font-size:34px;color:var(--gold)}
.pkg__rate--blue{color:var(--blue-soft)}
.pkg__dur{font-family:var(--mono);font-size:11px;color:var(--on-navy-mute)}
.pkg__desc{font-size:14px;line-height:1.6;font-weight:500;color:var(--on-navy)}
.events__addons{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px;padding-top:28px;border-top:1px solid var(--rule)}
.events__addons-label{font-family:var(--display);font-size:17px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);margin-right:12px}
.events__cta{text-align:center;margin-top:36px}
.events__contact{font-family:var(--mono);font-size:12px;color:var(--on-navy-mute);margin-top:16px}

/* ---------- community ---------- */
/* ---------- partners strip ---------- */

/* White, not cream. Partner artwork is drawn for a white ground, and this sits
   between the cream reviews band and the dark community photo, so the surface
   change also does the work of separating the two. The navy top rule is the
   same motif the memberships band uses. */
.partners{background:#fff;padding:58px 0;border-top:3px solid var(--navy)}
.partners .section-head{margin-bottom:30px}
.partners .section-head h2{font-size:clamp(32px,4.4vw,50px)}
/* gold on white is about 1.9:1 — the blue accent carries the same job legibly */
.partners h2 span{color:var(--blue)}

/* Wrapping and centred rather than a fixed grid, so nine logos and six logos
   both land balanced and adding a partner never leaves a stranded row. */
/* Sized so six sit on one line inside the 1176px shell — 6x158 + 5x30 = 1098.
   At 1000px and a 40px gap they broke 4 + 2, which leaves a widow row. Narrower
   screens still wrap on their own. */
.plogos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:22px 30px;max-width:1120px;margin:0 auto}
/* A fixed box with contain is what keeps a tall square mark and a long
   wordmark reading at the same weight. */
.plogo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:158px;height:78px;padding:8px}
.plogo img{max-height:100%;max-width:100%;width:auto}
/* Capped narrow so a short list reads as a deliberate pair rather than two
   marks stranded at opposite ends of a 1000px row. */
.plogos--few{gap:24px 56px;max-width:660px}
.plogos--few .plogo{width:260px;height:104px}
.plogo__link{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;transition:transform .18s ease}
.plogo__link:hover{transform:translateY(-2px)}
.plogo--word .plogo__word{font-family:var(--display);font-size:21px;letter-spacing:1px;
  line-height:1.1;text-transform:uppercase;text-align:center;color:var(--navy);opacity:.5}

.community{position:relative;min-height:480px;display:flex;align-items:flex-end;
  /* The first layer fades the photo out of the white partners band above it.
     Without it the two meet on a hard horizontal line that reads as a mistake
     rather than a section break. Layer order matters: first is topmost. */
  background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.70) 5%,rgba(255,255,255,0) 20%),
    linear-gradient(0deg,rgba(10,26,58,.94) 0%,rgba(10,26,58,.35) 45%,rgba(10,26,58,.1) 100%),image-set(url('/.netlify/images?url=/assets/community-champs.jpg&w=1500') 1x, url('/.netlify/images?url=/assets/community-champs.jpg&w=2400') 2x);
  background-size:cover;background-position:center 20%;background-color:var(--navy-deep)}
.community .shell{padding-top:56px;padding-bottom:56px;color:var(--cream)}
.community h2{font-family:var(--display);font-size:clamp(34px,5.2vw,56px);line-height:.92;text-transform:uppercase;max-width:760px}

/* ---------- ask: short inquiry form ---------- */
.ask{background:var(--surface);padding:84px 0}
.ask__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
/* the gold block sits behind and offset, so the photo reads as lifted off it */
.ask__media{position:relative;padding:0 0 34px 34px}
.ask__media::before{content:'';position:absolute;left:0;bottom:0;width:78%;height:72%;
  background:var(--gold);border-radius:20px}
.ask__photo{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 18px 44px #0e235024}
.ask__photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.ask__badge{position:absolute;top:24px;right:-34px;background:var(--navy);color:var(--cream);
  border-radius:14px;padding:14px 20px;text-align:center;box-shadow:0 10px 28px #0e235036}
.ask__badge-v{display:block;font-family:var(--display);font-size:30px;line-height:1;color:var(--gold)}
.ask__badge-l{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;
  margin-top:4px;color:var(--on-navy-mute)}

.ask h2{font-family:var(--display);font-size:clamp(38px,4.8vw,60px);line-height:.94;
  text-transform:uppercase;letter-spacing:1px;color:var(--navy);margin-top:6px}
.ask__sub{font-family:var(--script);font-size:clamp(28px,3.4vw,40px);color:var(--blue);
  line-height:1.1;margin-top:6px}
.ask__lead{margin-top:14px;font-size:17px;line-height:1.55;color:var(--ink-mute);max-width:52ch}
.ask .form--ask{margin-top:26px;background:transparent;border:0;padding:0;display:flex;
  flex-direction:column;gap:14px;box-shadow:none}
.ask .form--ask .field input,.ask .form--ask .field textarea{background:#fff;border-color:#0e23501f}
.ask .form__small{text-align:left;margin-top:2px}
.form__send{align-self:flex-start;margin-top:4px}

/* ---------- find us: contact, hours, map ---------- */
.visit{background:var(--navy-deep);color:var(--cream);padding:84px 0;position:relative}
.visit__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:stretch}
.visit h2{font-family:var(--display);font-size:clamp(38px,4.6vw,58px);line-height:.94;
  text-transform:uppercase;letter-spacing:1px;margin-top:8px}
.visit h2 span{color:var(--gold)}
.visit__lead{margin-top:16px;font-size:17px;line-height:1.55;color:var(--on-navy-mute);max-width:44ch}

.visit__rows{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:12px}
.vrow{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:14px;
  background:#ffffff0a;border:1px solid var(--rule)}
.vrow__icon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#f5b70e1f;color:var(--gold)}
.vrow__icon svg{width:20px;height:20px}
.vrow__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.vrow__label{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--on-navy-faint)}
.vrow__value{font-weight:700;font-size:16px;color:var(--cream);word-break:break-word}

.visit__cta{margin-top:18px}
.visit__cta .btn{border-radius:10px;padding:16px 30px}
.hours{margin-top:12px;padding:22px 20px;border-radius:14px;background:#ffffff0a;border:1px solid var(--rule)}
.hours__h{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.hours__list{list-style:none;margin-top:14px;display:flex;flex-direction:column}
.hours__list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-top:1px solid #ffffff12}
.hours__list li:first-child{border-top:0}
.hours__d{color:var(--on-navy-mute);font-size:15px}
.hours__t{font-weight:700;font-size:15px;color:var(--cream);font-variant-numeric:tabular-nums;white-space:nowrap}

.visit__map{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--rule);
  background:#132C6B;min-height:460px}
/* the iframe carries no intrinsic size, so it has to be stretched to the box.
   It stays transparent until home.js sees a load event, so a blocked embed
   shows the address panel underneath rather than a broken-page box. */
.visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.visit__fallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:28px}
.visit__map.is-loaded .visit__fallback{opacity:0;pointer-events:none}
.visit__fallback-pin{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:#f5b70e1f;color:var(--gold)}
.visit__fallback-pin svg{width:26px;height:26px}
.visit__fallback-addr{font-weight:700;font-size:17px;line-height:1.4;color:var(--cream)}
.visit__fallback-link{font-family:var(--display);font-size:15px;letter-spacing:1px;
  text-transform:uppercase;color:var(--gold);border-bottom:2px solid var(--gold);padding-bottom:2px}
.visit__badge{position:absolute;left:16px;bottom:16px;background:var(--gold);color:var(--navy);
  padding:10px 18px;border-radius:10px;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 6px 20px #0a1a3a5c}
.visit__badge-t{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.visit__badge-s{font-weight:800;font-size:15px}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep);color:var(--cream);padding:56px 0 40px}
.footer__top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px}
.footer__brand{max-width:300px}
.footer__brand img{height:58px;width:auto;display:block}
.footer__tag{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--on-navy-mute);margin-top:14px}
.footer__addr{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--on-navy-mute);margin-top:18px}
.footer__cols{display:flex;gap:52px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;flex-wrap:wrap}
.footer__col{display:flex;flex-direction:column;gap:10px}
.footer__col h3{color:var(--gold);font-family:var(--display);letter-spacing:1px;font-size:14px;font-weight:400}
.footer__bar{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;color:var(--on-navy-faint)}

/* ---------- memberships & bundles: home-page summary ---------- */
.memb{background:#fff;padding:80px 0;border-top:3px solid var(--navy)}
.memb .section-head{margin-bottom:14px}
.memb .section-head h2{font-size:clamp(38px,5.6vw,60px)}
.memb__lead{max-width:660px;margin:0 auto 40px;text-align:center;font-size:17px;line-height:1.6;font-weight:600;color:var(--ink-soft)}
.memb__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.mcard{background:var(--navy);color:var(--cream);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column}
.mcard__label{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--on-navy-mute)}
.mcard__k{font-family:var(--display);font-size:40px;line-height:1;color:var(--gold);margin-top:10px}
.mcard h3{font-family:var(--display);font-size:24px;text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
.mcard__desc{font-size:14px;line-height:1.6;font-weight:500;color:var(--on-navy);margin-top:12px}
.memb__cta{text-align:center;margin-top:34px}

/* ---------- memberships & bundles: detail page ---------- */
.phero{background:var(--navy);color:var(--cream);padding:72px 0 64px;position:relative;overflow:hidden}
.phero__mark{position:absolute;top:-26px;right:-46px;width:230px;opacity:.26;transform:rotate(10deg);pointer-events:none}
.phero .shell{position:relative;text-align:center}
.phero h1{font-family:var(--display);font-size:clamp(44px,7vw,76px);line-height:.9;text-transform:uppercase;letter-spacing:1px;margin-top:8px}
.phero h1 span{color:var(--gold)}
/* A margin-left between two inline buttons leaves the second one indented and
   flush against the first once they wrap; a flex row gaps both ways. */
.phero__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.phero__lead{max-width:640px;margin:20px auto 0;font-size:18px;line-height:1.6;font-weight:600;color:var(--on-navy)}
/* The date is the message, so it gets the gold and sits between the lead and
   the menu switch — above the prices rather than buried under them. Gold on
   navy measures 8.48:1.
   Square corners, not a pill: it sits directly above the Food/Drinks pills and
   a third rounded gold shape in that stack read as a button. It carries no
   link, so it must not look like one. The tinted fill and the wider gap below
   separate the announcement from the controls. */
.phero__notice{display:inline-block;margin:20px auto 4px;padding:10px 22px;border-radius:8px;
  border:2px solid var(--gold);background:rgba(245,183,14,.10);color:var(--gold);
  font-family:var(--heavy);font-size:15px;letter-spacing:.4px}
.phero__notice + .menu-switch{margin-top:26px}

.band{padding:76px 0}
.band--soft{background:var(--surface)}
.band--white{background:#fff}
.band .section-head{margin-bottom:36px}
.band .section-head h2{font-size:clamp(34px,4.8vw,52px)}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
/* A single season plan, not two: alone in a two-column grid the card sat in
   the left half with dead space beside it. Scoped to the wide layout on
   purpose — below 1081px .plans is already one column, and an unscoped :has()
   rule would outrank that (:has() carries its argument's specificity) and
   undo it. */
@media (min-width:1081px){
  .plans:has(.plan:only-child){grid-template-columns:minmax(0,620px);justify-content:center}
}
.plan{background:var(--navy);color:var(--cream);border-radius:20px;padding:34px 30px;border:2px solid var(--navy)}
.plan--feature{background:var(--navy-mid);border-color:var(--gold);box-shadow:0 20px 44px rgba(14,35,80,.22)}
.plan__season{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--gold)}
.plan h3{font-family:var(--display);font-size:30px;text-transform:uppercase;letter-spacing:.5px;margin-top:8px}
.plan__price{font-family:var(--display);font-size:46px;line-height:1;color:var(--gold);margin-top:14px}
.plan__total{font-weight:800;font-size:14px;color:var(--gold);margin-top:4px}
.plan__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:24px}
.plan__list li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;font-weight:500;color:var(--on-navy)}
.plan__list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold);font-weight:900}
.plan__list small{display:block;font-family:var(--mono);font-size:11px;color:var(--on-navy-mute);margin-top:3px}
.plan__swag{display:flex;align-items:center;gap:10px;margin-top:22px;font-weight:800;font-size:15px}
.plan__swag::before{content:"";width:16px;height:16px;border-radius:50%;border:4px solid var(--gold);flex:0 0 auto}
.plan__box{margin-top:16px;background:#0000002e;border-radius:12px;padding:16px 18px}
.plan__box strong{display:block;font-size:15px}
.plan__box span{font-size:14px;color:var(--on-navy)}
.plan__cta{display:inline-block;margin-top:22px;background:var(--gold);color:var(--navy);font-family:var(--display);font-size:16px;letter-spacing:1px;text-transform:uppercase;padding:14px 28px;border-radius:999px}
.plan__cta--closed{background:transparent;border:2px solid #ffffff3d;color:var(--on-navy-mute);cursor:default}
.plan__cta--closed:hover{opacity:1}

.credits{overflow-x:auto}
.credits table{width:100%;border-collapse:collapse;background:var(--navy);color:var(--cream);border-radius:18px;overflow:hidden;min-width:520px}
.credits__note{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--blue);text-align:center;margin-bottom:14px}
.credits th,.credits td{padding:18px 20px;text-align:center;border-bottom:1px solid #ffffff26}
.credits thead th{font-family:var(--display);font-size:20px;letter-spacing:1px;text-transform:uppercase;border-bottom:2px solid #ffffff40}
/* the bundle column reads as text, so its heading sits over the names, not centred in the column */
.credits th:first-child{text-align:left;width:42%}
.credits thead th:last-child{color:var(--gold)}
.credits tbody tr:last-child th,.credits tbody tr:last-child td{border-bottom:0}
.credits tbody th{text-align:left;font-weight:700;font-size:15px;line-height:1.4}
.credits tbody th small{display:block;font-weight:500;font-size:13px;color:var(--on-navy-mute);margin-top:3px}
.credits td{font-family:var(--display);font-size:30px;font-variant-numeric:tabular-nums}
.credits .was{color:var(--on-navy-mute)}
.credits .now{color:var(--gold)}

.progb{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
/* One bundle left, so the two-column track would strand it half-width against
   an empty column. Centre it at a readable measure instead. */
.progb:has(.prog:only-child){grid-template-columns:minmax(0,560px);justify-content:center}
.prog{background:var(--navy);color:var(--cream);border-radius:20px;padding:34px 30px}
.prog__icon{width:46px;height:46px;border-radius:12px;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:22px}
.prog h3{font-family:var(--display);font-size:26px;text-transform:uppercase;letter-spacing:.5px;margin-top:18px}
.prog__price{font-family:var(--display);font-size:42px;line-height:1;color:var(--gold);margin-top:8px}
.prog__list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.prog__list li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;font-weight:500;color:var(--on-navy)}
.prog__list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.prog__list strong{color:var(--cream)}
.prog__cta{display:inline-block;margin-top:22px;border:2px solid var(--cream);color:var(--cream);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px;padding:12px 24px;border-radius:999px}

.finecopy{max-width:760px;margin:34px auto 0;text-align:center;font-family:var(--mono);font-size:12px;line-height:1.8;color:var(--ink-mute)}
.band--soft .finecopy{color:var(--ink-mute)}

/* ---------- calendar: start-here pathway cards ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.path{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:420px;padding:40px 30px;border-radius:22px;overflow:hidden;color:#fff;
  background-color:var(--navy);background-size:cover;background-position:center;
  box-shadow:0 18px 40px rgba(14,35,80,.25)}
.path::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,35,80,.66) 0%,rgba(14,35,80,.86) 100%)}
.path > *{position:relative}
.path__who{font-family:var(--script);font-size:clamp(30px,3.4vw,42px);line-height:1.15;color:var(--gold)}
.path__h{font-family:var(--heavy);font-size:clamp(28px,3.2vw,40px);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}
.path__cta{margin-top:26px;background:#fff;color:var(--navy);font-weight:800;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;padding:14px 30px;border-radius:999px}
.path--beginners{background-image:image-set(url('/.netlify/images?url=/assets/start-beginners.jpg&w=700') 1x, url('/.netlify/images?url=/assets/start-beginners.jpg&w=1400') 2x)}
.path--social{background-image:image-set(url('/.netlify/images?url=/assets/start-social.jpg&w=700') 1x, url('/.netlify/images?url=/assets/start-social.jpg&w=1400') 2x)}
.path--competitive{background-image:image-set(url('/.netlify/images?url=/assets/start-competitive.jpg&w=700') 1x, url('/.netlify/images?url=/assets/start-competitive.jpg&w=1400') 2x)}

/* ---------- calendar: closing cross-sell ---------- */
.crosssell{background:var(--navy-deep);color:var(--cream);padding:64px 0}
.crosssell .shell{display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center}
.crosssell h2{font-family:var(--display);font-size:clamp(30px,3.6vw,44px);text-transform:uppercase;letter-spacing:1px}
.crosssell h2 span{color:var(--gold)}
.crosssell p{font-size:16px;line-height:1.6;font-weight:600;color:var(--on-navy);margin-top:12px;max-width:560px}
.crosssell__contact{font-family:var(--mono);font-size:12px;color:var(--on-navy-mute);margin-top:16px}

/* ---------- menus ---------- */
.menu-grid{columns:2;column-gap:52px}
/* Two columns suit the food list. The drinks list is one short section now, and
   in a two-column flow it stacked in the left half with the right half empty —
   so a lone section drops to one column and centres on its own measure. */
.menu-grid:has(.menu-sec:only-child){columns:1;max-width:620px;margin:0 auto}
/* 620px is a measure for a text list. Picture cards are two across inside it,
   so they need the room back. Both :has() conditions, because :has() takes the
   specificity of its argument — :has(.menu-sec:only-child) counts for two
   classes and outranks a bare :has(.menu-cards). */
.menu-grid:has(.menu-sec:only-child):has(.menu-cards){max-width:960px}
/* ---------- the event estimator ---------- */
.est{background:var(--navy-deep);color:var(--cream);padding:40px 0 80px;min-height:70vh}
.est__shell{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}

.est__progress{margin-bottom:26px}
.est__dots{list-style:none;display:flex;gap:6px 26px;flex-wrap:wrap;margin:0 0 12px;padding:0}
.est__dots li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--on-navy-faint)}
.est__dots li span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;border:1px solid var(--rule);font-size:11px}
.est__dots li.is-now{color:var(--gold)}
.est__dots li.is-now span{border-color:var(--gold);background:var(--gold);color:var(--navy);font-weight:700}
.est__dots li.is-done{color:var(--on-navy-mute)}
.est__dots li.is-done span{border-color:var(--on-navy-mute)}
.est__bar{height:5px;border-radius:3px;background:#ffffff1f;overflow:hidden}
.est__bar span{display:block;height:100%;width:25%;background:var(--gold);border-radius:3px;
  transition:width .3s ease}

.est__head h1{font-family:var(--display);font-size:clamp(34px,5vw,56px);line-height:.95;
  text-transform:uppercase;letter-spacing:1px;margin-top:6px}
.est__lead{font-size:16.5px;line-height:1.6;color:var(--on-navy-mute);margin-top:14px;max-width:56ch}

.est__step{border:0;padding:0;margin:34px 0 0;min-width:0}
.est__legend{font-family:var(--mono);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gold);padding:0}
.est__stepnote{font-size:15px;line-height:1.6;color:var(--on-navy-mute);margin-top:10px;max-width:60ch}

.efield{margin-top:28px;min-width:0}
.efield__h{font-family:var(--heavy);font-size:17px;letter-spacing:.2px;color:var(--cream);margin-bottom:12px}
.efield__h:focus{outline:3px solid var(--gold);outline-offset:4px}
.efield__lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--on-navy-mute);margin-bottom:7px}
.egrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}

.einput{width:100%;background:#ffffff0f;border:1px solid var(--rule);border-radius:10px;
  padding:14px 15px;color:var(--cream);font-family:var(--body);font-size:16px}
.einput::placeholder{color:var(--on-navy-faint)}
.einput:focus{outline:3px solid var(--gold);outline-offset:2px;border-color:transparent}
textarea.einput{resize:vertical;min-height:110px}

/* selectable tiles — the input stays in the layout for screen readers and
   keyboard focus, it is just visually collapsed */
.ecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ecard,.epill,.echip,.echk,.epkg{cursor:pointer}
.ecard input,.epill input,.echip input,.epkg input{position:absolute;opacity:0;width:1px;height:1px}
.ecard{display:flex;align-items:center;justify-content:center;text-align:center;min-height:76px;
  padding:16px 12px;background:#ffffff0d;border:1.5px solid var(--rule);border-radius:14px;
  font-family:var(--heavy);font-size:14.5px;letter-spacing:.3px;color:var(--on-navy)}
.ecard:has(input:checked){border-color:var(--gold);background:#f5b70e14;color:var(--cream)}
.ecard:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:3px}

.epills,.echips{display:flex;flex-wrap:wrap;gap:10px}
.epill{display:inline-flex;align-items:center;justify-content:center;min-width:88px;padding:14px 22px;
  background:#ffffff0d;border:1.5px solid var(--rule);border-radius:10px;
  font-family:var(--heavy);font-size:15px;color:var(--on-navy)}
.epill:has(input:checked){background:var(--gold);border-color:var(--gold);color:var(--navy)}
.epill:has(input:focus-visible),.echip:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:3px}
.echip{display:inline-flex;align-items:center;padding:13px 20px;border-radius:999px;
  background:#ffffff0d;border:1.5px solid var(--rule);font-size:14.5px;font-weight:700;color:var(--on-navy)}
.echip:has(input:checked){border-color:var(--gold);color:var(--gold)}

.echk{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#ffffff0d;
  border:1.5px solid var(--rule);border-radius:10px;font-size:15px;color:var(--on-navy);min-width:0}
.echk + .echk{margin-top:10px}
.echk input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--gold)}
.echk:has(input:checked){border-color:var(--gold);color:var(--cream)}
.echk--inline{margin-top:8px;background:none;border:0;padding:12px 0}

/* The stepper is a real control on a phone — both buttons and the field
   itself need a thumb-sized target, which an unstyled number input is not. */
.ecount{display:flex;align-items:stretch;background:#ffffff0d;border:1.5px solid var(--rule);
  border-radius:12px;overflow:hidden;max-width:260px}
.ecount__btn{flex:0 0 56px;background:#ffffff0d;border:0;color:var(--gold);
  font-size:24px;line-height:1;cursor:pointer;min-height:56px}
.ecount__btn:hover{background:#ffffff1a}
.ecount__btn:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.ecount__n{flex:1 1 auto;min-width:0;background:none;border:0;text-align:center;color:var(--cream);
  font-family:var(--display);font-size:26px;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield}
.ecount__n::-webkit-outer-spin-button,.ecount__n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ecount__n:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

.epkgs{display:flex;flex-direction:column;gap:12px}
.epkg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:20px 22px;background:#ffffff0d;border:1.5px solid var(--rule);border-radius:14px;position:relative}
.epkg:has(input:checked){border-color:var(--gold);background:#f5b70e14}
.epkg:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:3px}
.epkg__name{display:block;font-family:var(--heavy);font-size:17px;color:var(--cream)}
.epkg__desc{display:block;font-size:14px;color:var(--on-navy-mute);margin-top:4px}
.epkg__price{font-family:var(--display);font-size:24px;color:var(--gold);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.epkg__price small{font-family:var(--body);font-size:12px;font-weight:700;color:var(--on-navy-mute)}
.epkg--popular::before{content:"Most popular";position:absolute;top:-9px;left:20px;
  background:var(--gold);color:var(--navy);font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;padding:3px 9px;border-radius:4px}

/* venue picker: cards carry a line of description, so they need more room than
   the bare event-type cards and their own column counts */
.ecards--two{grid-template-columns:1fr 1fr}
.ecards--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ecards--two .ecard,.ecards--three .ecard{flex-direction:column;align-items:flex-start;
  text-align:left;padding:16px 18px;min-height:0}
.ecard small{display:block;font-family:var(--body);font-size:13px;font-weight:500;
  line-height:1.45;letter-spacing:0;text-transform:none;color:var(--on-navy-mute);margin-top:5px}
.ecard:has(input:checked) small{color:var(--on-navy)}
.efield__note{font-size:13px;line-height:1.55;color:var(--on-navy-faint);margin-top:11px}
@media (max-width:700px){
  .ecards--two,.ecards--three{grid-template-columns:1fr}
}

.eaddgs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
/* Spacing owned by the container, not by sibling adjacency. `.echk + .echk`
   left a 0px gap wherever anything that is not a .echk sat between two
   checkboxes, and the swag panel does exactly that — both when it is open and
   when it is hidden, since the element is still in the sibling order. */
.eaddg{display:flex;flex-direction:column;gap:10px}
.eaddg .eaddg__h{margin-bottom:0}
.eaddg .echk + .echk,
.eaddg .eswag{margin-top:0}

/* ---------- swag panel (the one priced add-on) ---------- */
/* Ships visible and collapses under the script, like the wizard itself: with
   JavaScript off every option is still reachable and still submits. */
.eswag{margin:10px 0 0;padding:20px 18px;border-radius:12px;
  background:#ffffff0a;border:1px solid var(--rule)}
.eswag__h{font-family:var(--display);font-size:18px;letter-spacing:1px;text-transform:uppercase;color:var(--cream)}
.eswag__note{font-size:13.5px;line-height:1.55;color:var(--on-navy-mute);margin-top:6px}
.eswag__rows{margin-top:14px}
.eswag__row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  background:#ffffff0d;border:1px solid var(--rule);cursor:pointer;color:var(--on-navy)}
.eswag__row + .eswag__row{margin-top:8px}
.eswag__row input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--gold)}
.eswag__name{flex:1 1 auto;font-size:15.5px;font-weight:600;min-width:0}
.eswag__row:has(input:checked){border-color:var(--gold);color:var(--cream)}
/* Custom Ink pay for this placement, so their mark sits on the white ground it
   was drawn for instead of taking its chances against navy. */
.eswag__by{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--rule)}
.eswag__by span{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--on-navy-faint)}
.eswag__by img{width:auto;height:50px;background:#fff;border-radius:9px;padding:9px 14px}

/* published swag prices on the private events page */
.swag__price{font-family:var(--display);font-size:22px;letter-spacing:1px;color:var(--navy);margin-top:12px}
.swag__price span{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-mute)}
.eaddg__h{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px}
.enote{margin-top:28px;padding:20px 22px;border:1px solid var(--rule);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;background:#ffffff08}
.enote__h{font-family:var(--heavy);font-size:15px;color:var(--cream);margin-bottom:6px}
.enote p{font-size:14.5px;line-height:1.6;color:var(--on-navy-mute)}

.ereview{padding:26px;background:#ffffff0d;border:1px solid var(--rule);border-radius:16px;margin-top:26px}
.ereview__list{margin-top:6px}
.ereview__list div{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.ereview__list dt{font-size:14.5px;color:var(--on-navy-mute)}
.ereview__list dd{font-family:var(--heavy);font-size:15px;color:var(--cream);text-align:right;
  font-variant-numeric:tabular-nums}
.ereview__total{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:18px}
.ereview__total span{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--on-navy-mute)}
.ereview__total strong{font-family:var(--display);font-size:38px;color:var(--gold);
  font-variant-numeric:tabular-nums}
.ereview__fine{font-size:12.5px;line-height:1.6;font-style:italic;color:var(--on-navy-faint);margin-top:12px}

.est__nav{display:flex;gap:12px;justify-content:space-between;margin-top:32px}
.est__nav .btn{flex:0 0 auto}
.btn--ghostnavy{background:transparent;border:2px solid var(--rule);color:var(--on-navy)}
.est__next{margin-left:auto}
.est__submit{width:100%;margin-top:26px}

/* ---- the sticky summary ---- */
.esum{position:sticky;top:86px}
.esum__inner{background:#ffffff0d;border:1px solid var(--rule);border-radius:18px;padding:26px 24px}
.esum__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.esum__top h2{font-family:var(--heavy);font-size:19px;color:var(--cream)}
.esum__tag{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);border-radius:5px;padding:3px 8px}
.esum__list{margin-top:18px}
.esum__list div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:10px 0}
.esum__list dt{font-size:14px;color:var(--on-navy-faint)}
.esum__list dd{font-family:var(--heavy);font-size:14.5px;color:var(--cream);text-align:right;
  font-variant-numeric:tabular-nums}
.esum__total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:16px;margin-top:8px;border-top:1px dashed var(--rule)}
.esum__total span{font-family:var(--heavy);font-size:14px;color:var(--cream)}
.esum__total strong{font-family:var(--display);font-size:34px;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1}
.esum__next{margin-top:20px;padding:18px;background:#ffffff08;border-radius:12px}
.esum__next-h{font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.esum__receive{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.esum__receive li{display:flex;flex-direction:column;gap:2px}
.esum__receive strong{font-size:13.5px;color:var(--cream)}
.esum__receive span{font-size:12.5px;line-height:1.5;color:var(--on-navy-faint)}
.esum__fine{font-family:var(--mono);font-size:11px;color:var(--on-navy-faint);margin-top:16px;text-align:center}
.esum__help{font-size:13px;color:var(--on-navy-mute);margin-top:12px;text-align:center}
.esum__help a{color:var(--gold)}

/* With no script every step is on the page at once, so give each one a rule
   to sit behind and hide the wizard chrome that would do nothing. */
.est__form:not(.is-wizard) .est__progress{display:none}
.est__form:not(.is-wizard) .est__step + .est__step{border-top:1px solid var(--rule);padding-top:30px}

@media (max-width:1080px){
  .est__shell{grid-template-columns:1fr;gap:28px}
  .esum{position:static;order:-1}
  .esum__next{display:none}
}
@media (max-width:700px){
  .ecards{grid-template-columns:1fr 1fr}
  .egrid,.eaddgs{grid-template-columns:1fr;gap:22px}
  .eswag{padding:16px 14px}
  .eswag__by img{height:44px}
  .epkg{grid-template-columns:1fr;gap:10px}
  .epkg__price{font-size:22px}
  .est__nav .btn{flex:1 1 0}
  .est__next{margin-left:0}
}

/* ---------- private events: the narrative sections ---------- */
.section-cta{text-align:center;margin-top:30px}

.acts{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.act{background:#fff;border:2px solid var(--navy);border-radius:18px;padding:28px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px}
.act__n{font-family:var(--display);font-size:32px;line-height:1;color:#0e235022;font-variant-numeric:tabular-nums}
.act__label{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--blue)}
.act h3{font-family:var(--display);font-size:27px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-top:4px}
.act p:last-child{font-size:15px;line-height:1.65;color:var(--ink-soft);margin-top:10px}

/* An ordered list because the run of show genuinely is a sequence. */
.roslist{list-style:none;margin:0 auto;padding:0;max-width:760px;display:flex;flex-direction:column}
.ros{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 24px;
  padding:20px 0;border-top:1px solid var(--rule)}
.ros:last-child{border-bottom:1px solid var(--rule)}
.ros__when{font-family:var(--mono);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.ros h3{font-family:var(--heavy);font-size:17px;letter-spacing:.2px;color:var(--cream)}
.ros p{font-size:14.5px;line-height:1.6;color:var(--on-navy-mute);margin-top:5px}

.smenus{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.smenu{background:var(--surface);border-radius:18px;padding:28px 26px;border-top:4px solid var(--gold)}
.smenu h3{font-family:var(--display);font-size:26px;letter-spacing:1px;text-transform:uppercase;color:var(--navy)}
.smenu__when{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink-mute);margin-top:3px}
.smenu__group{font-family:var(--heavy);font-size:13px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--blue);margin-top:20px}
.smenu__list{list-style:none;margin-top:8px;padding:0}
.smenu__list li{font-size:15px;line-height:1.5;color:var(--ink-soft);padding:5px 0 5px 16px;position:relative}
.smenu__list li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}

.drinksband{background:var(--blue);color:var(--cream);padding:72px 0;position:relative}
.drinksband .shell{max-width:760px;text-align:center}
.drinksband h2{font-family:var(--display);font-size:clamp(38px,5.4vw,62px);line-height:.92;
  text-transform:uppercase;letter-spacing:1px;margin-top:6px}
.drinksband h2 span{color:var(--gold)}
.drinksband__body{font-size:17px;line-height:1.65;font-weight:600;color:var(--on-navy);margin-top:20px}
.drinksband__note{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--on-navy-mute);margin-top:18px}

.spcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.spc{background:#fff;border-radius:16px;padding:26px 24px;border-bottom:4px solid var(--blue)}
.spc h3{font-family:var(--display);font-size:23px;letter-spacing:1px;text-transform:uppercase;color:var(--navy)}
.spc p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:10px}

.swags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.swag{background:#fff;border:2px solid var(--navy);border-radius:16px;padding:26px 24px}
.swag__n{font-family:var(--display);font-size:26px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.swag h3{font-family:var(--display);font-size:22px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-top:6px}
.swag p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:8px}

.prosband{max-width:760px;margin:0 auto;text-align:center}
.prosband__body{font-size:17px;line-height:1.7;font-weight:600;color:var(--on-navy)}
.prosband__note{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--on-navy-mute);margin-top:18px}

@media (max-width:860px){
  .acts{grid-template-columns:1fr}
  .smenus{grid-template-columns:1fr}
  .spcs,.swags{grid-template-columns:1fr}
}
@media (max-width:520px){
  .act{grid-template-columns:1fr;gap:6px;padding:22px 20px}
  .ros{grid-template-columns:1fr;gap:6px}
}

/* ---------- pickleball page ---------- */
.band--navy{background:var(--navy);color:var(--cream)}
.band--navy .section-head h2{color:var(--cream)}
.section-head__lead{font-size:16px;line-height:1.6;font-weight:600;color:var(--ink-soft);
  max-width:58ch;margin:12px auto 0}
.band--navy .section-head__lead{color:var(--on-navy)}

/* Programs, scoped to .progs on purpose: the
   membership bundle cards already own a bare .prog, and because this block
   comes later in the file an unscoped rule here silently overrode their navy
   background while leaving the cream text written for it — unreadable.
   Numbered because they are three ways in, not a ranking. */
.progs{display:flex;flex-direction:column;gap:16px;max-width:860px;margin:0 auto}
.progs .prog{background:#fff;border:2px solid var(--navy);border-radius:16px;padding:26px 28px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 22px;scroll-margin-top:90px}
.progs .prog__n{font-family:var(--display);font-size:34px;line-height:1;color:#0e235026;
  font-variant-numeric:tabular-nums}
.progs .prog__body{min-width:0}
.progs .prog h3{font-family:var(--display);font-size:28px;letter-spacing:1px;text-transform:uppercase;color:var(--navy)}
.progs .prog__lead{font-family:var(--heavy);font-size:15px;letter-spacing:.3px;color:var(--blue);margin-top:4px}
.progs .prog__text{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin-top:10px;max-width:60ch}
.progs .prog__cta{display:inline-block;margin-top:14px;font-family:var(--display);font-size:15px;
  letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
/* Several events under one programme: outlined buttons for the ones with a
   page, and a plain line for the ones that do not have one yet. */
.progs .prog__btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.progs .prog__btn{font-family:var(--display);font-size:14px;letter-spacing:1px;text-transform:uppercase;
  color:var(--blue);border:2px solid #0e235033;border-radius:999px;padding:10px 18px}
.progs .prog__btn:hover{border-color:var(--navy);opacity:1}
.progs .prog__info{font-size:14px;color:var(--ink-mute);padding:10px 4px}
.progs .prog__info b{font-family:var(--display);font-size:14px;letter-spacing:1px;
  text-transform:uppercase;font-weight:400;color:var(--navy);margin-right:6px}

.coaches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* The padding moved to .coach__body so the headshot can run edge to edge;
   overflow:hidden is what keeps it inside the rounded corner. */
.coach{background:var(--surface);border-radius:16px;overflow:hidden;display:flex;
  flex-direction:column;border-bottom:4px solid var(--gold)}
/* One aspect for three photos shot at 0.67, 0.67 and 0.87 — cover crops each to
   match. All three are centred headshots, so the faces survive a centre crop;
   a coach whose does not can carry a `focus` in pickleball.json. */
.coach__photo{background:var(--navy-deep)}
.coach__photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.coach__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.coach__name{font-family:var(--display);font-size:26px;letter-spacing:1px;text-transform:uppercase;color:var(--navy)}
.coach__spec{font-size:14.5px;line-height:1.6;color:var(--ink-soft);flex:1 1 auto}
.coach__spec span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:3px}
.coach__cta{font-family:var(--display);font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--blue)}

.faqs{display:flex;flex-direction:column;gap:22px;max-width:70ch;margin:0 auto}
.faq{border-left:3px solid var(--gold);padding-left:20px}
.faq__q{font-family:var(--heavy);font-size:17px;letter-spacing:.2px;color:var(--navy);margin-bottom:8px}
.faq p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:64ch}
.faq p + p{margin-top:8px}

.etqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.etq{background:#ffffff0f;border:1px solid var(--rule);border-radius:16px;padding:24px;min-width:0}
.etq__n{font-family:var(--display);font-size:30px;line-height:1;color:var(--gold)}
.etq h3{font-family:var(--heavy);font-size:16px;letter-spacing:.2px;margin-top:8px}
.etq p{font-size:14.5px;line-height:1.65;color:var(--on-navy-mute);margin-top:8px}

@media (max-width:860px){
  .coaches{grid-template-columns:1fr 1fr}
  .etqs{grid-template-columns:1fr}
}
@media (max-width:520px){
  .coaches{grid-template-columns:1fr}
  .progs .prog{grid-template-columns:1fr;gap:6px;padding:22px 20px}
  .progs .prog__n{font-size:26px}
}

/* A slimmer Find Us: one column rather than the two-column map layout. */
.visit--slim{padding:72px 0}
.visit--slim .shell{max-width:640px}
.visit--slim h2{text-align:left}

/* ---------- legal pages (privacy, terms) ---------- */
/* Long-form prose, so the measure is tighter than the rest of the site and the
   numbered headings carry the structure rather than any decoration. */
.phero--slim{padding:56px 0 48px}
.phero--slim h1{font-size:clamp(34px,5.6vw,56px)}
.legal{max-width:70ch;margin:0 auto;color:var(--ink-soft)}
.legal__meta{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink-mute);padding-bottom:14px;border-bottom:2px solid #0e235022;margin-bottom:26px}
.legal__intro{font-size:16.5px;line-height:1.7;font-weight:500}
.legal__intro + .legal__intro{margin-top:14px}
.legal h2{font-family:var(--heavy);font-size:20px;letter-spacing:.3px;color:var(--navy);
  margin-top:38px;margin-bottom:10px}
.legal h3{font-family:var(--body);font-weight:800;font-size:15.5px;letter-spacing:.2px;
  text-transform:uppercase;color:var(--blue);margin-top:24px;margin-bottom:8px}
.legal p{font-size:15.5px;line-height:1.7}
.legal p + p{margin-top:12px}
.legal ul{margin:10px 0 0;padding-left:22px}
.legal li{font-size:15.5px;line-height:1.65;margin-bottom:6px}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.legal__contact{font-style:normal;font-size:15.5px;line-height:1.8;margin-top:14px;
  padding:18px 20px;background:#fff;border-left:3px solid var(--gold);border-radius:0 8px 8px 0}
.legal__foot{margin-top:34px;padding-top:20px;border-top:2px solid #0e235022;
  font-size:14.5px;color:var(--ink-mute)}
/* Unfilled legal blanks. Loud on purpose — these must not go unnoticed. */
.legal mark.todo{background:#FFE9A8;color:#7A5200;font-weight:800;padding:1px 6px;
  border-radius:4px;border:1px dashed #C79A16}

.menu-sec{break-inside:avoid;margin-bottom:38px}
/* a section is never split across the column break — a reader must not meet
   dishes at the top of a column with no heading above them. The cost is an
   uneven column bottom, which is how printed menus set anyway. */
.menu-sec h2{break-after:avoid}
.menu-group{break-after:avoid}
.menu-item{break-inside:avoid}
.menu-sec h2{font-family:var(--display);font-size:30px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);
  padding-bottom:8px;border-bottom:3px solid var(--navy)}
.menu-sec__lead{font-family:var(--heavy);font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);margin-top:12px}
.menu-sec__foot{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--blue);margin-top:14px}
.menu-group{font-family:var(--display);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);
  background:var(--gold);border-radius:999px;padding:4px 14px;display:inline-block;margin-top:18px}
.menu-list{list-style:none;margin-top:14px}
.menu-item + .menu-item{margin-top:14px}
/* One signature plate per menu gets a tinted card so it reads first. */
.menu-item--featured{background:#fff;border:1.5px solid var(--gold);border-radius:10px;padding:12px 14px 13px;margin-top:18px}
.menu-item--featured + .menu-item{margin-top:18px}
.menu-item__flag{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:#8A6314;margin-bottom:6px}
.menu-item__top{display:flex;align-items:baseline;gap:8px}
.menu-item__name{font-weight:800;font-size:15px;letter-spacing:.3px;text-transform:uppercase;color:var(--navy)}
.menu-item__dots{flex:1 1 auto;min-width:18px;border-bottom:2px dotted #0e235055;transform:translateY(-4px)}
.menu-item__price{font-family:var(--display);font-size:19px;color:var(--blue);font-variant-numeric:tabular-nums;flex:0 0 auto}
.menu-item__desc{font-size:14px;line-height:1.5;font-weight:500;color:var(--ink-soft);margin-top:2px;max-width:52ch}
.menu-item__note{font-size:12.5px;line-height:1.5;font-style:italic;color:var(--ink-mute);margin-top:4px;max-width:52ch}
.menu-names{list-style:none;margin-top:14px;columns:2;column-gap:26px}
.menu-names li{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.3px;color:var(--navy);
  break-inside:avoid;margin-bottom:8px}

.diet{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.5px;
  vertical-align:middle;position:relative;top:-1px}
.diet--veg{background:#5F9B3A;color:#fff}
.diet--vegan{background:var(--surface);color:#2F5B1E;border:1px solid #5F9B3A}
.diet--gf{background:#C08552;color:#fff}
.diet--gfa{background:var(--surface);color:#8A5A28;border:1px solid #C08552}
.diet--ht{background:#fff;color:#5F9B3A;border:1.5px solid #5F9B3A}
.menu-raw{color:var(--gold);font-weight:900}

.legend{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:8px}
.legend__item{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:1px;text-transform:uppercase;color:var(--ink-mute)}
.menu-notes{max-width:760px;margin:22px auto 0;text-align:center}
.menu-notes p{font-size:13px;line-height:1.7;color:var(--ink-mute)}
.menu-notes p + p{margin-top:8px}
.menu-switch{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.menu-switch a{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px;padding:12px 24px;
  border-radius:999px;border:2px solid #ffffff5c;color:var(--cream)}
.menu-switch a[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* ---------- private events: packages ---------- */
.pkgs{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pkgcard{min-width:0;background:#fff;border:3px solid var(--navy);border-radius:20px;padding:32px 30px;
  box-shadow:0 16px 40px rgba(14,35,80,.10)}
.pkgcard h3{font-family:var(--display);font-size:30px;letter-spacing:1px;text-transform:uppercase;color:var(--navy)}
.pkgcard__lead{font-size:15px;font-weight:600;color:var(--ink-soft);margin-top:8px}
.pkgcard__list{list-style:none;margin-top:20px}
.pkgcard__list li{display:flex;align-items:baseline;gap:8px;padding:11px 0;border-bottom:2px dashed #0e235033}
.pkgcard__list li:last-child{border-bottom:0}
.pkgcard__name{font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.3px;color:var(--navy)}
.pkgcard__name small{display:block;font-weight:600;font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink-mute);margin-top:2px}
.pkgcard__dots{flex:1 1 auto;min-width:14px;border-bottom:2px dotted #0e235055;transform:translateY(-4px)}
.pkgcard__price{font-family:var(--display);font-size:19px;color:var(--blue);white-space:nowrap;flex:0 0 auto}
.pkgcard__note{font-size:13.5px;line-height:1.6;font-weight:500;color:var(--ink-mute);margin-top:18px}

.upgrades{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:28px}
.upgrade{background:var(--navy);color:var(--cream);border-radius:18px;padding:26px 28px}
.upgrade h3{font-family:var(--display);font-size:20px;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.upgrade p{font-size:14.5px;line-height:1.6;font-weight:500;color:var(--on-navy);margin-top:10px}

.pkgshots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.pkgshots div{aspect-ratio:3/2;border-radius:16px;background-color:var(--navy);background-size:cover;
  background-position:center;box-shadow:0 12px 30px rgba(14,35,80,.14)}
.pkgshots div:nth-child(1){background-image:image-set(url('/.netlify/images?url=/assets/pkg-1.jpg&w=700') 1x, url('/.netlify/images?url=/assets/pkg-1.jpg&w=1400') 2x)}
.pkgshots div:nth-child(2){background-image:image-set(url('/.netlify/images?url=/assets/pkg-2.jpg&w=700') 1x, url('/.netlify/images?url=/assets/pkg-2.jpg&w=1400') 2x)}
.pkgshots div:nth-child(3){background-image:image-set(url('/.netlify/images?url=/assets/pkg-3.jpg&w=700') 1x, url('/.netlify/images?url=/assets/pkg-3.jpg&w=1400') 2x)}

/* ---------- private events: venue ---------- */
.venue{background:#fff;padding:76px 0}
.venue .shell{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.venue__img{border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--navy) image-set(url('/.netlify/images?url=/assets/event-venue.jpg&w=1000') 1x, url('/.netlify/images?url=/assets/event-venue.jpg&w=2000') 2x) center/cover;
  box-shadow:0 20px 44px rgba(14,35,80,.22)}
.venue h2{font-family:var(--display);font-size:clamp(32px,4.4vw,52px);line-height:1;text-transform:uppercase;
  letter-spacing:1px;color:var(--navy)}
.venue h2 span{color:var(--gold)}
.venue__body{font-size:16px;line-height:1.7;font-weight:500;color:var(--ink-soft);margin-top:18px}
.venue__features{list-style:none;background:var(--surface);border-radius:16px;padding:22px 26px;margin-top:24px}
.venue__features li{position:relative;padding-left:22px;font-weight:800;font-size:15px;color:var(--navy)}
.venue__features li + li{margin-top:10px}
.venue__features li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.venue__cta{margin-top:24px}

/* ---------- private events: enhancements ---------- */
.enhs{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.enh{min-width:0;background:var(--blue);color:#fff;border-radius:22px;padding:34px 32px;box-shadow:0 16px 38px rgba(14,35,80,.2)}
.enh__script{font-family:var(--script);font-size:34px;line-height:1;color:var(--gold)}
.enh h3{font-family:var(--heavy);font-size:30px;letter-spacing:.5px;margin-top:2px}
.enh__list{list-style:none;margin-top:22px}
.enh__list li{position:relative;padding-left:26px;font-weight:800;font-size:14.5px;text-transform:uppercase;letter-spacing:.4px}
.enh__list li + li{margin-top:13px}
.enh__list li::before{content:"\2713";position:absolute;left:0;top:0;color:#fff;font-weight:900}
.enh__note{font-size:13px;font-style:italic;color:#ffffffcf;margin-top:20px}

/* ---------- private events: inquiry form ---------- */
.inquiry{background:var(--surface);padding:76px 0}
.inquiry .shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.inquiry h2{font-family:var(--display);font-size:clamp(32px,4.4vw,52px);text-transform:uppercase;letter-spacing:1px;color:var(--navy)}
.inquiry h2 span{color:var(--gold)}
.inquiry__lead{font-size:17px;line-height:1.6;font-weight:600;color:var(--ink-soft);margin-top:14px}
.inquiry__img{margin-top:26px;border-radius:20px;overflow:hidden;aspect-ratio:16/10;
  background:var(--navy) image-set(url('/.netlify/images?url=/assets/event-inquiry.jpg&w=800') 1x, url('/.netlify/images?url=/assets/event-inquiry.jpg&w=1600') 2x) center/cover}
.form{background:#fff;border:3px solid var(--navy);border-radius:22px;padding:32px 30px;
  box-shadow:0 18px 44px rgba(14,35,80,.12)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field--wide{grid-column:1 / -1}
.field label{font-weight:800;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--navy)}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--surface);border:2px solid transparent;border-radius:10px;padding:12px 14px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.form__submit{margin-top:22px}
.form__submit button{width:100%;background:var(--gold);color:var(--navy);font-family:var(--display);font-size:18px;
  letter-spacing:1px;text-transform:uppercase;padding:16px 30px;border:0;border-radius:999px;cursor:pointer}
.form__submit button:hover{opacity:.9}
.form__small{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-mute);margin-top:14px;text-align:center}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp input{width:1px}

/* ---------- responsive (additions; source design has none) ---------- */
@media (max-width:1080px){
  .events__grid{grid-template-columns:1fr}
  .pkg--feature{margin-top:13px}
  .eat__body{padding:56px 40px}
}
@media (max-width:1080px){
  .memb__grid{grid-template-columns:1fr}
  .paths{grid-template-columns:1fr 1fr}
  .crosssell .shell{grid-template-columns:1fr}
  .venue .shell{grid-template-columns:1fr}
  .inquiry .shell{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--pad:22px}
  .menu-grid{columns:1}
  .pkgs{grid-template-columns:1fr}
  .pkgshots{grid-template-columns:1fr 1fr}
  .upgrades{grid-template-columns:1fr}
  .enhs{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .progb{grid-template-columns:1fr}
  .plan__list{grid-template-columns:1fr}
  .paths{grid-template-columns:1fr}
  .path{min-height:320px}
  .phero__mark{width:150px;top:-14px;right:-36px;opacity:.20}
  .sched__cta{padding:14px 20px}
  .footer__col a{padding:13px 0}
  .crosssell__contact a,.events__contact a,.footer__addr a{display:inline-block;padding:13px 0}
  .footer__bar a{display:inline-block;padding:13px 0}
  .playing__more a,.reviews__more a{display:inline-block;padding:12px 18px}
  .visit__fallback-link{display:inline-block;padding:12px 8px}
  /* Each sits on its own line in the contact block, so it can take real
     padding. The inline links inside legal prose deliberately do not. */
  .legal__contact{line-height:2.4}
  .legal__contact a{display:inline-block;padding:9px 0}
  .coach__cta,.progs .prog__cta{padding:11px 0}
  .menu-switch a{padding:14px 26px}
  /* 11px captions are hard going on a phone */
  .mcard__label,.price__m,.plan__list small,.footer__bar,.legend__item,.menu-item__note,
  .smenu__when,.esum__fine{font-size:12px}
  /* .hero is a flex row; making the stats static turned them into a second
     flex item beside the copy, which pushed them off-screen. Stack instead. */
  .hero{min-height:0;flex-direction:column;align-items:stretch}
  .hero__inner{padding-top:48px;padding-bottom:48px}
  .hero__stats{position:static;width:100%}
  /* Four stats across a phone leave one stranded alone on a second row; 2x2
     fills both rows evenly. */
  .hero__stats .shell{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
  /* 4px tracking pushed "OPEN 7 DAYS" onto a second line for one orphaned word */
  .hero__eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:14px}
  /* Stacked, the row reads time, then title with the button beside it. The
     old order put the button next to the time, which only works while the time
     is short: a long one filled the line and pushed the button onto its own,
     where space-between left-aligned it. Half the buttons sat right and half
     sat left. Giving the time the whole line makes every button land the
     same way. */
  .sched__row{flex-wrap:wrap;gap:12px}
  .sched__when{width:auto;flex:1 1 100%;order:1}
  .calchip{font-size:13px;padding:8px 13px}
  /* basis 0, not auto: flex breaks lines on the hypothetical size, so a title
     wider than the space left beside the button displaced the button onto its
     own line instead of wrapping. Starting from zero keeps the two on one line
     and lets the title wrap inside its own column. */
  .sched__what{flex:1 1 0;min-width:0;order:2}
  /* margin-left:auto, not space-between, because the button has to land on the
     same edge whether it fits beside the title or gets pushed onto its own
     line. space-between only right-aligns it in the first case: alone on a
     line it is the sole item, so it falls back to the start edge. */
  .sched__cta{order:3;margin-left:auto}
  .eat{grid-template-columns:1fr}
  .eat__img{min-height:300px}
  .eat__body{padding:48px 22px}
  .spaces__grid{grid-template-columns:1fr}
  .pricing__grid{grid-template-columns:1fr 1fr}
  .visit{padding:56px 0}
  .visit__grid{grid-template-columns:1fr;gap:32px}
  .ask{padding:56px 0}
  .ask__grid{grid-template-columns:1fr;gap:40px}
  .ask__media{max-width:420px}
  .ask__badge{right:0}
  .form__send{align-self:stretch;text-align:center}
  .visit__map{aspect-ratio:1/1;min-height:0}
  .footer__cols{gap:32px}
}
@media (max-width:860px){
  /* decorative V watermarks collide with headings at narrow widths */
  .playing__mark{width:110px;top:-4px;right:-30px;opacity:.12}
  .events__mark{width:130px;bottom:-24px;left:-40px;opacity:.24}
  /* iOS Safari zooms the viewport when a focused control is under 16px, and the
     user has to pinch back out after every field. */
  .field input,.field select,.field textarea{font-size:16px}
  /* the base min-width leaves a few px of hidden scroll in the 521-860 band */
  .credits table{min-width:0}
  .credits th,.credits td{padding:14px 10px}
  .credits td{font-size:26px}
  /* stack contact links instead of stranding the bullet separators */
  .crosssell__contact a,.events__contact a{display:block;width:fit-content}
  .crosssell__contact,.events__contact{line-height:1.2}
  .sep{display:none}
}
@media (max-width:520px){
  /* Below ~500px the centred contact line reaches far enough left that this
     watermark's ball head lands on the email address. Sliding it out leaves a
     sliver that reads as an artifact, so drop it like .playing__mark. */
  .playing__mark,.events__mark{display:none}
  .menu-names{columns:1}
  .form__grid{grid-template-columns:1fr}
  .pkgshots{grid-template-columns:1fr}
  .menu-sec h2{font-size:26px}
  /* min-width parked the third column — the discounted price, and the whole
     point of the table — off-screen behind a scroll nobody sees. Tighten the
     cells instead so all three columns fit a phone. */
  .credits table{min-width:0}
  .credits th,.credits td{padding:12px 6px}
  .credits th:first-child{width:46%}
  .credits thead th{font-size:14px;letter-spacing:.5px}
  .credits td{font-size:20px}
  .credits tbody th{font-size:13px}
  .credits tbody th small{font-size:12px}
  .space__list{grid-template-columns:1fr}
  /* the price is nowrap and the name only breaks on spaces, so on the very
     narrowest phones let the row wrap rather than push past the card edge */
  .pkgcard{padding:24px 18px}
  .enh{padding:26px 20px}
  .pkgcard__list li{flex-wrap:wrap}
  .pricing__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .price{padding:18px 16px}
  .price__n{font-size:28px}
  .phero__actions{flex-direction:column;align-items:stretch}
  .phero__actions .btn{text-align:center}
  .footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
}

/* A phone was pulling the desktop-sized file for the three full-bleed
   backgrounds — the hero alone cost 153 KB on a screen that needs 58. The
   build maps "@mobile" to a narrower width; this breakpoint must stay in step
   with the imagesizes on the hero preload in build.js. */
@media (max-width:700px){
  .hero__photo{background-image:image-set(url('/.netlify/images?url=/assets/hero-team.jpg&w=430') 1x, url('/.netlify/images?url=/assets/hero-team.jpg&w=860') 2x)}
  .community{background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.70) 5%,rgba(255,255,255,0) 20%),linear-gradient(0deg,rgba(10,26,58,.94) 0%,rgba(10,26,58,.35) 45%,rgba(10,26,58,.1) 100%),image-set(url('/.netlify/images?url=/assets/community-champs.jpg&w=600') 1x, url('/.netlify/images?url=/assets/community-champs.jpg&w=1200') 2x)}
  .space__img--outdoor{background-image:image-set(url('/.netlify/images?url=/assets/community-champs.jpg&w=600') 1x, url('/.netlify/images?url=/assets/community-champs.jpg&w=1200') 2x)}
  .eat__img{background-image:image-set(url('/.netlify/images?url=/assets/social-beers.jpg&w=500') 1x, url('/.netlify/images?url=/assets/social-beers.jpg&w=1000') 2x)}
  .partners{padding:56px 0}
  .plogos{gap:14px 26px}
  .plogo{width:130px;height:62px}
  /* One per row on a phone. Side by side these fell to ~134px wide, which
     turned the Intrasystems tagline into a grey smear. */
  .plogos--few{gap:18px 34px}
  .plogos--few .plogo{width:min(250px,74vw);height:92px}
  .plogo--word .plogo__word{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track,.reviews__track{animation:none}
  /* a frozen strip would strand every card past the first screenful */
  .reviews__viewport{overflow-x:auto}
  .reviews__track{width:auto}
  .reviews__set:not(:first-child){display:none}
  .reviews__set{padding-left:var(--pad)}
  .reviews__hint{display:none}
  .plogo__link{transition:none}
}


/* ================= private events (2026 sales kit) ================= */
/* The one page that runs navy end to end, so it sets its own ground rather
   than sitting on --surface like every other light page. */
.pe{background:var(--navy-deep)}

/* --- step nav --- */
.pehero__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  padding:16px var(--pad);position:relative;z-index:2}
.pehero__nav--inline{padding-top:0;padding-bottom:26px}
.pestep{font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--on-navy-faint);padding:7px 13px;border-radius:999px}
.pestep b{color:var(--on-navy-mute);font-weight:400}
.pestep--on{background:var(--gold);color:var(--navy)}
.pestep--on b{color:var(--navy);font-weight:700}

/* --- hero --- */
.pehero{position:relative;padding-bottom:34px;
  background-image:linear-gradient(180deg,rgba(10,26,58,.72) 0%,rgba(10,26,58,.55) 45%,rgba(10,26,58,.9) 100%),image-set(url('/.netlify/images?url=/assets/block-party.jpg&w=820') 1x, url('/.netlify/images?url=/assets/block-party.jpg&w=1640') 2x);
  background-size:cover;background-position:center 42%;background-color:var(--navy-deep)}
.pehero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;padding-top:26px}
.pehero__copy h1{font-family:var(--display);font-size:clamp(40px,6.2vw,74px);line-height:.9;
  text-transform:uppercase;color:var(--cream);margin-top:10px;
  text-shadow:0 3px 26px rgba(10,26,58,.85)}
.pehero__copy h1 span{display:block;color:var(--gold)}
.pehero__copy .eyebrow{text-shadow:0 2px 14px rgba(10,26,58,.9)}
.pepillars{display:flex;flex-direction:column;gap:14px}
.pepillar{background:rgba(14,35,80,.86);border:1px solid #ffffff1f;border-radius:14px;padding:18px 22px}
.pepillar h3{font-family:var(--display);font-size:20px;letter-spacing:.5px;text-transform:uppercase}
.pepillar p{font-size:14.5px;line-height:1.5;color:var(--on-navy);margin-top:5px}
.pepillar--gold h3{color:var(--gold)}
.pepillar--blue h3{color:var(--blue-soft)}
.pepillar--green h3{color:var(--green)}
.pehero__foot{margin-top:38px}
.pehero__lead{max-width:820px;font-size:17px;line-height:1.6;font-weight:600;color:var(--cream);
  background:rgba(10,26,58,.72);border-radius:12px;padding:16px 20px}
.pestats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.pestat{display:flex;align-items:baseline;gap:9px;background:rgba(14,35,80,.72);
  border:1px solid #ffffff1a;border-radius:12px;padding:14px 18px}
.pestat__n{font-family:var(--display);font-size:30px;line-height:1}
.pestat__n--gold{color:var(--gold)}
.pestat__n--blue{color:var(--blue-soft)}
.pestat__n--green{color:var(--green)}
.pestat__l{font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;color:var(--on-navy-mute)}

/* --- four steps --- */
.peplan{padding:64px 0 70px}
.peplan__kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--blue-soft)}
.peflag{background:var(--gold);color:var(--navy);font-family:var(--display);font-size:13px;
  letter-spacing:1px;padding:6px 15px;border-radius:999px}
.peplan h2{font-family:var(--display);font-size:clamp(38px,5.6vw,64px);line-height:.92;
  text-transform:uppercase;color:var(--cream);margin-top:12px}
.peplan h2 span{color:var(--gold)}
.peplan__lead{max-width:760px;font-size:16.5px;line-height:1.6;color:var(--on-navy);margin-top:14px}
.pecards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px}
.pecard{position:relative;overflow:hidden;background:var(--navy);border:1px solid #ffffff1f;
  border-radius:14px;padding:20px 22px 24px;min-height:118px}
.pecard__n{position:absolute;top:8px;right:16px;font-family:var(--display);font-size:52px;
  line-height:1;color:#ffffff1a}
.pecard__label{font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--on-navy-mute)}
.pecard h3{font-family:var(--display);font-size:22px;line-height:1.02;letter-spacing:.5px;
  text-transform:uppercase;color:var(--cream);margin-top:6px;max-width:80%}
.pecard--on{background:var(--gold);border-color:var(--gold)}
.pecard--on .pecard__n{color:#0e235026}
.pecard--on .pecard__label{color:#0e235099}
.pecard--on h3{color:var(--navy)}
.peperfect{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:36px}
.peperfect__label{font-family:var(--display);font-size:14px;letter-spacing:1px;
  text-transform:uppercase;color:var(--gold);margin-right:6px}
.peperfect__list{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.peperfect__list li{font-size:14px;font-weight:700;color:var(--cream);
  border:1px solid #ffffff33;border-radius:999px;padding:9px 17px}

/* --- gold call-to-action band --- */
.peband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 26px;
  background:var(--gold);border-radius:16px;padding:24px 28px;margin-top:46px}
/* .peplan h2 is one class + one element, so it outranked a bare .peband__h and
   this heading came out cream at 64px on a gold band. */
.peplan .peband__h{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.02;
  text-transform:uppercase;color:var(--navy);margin-top:0;flex:1 1 300px;max-width:430px}
.peband__note{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:#0e2350c4}
.peband__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.peband__alt{font-family:var(--display);font-size:15px;letter-spacing:1px;text-transform:uppercase;
  color:var(--navy);border-bottom:2px solid #0e235066;padding-bottom:2px}

/* --- food tiers --- */
.pefood{padding:64px 0 70px;background:var(--navy)}
.pefood__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px}
.pefood h2,.pedrinks h2,.peextras h2{font-family:var(--display);font-size:clamp(36px,5.4vw,60px);
  line-height:.94;text-transform:uppercase;color:var(--cream);margin-top:8px}
.pefood h2 span,.pedrinks h2 span,.peextras h2 span{color:var(--gold)}
.pefood__lead,.pedrinks__lead{max-width:700px;font-size:16px;line-height:1.6;color:var(--on-navy);margin-top:12px}
.pebadge{flex:0 0 auto;background:var(--green);color:var(--navy);font-weight:800;font-size:14px;
  border-radius:999px;padding:11px 20px}
.petiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.petier{position:relative;min-width:0;background:var(--navy-mid);border:1px solid #ffffff1f;
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.petier--popular{border:2px solid var(--gold)}
.petier__flag{position:absolute;top:14px;right:14px;z-index:1;background:var(--gold);color:var(--navy);
  font-family:var(--display);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  padding:6px 14px;border-radius:999px}
.petier__img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.petier__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.petier h3{font-family:var(--display);font-size:24px;letter-spacing:.5px;text-transform:uppercase;color:var(--cream)}
.petier__desc{font-size:14.5px;line-height:1.55;color:var(--on-navy-mute);margin-top:8px;flex:1 1 auto}
.petier__price{margin-top:22px}
.petier__n{font-family:var(--display);font-size:46px;line-height:1}
.petier__n--gold{color:var(--gold)}
.petier__n--blue{color:var(--blue-soft)}
.petier__dur{font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;color:var(--on-navy-mute);margin-top:4px}
.petier__dur b{color:var(--on-navy)}
.pefood__note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:1.4px;color:var(--on-navy-faint)}
.pefood__note a{color:var(--on-navy-mute)}

.pedrinks{padding:64px 0 70px;background:var(--navy-deep)}
.peextras{padding:64px 0 74px;background:var(--navy)}
.peextras .section-cta{margin-top:34px;text-align:center}

/* --- gallery --- */
.pegal{padding:64px 0 74px;background:var(--navy-deep)}
.pegal h2{font-family:var(--display);font-size:clamp(36px,5.4vw,60px);line-height:.94;
  text-transform:uppercase;color:var(--cream);margin-top:6px}
.pegal h2 span{color:var(--gold)}
.peshots{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;margin-top:30px}
.peshot{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--navy)}
.peshot img{display:block;width:100%;height:100%;object-fit:cover}
.peshot--feature{grid-row:span 2}
.peshot--feature img{aspect-ratio:4/5}
.peshot:not(.peshot--feature) img{aspect-ratio:16/10}
.peshot--feature figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 22px;
  background:linear-gradient(180deg,rgba(10,26,58,0) 0%,rgba(10,26,58,.92) 68%)}
.peshot--feature h3{font-family:var(--display);font-size:26px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--cream)}
.peshot--feature p{font-size:14.5px;line-height:1.5;color:var(--on-navy);margin-top:5px}
.peshot__tag{position:absolute;top:14px;left:14px;font-family:var(--display);font-size:12px;
  letter-spacing:1px;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.peshot__tag--gold{background:var(--gold);color:var(--navy)}
.peshot__tag--blue{background:var(--blue);color:#fff}
.pegal__note{margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:1.4px;color:var(--on-navy-faint)}

@media (max-width:1000px){
  .pehero__grid{grid-template-columns:1fr;gap:26px}
  .pecards{grid-template-columns:1fr 1fr}
  .petiers{grid-template-columns:1fr}
  .peshots{grid-template-columns:1fr 1fr}
  .peshot--feature{grid-row:auto;grid-column:1 / -1}
  .peshot--feature img{aspect-ratio:16/9}
}
@media (max-width:700px){
  .pestats{grid-template-columns:1fr 1fr}
  .pecards{grid-template-columns:1fr}
  .peshots{grid-template-columns:1fr}
  .peplan,.pefood,.pedrinks,.peextras,.pegal{padding:48px 0 52px}
  .peband{padding:22px 20px}
  .pehero__lead{font-size:15.5px}
}

/* --- pickleball image strip --- */
/* Full bleed and flush: the two photos meet in the middle and run to both
   edges, so the band reads as one image rather than two cards. */
.pstrip{display:grid;grid-template-columns:1fr 1fr;background:var(--navy-deep)}
.pstrip__img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
@media (max-width:700px){
  .pstrip{grid-template-columns:1fr}
  .pstrip__img{aspect-ratio:16/10}
}

/* --- picture menu (drinks) --- */
/* Two across on a desktop, one on a phone. The photo is square so six drinks
   shot at different crops still line up. */
.menu-cards{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;margin-top:18px}
.menu-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start}
.menu-card__img{width:150px;height:150px;object-fit:cover;border-radius:12px;
  background:var(--navy-deep)}
.menu-card__name{font-family:var(--heavy);font-size:17px;letter-spacing:.3px;color:var(--navy)}
.menu-card__desc{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-top:6px}
.menu-card__price{font-family:var(--display);font-size:18px;color:var(--blue);margin-top:8px}
@media (max-width:700px){
  .menu-cards{grid-template-columns:1fr;gap:18px}
  .menu-card{grid-template-columns:104px minmax(0,1fr);gap:16px}
  .menu-card__img{width:104px;height:104px}
}